Build this desktop tablet command center dashboard using grid, custom and bignumber cards.

this video is being sponsored by datacamp i have this galaxy tab dashboard sitting on my desk and i use this on a daily basis while i'm working from my home office to keep tabs on what's going on around my house i'm going to show you step by step on how i build this dashboard it's going to be a multi-part series because there's a lot of stuff going on here we'll go through some various different types of cards and i'll go through a little bit of detail on how each of those are used so make sure you subscribe so you know when i make those follow-up videos to this one on this dashboard so let's get started in building the dashboard [Music] this is the dashboard that i use on a daily basis as i mentioned and what we have here are things that are most important for me to be able to see kind of as a command center or whatever while i'm sitting at my desk things like doors that are left open lights that are on if i want to know the outside temperature and things like that so let's just go through each one of these things real quick and then we'll talk about how we build those so this is the status of the alarm panel these two are my gate sensors these are just regular door sensors this is a toggle mode that i can set and i can set this and it's really not necessary on this dashboard but i left it there just in case i wanted to see if it was ever toggled but when i go on vacation i'll set this mode and it causes certain automations to run and others to not run for example it doesn't disarm the alarm system automatically and that kind of thing this is my work mode button when i press that button then it uh sets all my lights and everything so that i'm ready to go to work down here we have a series of switches for lighting so holiday lighting trees all that kind of stuff a couple of different switches and statuses for garage power and my attic air handler a bunch more light switches down here we've got outside temperature humidity settings and this is my cough bulb in this in the office more weather related information winds rains my temperature sensors for my refrigerator and freezer temperature sensors around the house these are two automation buttons these are pbx buttons that tell me the status of my pbx or phone system this is a home feed card sensors for motion in various places around the house sensors for motion on cameras the status of my samba backup we also have cameras up here and these cameras uh trigger a snapshot or show a show a snapshot whenever there's activity detected on the cameras they show the status of my roku devices these show the status of my nest devices we've got my flume water sensors here uh washing machine status which is an appliance uh kind of an appliance plug sensor and of course my radio stuff up here i've got radio power supply radio radio power supply voltage radio power supply temperature radio heat sink temperature and then the radio whether it's not whether or not it's transmitting before we get into building the dashboard let me talk a moment about data camp as you know home assistant takes data and stores it in your database and pulls it from all these sensors that are going on around your environment well what if you could do something with that data data camp has over 350 courses that allow you to visualize it manipulate and make data-driven decisions based on data that you have coming in in fact you can even start a new career using data camps courses to become data certified and data fluent you don't have to be an expert to use these courses data camp has courses all the way from new newbies to seasoned pros even seasoned pros can learn something new from datacamps courses so what if you don't know where to start well that's good news because datacamp has a self-assessment that allows you to know where you're at and they can tailor your learning from that self-assessment it's time to invest in yourself and unlock new career opportunities or even take new skills into your home assistant or your data driven environment use the link below in the description and you'll have access to the first chapter of every one of data camps courses for free so go check it out let's get into building the dashboard now and the first step is to click on edit dashboard and these are all views up here by the way this is the dashboard a view in a dashboard so your dashboards can contain multiple views we're just going to add a new view here and this new view we're just going to call it a demo and we're going to put an icon on here and the cool thing about home assistant now is that they have had added a drop down that allows you to select from all of the list of available icons and i'm just going to pick a random one here just for the fun of it let's just do a ceiling light i don't know you can choose whatever you want through that entire list and i'm going to leave the view type as masonry we'll save it and of course now it has a blank slate for you to start with so clicking on add card is our first step now this is the part where you have to kind of think about your design a little bit ahead of time on the dashboard you saw that i had three columns well those three columns are built using grid cards they're actually nested grid cards so the first thing i want to do is i want to add the first grid card and this will be the grid card that contains the first column of information the first column of other cards it will only have one column and it's not going to be rendered as a square now in that first grid card i'm going to add another grid card because on that other dashboard you'll remember i have a series of buttons across the top and i'm going to put those buttons inside its own grid card so let's go with grid card again here and for the grid card now we're going to start adding buttons to that grid card and i know that that first grid card is going to be five different cards so i can go ahead and make this five columns but you can always change this later on when you start building stuff the first card i'm going to add is going to be a button card and you can see here that it selects or it shows you what a button card looks like and the entity and this is where it gets nice for using the ui you can just kind of select things the entity here is going to be my alarm control panel so i'll just start typing the name alarm control panel so here's my alarm control control panel and i'm going to give it a name and it's called dsc as you can see it'll start rendering these cards up here as you go along so you can see what's happening as you type it now you can choose an icon as well uh this one i'll leave as default because the default icon is the alarm icon i can show a name i can show a state and i typically don't show the state because i know by the color or view of the icon what it looks like and then i can choose an icon height if i want to okay so i'm going to add my second card and that second card is going to be added by just clicking a plus here and what that does is it puts it in the same row as everything else now the second card is a custom button card there isn't a ui for the custom button card so we're going to have to do some yaml editing here and what i'm going to do is i'm just going to copy the code from my original card and we'll talk about what the settings are for the card so you don't have to watch me type at all and i'm just going to paste it in here and i'm going to have to fix the indentation because i copied it from the other screen and i'm just going to select it all and if you hold ctrl and then the left bracket on your keyboard it will move the whole block of what you have over now you can see what we have we have uh this north gate icon or this north kate button here so we already know it's a custom button card it's a binary sensor that is a an on or off which in this case happens to be a door sensor put on a gate the name is north gate as you see here uh and then i gave it an icon of a gate and then the tap action when you tap on it you get more info because there's nothing to do on this kind of button it doesn't turn anything on or off show state is false so i don't need to know whether or not it's closed or open on or off i just will see that from the icon and then the card itself the opacity is 50 that means when it's inactive or off it's 50 opacity or opacity i think it's opacity height is 102 pixels and i had to adjust the pixels to fit on the screen sometimes you have to give it a height designation and other times you don't the icon color is white and it's a little gray because the opacity is 50 um the name it's 12 pixels and the color is white again here's the name 12 pixels the colors white and the state value whenever the state goes to a value of on i want the gate the icon to change the gate open i want the style to become red so it turns the background red the filter is a hundred percent so instead of being an opacity of fifty percent it makes it a hundred percent i probably could omit that as the default the height again is 102 pixels so if you change the height here you need to change the height here and then i wanted to blink for two seconds ease means slowly so it kind of does this like pulsing and then infinite so it'll do it forever while the gate is open it sets my icon color to white and my name color to white as well and what that does is when the gate is open this will turn red and kind of flash a little bit on and off on and off now the next button again is the same one it's the same kind of card so we'll do exactly the same thing we did it a minute ago we'll just add a new column and then we will paste in the data uh we need to find the button card here first we'll put in a button card and we'll paste in our information and probably have to do some uh space editing there we go i'll color all or select all that and slide it back there we go and now we have another one southgate same exact thing so we have those three cards so for the next card it's just a button card and it's my vacay status so i'm going to choose button card i'm going to choose the entity as vacay status and the name is going to be vacay the icon mdi tree and then name will be shown states not shown and then show the icon yes and we're not going to do anything else with this one it just kind of displays it here so here we are with our vacay status and we have one more because remember we have five columns set here so this one more column and this one's going to be again a button card we're going to give it a name we're going to leave the entity blank we're going to give it a name the name is going to be work mode the icon is going to be desk and then we're show name uh show state and show icon and this one's going to be a call service so we're going to call the service here and the service is going to be in automation automation turn on and then the actual name of the automation is going to be uh what we can do is pick an entity here actually and it's going to be um [Music] workday setup so let's go see if we can find workday set up here it's hard to see i know the name of it but it doesn't it kind of cuts it off when it displays the names of the automations but we know it's workday setup and that's all we're going to do for this button and we'll see up here that we have work mode so anytime you push that it's going to do the work call the work mode automation so now we have the first row of that dashboard so for the next column we're going to add a grid so we come up here we've got you remember we're nesting this stuff so we have uh this column or this grid card with one column this grid card only has one column right now it's this one right here a row not column but row and then we're going to add a second row and it's going to put it below this row that we have right here and for this one we're going to add another grid card and this is going to have six columns in it so you can see right here that we have a blank we don't want squares so now it shrinks it a little bit it'll it'll make it bigger once we put something in there and for this one we're going to do a bunch of custom button cards i'm going to do a couple of these but i'm not going to show them all to you because they're very similar that way you're not sitting here watching me type all this stuff in here so again we're going to just put in here what i did before and we will fix the spacing and i will show you what i uh what these things do custom button cards once you get used to how they work are pretty pretty uh easy to use again it's a custom button card you can see it's the the lock card is right here the entity is a lock front door lock so it's my my front door lock status uh the name is front so i abbreviated the name just because it i wanted to fit on the card the icons a lock the tap action is to toggle so it will lock and unlock that door show state is false styles uh card background color is green so it stays green all the time unless it's unlocked and then it turns red opacity is 70 percent so it doesn't it doesn't stand out it makes it it makes a difference between green and redstone a little bit more when you change the opacity font size 12px color is white state is unlocked or when the state becomes unlocked it has a locked open icon background color of red opacity opacity of 100 so it just really stands out in your face and then it sets the icon and the name color to be white and that's how all of those on that row are set up so let me just go ahead and i'm going to add the rest of these in here and i'll show you uh at the end what it looks like okay so i've added all the rest of those cards and again they all look very similar the color might be a little bit different on each one depending on what it does but they're all custom button cards and they all change color based on the state so the locks when they are unlocked will turn red when the garage doors open it turns red if the front or back door or fridge door are open then all of those will turn red it all has the same logic it's all done the same way let's go through here we have one row here we have two rows here these are the two rows this row has five columns one two three four five this row has six columns one two three four five six and so let's see what's next in our list of stuff here the next one is actually going to have eight columns so we'll do one more row and again this is a grid card and this grid card is going to have eight columns non-squared and for the first uh for these these are going to be buttons and these are all of the light switches that are in the house and i'll do a couple again and then fill the rest in for you so you don't have to watch me type the whole thing so this is just a button card simple to use the first one is actually going to be the holiday lights so we'll find switch holiday lights js so the front one so i call this one again hldy to make it short the icon is going to be um so i'm going to call i'm going to find a light bulb and so here's our holiday light it's currently off the tap action is toggle and i'm not going to set the hide or anything on these let me do one more and then i will do the rest for you and show you what it looks like at the end so again we're adding on this row we're adding another button card and this button card uh entity is actually going to be the trees now this is a group and i have created a group to turn on multiple trees uh multiple tree lights so i don't have to turn them on individually and they'll show whether or not any one of the trees in the group are on the light the the icon will change this is again we'll call this trees and this is actually a tree this time i don't do the icon height i don't do the theme all that stays the same again this is toggle so that's the tree there and you can see that it's on right now so i see that the light is on for the trees and if i go over here i want to change this actually to a different string lights there's a thing called string lights since those are outside lights so now you see it's here and i can turn those on by clicking it now they turn on and i can turn them back off by clicking it again and that's basically how the rest of these work on this particular row so let me fill them in for you and i'll come back in just a moment okay so you can see now that we've added the rest of these there's a couple that are custom button cards those custom button cards are for the attic and the garage power and i want those to do specific things based on their status and we've already looked at the custom button cards above here it's the same concept i just want it to be uh it's blue now if there's a if it's normal it's green if it's normal and then it changes colors or whatnot uh you can also see the garage got open while we were doing this so someone has opened the garage door which is how this looks whenever it changes state okay so the next thing up is going to be our a whole nother set of buttons and i'm going to throw those in there real quick same concept buttons we'll just add a row here and this row is going to be starting with a grid card this grid card is going to have eight again and we'll make it non-square and we'll start with a button card and do the whole thing so i'll come back in just a minute we'll have this whole other row filled out with the button cards okay so we've put in again this row of cards and these are all my light switches here a bunch of them are currently on and looking at the visual editor once again we have eight columns and each one of these cards has its own entity id and settings and that's all set up now the next thing is going to be a different type of card and this is called the big number card now these custom button cards and big number cards they have to be added into home assistant through hacs if you're not using hacs you probably should at some point because there's a lot of extra stuff in there that you can add that makes your home experience uh home assistant experience better so make sure you're adding that you add the big number card and you add the custom button card if you need to know how to do that look at my haccs video to start and then if you have any questions about that just let me know in the comments okay so let's go ahead with the big number card and we're going to add yet another row and that's on this level here puts a row down below again we're going to do a grid card so start with a grid card here and for this one i believe it's four rows uh or four columns and then we're going to start with a non-square as always and the first one we're going to do is big number and it does have a big number card but again we're going to have to do the yaml part of this and we're going to define all the parts so i'm going to pull in the configuration from the other side and we will talk about what it is now a lot of these cards are very flexible and so i don't use all of the options for the card so if you want to do something different or extra with the card be sure and look up the card configuration information on github or wherever it's at and do what you would like with it so let me just copy this now and we'll put it in this spot right here right there and we'll fix the spacing issues that we as we have done in the past you can see here that we have the temperature displayed and this is a big number card so let's go through it the entity is my outdoor temperature that i'm getting from my weather station using my ecowit integration check out that video if you would like to know more about that the title is outside which is displayed here from the bottom is means it's going to fill from the bottom if you feel from the left it's going to start filling this from the left i just like the look of it feeling from the bottom even better so scale is 30 pixels if you change the scale it's going to change the size of the card i played around with it and figured out this is probably the best scale for me in my application high unit is true if you were to set that false it would put in a this and it makes the card look ugly to me i know what units of measurement i'm using for this card so i don't need that rounding out you can round the number of digits you would like i leave it at zero my minimum and maximum are the temperatures that i think will be the minimum and the maximum for the card and that determines where it puts this fill at if my my minimum were uh 32 degrees it means that i'm farther closer to the bottom than i that i am at zero so you can set those to what you want i think 115 if it gets that hot we're gonna start melting anyway so who cares and these are severity levels i've defined four different severity levels here i've got a value of 50 and up 250 it's blue which means it's kind of cool from 51 to up to 82 it's green which is where we're at now from 82 to 90 it's yellow and from 90 to 115 it's red and then the text color under the red is white and it's all white the whole time but you can specify a text color for each one of these different uh background colors sometimes it's hard to read one color of text on top of another so that gives you the option to change it again there's so many more different types of configurations you can use for this card so i won't go into all of them okay so there's that one i have three of these let me go ahead and put those in for you and then i'll come back in just a moment okay so i went ahead and added the rest of them and i i went ahead and also the button card because we don't need to go over that again you've seen that enough times uh one thing to note here too is that you can't get a uh there's no visual editor for big number card so you can't do anything with outside or outside the yaml code for this uh you can do this for the uh the big number or the button card but these others will not show up as visual editors because there's nothing there to do that it automatically defaults back to the to the code editor when you do that but you can see here i've got three of my cards here and the only difference is the color one of the things i did with the color on the third card here this humidity card is rather than using the the uh the label css designator i went ahead and just set the rgb values because i want this to get darker blue the more humid it is because you know there's more water in the air so i want darker blue as it gets less humid then it becomes lighter and it does that in steps like i did before like i showed you before where it's up to this point 40 it's rg's rgb 0 0 which is black and then it progresses upward from there and then again of course i did the guest lamp all right so that's that then we have another column uh or another row so let's go ahead up here and we will add an additional row so there's a lot of stuff that goes on it seems like a lot to do here but it's a lot of duplication as you start building this stuff out so let me add another grid card once you get the hang of this it just kind of goes it kind of flows now this next card is kind of interesting so i'll show it to you here this is a custom button card so we'll go ahead and put that in i'm going to paste the code as i always do and then i will walk through what this card does because it this one's kind of interesting it actually has some logic in it that will do some different things based on the wind speed so let me paste this in fix all of the business here spacing so now the spacing is correct let's go through it you can see right now it's got the icon the name and then it's got the state the state is important in this one because you want to know how fast this value or how fast the wind is going so we have the name max when entity is the entity we get the win information from show state is true this time which is the 805 now the styles um are going to vary depending on the wind speed so we have the card of 100 100 pixels height opacity opacity is 70 12 pixels for the font size white color now this is where it gets interesting for these types of cards you can do a lot with the custom button card it is an amazing card in this case i want to change the value of the card if the value sent from the state is greater than or equal to 20 and that's what this operator does so the value is 20 the operator is greater than or equal to and then the styles are red for the background color uh that should be 100 so 100 opacity 100 p pixels because that's what we set in the original and then the icon the name and the state are all going to be white so it will p appear in your cutting your face on that color now if the value is 12 greater than or equal to 12 it will then set it to yellow with an opacity of 70 percent and it changes the colors to black for the icon name and the state and that way i know if it's yellow it's you know it's getting to be windy and if it's red it's really windy and you've got to put it in this upside down order or it's not going to work that's why i have 21st or the higher value first and then the lower values second and then we have a couple of uh just custom button cards that change value based on whether or not it's rained or whether it's currently running and i'll paste those in and then come back and talk about those in just a moment okay i've pasted all these in now and we've got the rain today rain rate and then i just went ahead and put these temperatures in here all of them are custom button cards so you have again you have a value and an operator of greater than if it's greater than zero then it starts to register for that one again the same thing here if it's greater than zero it starts to register and changes the color for those custom button cards uh for the fridge card if the temperature is greater than 45 it turns it yellow to let me know there's a problem with the fridge temporary temperature at a glance and then the freezer temperature does the same thing greater than 10 because it usually is negative values as you can see here so that one's very quick uh again all the code is going to be in my github for this particular dashboard you can look over it and pull it apart and do stuff with it as you need to all right there's two more columns i'm going to go ahead and post the paste those in here and then we'll talk about how they're set up because this video is getting really long okay so i've added the final two rows here and one of them is going to be six columns and the row number eight is going to be five columns very similar to the other ones we have custom button cards for this row because i set the temperatures uh the cards to change color as the temperature climbs so i want to know each one of these 80 95 90 etc and it goes through and it it will alert me or give me a visual indication when the temperature gets kind of warm and then finally in this row number eight is a couple of different cards here for motion detection this one is a turn on or off so i can turn these on this basically enables automation so now these two automations are on for my cameras if somebody comes into a zone and my frigate cameras or my frigate nvr zones it will send out an alert to my uh phone and tell me there's someone within the close end zone and i can toggle these on or off and of course these are all of my pbx extensions and it gives me the status of whether or not the pbx line is in use or not and that's nice to have on an office type dashboard all right so this particular recording got really long which i figured it would there's a lot of stuff going on in here and all the stuff that goes on is useful for me when i'm sitting here at my desk if you have any questions about this let me know i'm going to cover the other two columns in separate videos because this gets to be super long again comments down below and then discord i'm available there for questions if you have those if we need to and uh hope this was helpful helpful to you dashboards are amazing and home assistant and just building something like this allows you to customize how you want this to look make sure you subscribe so you know when i do version two or session two and session two of this dashboard build and we'll see on the next one [Music] you

Channel: mostlychris

Views: 2,132

Keywords: Smart Home, Home Assistant, dashboard, command center, custom button card, bignumber card, button card, home automation, smart home, home assistant dashboard, smart home automation, home assistant wall panel, smart home dashboard

Id: myXoQYcEcCI

Length: 28min 16sec (1696 seconds)

Published: Sun Dec 12 2021