EASY Lovelace Mobile Dashboard | Home Assistant Tutorial

Easy, Incredible Looking Lovelace Dashboard built using the Grid Card! Super EASY! No YAML files (4 small YAML edits in the editors). No Custom Cards. I call it the Tile Dashboard.
YAML (Though I do recommend using the UI editors to learn): pastebin.com/sGSWwtBU
Like what I do? Sponsor me: github.com/sponsors/zsarnett
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Drop some love to the other social media:
🐤 Twitter: - / nkdzck
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
0:00 Intro
1:08 First Time Editing Dashboard
2:06 Overview of Dashboard & Features
7:23 Creating the Dashboard
25:35 Outro
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Music provided by Monstercat:
Grabbitz - My Cloud
/ monstercat
/ monstercatinstinct
#HomeAssistant #Lovelace #DashboardDesign

[@ZackBarett]

Let me know what Dashboards inspire you and I may make a video explaining the easiest way to recreate it!

[@michalambroziak]

This one kzbin.info/www/bejne/gZTJi5Zngr2DlaM

[@powergaard]

Great tutorial, really good Zack. Where can I look up the "commands" for the icons (hass etc) AND 2nd question - is there a guide somewhere where I can design the same Alarm tile with my RING system ( as you know, currentlly Ring does not integrate into HASS.io but I would be able to hook it via MQTT ?

[@jeaf11]

This is an awesome Dashboard! Thanks Zack! My dashboard now looks like this! 😋 Thanks for the tips! 💯

[@hildalopez1252]

Im so new to this, i am going to review your video and I hope to have a running dashboard. So far I have struck out to the point of frustration.

[@olivermcintosh8281]

Hello Zack. Must say, I have seldom learned so much in such a short period of time. This approach to building Lovelace dashboards into practical panels is inspirational. Thanks you.

[@desparky]

Fantastic tutorial. Clear, concise and extremely informative. Completely made me change my opinion of a tile type interface. Thanks for the time and effort you put in to help others.

[@AndreViens]

This is an awesome tutorial about making a beautiful interface for Home Assistant. Everytime I open up HA, I get overwhelmed so I like this approach of containers and breaking down the different grids.

[@thierry3610]

This is very nice and clean Zack, similar to a Control4 interface. Great job walking through the steps to take. Thank you

[@SenZubEanS]

This was great. I don't know exactly what I want to see more of yet in the dashboard front as I'm just starting out but please, keep 'em coming!!!

[@jolmav9400]

Zack, Happy New Year !. Excellent and interesting video as always. Thank you

[@raysieber9233]

I like the compact home screen that lets you drill down to the details if you need it. I have been planning for a long time to draw my rats nest of lovelace views on a white board and plan something exactly like this. Thank you for the kick start

[@markshaz8691]

This is great Zack, thank you so much. Happy New Year.

[@keepitdialed]

Just discovered your channel - dude. Dynamite content! This is exactly what I’ve been wanting to know about home assistant, dialing it in. Etc. good stuff buddy. Keep it up.

[@IanTakats]

That was a great video. Very clear and easy to follow. I have now got a very useful set of views with some great functionality. Well done!

[@AllenGoldschmidt]

Very informative. Got me over the hump of understanding how to build dashboards. Thanks!

[@markushomm1886]

great video zack. Really helpful !

[@tonnysenioranthony4251]

Very good explanation, and thank you for not playing music under your narration. (Most KZbin creators play a terrible repetitive distraction music loop underneath the instructions, thanks again for not doing that)

[@NeilNatic]

Very helpful. I don't prefer a tiled mobile layout but learned some things with the tap and hold actions. Thanks!

[@CilfaNieraad]

Thank you for this fantastic walkthrough! The latest HA update (this months) dispenses with the need for yml-editing for setting the columns of the buttons, which is very nice.

[@jibbic]

Big thanks, just what I needed :)

[@sfenne]

Great tutorial. I wouldn't mind autocomplete added for icons (preferrably with icons in the dropdown). Looking forward to a revamped locelace in the future!

[@BBalasa]

Too good , thought to watch for start of 5 mins , ended up till the end of the walk through , very good tips and high quality walk through...

[@tacticalchillifarmer]

exellent. This bring my HA to a new level

[@SmartHomeMakers]

Happy new year Zack ! I need to sort out a dashboard for my spouse !

[@rfdave3980]

Zack Fantastic video. I like it navigation is so easy. Thank you

[@dreamvisionary]

Thanks for the tutorial. The end results are very nice but a drop, drag and resize grid card interface would be a dream for many I'm sure.

[@ALaModePi]

Great video. I especially like that it require almost no yaml editing. One of the things I went for in my own dashboard was a UI that would display well on our phones and also allow me to place Lovelace in a "browser app" at the bottom of my screen on the desktop with the same controls. I started it before the grid card became available and so it's a lot of vertical and horizontal nested stacks. It also requires _major_ yaml editing as well as the custom:button-card add in. I may have to see about converting to the grid card at least.

[@MattTube]

You did a great job! Thanks.

[@KiatHuang]

Very good job of explaining this. Makes me want to make one :)

[@julianbosch8580]

Thanks for your video, really helped me to have a very good starting point to do my own, cheers!

[@melliflousbufo]

Fantastic tutorial - thanks very much!

[@gms03sbd3]

OMFG! That is like appleize HassIO interface! I will probably copy this. Thank you!!

[@thomasloven]

This is awesome! You inspired me to finally to pull myself together and redo my interface.

[@ZackBarett]

That's awesome to hear! Thanks Thomas!

[@dinotech6692]

Nice job Zach...I could never inspire Thomas enough to do that LOL :P

[@timaldridge4236]

Excellent video thank you so much!

[@rvermill47]

Good video man!

[@johnm4962]

Great video!!

[@philou1516]

I really like your videos ! You explain very well and with a good rythm, thank you very much Zack! I would like to see one video that explain how to use CSS to tweak those cards, size, borders, opacity and others, do you have one? Also I would like to use minus and plus buttons for lights instead the circular potentiometer because it is not really easy to use on a smaller display, etc.

[@pucbaldwin]

+1 for the CSS tips :-)

[@CaptZenPetabyte]

In the bad old days, before css, I remember designing websites & pages using tables inside of tables (nesting tables), its the very same thing. Awesome tute though mate, well done

[@Johnsmith-uc9df]

Thank you for this video it great and nicely explained

[@eobeniche]

Thanks for sharing that way to do your dashboard. I just add one thing who can be usefull, you navigate to your bulbs but you didn't add a back button, so i improvise a small arrow to go back to "home" on top of each other page ! Looks like this, i'm sure you will find a better way to do it but it works : type: grid columns: 8 cards: - type: button tap_action: action: navigate navigation_path: home icon: 'mdi:arrow-left' show_name: false show_icon: true hold_action: action: navigate navigation_path: home

[@jamesrowley6550]

Hi Zack, great videos, really inspiring! Please can I ask which theme you are using on this particular video?

[@kal6392]

Great videos. Thank you very much.

[@peikkomaa]

Nice tutorial. This helped me a lot, thanks! That markdown card with background color looks cool, how did you do that?

[@franktechniek]

You can also start with a horizontal stack card, put two vertical stack cards in each, and fill those with the cards you want.

[@sjp770]

Great explanation thanks!

[@monnierobinson9210]

Thank you for the detailed Lovelace setups. I have just started my Home Assistant journey with the Blue device this month. Looking forward to programming some of these buttons and automations when I have the devices setup. I hope to have such a clean interface due to the WAF (wife approval factor) response. One question for future video, can you have a doorbell feed popup on the Home Lovelace screen, only if visitor has pressed the doorbell? When finished with the conversation, close the popup screen and back to Home. Also considering using motion detectors/cameras at other places outside to do the same thing. Thanks again!

[@nytram76]

Great tutorial again. Is there a chance you can do a video on picture elements but not for room lay outs ? I'd like to use for other things like thermostats info all in one, a calendar view and even a overall HA info page with all versions available, updates, system info and beta versions available but there are no actual tutorials about this apart from room layouts. Thanks

[@FranciscoJGomez-CHSM]

Love your videos, thanks!!!!!!!!!!!!!!!!!

[@Np182]

I never comment on KZbin videos but absolutely had to on this one. I’ve been so frustrated having everything setup but being unable to make a Lovelace dashboard that isn’t awful. Just the columns and square YAML edit tips in the grid card are huge and going to help a lot. My next hurdle are to get this looking good on a tablet. Subscribed!

[@ZackBarett]

Thanks! Glad the video was useful. Definitely going to be release some more Dashboarding videos!

[@meierthomas]

Have you had any progress on the tablet? I'm struggling to fill the screen 😏

[@Np182]

@@meierthomas I haven’t yet, just wrapping up a few fan controller and light switch installs and going to continue to fill up what I can display and go from there. I have 2 Fire HD 10s that are dying for a good setup.

[@ArthurSevero]

Thanks for this great video. How did you leave the two main grids and the temperature in a single column?

[@bulldog3494]

An excellent presentation is so informative. I can clean up my views of my entities. I also subscribed to the channel to follow you. Thank you.

[@BrianSimmons]

If you have an alarm system you should set up Home Assistant to trigger your "Leaving Home" scene when the alarm is armed "away". The point of home automation is that activities like this are automated. Having to open your phone to engage the "Leaving Home" scene isn't very automated. Likewise, when someone arrives back home and "disarms" the alarm, you can trigger your "Home" scene. We have different triggers set up in our automation system (not Home Assistant) based on if the alarm is armed "away", "vacation", "night" or "disarmed" and also have a "is dark" type of logic so that lights are turned on when it is dark outside but not during the day. These scene primarily change light status and HVAC set points, but also make sure all A/V equipment is turned off when leaving, etc. You can really set these up to do anything.

[@AngloYorkshire]

One of the best tutorials going except for translating American to English (pound signs are hash lol). Keep up the good work!

[@nikenbole]

This made me move from full yaml mode to the editor.

[@Saun2020]

Thank you for this video

[@painy3248]

Very insightful. How does this layout change for a horizontal tablet on the wall vs vertical smartphone?

[@carlopic6610]

Bravo Zack

[@phyrz91]

Hi, it would be nice if you could create a time card in a lovelance dashboard. This card would be helpful when someone has a tablet on the wall and displays the home assistant dashboard on it.

[@moshiko2312]

You are genius thank you

[@DannyMertens]

Hi Zack, Thanks for your videos love the way how you explain things and show new features and things like that. I know you like to help new users and inexperienced users to build nice clean dashboards and love the way how you make this all so easy to do, and to be honest after seeing your videos my dashboards look all a lot cleaner and easier to use now, but to come back to your question about dashboards: What I’m missing is someone who can help use to go a little further here, to make this simple dashboards just awesome, and not only simple switchboards but complete command centers for a monitor dashboard or fixed tablet So maybe it’s an idea to create 2 kinds of video series, for starters, low experience users, and for more advanced, more long time users who don’t are programmers but don’t are afraid to go an extra step to make there dashboards look awesome and are not afraid to tinker a little bit more in yaml. For instance what I would like is to see in my dashboard is important information for a room for instance, like how many lights are on in a room, are there doors, windows open, is the media player playing, temperature and... Status board where you can see in one overview your complete house overview with global information like for instance how many lights are on in total, how many doors, windows are open, how many people are in the house, alarm status, and things like that... Ps: That’s quite a compliment you get there from Thomas, who is in my eyes also a ha hero with all his great custom cards and his constantly support to the community, thanks to you both and looking forward to what’s coming... thanks! I don’t think where there yet, but with all the new Lovelace updates and specially the grid card, best card ever! going to dashboards like these examples for instance are not so far away anymore! medium.muz.li/30-inspiring-examples-of-smart-home-app-617311d96303?gi=921ad78cd16c

[@ZackBarett]

Thanks Danny! Really appreciate the kind words and suggestions. I actually did have a Dashboard set up that would do a bit more like you were saying. If you saw in the video "Tile Dashboard 2". I may make a follow up video on how I did it. But I used template sensor to show a preview in plain english of each room

[@DannyMertens]

@@ZackBarett that would be great, to be honest that’s still the hardest part for me in HA now the templates, creating sensors and things like that would be great if this can be a more visual option, for a non programmer it’s quite hard to get these build, really hoping that you guys find a solution for that in the future, but seeing how the automation editor is evolving and the new blueprints features I’m hopefully ;-) A couple of years a go it was even impossible to get started with HA for me and now I’m even slowly moving completely from my current system (Homey homey.app/en-us/) to HA with a couple of dashboards I did not even saw possible in my wildest dreams! Really really love how this platform is growing and evolves to the ultimate home automation system!

[@jjrulz17]

Lovely work, keep it up. Quick question, I'm having trouble keeping my dashboard as a 1 page tablet. any ideas how I can resize the grids or columns? Can't seen to find any information online

[@manuelescamilla356]

great video, thank you. could you explain how to set the kiosk mode. i do not understand how

[@PeterVig_dk]

Nice video. Is there a way to change the text size of the name and state when using grid cards?

[@haz3580]

Great video. I actually was able to rebuild my dashboard (at least the first grid) following the instructions. I have one question. Not necessarily related here, but I don't have the light.all_lights. How can I create that? I am trying to do the same implementation as you have as I find it very practical

[@zyghom]

it is exceptional with these grids - thank you (confusing for the newbies like me but ok) one question: having grafana and dashboards within grafana: how to navigate from lovelace to the specific grafana dashboard? that would be super nice being able to skip going through grafana main page directly to grafana dashboard - thx

[@Saun2020]

Thank you sooooooooo much

[@sammeyer1993]

great video! how do you get the colorized icons?

[@krisdouglas6536]

good video thank you. Can you show how to make coloured boxes to go around the grids please? Also once i go to another view, from say living room for example, i would like to have a button that takes me back to the home page, this is of course easy, but i cant find a small button, and the normal one messes up my look. Really dont like how hard it is to try and structure items on the page in HA with the up down arrows only. Cheers

[@Otomai]

How do you put auto custom colors in your entities? I love it!

[@flederflick]

Hi Zack, Great video. Started to create my own dashboard immediately but am having an issue with the URL option of the buttons. It does open my correct view but opens it in a new browser window and I don't want that. Can you point me in the right way to fix this? Would very much appreciate it. Keep up the great work. Many thanks

[@qwarlockz8017]

Hey Zack! GREAT vid! You really make it look easy! (but it isnt). When you are adding cards you have LOTS and LOTS of cards. Mine does not. I am running Hassio in Docker. How do I get all those way cool cards in the editior?

[@kev1nme1er]

Great video Barett. I'm very new to Home Assistant and don't understand where the entity 'light.all_lights' comes from. I assume it is something you created so I am hoping you can point me in the right direction. Thanks.

[@daveacorn782]

Gret video!! Question on these grid cards, i want to have a grid card that has to have a side column that has a set width, then to the right of this column a grid of buttons with 6 buttons per row. I can't figure out how to force the first column to a specific width. Any chance you can advise? Thanks in advance.

[@meierthomas]

I'm trying to replicate this to create a tablet dashboard which essentially is landscape (as opposed to portrait in the case of mobile) bit I can't seem to fill out the screen real estate. What's the best way to nest the grid cards so I can fill out a landscape screen with a tile config as shown in this video?

[@Santiapps]

Ive made button cards on the new dashboard. Each button card is actually assigned to a group instead of an entity. How do I now make that button card open up the group entities within? Do I need to create views like you show for the First Floor example or will HA recognize it as a group and automatically open them up individually ?

[@MrMduzee]

This is very beautiful. Please advise on how can I change the colours of each Buttons !!

[@ZackBarett]

The Light entity changes the colors of the button

[@tonykrajcik6701]

Greetings from Slovakia. Thank you for another video. Finally I am able to create lovelace as I like. I saw that you have button Back to Overview in your rooms (in your previous video). Can you please post code for this "return" button on Pastebin? I like to know how to do it. Thank you.

[@DanGentry]

Great video! I've redesigned my mobile view based on these ideas. One question: is it possible to spread a card over multiple grid cells, like over 3 of 5 cells? Keep up the great work!

[@ZackBarett]

Unfortunately not. Feature request noted though!

[@michalbarton1572]

Awesome video. Would you mind sharing what Air Quality sensors do you use?

[@ZackBarett]

They are just demo entities. Sorry!

[@patrickdevries8794]

I'm a newby, but get lost with selecting scenes. Can you make a tutorial abouts scenes. Want to toggle living room light (all, but don't know how)

[@Allard9240]

Hi, is it possible to toggle lights between on-50% brightness and off from LoveLace? Would love to know how to do this.

[@167sandgate]

Hi I have just subscribed to your channel, what I need to know to start creating is the I have an iPad and what app would I need to download to start creating as you have here? Thanks

[@romanykemp9042]

Great job on the walk-thru of this video. I was watching someone else explain grid cards and found it hard to follow - maybe just me - - but had no problems following yours. And thanks for not playing background music - on an instructional video like this I find those "additions" annoying...I'm going to have to check out some of your other vids now :-0 Just noticed where Zack has not posted anything in 8 months - that too bad - I thought he was very good - but life can get in the way and he has probably found other projects more interesting...

[@ZackBarett]

Thanks man! Appreciate the kind words! Hopefully getting back into the YT game soon!

[@BruceGou]

Thanks for the great tutorial! Why don’t we have the columns setting on the grid setting?

[@ZackBarett]

This was using an old version of the Grid Card

[@TheAmazingpower]

Loving this clean view! How can I change my settings, that the cards are displayed below each other? Currently, when I add a new card they are placed beside each other. Currently, first the row gets filled and not column-wise like in your video.

[@ZackBarett]

You would need to place all of your cards inside of the 1 column grid to make it all stack

[@leopardzion4280]

How to make a group entity and scene? Thanks

[@markday3145]

Is it possible to move an existing card into a grid card (or wrap a grid card around one or more existing cards)? That would be helpful to clean up the appearance after you've gone through the work of setting up and customizing other cards (without having to redo that setup and customization).

[@aurelieseydoux3293]

How do you come back to the default dashboard? I created a new dashboard following your video just as test and now I have no idea how to get the original one! Thank you

[@CoachAntonioStarr]

I didn't have the light.all_lights entity. How do I set that up?

[@iqlogic]

Zack, many thanks for your video, it has really helped me. But one thing is catchy here - entity light.all_lights. How can I create such an entity, please?

[@sygys]

how did you manage to stack the cards on top of eachother. when i add 3 cards i get 2 columns and i cant get them in 1 row underneath eachother. ok i found it within the raw editor. but what if you want 2 rows of cards instead of 1? the cards are all over the place. i cant seem to set the right spot for every card. Is there a way to fix cards to a specific column and move them only up and down with the arrows instead from left to right and all over the place on all spots you dont want them?

[@charliedgabriel]

great video, know I can see how easy it is. could you do a scenes video or if you have one could you paste the video name. thanks for all of your time and help. great year!

[@ZackBarett]

Definitely will write that one down and create a good scenes video! Thanks for watching!

[@meierthomas]

Love the simplicity yet effectiveness of this. While it's cool to have a whole heap of info and switches on a dashboard when it comes to a "normal" user that looses its appeal pretty quickly. Learned a lot like the ability to "hide" additional details or a whole section/room etc. One thing I'm trying to get my head around is the layout across different devices. My main interfaces will be a wall mounted tablet (8-10 inch) and mobile phones. There's obviously different screen real estate behind these devices. What's the best approach to deal with this? Create different dashboards (mobile/tablet) with the downside of having to maintain two locations or work on a compromise which probably makes the mobile version crammed while it may look very lose on the tablet?

[@ZackBarett]

I would recommend two dashboards. Making the On wall tablet dashboard pretty simple as it should be a quick step up and press a relevant button

[@meierthomas]

@@ZackBarett thanks for getting back. So that means I have the maintenance effort to keep them in sync bit that shouldn't be too much of an issue once we have some stability. Will put in some thought first on the overall layout before creating the duplicate version

[@meierthomas]

@@ZackBarett I'm finally back onto this project, starting with the on wall tablet. Given the tablet is in landscape I would like to create a grid that utlises the full screen - possibly up to 9 columns. However regardless of how I configure the grid card there's lots of screen real estate left and right of the dashboard. How can I fully extend this? Is there some yaml to this?

[@MarkSmithMCS]

Can you address how to do the titles with no card background and the custom colors? Also, where are the Away, Goodnight and Good Morning scene icons from? Can't find them in the mdi or hass sets

[@stemer]

Hi, greetings from Poland! I don't have (newest stable HA) those switches in Grid Card - "Show Name?", "Show State?" and "Show Icon?". Also there's no "Icon Height". Are you using some beta/dev version or is it some kind of addon/module?

[@quimbarrera]

Hi, very nice video, I am actually doing a reorganization of my panel. I have a HA installed on Docker and I seem to not have light.all_lights entity (nor switch.all_switches). Is anybody of you having the same problem?

[@JB-jx3qf]

great tutorial! still works pretty much the same a year later. I do however found an issue. When I add the next card (the weather card in your example) it doenst place it below the grid card above. However I try it always places it next to it. Any ideas ?

[@ZackBarett]

You would need to put it inside of a nother grid card to ensure it goes below. On mobile it will be below

[@kimgnavpot]

How do you get your cards to stay under each other, after 3-4 cards, they move one to the right?

[@michalbarton1572]

I have few more questions as I'm trying to build very similar dashboard. How can i change the state colour? For example you have red for some light groups. And second, how to make dashboard scaleable? I want to fit width of the screen on both tablet and cellphone obviously and want it to be as big as possible to be easy to manipulate. On your monitor there is a lot of wasted space around it.

[@CaseySjolund]

I'm framing this up right now and when I started to add the entity cards (for the room view) after I got to a certain spot, it started to push the grid cards into a second column it self. For example it looks like this on my desktop: Lights Climate Entities * List of Lights Temperature It obviously looks fine on mobile though.

[@ZackBarett]

You may need to set all of your cards in a vertical stack or a grid card with 1 column

[@notchy12000]

I am still new to HA and I was following along with the video and tried doing something similar in my UI but how does Zack get those icons to show up. I put the icon images into the entry and it displays blank. Can anyone direct me with instructions on where I need to go to download additional files. (is it a theme?)

[@FabricioGC]

How did you change the icon colors?

[@rasbe6863]

Zack is there a way to "group" that mark down card with the grid card so it is always on top of the grid card

[@ZackBarett]

Yea actually! You can create another Grid with 1 column and group them or use a vertical stack