CLEANEST Home Assistant Dashboard of 2022 | How To

[Music] how's it going everyone today we're going to be going through how to create an amazing looking dashboard utilizing the mushroom card mushroom card is a custom card built by the developer paul bozen paul's mission with this card was to create something to make amazing dashboards without ever using yaml complete with ui editors all the options inside there amazing usability and minimalistic design this card is all packaged together card is available through the home assistant community store and if you don't have that set up i'm going to link down in the description great video on how to actually set that all up and get you started and at the end of the video i'm gonna do a call to action for you to help out the developer for making this amazing card and i also give back to the developer now that we know a little bit about the mushroom card let's go ahead and go over the structure of my dashboard so here in the mobile view of my dashboard you'll see up at the top the chip card so this is a card where you can kind of see at a glance a lot of good information for me i'm using it to showcase the weather you know what is it sunny is it cloudy what's the current temperature like i'm also showing it with my front door lock where's my front door lock status is it locked is it unlocked that i forget and i can easily tap on that to lock or unlock it down below the chip cards i have my room cards here i am showcasing all the rooms in my house that i have smart devices in and if the lights are on or off in the room below then i have an easy view of my thermostats whether or not i'm cooling or heating the house i can easily click on these and get to the controls where the thermostat turn it up turn it down turn it to heat or turn it to cool below there i have my cameras which right now are seeming to go in and out not sure about that but here i have an easy way to quickly see what's going on around my house let's say that i want to go into my room and i you know i have some other devices in my office that i want to control well i've created a second dashboard here that's actually dedicated to my office here i have the same chips up at the top except i've added a back button uh really easy to utilize to go back to that main dashboard i also have all my lights here using a light card so i can turn those on and off i also have the ability to see some other secondary lights like my mac look like my camera light down at the bottom i'm really able to see what's going on in my room what's the state of my room uh what's the current temperature where's the humidity that's just kind of a quick glimpse here of uh the two main dashboards that we're going to be going through today but let's go ahead and breed a new dashboard as a clean slate to get started we're going to go to configuration down at the bottom left and click on dashboards this will give us a view of all of our dashboards that we're currently using and from here i can create a new one let's go ahead and click on add dashboard here and we'll click on we'll name this youtube subscribe which you guys should do um this is going to be a great video and if you want to see more make sure you subscribe and we will make sure it's shown in the sidebar click create and you'll notice it pop up over here on the left now you'll see that the first state of any dashboard is the auto generated dashboard and we're going to be taking this and turning again into the dashboard you just saw let's go ahead and go up to the top right open up the dashboard menu and we'll click on edit dashboard this will kind of give us a brief overview of what we're doing but really what we're doing is taking control of this dashboard and creating our own custom dashboard let's go ahead and do that and we'll start off with an empty space we'll click take control now we're in the editor we can start adding our different cards we can start adding in and creating our dashboard the first card that we're going to be putting together is the chip card so let's go ahead and click on add card up at the top i'm going to search for chip and click on the mushroom chips card and we're going to start with the weather chip you'll see all the different types here and i've listed out for you but we're only going to focus on if you can definitely experiment on your own what each one of these does i'm going to go with the weather card here but i want to go ahead and edit that clicking on the pencil there i'm going to showcase the conditions going to tell me what the actual condition is but i also want to see the current temperature outside i want this to be glanceable i want to be able to see this and know exactly what the weather is and if i need to put on a jacket or not in texas i normally don't now that we have that one that i like to add is an entity i like showcasing my log for the main dashboard that's really all we need the next section of this dashboard is actually these different room cars let's go back to our youtube subscribe and edit again click on add card and we're going to start by creating a grid card this grid card allows you to put two cards side by side i am not currently going to render as squares because i like the look of it you know the least amount of vertical space possible the next thing we're going to do is start adding cards to this grid first thing we're going to do is search in mushroom and we're going to choose the entity card first thing we're going to do is put in the lights i'm going to search for my lights we can name these whatever we need to i can even change the icon here and for this one i want to kind of show this as a it's a it's a office so it's got a map in there it's going to know it's got a desktop i can change the color to her favorite color which is teal main option here that we're going to be talking about is the different layouts the default layout is going to be what you see here but the vertical layout is what we're going to be utilizing vertical layout is the ability to kind of just stack everything on top of each other and showcase that that way now this is a much cleaner look in my opinion especially for these cards that are for the rooms and for the thermostat from the you know in here in a second but i like this view for now so we've added one relatively easy let's go ahead and quickly add the second one here now i've added the bedroom part on the right hand side there i'm going to go ahead and click save i can see my dashboard as it's going to show up on my phone we have that that looks great we're already on our way to a great looking mobile dashboard let's go ahead and go to that next section which is our thermostats and we start that section off with a title card now this card is also a mushroom card so let's go to mushroom and search that in our cards and let's look at the title card i want to actually utilize the bottom one called the subtitle now this one is a bit gray more of that secondary text and we're going to delete out title section go ahead and add another grid card very similar to the top one it's going to be two columns not rendered as squares and let's add another entity card here we're going to use the mushroom entity card instead of showing my person we're going to show the thermostat we'll use the downstairs thermostat here i'm going to name this downstairs and i'm going to leave the icon the same i can change the color if i want to let's go pink why not i'm going to use that vertical layout again let's do that same thing for the upstairs and now we have our thermostat cards we'll save that and now we're on our way we already have three sections done let's refresh our mobile dashboard and it's just really coming along the next section we're going to go over is the camera section now this is an important section because you always want to be able to see your cameras on your dashboard let's go ahead and add our grid card to set them side by side just as we've been doing and let's search for the picture entity card now this is not a mushroom card this is a native home assistant card we are going to utilize one of my cameras here i'm gonna go with the camera one for now and you'll see that i'm going to delete out image path here but you'll see up here on the bottom we have this black bar that's kind of hiding part of our our image and for me i know which camera this is i don't really need to know if it's idle i don't really need to know what the name of the camera is so i'm actually going to turn off show state and show name and you'll see here's a nicer you know cleaner picture i'm going to set the aspect ratio to be 16 by 9 just to make sure that's good and and rectangular um and at my next camera all right now that we've added that we can go ahead and click save and now i have my camera side by side now you you can go ahead and finish out your dashboard here for your main dashboard under different covers add your different entities but you're on your way to a very nice dashboard go ahead and refresh our mobile you'll see that very simply come up let's go ahead and go into the details of how to create that second dashboard that's kind of the main dashboard i use all the time going to my office see what's going on but first let's go ahead and click configuration down at the bottom left and click on dashboards just as we did before let's go ahead and add a new dashboard we called the last one youtube subscribe let's call this one youtube dash office it's going to be my office dashboard and for this let's add that same desktop icon and i do not want to show this one in the sidebar so let's go ahead and uncheck that and click create now we've done that let's click the open button over here and edit the dashboard just as we did before and start the empty dashboard let's go ahead and add the back button so that is part of the chips card again from mushroom let's go ahead and delete the default one here and click the back chip now there's no configuration to this one it is just a little back button the next section we're going to do is the light so this is going to be my wife's office and let's go ahead and create a light card now the light card from mushroom is amazing and let's go ahead and change this to matt those lights and you'll see i can change this to her main lights because we know it's our office already to make it a little bit nicer we're going to go ahead and add the brightness control so here i can change the brightness using the slider here and change the brightness on my lights you have different options here if you have temperature control or color control on your lights i do not but you can always add that now we have our lights we have the back button up at the top and you know the next section is really our sensors i'm going to use the native home assistant sensor card gives you a nice little line graph that we're going to use for the temperature of the room i can change the name of this i can change the icon if i wanted to but really i now have my sensor card set up i can see the temperature i can put that into a grid card set that side by side next to the humidity do that you can add the title above it just as we've done before but let's go ahead and add one last card here and this this time we're gonna add a cover card i'm gonna stick with my blinds in my office even this is my wife's office just to kind of showcase this card the position controls so this is a slider to allow you to say oh i wanted to be at 50 closed or 75 the one that i like the most is the open closing pod um once i click on that that's going to start opening them and it'll actually show me the percentage of openness they are a really great card for blinds i love this so much and now let's go back to our youtube subscribe dashboard because now how do we link this together let's go ahead and edit the dashboard one more time let's click madison's office card here and edit it now the main thing that we're going to be doing here is the tap action click on the tap action click on navigate and what we're going to do is take the url we had from the other dashboard which is just going to be the name of the dashboard with hyphens unless you change it we're going to call this we're going to put in youtube dash office and click save and once i click this it's going to take me into my dashboard if we go back to the mobile view of this here and refresh i can see madison's office here if i click on that really quickly brings me right into my office dashboard where i can control everything see my my lights my main information you can put this into a neat dashboard exactly the way you want it to look like of course i'm only giving you the components on how to build this dashboard into what you want if you want to take inspiration from my dashboard then definitely go for it this is giving you the tools and the knowledge on how to do that and using that back button it'll go directly back to my main dashboard super easy super quick do this for every single room and you will love it it's amazing i use it every single day and now my dashboard is completely partner approved and loves it with that that is how you build an amazing dashboard with a mushroom card i definitely recommend you go do that but let's go ahead and sign off with one last thing and we're going to check out paul on buy me a coffee and paul has done an amazing job and i think that we should always support the people in the community if they're doing something that we're using you're using a card it took time and effort from the developer in order to build this card they're putting it out there for free so you don't have to do this i'm going to thank paul for building this card i'm going to put in some random number here and really support paul in what we're doing today i'll go ahead i'm blurring this out but i'll show you the confirmation here that all has now been gifted 35 chocolates hopefully he does not go into a sugar coma from this but thank you for the amazing card paul he only has eight supporters right now and i think he should have a ton more so what i'm putting out there is if we get paul to 25 supporters i'm going to support paul with another 15 chocolates so let's get paul to 25 supporters thanks for watching and go and make amazing dashboards and make sure to tag me on twitter backbeardha on these dashboards i want to see them bye

Channel: Zack Barett

Views: 54,815

Keywords: Home Assistant, Hassio, Lovelace, Home Automation, Smart Home, Home Assistant How To, Frontend, Developer, Zack Barett, NKDZCK, Dashboards, Mushroom, Custom Cards, Hacs, Clean Dashboard, Best Dashboard

Id: E2yJG9cpOA0

Length: 15min 25sec (925 seconds)

Published: Sat Apr 02 2022

Reddit Comments

[u/icoup]

Is anyone using this alongside UI Lovelace Minimalist? I really like the flexibility of that one but this one looks way easier to setup and manager.

[u/SignedJannis]

at 0.03s, in the opening render, card shows "Bedroom, Lights Off, 69 degrees".

Ha :)

But also, seriously, I do like the nice simple "Room Light" cards that also show the temperature of the room like that (watch the start of the video to see them).

But it doesn't seem to be described anywhere in the video how to actually make those cards...

Does anyone know if its possible to actually do that?

[u/TimTheToolmanTaylor6]

This is incredible! Great work! I have migrated my entire dashboard over to this. I’m really excited to see the media card.

[u/BackHerniation]

Written guide Mushroom Cards Tutorial

[u/flac_rules]

It looks nice but I find the mushroom-cards to be pretty wasteful when it comes to space, especially when you have many lights.