Home Assistant Dashboards for Beginners! (+ my favorite custom cards)

what's up smart homers one of home assistant's best features is the ability to display smart home controls and information in a beautiful way using dashboards home assistant's ability to do this is unparalleled by smartthings hubitat or any other smart home platform that i've used in a previous video i covered some of the basic components of home assistant and in this video i'm going to cover one of them specifically and that's dashboards i'm going to show you guys some of my dashboards as well as some custom cards that i think are great so sit back grab a coffee and enjoy the video like i mentioned in my previous video the first thing that you see when you set up home assistant for the first time is your dashboard this dashboard is automatically configured and controlled by home assistant so any new devices or entities that you add to home assistant are automatically represented on this dashboard dashboards are composed of views and cards so a dashboard can have many views and each view can have many cards on it the cards are what actually contain the information or the controls that you want to display if you want to configure a dashboard you're first going to have to take control of it and take that control away from home assistant this means that home assistant's no longer going to be adding devices to it as you add devices to home assistant so let's say you add a new temperature sensor you may have to go hunting for that rather than automatically being displayed on the dashboard it's kind of similar to when you add a new app on your iphone or android whether or not that app automatically gets displayed on your home screen or not the advantage to taking control is of course that you don't have a super messy dashboard which it can really get that way if you have a lot of devices and entities instead you can make your dashboard look exactly the way you want so rather than taking control of the existing dashboard let's go ahead and create a new dashboard when you create a new dashboard you're required to give it a title icon and url i like to give a title to my dashboard based on how they're used for example one dashboard could be called pc for viewing on the pc one could be called wall tablet for viewing on my wall control panel one called mobile for viewing on my phone etc the icon should represent what the dashboard is for so i would choose a pc icon tablet icon etc the icon will show up in home assistant's sidebar so pick something that's easily identifiable if you collapse the sidebar for this example let's just call ours tablet and then use the tablet icon you can see that the url is automatically populated so you can just leave that for now that url can actually be used for navigation purposes later on you can also choose if the dashboard should only be viewable by admin users but let's leave that off for now and then leave the show and sidebar option checked on once you click create the dashboard will appear in the list and you can click open when you open the dashboard you can see that the dashboard has one view and it's full of cards it's still managed by home assistant you need to take control of this dashboard in the top right click the three dot menu and then click edit dashboard it tells you that the dashboard is being maintained by home assistant but you can take control of it if you'd like we're going to start with a fresh dashboard so select that option and then click take control now we have a blank view called home in our dashboard from here you can create more views or add cards to the current view first let's quickly talk about views when you create a view there are a few different configuration options you have a title icon and url like you do when you're creating a dashboard but you also have a theme option this means that if you have any custom themes installed or you've created your own custom themes you can actually specify them on a view-by-view basis so only that view and a dashboard will have that theme themes aren't something i'm planning to get into in this video but if you're super interested in themes i could potentially cover in a future video if you choose an icon hoses is going to display that icon instead of the view title at the top of your dashboard you'll also need to choose the view type masonry sidebar or panel these types of views actually affect how home assistant is going to display your cards and how your cards are going to be laid out in your view masonry is default because the cards are laid out sort of in a brick pattern and they're laid out intelligently so they're kind of easy to look at sidebar creates a vertical column of cards justified against that left sidebar panel creates a view that only allows you to put one card on it and the card takes up the entire dashboard width let's give this view a name icon and we'll leave the view type set to masonry since that's the most useful of all the view types in my opinion click save when you're finished alright so now let's take a look at cards as i already mentioned before cards are tiles that display information and controls and home assistant has a bunch of different default cards that are great to start out with if you click add card a window appears with a bunch of different card options if you have entities that could be used with those cards an example of what it would look like is actually shown for each option there's an alarm panel card which can be used to help you control a security alarm system a button card for obvious uses a calendar card entity and entities cards for displaying the states of various entities a gauge card a glance card a sensor card and a bunch more i'm not going to show you every single card and how they work because i actually don't use about half of them but i will show you how cards work generally for our example let's choose the entity card since we should have entities already in home assistant as soon as we've set it up clicking it brings up the configuration page and here you can choose various options for your card i'm going to choose which entities i want displayed and i'll also give a title once finished you can click save and you'll see that the card is placed centered on the view let's add another card to see what happens next this time i'll create a button card to control my desk light strip you can see that the entity is already selected but with a button card you have different configuration options with a button you can even choose what happens when you press or long press it which is pretty cool i'm going to leave it as default and press save and now you can see that it added a second card and moved the first one over you can rearrange the cards by pressing the up and down arrows at the bottom of the card when you're in edit mode since you're still in edit mode you can actually click edit at the bottom of the card if you want to make more changes to its configuration when finished adding cards you click the done button at the top of the view now i'm just going to add a bunch of cards so you can get an idea of how home assistant arranges these cards in the makes and review type as you can see home assistant organizes the view in a way that's aesthetically appealing stacking them like bricks in masonry style but it's not always the way you want it you might run into a situation like i did when i first started home assistant where you have two cards that you want to appear on top of one another or next to each other but home assistant isn't arranging them that way this is a great application for the stack cards there are horizontal and vertical stack cards which take two cards and force them to be displayed either horizontally or vertically and treat them as one card in the view you can add as many cards to a stack as you'd like and it will keep them all in either a row or a column before we move on from cards i do want to mention something called badges badges and home assistant are little indicators that display small bits of information that sit above all the cards in your dashboard you can use these for showing the status of individual entities over telling you things like how many lights are on in the house i honestly think the badges are pretty ugly and i don't use them at all in any of my dashboards so i'm not going to cover them any further but if you really want let me know and maybe i can do a short little video on them now that we've gone over the basics of building a dashboard i want to take you to the next level of dashboard customization a prerequisite for this next level dashboarding is that you have the home assistant community store installed on your home assistant instance if you don't find a tutorial on youtube and follow it it's actually super simple to set up the community store is a great place to find custom cards but also mods that control how your dashboard is displayed like i mentioned in my previous video if you're using home assistant there's gonna be a time where you're gonna run into the yaml programming language dashboards views and cards can actually be modified using the ammo code rather than the user interface the reason why i'm telling you this now is because most custom cards that you find in the home system community store cannot be configured via the user interface and have to be configured using yaml code now most of these custom cards have a significant amount of documentation so they often have examples you can just copy and paste and then change to suit your needs so it's not like you have to know the ammo super well but it would be handy before we get into custom cards let's quickly take a look at a built-in card and home assistant and look at the yaml code that's behind it let's look at the entities cards that we configured earlier with the card configuration window open click show code editor to view the yaml code you'll see that the card type is given as well as other information about the card if you wanted to edit the card via yaml you could add an entity that you wanted displayed under the entities key you can see that when i start typing home assistant starts suggesting entities and when i choose one it shows up in the card preview to the right all of the configuration that you can do in the user interface you could actually do in the code and sometimes it's actually easier to do it in the code than it is in the user interface what i'm trying to show is that all cards views and dashboards are made up of vml code and while there is a user interface overlaid on top of that the user interface can only go so far and then you're gonna need to edit the aml code to really tweak and customize that being said the user interface has come a long way in the few years that i've been using home assistant and they're making advances every update anyway let me go over a couple of custom components from hacks that can make customizing your dashboard so much better the first one is a custom component called card mod this mod allows you to apply css styling to cards which gives you a ton of options that make default cards look just the way you want them to you can change the color of the card the quarter radius the height and width the font size the margins and tons more for example let's say you want to create a card but you want the card itself to be invisible and just the icons and data to be visible sitting directly on the views background you can use css styling to make the background of the card transparent and also remove the box shadow making it look as if the information exists directly on the view's background there's a ton more to this mod that i haven't even tried but it's safe to say that i use this card mod in probably at least half or more of all my cars on my dashboards the only thing you want to be careful of is that you don't start using this mod where you could be using a theme to make the changes to the cards the next one is a custom card called the custom button card this is one of the most powerful custom cards out there and it is a ton more than just a button if you skim through the documentation you can see all the different things you can change like label and icon placement icon colors and plenty more you can use templating to change the label of the icon you can change the icon color and actual icon itself based on state and tons more because it's so versatile and you can make it look exactly the way you want this is the card that i used for almost all of the buttons on my wall mounted control panel that i showed in a previous video by using the yaml configuration that i'm showing here i can actually set the color of the icon based on the state of the light entity that i'm controlling meaning it's one color of the lights on and another color at the lights off i can even do more than that and actually change the icon itself based on the state this card is also the basis of my person cards that i use on my kitchen wall tablet with the card mod installed as well to add the battery and location icons that you see in the corners of it this card is so much more that you can do with it as you can see but you can also see that the use of multiple cards together is what makes these custom cards so awesome another one of my favorite cards is the mini graph card while it seemed very similar to the built-in sensor card it's actually way more versatile and allows you to customize way more displaying a ton of different types of charts and graphs it allows you to set colors and color gradients line thicknesses x and y scales and tons more this is actually the card that i use to show my temperature histories and some of my temperature cards because it allows me to see exactly what the temperature was in the past 24 hours i also use it as something pretty to show the temperature history on my room cards on my mobile dashboard too with a custom color gradient i can see approximately how hot a certain room was based on the color of the line without the need for a y-axis alright the next one is the stack in card this is one of my favorite cards because it allows you to combine multiple cards into one card in either a horizontal or vertical stack while the built-in horizontal and vertical stack cards only allow you to append cards to each other leaving a space between them where you can see the views background this one combines the backgrounds of each card so there's a single background for the entire card truly merging them into one card i've used a stack and card many times to put a few different cards together to make my own special custom card an example is on my mobile dashboard where i've created a little room cards they use a mushroom entity card a chips card and a mini graph card all combined together with stack in cards even on my tablet dashboard you can see how i've taken a bunch of temperature graphs and stuck them all together into one card this really makes things neat and tidy and presents similar information on one card since it's combining multiple cards into one that single card can then be modified with css styling using the card mod to really put the finishing touches on it i use the stacking card in almost every single card on my dashboard alright the last one i want to show you and which seem to be most popular with you guys is the swipe card this custom card allows you to switch between cards that are taking up the same space on a view the benefit of this is obvious you can save real estate on a single view but still have quick access to certain controls you can actually choose between a few different transition styles for when you swipe which is pretty cool here on my wall panel dashboard i have a lighting card for the kitchen lights it's a stack in card composed of a bunch of custom button cards however if i swipe over it reveals another card with more lighting controls for the living room and if i swipe again it reveals controls for various window coverings throughout the house you wouldn't know those controls were there unless someone told you or you're messing around with it but it's super easy to access them without having to switch views or switch dashboards one thing i should note for this custom card is that the repository is archived on github meaning it's not going to get any future updates and it may not show up in your home assistant community store if it doesn't you need to add the repository manually in hacks anyway that's pretty much it for custom cards if you're new to home assistant i hope this video has given you a good idea of what home assistant is capable of when it comes to dashboards which i think are a key feature of this platform if you're more advanced i hope this has given you a good idea of some of the customization options and some of the custom cards out there that can take your dashboard beyond the basic cards if you have any questions that weren't answered in the video go ahead and leave them in the comments and i'll try to answer them there as well as in a future live stream also if there are any cards that you think are awesome that i didn't recommend in this video feel free to drop them in the comments and i'd love to take a look i'm sure some of you are going to mention the apex charts card which i've used in the past and it's pretty cool but it's also super complicated so i didn't want to cover in a video if you like to help out the channel monetarily you could join the channel become a member but if you want to just help out with the algorithm go ahead and hit the like button and subscribe and hit the bell if you want to be notified when new videos come out anyway thanks for watching see ya [Music] i

Channel: Make It Work

Views: 82,491

Keywords: smart home, tech, home assistant, automation, diy, review, control, device, sensor, dashboard, lovelace, card, view, entity, state, data, data is beautiful

Id: oo2HR6FyV6k

Length: 17min 15sec (1035 seconds)

Published: Fri Aug 26 2022