EASY Lovelace Mobile Dashboard | Home Assistant Tutorial

how's it going everyone on today's video we're going to be looking at another lovelace dashboard that looks incredible and is sure to take your lovelies dashboard from looking like this to looking more something like this a whole new level i call today's dashboard the tile dashboard and we're gonna go through what it does and how exactly to create it stick around [Music] all right everyone how's it going so today like i said we're going to be going over a new lovelace dashboard what this loveliest dashboard is is a nice tile dashboard really good on mobile and probably the best one on mobile it links to different pages have multiple views on the top but before we go into actually what it does and how to create it let's go over real quick what happens whenever you first get into home assistant and you haven't edited your dashboard before so now if you have done this already and you already know how to do this check out the timestamps below and fast forward on to that point in the video but for now let's go over how to edit your dashboard whenever you come into your dashboard you're first going to be presented with this this dashboard here that has a lot of stuff at the top a lot of these badges and a lot of these cards here that are kind of randomly placed and that's that doesn't look very good what we're gonna do is take control of this dashboard and start editing it to do that we're gonna go up to the top right here and click edit dashboard once we do that you'll see a screen that says take control of your lovelace ui don't be afraid of that nothing to worry about because you can always go back and recreate this dashboard really easily now what we want to do is actually start from an empty dashboard so we can go ahead and toggle this this toggle here to say start with an empty dashboard in order to kind of get a clean slate we're going to click take control what this does is it actually gives us like i said a clean slate everything is blank and we're able to start editing from here now we can go into actually what the tile dashboard is but before we do that make sure to like this video and hit the subscribe button in order to continue getting this type of content i know you're gonna love this dashboard so go ahead and do it the tile dashboard so this is what i kind of gave you a preview of at the beginning the basics of this dashboard is actually just a few cards we have a few button cards here that you'll see so most of these are actually button cards i think we have one extra card here that isn't a stack card so we have button cards and a weather card this is all just using a grid card and grid cards to organize these in a nice simple way that gives you those nice tile look cards so up here in the top and i have a little graphic that i'll show you so here we have four grid cards a grid card is just a basically a stack card that allows you to put your cards in a grid like view so they're nice and square up at the top we have a grid card which is the outer purple square that is the overall grid card in that grid card we actually have another grid card don't be confused it'll all look and and seem really easy once we get into it on the right hand side we have another grid card that has button cards within that and in between we have a single button card that is separating those two down at the bottom we have a another grid card that has six button cards within it this is super easy to do we will require a very tiny bit of editing the yaml do not be scared of that it's something that anyone could do and we're actually working on getting this into the ui but it's not there yet so i'm going to show you how to do it very easily with the ammo so up here at the top left we have a car that's showing the lights now the purpose of this card in my instance is to navigate to the light view the light view actually holds all of my lights but if i click and hold on this card it actually toggles all of my lights if i do just click on it it brings me to this view that shows me the lights in my house so here on the main floor we have four lights and on the second floor we have four lights that i have currently connected to home assistant you can see that i'm able to turn those on and off via the ui this makes it super easy for me to see all of my lights at once and the status of them all but now i can see that i've actually left on all my lights and i'm wasting electricity if i go back a view back to my home page view we can go on to the rest of the cards the next card right beside it is my thermostat button and if i click this you'll see that it brings me up to a pop-up that shows me all the details and controls for my thermostat i can simply control the thermostat from there you'll see here on this button it actually gives me a little bit of detail about the current state of my thermostat for example it's currently on the heating side and if i changed it to cool or off in this case you'll see that it actually turns to off the next card is the one right below that light card it is a humidity card and i'm able to turn that on and turn that off via via clicking it if i click and hold then i'm able to get to the more details to update the target humidity that i want for that humidifier the next card is the alarm card i'm able to click into this and arm my home for away or home via the more info dialogue and beside that i have scenes so i have my home scene my leaving home scene my morning scene and my goodnight scene i've set these up using these button cards to click and it will automatically set a scene in my home depending on what i want now this is easy to use and i really like this abilities because i can just pull up my phone when i'm leaving the house and click this button easy to do turns off all my lights sets the thermostat and does what else whatever else i needed to do the next card is just a simple weather card without the forecast and below that are the really awesome cards these are the ones i really love because they give me a glimpse into the rooms that i want to be using so for example the living room is my first card i know that because of the couch and that's just kind of what symbolizes the living room to me if i click into this card it actually brings me into a view that is specifically for this room you'll see the lights at the top my thermostat for this room my vacuum and then the media that's currently playing in the living room everything that i ever want to know whenever i want to think about my living room and if i want to get an overall view i come here but let's say i'm back here and all i really want to do is turn off the living room i do all i need to do is click and hold on the card and it turns off all the lights in that room and this is set up so that each one of these cards is actually exactly the same so for example this is my bedroom one i can click and hold to turn off my bedroom and click and hold to turn it back on now that we've kind of gone over what this dashboard does let's get into actually how to create it and we'll go over the small amount of ammo you'll need and the different views that i actually created let's do this i'm gonna go a little bit quick but you can always pause and replay the parts of the video that you may have missed if you have any comments or questions please let me know in the comments section down below and i'll be there to answer any of your questions all right so here we are on tile dashboard youtube all this is is a blank slate that i'm going to be using for this dashboard that we're going to be creating we're actually going to create it completely from scratch i'm actually not going to show you every single card and how to create it but i'm going to show you the basics of all of the cards so you can go in and do them yourself so the first thing we're gonna do is actually create the the top section here that has three grid cards actually embedded now that may seem hard and that may seem daunting but it's pretty easy and i'll show you how first let's create a home view we're going to call this home we're actually going to give it a icon called home and i really like the outline cards so usually all of them have an outline you just have to put in dash outline after it you'll see that it auto created my url and i all i need to do is click save and now i've created a view with a home icon and it's ready to start adding cards to get started what we're going to do is actually add a grid card this is going to be the grid card that houses the two other grid cards and the one button card we click add card and we go to grid card we can get there quicker if we go up here at the top and click search so now we've created a grid card a grid card is a stack card that contains other cards so what that means it's basically a shell that can have cards inside of it what we're going to do is actually add a card within that this is where we get into those nested grid cards we're going to search grid again and add the first grid card inside of this we're going to add buttons what i'm going to do just really quickly is add four different buttons to this nested grid card all right up to the top right it's actually showing three button cards at the top and one button card at the bottom this is where we actually get into a little bit of yaml what we need to do is change the amount of columns we want for that nested grid card let's go over what the nested means so the top section and you'll see this is kind of delimited by this square here is the overall shell grid card and inside of that we have this grid card here which is this inner square that has these different buttons what i need to do is actually change the yaml of that nested grid what i'm going to do is click this show code editor you'll see that we have a grid card with those button cards within it all i need to do is click enter right after the type colon grid and type columns you'll see that a red area at the bottom don't worry about it once you're finished typing it out it'll all go back this to the same thing and i'm going to put two two columns will give me that nice looking 2x2 grid and if you have maybe six cards that you want to show you could put it by a 3x3 and not have to touch it but for this case i want to do a 2x2 so i've changed the columns to 2. now i can click back to the visual editor don't get overwhelmed by the yaml actually not that difficult especially when you're only editing something like that just just one variable so now that we've added all of our buttons we need to go ahead and modify them a little bit so for the first one we actually don't want to show the name on that card we're not going to show the name on any of these cards we're going to take those off you'll see over the top it actually changed the size a little bit so that's good because we don't want the cards to be bigger than what they need to be the first button card was actually a card that navigated to a different view we're actually going to come back to that one later we're going to go to the second one that was showing my thermostat in the state of that thermostat so first we're going to click in a climate entity we're going to choose the hvac and we're going to check this show state checkbox so if i click this you'll see at the top right we actually now see the cool i can click back and forth here you'll see it changing up at the top we want to be able to see that because the thermostat while it does change colors between cool and heat some of them may have an auto mode some of them may be in a different mode and showing that mode just kind of gives you a visual reminder that this is what the state is in and you can do this for your light cards as well if you would like now the next thing that i'm going to change is actually the tap action i don't want to toggle my thermostat whenever i touch it because i rarely turn it off i just want to go in and actually update the temperature that it's set at but whenever i click this button i want to open up the more info dialog to update that temperature and now i'm finished with that card we can repeat this for the other cards for example the humidifier if i click and if i type in humidifier here i can see that my card has shown up we know it's on and we can click show state the state of the humidifier is actually its target humidity and i can change the toggle the tap action to be more info whenever i click that i can open it up and see the target humidity and update that accordingly i'm now going to move on from this section of the grid card and i'm actually going to create up at the top in the nested grid a new card and we're going to add a button this button card is actually going to house our alarm this entity is going to be an alarm entity my alarm control panel and i'm able to not show the name but show the state so i know if it's in an armed or disarmed state and also i want to change this tap action to be more info as i don't want to arm and disarm as i need a code in order to do that i want to be able to click it enter my code and click arm or disarm that's all for that middle card super easy to do and it's not much work to get that one ready to go now we can go ahead and move the scene buttons in the right hand side this is another grid card so this is another nested grid card all we have to do is click add a grid card in that section and in here i want to add four buttons i'm gonna do that really quickly so here again you can see that it added those cards but in a three column grid what we need to do is click show code editor and do the same thing where we change the columns variable to two and we click show visual editor again now i can go through each one of them and uncheck the show name and you can see that it's a nice and square rectangle here where every card is aligned perfectly at the bottom and the top so now what we can do is change these to scenes now i can click scene arrive home i'll do this for the rest of them now that i've added all these scenes there is a little bit of yaml that i need to do in order to call this scene to do that i need to go to the tap action and click call service what we're going to be doing is going to call the scene dot turn on service within this button and click here search for that and choose scene dot turn underscore on you'll see here that service data can only be entered in the code editor that does mean that i need to edit the yaml code in order to do this but again it is not hard we're only editing one value i click the show at code editor you'll see that i have my button i tap action of call service and my scene.turn on the only thing that we need to add is our service data we do that by typing in service underscore data and a colon after that we can press enter and then tab or you can also just do two spaces two spaces later we can input our entity id here we want to copy and paste our entity of the button and insert it into that entity id with the service data now that button is going to call the scene.turn on service using the entity id of scene.arrive home so it triggers scene.arrive home whenever you click the button we can go back to our visual editor and get out of that code now we've set this up so that if i click this it'll turn on my lights you saw that on the left and do the rest of the scene that it needs to do now we can click save and you'll see now that we've completed almost that top section of the dashboard only thing we're missing is actually navigating to a view that is made for the all of our lights we can click up and add a new view this is going to be our light view i'm going to add icon of light bulb and of course the outline version because i think it looks nicer and we're going to title this lights now i can click save you'll see that it added a new view and now i need to add all of my lights to the view the first thing i'm going to do is add a markdown card now that i've added the markdown card all i need to do is put in which floor i'm going to do first first floor we're going to put two pound signs before so that the first floor is a little bit bigger more of a title and we can click save the next thing we can do is add some more button cards but we want these button cards to be in a squared-like state and right next to each other so to do that we're going to build a grid card we're going to add some buttons to it so now that we've added some buttons to this grid card we can change the entity id for whatever buttons are on our first floor in this example i'm going to do my bathroom lights is the first card bedroom lights is the second card and office lights as the third card and click save you'll see here now that we have the first floor and the button cards underneath it you could do the same thing for the second floor and add other buttons underneath it now if we go back to our original dashboard and click edit i can edit the dashboard edit this button card this living room dot lights and we're going to actually change this to all lights so that if i hold we can toggle doing that by changing the hold action here we're going to change the tab action to navigate to find out which path we need to navigate to we actually go to that view click edit and we find the url here the url for this dashboard is lights and now i can go back and in the navigation path insert lights in order to navigate to that view i click save and i click on the lights you'll see that i navigated to my lights view and this allows me to quickly navigate throughout my views without having to click up at the top i find this easier you may not you can update this to however you need fit now that you know how to build this layout the next card in this in this dashboard is a weather card we can go up here search weather and for my version i did not want to see the forecast i just wanted to see a glimpse of today's weather so i unchecked show forecast and click save and now see that i have my weather card right underneath my grid card the next thing we want to do is click add card again in order to get a new grid card that'll house those buttons at the bottom in particular these buttons here that will be able to go into each room but before we do that let's actually build out the room view to do that we're going to create a new view and title it living room and give it an icon for sofa dash outline of course and click save now make note that the url of this view is living dash room the dash was automatically added because urls could not have spaces in them and the url is built from the title that you gave it we can now add cards to this view you'll see if we go back and we navigate to our view here it's basically the same as what you saw before with the lights up at the top with button cards the thermostat is in two entity cards the vacuum is a entities card which entity and entities cards are different and i'll show you those soon and the media card down at the bottom we jump back we can go ahead and start adding these cards the first first one was another markdown card where we can select and highlight and delete and put lights after that we add a grid card add a few buttons and change these to the lights that you need to click save and you'll see that we have our first section if we add another card be another markdown card to denote that the thermostat is next and we're going to add yet again another grid card grid cards are nice because they make everything nice and square inside this great card we're going to add entity cards into t card show one entity and and the entity's information or an attribute from that entity we click into here we want to bring in the thermostat for the living room and for this example you'll see that up at the top right it's actually a little bit squished what we want to do is for this grid card i want to actually change the columns to b2 so i can go up to the grid click show code editor put in columns two and click save but before we do that you'll see that this card is actually really tall and the reason that is is because the grid card tries to make everything square we want to actually turn off the square option for this so another gamma variable all you have to do is just type in square and make it false you'll see that now it came down to a more manageable in more aesthetically pleasing entity card now we can go back to the show visual editor and we can change the name the attribute but for this one we're going to leave it alone the next card beside it is actually going to be an entity card with the same ecobee thermostat but instead of showing the state of it which is heat or cool we're going to change it to the temperature that is currently at and that's the current temperature attribute here we could put in degrees and we know because it's our thermostat if it's in fahrenheit or celsius you can choose to put in the degree symbol fahrenheit celsius whatever you'd like in that unit option now we can click save and you'll see that we're kind of building out this dashboard now from here you could go ahead and add in the rest of the cards that you need to in order to make that view the way that you want for your rooms whether that's adding entities cards or adding the media player card those are really simple to use and really easy to set up and if you need a little bit of a refresher on the entities card i do have a video that i'll link above that goes over how to use it the next thing we need to do is go back to our main dashboard and add in this grid card and the button cards down at the bottom thing we want to do add in a grid card that is the outer grid card and then add in some buttons now let's change the first one to be the light dot living room this is all the living room lights we don't want to show the name but we do want to update the icon to be mdi sofa we want the ability to navigate this to that living room view to do that we click hold action to toggle that when we hold it it will toggle and then the tap action to navigate now remember when i said make note of the url it was living dash room and now that i've input that path i can click save and you'll see that if i tap it'll bring me to that living room view now we've created all of our views and the main dashboard that will bring us to all those views you can now go through set up the rest of the buttons and the rest of your dashboard the way that you want to customizing it using these tools that i've given you now if you like this dashboard tutorial i'd have created another video that goes over a different dashboard that'll be linked up here at the top you can go ahead and check that one out as well to give you a little bit more ideas on what maybe your dashboard will be and if you do want more of these videos and you want more tutorials leave a like on this video hit the subscribe button and let me know what kind of dashboards you want to see in the comments below have a good one everyone and i hope you enjoyed this video

Channel: Zack Barett

Views: 103,555

Rating: 4.9353013 out of 5

Keywords: Home Assistant, Hassio, Lovelace, Home Automation, Smart Home, Home Assistant How To, Frontend, Developer, Zack Barett, NKDZCK, home assistant setup, home automation, smart home, Dashboard, Lovelace Dashboard, Incredible Lovelace Dashboard, Easy Lovelace Dashboard, lovelace tutorial, dashboard tutorial, tutorial, grid card, clean dashboard, tile dashboard, Home Automation Dashboard, Smart Home Dashboard, Smart Home UI, UI, UX

Id: 5y6rhwr5Y8c

Length: 26min 20sec (1580 seconds)

Published: Sat Jan 02 2021

Reddit Comments

[u/merdely]

Great video, Zack. I really like the grid card -- especially since we can now modify columns/square and continue to use the UI to manage the card. Thanks for all of your work. Looking forward to trying out drag and drop soon.

[u/guice666]

"I'm gonna go a little bit quick" ....

I'll be honest. I always play these videos at 1.25, 1.5 speed to begin with. Yes, "you can always pause" ;)

[u/Electronic_Worth_626]

Wow this is amazing

[u/hojjoij]

I do this as well, i have the button card as i find it the most versatile as you are able to handpick which attribute you want to show for a sensor or entity.

[u/Kynch]

Thanks for sharing, /u/zsarnett. Going to make some changes to my Lovelace UI. I like the clean minimalistic look you explored.

[u/Notnumber44]

T-shirt change? 😇 Love the video, looks easy!