This Smart Home Dashboard Isn't Easy But It's Worth It...

a few weeks ago i did a tour of my smart home dashboard inside of home assistant and showed you sort of the layout and gave you some ideas and inspiration for your own dashboards too and then a couple of weeks after that we did a guide on how to actually create a similar looking dashboard that sort of gave you 90 of the looks but it was a lot easier and quicker to actually achieve the results with pretty much the exact same looks this week we're going to be doing the hard mode the long-awaited hard mode that a lot of you guys have been requesting so this is the way that i did my dashboard so if you follow along with this video you should be able to recreate my dashboard exactly as i did now this is not easy i'm going to tell you up front this is not easy it's all done in code so i am going to assume that you're a bit more of an advanced home assistant user and we are going to move through this a bit quicker than we did in the previous video so if you're looking for something a bit easier make sure to go back and check out the previous video but if you want to do something a bit harder and you're up for the challenge then follow along with this video as we go through it i'm going to also assume that you have some basic yaml knowledge also as we go through this we'll also be jumping around into a lot of different pages and sort of all over the place so i'll have all the links for everything you need down in the description so that you can follow along too a lot of this is actually copy and paste so once you get over some of the initial concepts is just copy and paste and sort of repetitive code but just so you are aware it is a bit more difficult finally i have submitted some of my custom cards from the last time that we looked at this i have submitted them into the minimalist project minimalist by the way is the project that we're using for this dashboard so i have submitted my cards into the project some of them have already been merged some of them are still waiting and i haven't got around to finishing some of them yet but i'll also add all of those links for all the custom cards that i use in this video down in the description so strap in strap on and get yourself a coffee thank you to anker for sponsoring this video anker is one of the world's number one mobile charging brands developing charging technology for 10 years with millions of products sold all over the world including long-lasting portable power stations and their new anker 521 portable power station is no different the anker 521 is a five port portable powerhouse with a solar generator an ac port two usb a ports a usbc port and a vehicle class outlet the 521 pumps out 256 watt hours of power and is extremely durable and long lasting due to its premium lithium iron phosphate batteries that offer six times longer lifespan with rapid recharging and can be recharged to 80 in just 1.5 hours the unique batteries can be used 3 000 times and still remain at 80 capacity allowing this portable beast to go the distance over the years to come with the 521 you can charge multiple devices simultaneously allowing up to 20 charges of your phone or four full laptop charges it also sports a drop proof unibody structure and industry standard electric components for enhanced durability the smart display shows you at a glance the remaining battery percentage which port or outlet is currently being used and the output power it also features a handy led strip for those low light conditions plus the power saving mode allows you to reduce energy waste the ankur 521 comes with a five-year guarantee and is perfect for a weekend away camping or a garden party you name it the anker 521 has the power you need check out the anker 521 portable power station with the link in the video description so there's a few windows you're probably going to want to have open as we go through this firstly you're going to want to have home assistant open obviously that's where we're going to be doing our dashboard on the left hand side i've got a narrow window that's going to be a preview for our mobile dashboard just so we can actually see what our dashboard looks like and then on the right hand side in the bigger window we have our home assistant instance an in-home assistant you're also going to need a visual studio code installed and you're also going to need hacks installed also then in another tab i would suggest having open the minimalist ui github as well as in a second tab have the minimalist documentation open too both of those things are going to help us with the code for our cards as well as custom cards so back in hacks the first thing you're going to want to do is go over into integrations and then add a new integration and search for minimalist download the minimalist integration now before you restart home assistant to add minimalist there's a few other dependencies that we need to add to you can have minimalist auto add these entities but i prefer to do them manually so first custom integration we need to find is the browser mod so make sure to have browser mode installed so install browser mod as well as auto entities button card lovelace card mod mini graph card mini media player my card slider light entity card and finally simple weather card so make sure to install all of those additional cards for minimalist to actually work once you've installed all those make sure to hit the reload button and then also go over and hit restart on your home assistant instance to load minimalist once restarted go over to configuration and then devices and services and then hit add integration and search for minimalist there's a couple of options that we do have here so i would suggest ticking the enable creation of dashboard button you can also give it a title so we can set this to minimalist set an icon if you want to and then what i'm going to do is suggest that you select the desktop theme as a starter so what this will actually do so the mobile theme will actually get rid of the top bar so you won't see that anymore the desktop one does have the top bar in it and the reason i'm suggesting using that initially is it makes it easier to refresh a page to see your changes if you have that enabled the mobile tap bar gets rid of the top bar but puts the navigation bar down at the bottom near where your thumbs are if you want to go for that route and then you can leave it on h a selected but i would suggest going for minimalist desktop initially and then changing it to mobile after for the final option make sure to leave include custom card resources unticked because we've already went and manually installed those resources and if you tick that it's going to sort of double up duplicate resources which you don't want so leave that unticked and then hit submit and then all we need to do now is to go into our configuration for home assistant and add our theme directory if you haven't already done so so down at the very bottom of your configuration just on a new line you're going to paste in these two lines which essentially adds the custom themes into home assistant and i'll leave the code for this down in the description if you haven't already done it the majority of people have already done this so that they can use third-party themes once you've done this again go and restart your home assistant for that to take effect then go over to your user profile in the bottom left-hand corner and this should now show you some themes that you can actually select so again i'm going to suggest selecting minimalist desktop initially and then once you've finished you can come back in and select minimalist mobile and that's going to get rid of that top bar for you so select minimalist desktop and then click on the icon for our new minimalist dashboard which should be showing up in the left hand corner if we installed all of the resources correctly you should see that when you load the page it's already built sort of a stock dashboard for you and this confirms all of our resources are added correctly and everything is working and showing up properly now let's get in and actually start coding our own dashboard before we start creating our own dashboard i do want to just explain the documentation page and the github page to you before we get started just so that makes sense as we're going through things so on the documentation page again link in the description you'll find a page that looks like this and this is basically the wikipedia or the the documentation for minimalist it explains how to install it which we've already done but also if you come over to the usage page this will actually give you a list of all of the cards that are available in minimalist as well as how to use them and all of the variables and attributes that you can use with those cards it also shows you the custom cards are available in here too so over on the left hand side you'll see that we have cards and then we can go through and sort of select all of the available cards in minimalist and it's going to show you sort of a picture of what they look like as well as the documentation and all of the variables as well as some code example for how to use those cards which is really handy and this is what we're going to basically copy and paste into our dashboard sort of start building it that way so these are all the default cards that are included in minimalist under this cards menu so by default you can use all of these cards in here without having to do any extra work and you also see that we have chips as well so those are those little sort of uh widgets up at the top and the little the little badges for different things we've got the back one we've got the alarm chip we've got navigation we've got power all of those chips they are also included by default in minimalist and you'll also see that we have a custom cards menu so everything under the custom cards menu is inside of the minimalist repository in github but it's not included by default in the minimalist installation so you do need to do a bit of extra work if you want to use any of these cards if you don't want to use any of these cards you don't need to worry about this but just so you know anytime that we are using a custom card you do need to initially create the card first inside of home assistant before you can use it any of the default cards you can go ahead and use them right away but the custom cards do need a little bit more work to use them at first and to find those custom cards in github just come to the main github page and then click into the custom cards repository and you'll see a list of all of the custom cards as well as again any of their documentation for those cards so here's the welcome card that i contributed back to minimalist you can go in and see how to use it as well as any of the example code and all of the code there for you to actually use so just be aware that is where to find custom cards and how to use custom cards in minimalist we'll show you how to use them or an example of how to use them as we go through it so once you have the default dashboard working in minimalist go ahead and go over into visual studio code and we'll have a look at the layout for minimalist so if we go into the custom components folder that should now be appearing you'll also have a ui lovelace minimalist and this is all of the code for minimalist as well as the default cards default chips themes everything like that they are all in this folder you don't really need to worry about this folder too much at all so just close that one up you don't really need to go in there unless you're doing anything custom you'll also see that we have another ui lovelace minimalist folder a little bit further down and inside of there is a custom cards folder which doesn't have anything in it but if you do use custom cards this is where we are going to create them as well as we have a dashboard folder with our first dashboard page so this code inside of here is the code for that first initial dashboard that we just took a look at and we're going to get rid of all of this in a second the reason that this custom cards folder is here and not in the other minimalist folder inside of the custom components is that anytime you update minimalist from hacks that folder gets overwritten so any of your custom cards would be overwritten so make sure to put them inside of this custom cards folder here and not inside of the custom components folder otherwise they will be overwritten if in doubt just make sure to take a backup of your minimalist folder just in case anything does get overwritten so the first thing we're actually going to do is to come into our ui lovelace.yaml file and we're going to get rid of everything underneath view so just delete all of this sample code we don't want to use any of it at the moment and that leaves us with eight lines that look like this and we can even get rid of this comment here you can also get rid of the theme file if you want to just do everything in your profile and that keeps things a little bit simpler and that leaves us with a title so for the title we're just going to change this to minimalist so we're going to use this ui lovelace.yaml file as a place that loads all of our other views and all of our other rooms so i like to have each room as its own view and to include a view inside of lovelace or inside of minimalist this is actually a yaml thing so you just use an include line like so so we're going to do view slash home dot yaml oh make sure to add a hyphen at the start of your includes so that it works i'm going to call my main page so the first page that you see on your dashboard is going to be called home.yaml inside of the views folder so that's all you need to do to include another file inside of your yaml and you'll notice that we actually need to create the views folder first so we go create folder and we'll call this views and inside of the views folder we need to create another file called home.yaml so there we go inside of our dashboard folder we have another folder called views and then we have a file inside of there called home.yaml it's worth noting that you can include the folder as a whole so that you don't have to come in and manually add each view but i prefer to do it this way you can do it the way that you prefer so i've done mine like this we've included home.yaml and you'll see if we navigate over to our minimalist page it'll just give us a blank dashboard with nothing on it but at least this confirms that we have loaded our view correctly so that's basically all we need to do for our ui lovelace page basically that's going to load all of our other rooms and other views if we now head over into home.yaml we're going to start this off with a title so type title and then just give it a name so we'll call it home and then we also need to add a path so if you remember from the mushroom guide if you followed along with that one the path is basically the url or how to navigate to your or to that view so again we'll just enter a path as home and then on the next line we just start typing cards so this is where we're going to start entering our card so we are now good to actually start adding some minimalist cards in here so if you remember back to the original dashboard that i did that we're going to be recreating you'll remember that i had a welcome card that had navigation to other rooms on it and you will find this inside of the minimalist repository so this is one of the cards i've contributed back it looks a little bit like this and basically we need to start creating the structure for this custom card so remember i said that custom cards you will need to actually create the folders and files manually first but all of the default cards are available to just start using anyways inside of the custom cards folder create a new folder and then we need to copy the name of the custom card exactly so call it custom card esh underscore welcome as our folder and then again we create the same file inside of there so custom card esh welcome dot yaml and where you can find that information is if you go into the github and check the custom card you'll see the name of that is here as well as up here so basically just copy these values into your folder go into the yaml file that is on github and basically just copy all of this code copy that and then paste it into your custom card dot yaml files now if we go back to our home page that is now available for us to use as a custom cart but also if you head back to the github and look on the documentation page which is here i've also included as well as all of the other custom cards they all include some template code or some sample code that you can copy and paste into your dashboard and then tweak the values to suit your dashboard so underneath cards we're going to paste in that sample code that comes from the custom card on github and that looks something a little bit like this we all need to go through and change these values to suit our environment you'll need to suit them to your entities and your sort of sensors as well as navigation everything like that but that's how to basically work with this custom card if we were to refresh this it wouldn't actually work because this custom card needs a an input toggle as well as well as a weather sensor to be able to use it and if we go back to the documentation it will give you a list of all of the entities that are actually required for this custom card you can see it tells you if the if the variable is actually required and also how to use it make sure to check on the docs just to make sure you're doing things correctly so by taking a look at the docs you'll see that it's telling us that we need to create an input boolean that gives us that toggle button at the top that allows us to collapse as well as expand the welcome card so let's create that input boolean first so that we can see what our welcome card looks like head over into configuration and then devices helpers and then add a new helper and choose the toggle helper we'll just give this a name of minimalist drop down hit create and then go back to our code and we'll just start changing these entities to suit our needs so we need to change the triggers update button so that's going to be input billion minimalist drop down we also need to change this second input boolean down here so input boolean and also we need to change the weather to your weather entity if you can't remember the name of your entity sometimes it's handy to just have a second window open that will tell you or that you can quickly search for your entities so copy this paste it into our weather variable and if we now refresh our page so by the way if you hit the three dots in the top right hand corner and click on refresh that's going to trigger a refresh and if we did everything correctly that now shows up as our welcome card so our welcome card is showing and we can also toggle it's got our welcome message as well as the settings button which takes us into configuration and it's got all of our navigation at the bottom these navigation buttons don't do anything since we haven't yet programmed them but that is a good start and sort of the first card that we're going to create next card we want to do is those person cards so we have a person card for me and a person card for sarah right under our welcome cards and those are a default or a stock card built into minimalist and they are really easy to use under the welcome card code we're just going to leave a little bit of a space and then we want to use a horizontal stack for this so a lot of you guys asked me in the previous video why i didn't use a grid card simple answer is i like to keep most of my items just in pairs i don't want any more than two so horizontal stack is nice and easy and also for beginners it's easier i think a horizontal stack is easier if you want to use a grid card because you want more than two icons or you find a grade card easier to use go ahead and use the grid card i just prefer using horizontal stack so for this we're going to use horizontal stack and then on the in in the cards for horizontal stacks so this is now ready to accept our person cards if we head over to the documentation for the person card so you'll find that up here inside of the default cards click on person card and you'll see it gives you again a screenshot or an image of what it looks like as well as all of the variables that you can actually use if they're required as well as some notes so make sure to pay attention to those and underneath there we have our sample code that we can literally just copy and paste into our visual studio and then we should be able to sort of tweak that to our needs paste that in to our horizontal stack it's just got a little bit out of whack so make sure to pay attention to your and we just need to tweak some of these variables so i'm going to get rid of the address because i don't want that i'm going to select my person so basically all we're doing here is paste it in the sample code and then changing it to suit our entities first entity will change is the name of the person and that is actually all we need to change for this code so you can go ahead and change or add in zones if you want so you can add a work zone and this is sort of the information it will display on the card when these zones are active i'll leave the defaults for now and then if we refresh our dashboard you'll see that it's now added our person card don't worry about the entities i'm using so i'm using a test instance of home assistant so i don't have access to all of my regular sensors so i might re-use sensors and the sensors might look a bit weird but it's just for demo purposes you'll see it's added our person card on one row but we've only got one person there and it's taking up the full row so all we need to do is just copy basically our code that we've already done and on a new line paste that in and then change it to our second person hit refresh and you'll see it has added our second person card in there again make sure to check on the variables and read the notes about what you can actually do with them because some of them do have a lot of options and a lot of different options and things you can do and unlock some really cool cards so there is our welcome card done our people card is also done underneath here we just want to add a simple title that was what was on our original dashboard we just had a title that said rooms on it and this is probably the easiest card inside of minimalist to add in the next section not in a horizontal stack so we don't need a horizontal stack for this one you'll click on title card over in minimalist copy the code and you'll see here if we just take a quick note of the variables you'll see that name is the main title so it'll be in a bigger font and then if we use label that is a subtitle or a smaller font if you don't want to have a big font in the title so copy the code and paste it in here same as before fix the formatting and if we just save this i'll just show you what the main title and the subtitle looks like this is the main title up here and then we have subtitle underneath i'm going to use the main title for this one so i can just get rid of label and then change the name to say rooms and there we go the only other thing we need to add is our room navigation so you remember i like to have all of my navigation broken out into rooms you can do this however you want you can break this out into lights or switches power cards sensors whatever you want you can start doing that i'm going to do rooms and i like to use my room card for this so i have contributed this room card that you see here into the main minimalist it's still waiting to be approved in the meantime until that happens i will leave the link to where you can find this down in the description until it gets added to the main repository again we need to go ahead and create the structure for this custom card because it's the first time that we're using it and basically again you just find the name of the card up here custom card esh room head back to your custom cards folder inside of minimalist and add a new folder paste in the name of the card and then create a new file inside of there called custom card esh room dot yaml that's going to create our yaml file for our custom card head back to github and then into the provided yaml file and then just copy all of this code and then paste it into our newly created file that is a that is now that custom card ready to use and we can go back to our main view so again underneath there we just want to start creating some horizontal stacks or grid cards if you're using grid card so horizontal stack cards and then i'm just going to grab the sample code from the github page again there is sample code for this card copy that and paste it into our main yaml file this card is relatively simple up at the top we have we tell it which template we want to use and you can change the color here depending on what your needs are we give it a name so we'll leave this one as bathroom the entity is the main light entity for that room so when you press the toggle button for the lights it's going to turn that light on so you need to change this to whichever light you want to control for that room so for this one we're going to change this to light dot what have i got we'll change this to light dot group lights i don't have many lights in this instance but that'll do for this one you can change the icon to whatever you want i'll leave that as bathtub and then under the tap action we have our navigation path so again this is the path that is going to be inside of the bathroom.yaml file that we will create in a minute just choose a path that is logical and makes sense to you for this example the final variable we have is for the label so i want to display a room temperature and i've already created a template inside of this for you to use all you need to do is change the entity and let's just find a temperature entity that we can use so we just use this one as an example and we're going to paste that into our entity here and that is all we really need to change for that custom card so if we hit refresh just to see what it looks like if you get a message saying that card esh room is missing or your custom card whenever you add it it just means you need to actually reload minimalists when you do it so head over to the page where you can restart home assistant scroll down and you'll see that we have a ui lovelace minimalist just click on that to reload it and then hit the refresh button again and it should load that custom card in for you and as soon as it refreshes that is now showing our custom room card if we click on it it will change the icon yellow when the light is on and turn off again when it's off if we click on the card it's not actually going to do anything because we haven't configured our review for bathroom yet but you do get an idea of what it looks like let's go ahead and create a second card just so you can see what they look like in a row essentially all we're doing is just copying and pasting that initial code that we already did and again just paste that code in that you have there change the entities and then refresh the page hit refresh and you'll see that is what our room cards look like obviously i'm using the same lights in the same temperature but it does give you an idea of what they look like and the code is quite easy basically just rinse and repeat copy and paste change the entities and you're good to go that's all we're going to do for the main page obviously if you wanted to add more room cards you just need to copy and paste this whole horizontal stack just keep creating horizontal stacks paste it in the code change the entities and you're good to go as to adding more cards let's now actually create an individual room so we'll go ahead and create the bathroom view head back to your ui dash lovelace file and we're going to include a new view include view slash bathroom dot yaml just like that and again if we go we need to create a new bathroom.yaml file in our views folder like this and then again we're going to start with title bathroom and path again bathroom if i were to now hit refresh and then click on our bathroom view you'll see it does take us in but it's just a blank page once again but that does prove that the view is working and you can see the views up at the top here the first thing i want to add is the chip for the back button so that we can navigate back and forth between the home page and our rooms if we head over to the documentation and then open up this chips menu and view all of the various chips you'll see that we have a back chip and that gives us the backwards navigation to our page let's again just copy the code for that hit the copy button head back to code and then on a new line or a new section paste that code in and all we need to do is change the path because we defined a path in our home file we can just literally type in home or whatever the path for your home navigation pages and then if we now go into bathroom hit refresh that navigation chip or the back chip is now going to show up and it should actually bring us back to our home page so we can navigate now between both rooms that is looking really good underneath there i'm just going to add a title for bathroom enter bathroom and then if you remember from the original dashboard we had two graph cards right at the top one for temperature and one for humidity those are actually default cards already built in again so they are really handy head over to graph card on minimalist and it looks a little something like this so this is showing a temperature again all of the description and the variables that you can use are included here and we can just copy the sample code and change it to our needs copy that and this time we're going to create a horizontal stack just to have those two custom cards next to each other paste in that code for the graph and then start setting or changing our entities to suit for this one i'm gonna have i'm gonna call this temperature and the sensor is gonna be one of my temperature sensors and all i want on this graph is one value you can add multiple values into this graph if you want to again check the check the variables and check the attributes that you can select i only want one for this one so i'm going to pin out this entity two and color two get rid of those and for the hours we'll set yeah let's leave it at 24. hit refresh see what that looks like pretty good we've got our temperature card showing on there it's just one card so let's add the second one by just simply copying and pasting change the second card to say humidity and change the sensor to be humidity also we probably also want to change the color just so they look separate and it's easy to tell them apart so we'll change that to red hit refresh and we should now have two cards showing up right next to each other really simple to add those cards and hopefully you're seeing how easy it is to just copy and paste sort of build out your dashboard that way on the next show down i'm just going to add a title because we had a title that said devices so this was our device control section and you'll also remember that we had a sensor section as well i'm going to set the label on this one instead so that'll be label devices make sure to just get your indentation correct it should try and warn you or it should warn you if your indentation is off there we go for that one and then i'm going to create another horizontal stack which is going to house some of our our controllable devices so we'll add a light and also a fan in here just so you can see a couple of different cards this time i want to use the light card so again there is a default card for that as well as the default card there is also this color picker light card also counter lights cover cards some of them do different things and they also expand on the original card they're there if you want to use them or you can use the original i actually quite like the stock card for this it's got quite a lot of functionality and you can see all of the different screenshots for the different options that you can have with the light card copy the sample code and just start pasting that in again set your formatting and we'll start changing some of the entities so we've got group lights and we can leave all those variables just as the default just to see what that looks like let's also add in a fan card so i have a fan or i've got a fan inside of home assistant here there is a custom card for fan that has sliders as well as some other options you can use that one if you want to unfortunately my fan isn't compatible because it only supports on and off it doesn't have different sliders i can't use this card but if you have a fan that supports that go ahead and use that the card that i like to use for my fan is just the power outlet card it's basically just an on off toggle card and looks something like this you can also add power consumption on here if you have a sensor that supports it or you can leave it off you don't have to use it with this card copy that paste it in here so if you have a sensor that is measuring power consumption then that is where you add it in here i again i don't have that on this instance so i can just get rid of that and change my entity to fan fan.bathroom and we'll just call this fan let's have a quick look at what that looks like and you'll see that we now have our light card as well as our fan card the only thing i want to change here is that you'll see even when the lights are off the card is already expanded and it's already got the slider on it which is okay but i do want to change that back so if we go back over into the cards and into the light card and we take a quick look at the documentation you'll see that there is a variable called enable collapse so if we copy that head back to our code and then under the variables section along with the rest of the variables we'll put that to true refresh that see what it looks like and that now collapses our card for us if we turn on it will expand the card and give us a toggle if we turn off the card goes back in so that is looking great the final device card i want to add is just a cover card so i'm just trying to show you a couple of different cards and a couple of different sensors and devices that you could use with it obviously there is tons of cards here and you need to choose the ones that are suitable for your environment but it's just to kind of give you an idea of how to use some of the cards let's use or choose a cover card again you'll see it's got a nice slider as well as up and down arrows also quite a lot of options for controlling that card click on copy code and because this is the only entity i'm gonna have in this row and sometimes it's nice to have a full width card for a cover card because of that slider so that you have a lot of room to move the cards choose positions we'll just set this as a full width card so this is going to be cover dot bathroom blind and we can leave the defaults for there also hit refresh and that is what our cover card looks like if you want to change the buttons to be left and right so say it's a curtain instead of a blind you don't want up and down arrows but you want left and right arrows you'll see that there is a variable called left and right over here so we can copy that paste it into our variable section and set that to be true and that changes the buttons to left and right to make more sense for a curtain so that is it for our devices section the last section we are going to create today is our sensors section so paste in a title and we'll just call this sensors and there's a few cards that are actually good to use for sensors you remember on the original dashboard you will see that on the left hand side we have a binary sensor or something like a motion sensor or a door sensor something like that on the left and then we have the corresponding battery percentage for that sensor on the right so again horizontal stack some good cards to use for this are the binary sensor card as well as the binary sensor alert card so the only difference between these is that it gives you a little red indicator or a red marker to just let you know that a binary sensor is actually going off so that it's sort of a visual indicator to say that motion has been triggered or whatever it is so those are the cards i like to use for that so copy the code and then change your entity for the sensor that makes sense to you we also want to add the battery percentage for this so there is a dedicated battery card for this which is a really nice card and it shows you like this it's also got configurable levels of battery percentage so you can see at what percent the battery gets to it should change color to warn you that the battery is getting low or getting to a warning level so copy and paste and then start setting your battery levels for those sensors or whatever you want to have in there this charger type variable this allows you to change the icon depending on what type of charger you have so if you check the variables it'll tell you exactly what the different icons are for this one i don't have an icon i want to set so i don't actually need this variable so we can get rid of there and then in the warning level that is at what percentage it will change to yellow so i'll set that to 50 and the danger level is at what percentage it changes to red just again nice visual indicators that something or a battery is getting low so that you know to actually change it we'll call this trv and if we hit refresh on there so that now shows our binary sensor on the left as well as the corresponding battery percentage on the right the only thing i don't like here is obviously the label is overflowing we can easily change that by just giving it a name and that changes the name the card so it all fits in into into the card so you can actually read it that is looking actually really good for this room and indeed everything we actually need to do for this room now if we click on the back button it takes us back to our navigation page or the main page and then we can click in and bring us into the room page where we then have our cards and graphs and we can click into those and see more information as well as control the devices and see the sensors that is basically it that is all you need to do to create or exactly recreate the dashboard that i have it's basically just a case of copying and pasting all the code in here and this kind of does get repetitive you just need to go in paste it paste the code in and change the entities to match your ones so all you need to do now is basically the exact same process that we did for the bathroom repeat that steps and just start creating all of your rooms in the exact same way that we did it and make sure to create your room inside of the view folder and then link it inside of your includes in the main file too and other than that it's just pretty much repetitive copying and pasting of code and changing the entities to suit your needs the navigation for the welcome card at the top so the home light security and lab that is all done in the exact same way so you just create a navigation inside of the view and then you set the navigation up here to be whatever you want for example i've already created the bathroom navigation so i could change the top card to say bathroom and then change the name of it say bathroom change the icon and if i hit refresh because i've already created this view that navigation will now take me into the bathroom the welcome card navigation is the exact same as you do any of the other room navigation to that is all you need to know and that is how you create this dashboard the only other thing we didn't cover today was how to create some of the cards in the lab those are not yet added into minimalist i am still working on the code for those but the other cards i showed you that were custom cards have all been contributed and i'll hopefully get those cards into the main repository as soon as possible so that you guys can also use them oh before i forget the only other thing you need to know is to get rid of this top bar again like i mentioned you just change the theme so if you head into your profile and then select minimalist and choose the mobile version and then go back to your dashboard the top bar is now gone and you don't need any extra cards or anything like that to do it if you want to have the navigation down at the bottom then you change that over to the minimalist mobile tap bar and that is going to provide you with a nice tap bar at the bottom for easy selection of rooms if you want to i prefer the clean look of just having nothing there but again just choose whichever one suits your needs so that is how to create in my opinion the nicest looking mobile smart home dashboard in home assistant as i mentioned it is a lot more work than mushroom but i think it's worth it and once you get into it is just a lot of copying and pasting and reusing code and it does get straightforward once you've done a few of them anyways i hope you enjoyed this video hopefully it wasn't too long i feel like it's going to be very long we've definitely got our work cut out for us hopefully this is a lot easier to get out and edit than the previous video was if you know you know make sure to drop this video a like and get subscribed and i will see you in the next video

Channel: Everything Smart Home

Views: 195,768

Keywords: home assistant, smart home, home automation, smart home dashboard, mobile smart home dashboard, home assistant dashboard, home assistant lovelace, home assistant guide, home assistant setup, home assistant mobile dashboard, minimalist mobile dashboard, minimalist smart home dashboard, home assistant minimalist, home assistant minimalist guide, minimalist dashboard guide, home assistant minimalist how to, minimalist project, minimalist UI, anker, anker power house

Id: A0fMt8IRKoI

Length: 42min 51sec (2571 seconds)

Published: Tue May 03 2022