Create an AWESOME looking Lovelace Dashboard with no YAML Files in 2020! - Home Assistant - How to
ฝัง
- เผยแพร่เมื่อ 24 ก.ค. 2024
- Learn how to create a functional Lovelace Dashboard in just 15-20 min that's all created by you! Also, get a good look at what I think is the best mobile dashboard.
Sponsor me: github.com/sponsors/zsarnett
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Drop some love to the other social media:
🐤 Twitter: - / nkdzck
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Soft UI Theme: bit.ly/3q3Cmns
Synthwave Theme: bit.ly/3miPbbn
Windy Radar: www.windy.com
* Hamburger menu - Embed Widget on page
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
00:00 Intro
01:00 Creating a new dashboard
02:39 Explaining the Dashboard
04:49 Build the Lovelace UI
12:40 Themes
13:33 Mobile Dashboard
17:48 Outro
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Music provided by Monstercat:
Grabbitz - My Cloud
/ monstercat
/ monstercatinstinct
#HomeAssistant #Lovelace #HomeAutomation - แนวปฏิบัติและการใช้ชีวิต
![[ไฮไลต์] ฟุตบอลชาย อาร์เจนติน่า vs โมร็อกโก รอบแบ่งกลุ่ม | โอลิมปิก 2024](http://i.ytimg.com/vi/wE6uYH0yyzM/mqdefault.jpg)
Would you all be interested in a series of videos on designing and creating different Dashboards and layouts?
yup
Indeed. Happy to contribute existing views and maybe offer tips to improve.
I appear to have - in very little time - built some quite complex cards but have a lot of repetitive YAML. Would be keen to understand how to reduce duplication and have more reuse.
Different dashboard ideas would be great... minimal dashboard, map based, different approachs for kiosks etc...
Yes very much so
hell Ya!!!
Thanks Zack, the best lovelace dashboard tutorial i've seen. Keep up the great work.
Thanks for the idea with the clickable rooms, cleaned up my index real nice
Thanks a lot for this tutorial, a great starting point for moving to Lovelace, greetings from Switzerland
sweet, never thought of using dashboards like that! Gonna try that out now with the family dashboard.
Quick follow up - made a dashboard similar to what you did and it's a huge hit with the family. :)
Please keep them coming.. so useful.
This is just what I needed, thanks!
Hey Zack, i see you have worked your magic on the grid card. So i think you are the right person to ask if it's possible to work your magic on the conditional card. Currently it's only showing when ALL conditions are met. It would be nice if you could toggle it from ALL to ANY condition. This would improve displaying cards and you do not have to make duplicates for 2 different events that require the same data to be displayed.
Great tutorial. Thanks! I would be interested to know where the "circle-elements" at the top of the automatically generated dashboard come from or how I can create them. Nothing like this appears on my automatically generated dashboard.
Nice tutorial. I have used some of your ideas and did my first dashboard. Thanks men
This is really great. thank you... subscribed!
Great Job Zack, I am trying to find out if I can do similar with my HA dashboards. I have a lot of stuff that was integrated into HA. My family room has 5 lights, media controls and Thermostat located in that room. How could I create a GRID card where I can have all in a nested grid stack? If you can give me pointers on the oe stack the other rooms can follow.
Thanks
PM
Great video. I'm starting with HA and finally learned how to control a dashboard. Thanks!
Question: how do you switch places? For instance move the middle column to the right. And move the right column to the far left.
Great video Zack, I finally got my act together and created something nice for the family. One thing though, how do I make the app open this up instead of the default dashboard (which I want to keep for PC's), if I try to modify the URL's in the App config, they just reset to the defaults set up in Configuration -> General, which I'm not sure what consequences it will have if I modify those?
Awesome, thanks so much. Greetings from Germany.
thanks, very helpful. Question, on the weather card, how did you get the UI of the days of the week and weather forecast? I see you have "weather.home" in the code editor, but that errors out for me
How do you go about modifying values? Specifically, I have temperatures that are coming out with eight decimal places, so round (1) would be called for, but I can't make it work in the code editor for the card.
How do you use button card to call a specific scene? I seem to only get an error with could not call service, scene Turn off, service not found. Is this a common error? All I can find on other sources is that they reccomend using glance card instead.
This is awesome, thank you 👏👏
Thanks for watching! Glad you liked the video
Hi Mate, any chance you can tell us how the 3 buttons were created in the extreme right bottom love-lace card
Ace! Just need these little changes pushed to stable and this will be great
Very nice tutorial! Thank you!
Hi Zack, @ 4.50min you show the new dashboard, how can one replicate the 3 buttons in the footer of the right most bottom card? Got everything else working just cannot find a way to replicate the "Toggle Fan", "Cooking" and " Clean up" buttons
Great video. Thanks!
Great video and nice ideas for dashbords. I create my own dashboard with your instruction. One thing does not work. There is no change to create the navigate action in the card. Everytime I get the message configuration errors --> Required key "tap_action.navigation_path" is missing. And I can't go back to the visual editor (no link to go backj). How did you do it?
Nice work, but i have a issue that i can't seem to solve. When using a grid card the icons are max 1/3th of the availible witdh. Like the weather forcast is only 3 days. any ideas?
How did you get the Footer button centered? I’ve added one, but its on the left side of the footer
Thank you for the great tutorial! I'm wondering tho how to set the width of the grid when not using an image header? Can you set a percentage or pixels?
You can not set the width of the grid. The grid takes the full width of the column. Column width is determined by HA
I'm trying to create a set of music stations per room (per dashboard). Is it possible to aquire the active lovelase dashboard so i can select a mediaplayer per room?
Hi Zack, When I create a new Lovelace Dashboard and click on the newly created one I only see a circle timer and that is it nothing after two days of running also nothing after a HA Restart.
Any thoughts? Do I need to add something to configuration.yaml
Hey man, thanks for the helpful content! Can you point me towards how you got a custom color for the room grid buttons on your mobile dashboard?
Is it the custom CSS card mod? I don't really understand that yet.
Great video, thanks! Any particular reason to create multiple dashboards for each room on mobile? I feel it's a bit overkill since we can have a Mobile dashboard with a View for each room and navigate between them using the top menu with icons and / or the custom navigation buttons. It's also work great and I feel it's a bit more lightweight.
Yea definitely a reasonable layout. I like the multiple dashboards because I use one view for the room overview and one view of my rooms. So that all of the Dashboards (Overview and each room) do not have tabs. I think its cleaner and easier to use this way. But I have also used multiple views and it works just as well. Comes down to personal preference in the end.
I can not seem to make buttons to activate my scenes, only scripts. Any idea on the why?... I seem to create my buttons like yours are but it tell me fail to call service scene/turn_off
Great tutorial. There should be more mobile friendly dashboards out there
Definitely agree. Mobile Dashboards are probably what a lot of users use but there are very few tutorials or examples for mobile
Hi Zack, nice tutorial. I was wondering how you disabled the square cards. The clips cuts off just before you set the value.
There's actually a toggle switch in the latest update. Delete the square line he added and just turn it off using the switch.
How did you make the color of your button cards red and yellow?
how can you do this for a tablet ?
I`m trying to do these but they show really small ..
is there any way to manually increase the size of the cards and icons ?
Great Video! Hello from Hutto!
Awesome video, thanks appreciate it , do some more videos pls like this.
thank you for this tutorial👍
so how did you get the image ( 'local/living-room-image-1.jpg' ) can you explain more on this !
Zack, again awesome video. Question I have is there a certain pic size for the image header in the entity cards or will they auto adjust and cover?
The image works better as a longer image. Meaning Rectangle. Aspect I used was 1920x500
@@ZackBarett Great and thank you.
I would really like to learn how to get past the instance blue bar page. Im struggling terribly. Im a newbie at its best. Im using an Amazon fire tablet 11th gen.
Where did you get that embed url from?
interesting .. I have trouble straight from the beginning .. where you enter square: The provided value for "square" is not supported by the visual editor. We support (boolean) but received (null).
There is now a switch for it in the visual editor. Just toggle it off and don't add the square line of code.
Great video. I'm new at this but this started me. Only thing, when I can't get the weather card in the beginning not to be square
square: false
@@markoomahen877 thanks
At 7:00 while you're adding the Scene button - what if I want to add only one button in this line, how can I expand it? Instead of putting other 2 entities to fill out the space of the string?
Set the columns of the grid to 1 or instead of a grid just add the button
@Zack Barrett I saw you added a button to run a scene, how do you make the scene work when you press it?
I have the same problem. @Zack Barrett - I did same button and it's not working in HA.
you have to make a small change to yaml editor:
it should look like this to work:
- type: grid
cards:
- type: button
entity: (your scene)
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: (your scene)
let me know if this helps you
Hey Zack, for the life of me I can't get this to function in the latest HA (where columns are supported in gui code editor) - I'm trying to recreate what you have here, only difference being the buttons at the bottom. The issue I'm running into is that the weather card is doubling its size - so whilst this is clean on yours, there's a load of black area above and below mine. Do you know what I could do to fix this? Cheers!
NAILED IT - you must set square to be "false" as opposed to null!
One more question, can you implement a dashboard into a grid on another dashboard? (this would create awesome modularity)
I am sure you probably could using YAML. I know people have methods of creating !includes that reuse their YAML code.
Zack, Once you have created a mobile dashboard, how do you make sure your phone then opens that dashboard and not any other?
Profile and select the default dashboard. That setting is based on the device not the user
how do you add themes
thanks
Hi,
First of all congrats for the excellent tutorial.
I managed to do it for my home. And it looks nice if I have the HA left menu open. Like that stays in 3 columns.
But if I close it, HA Lovelace put the cards in 4 columns. The information is there, but to small.
There is no way to force to use only 3 columns?
You could use a stack card to force the 3 columns. Placing each of the cards you want in one column into one vertical stack card
@@ZackBarett Yes it's possible.
But in the mobile phone it will not be so easy to see.
At the same time I can create as you said, a dashboard only for mobile.
When I save layout it changes the cards position :(
Can you also explain how to add the themes or link us a page where we can get details on how to add themes. I checked the link to the themes in your video description but do not have clarity on how to install and use them
Hi, Themes can be added to your Home Assistant by adding one config entry and a new file. Or by simply using HACS.
Configuration.yaml:
frontend:
themes: !include themes.yaml
themes.yaml (same folder as the config file):
theme_name:
theme_vars
HACS is also a great way of finding and installing themes. HACS: hacs.xyz/
www.home-assistant.io/integrations/frontend/#defining-themes
@@ZackBarett Thanks!!
so I see all the instructions and I can follow it. But one thing no one says is how to show a certain dashboard to a mobile device only, and then a different dashboard to a different device
looks like in the latest version of HA, nested grid cards are not allowed. I cant add different cards once I change the columns: 1
I am on a dev version. The feature is already accepted. I am trying to make sure its in the next dot release for .118
@@ZackBarett that would be great
In your video while adding a footer for the entities card for 'group toggle' - you had only 1 light; but I have 7 lights in my living room. I tried adding the entities using a comma after the entity for additional values but ofcourse that gave me an error. any tips on how to add multiple lights?
footer:
type: buttons
entities:
- entity: light.wled_2, light.wled
icon: 'mdi:lightbulb-group'
name: Toggle Living Room
www.home-assistant.io/integrations/light.group/
I would use a light group. This does require config yaml editing.
Another way that doesnt require YAML. You can create a script that once it runs toggles multiple lights.
@@ZackBarett Thanks a lot - will try it out!! Just just 2 Fire 10HD tablets and planning to have this up and running over the weekend
Is there a way to have a button card that turns off multiple devices. I have my monitors on smart switches I'd like to be able to toggle the button card to turn them all on and off
Hi, I would create a script that turns off what you want. And then run that script via a button
@@ZackBarett Or create a group and use that to switch everything
Great work here, I understand the dev issues. I cannot figure out how to get an embed link from windy.com to work?
Thanks, Randy
gyazo.com/84ec71daa60ee34a54f6182abc328afd
You will need to copy the Iframe html they give you into a note pad. and then just take the src from that. It will be a long https link
@@ZackBarett Got it thanks!
Example
embed.windy.com/embed2.html?lat=39.695&lon=-82.441&detailLat=39.695&detailLon=-82.441&width=650&height=450&zoom=7&level=surface&overlay=rainAccu&product=ecmwf&menu=&message=&marker=true&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=mph&metricTemp=%C2%B0F&radarRange=-1
Which theme you are using for you lovelace? Can you share it?
Second question: Before creating the grid cards do i must enter a vertical stack card or not? Or in UI it is authomatic? Still working on YAML mode but i want to learn as soon as possible to switch to UI mode...
Theme is default dark theme
You can enter a vertical stack but its not necessary. If you want it to be in a vertical stack then yes you need to add it before hand
@@ZackBarett So i need to declare a vertical stack before the grid cards in the code editor?
I can't go back to visual edit mode after I change the Grid Layout Columns in the editor mode. =/ How can I do that @Zack Barett?
The feature is still in dev. I would just set up the cards first and then add the columns yaml
@@ZackBarett Thanks. I had the same question. Do you have any idea as of when this will be released ? :)
@@olivierleplus it will be in the next release. It doesn't look like we are doing another dot release for .118
@@ZackBarett Thanks Zack. And any idea when we can expect the next release to ship? ^^
@@olivierleplus Dec 13 th
for me it does not work. Creating a Grid Card with Columns: 1, I get only the same sizes of all Cards and can not edit each one alone in Size...
How do I make my pictures smaller? I'm trying to make the mobile view but my images are getting to "big"
Can you be more specific? Which pictures are too large? Also, check out the #frontend channel in the HA discord! There are a lot of people in there to help!
@@ZackBarett yes my pictures are not the same size and to big. I tought it was possible to control the size in the card
great video i seen in the comets that someone asked about the windy .com i watched the short demo of what to do i am not sure where to paste what i copied can you help thanks
Yea so you pull the src from the Windy Iframe imbed and paste that into the Webpage card URL
@@ZackBarett ok that's what i thought i should do but when i do this my HA ui pops in multiple times like when you face to mirrors at each other. thanks for the quick reply
could you help me with mines via a remote....
At 16:00 you show adding the "back" option, but you add the navigation to the button card for the light. In the demo you click on the "Back to Room Overview" card at the top of the view.
What type of card is that? If I choose a Button, it's much deeper than that and takes up a lot of space. Ideally I'd like an mdi:arrow-left and the word "Back", in a slim card like yours. But if I use a Markdown card, there is no Navigate option.
OK, if I hide the icon, I get the same as you ;-)
Would still be good to emulate mobile design with a left aligned mdi:left-arrow and text
Exactly, I have removed the icon. The entity chosen doesnt matter but yea that would be nice to have a back arrow. Maybe you can emulate it via
@@ZackBarett did that. Looks naff ;-)
Closest I've got it an input_text with the name 'Back' and the icon set to mdi:arrow-left
Event with a " " space, I still get an underline where the value should be...
@@ZackBarett But no Navigation option!
@@Corneloues Yea there is definitely not a good way to add in the arrow right now. Maybe something that can be looked at in the future.
Another question: I have placed my image under /config/local but the path is not getting resolved. You have used /local/ in your video - can you tell me where the local directory is created?
header:
type: picture
image: \config\local\living-room-header.jpg
tap_action:
action: none
hold_action:
action: none
The file should be under config/www. Its confusing I know...
@@ZackBarett Thanks a lot...I just did that.
Initially I put the image directly under www folder - did not work
now I have created another folder 'local' under www and put the image there - still does not work
basically to be safe I have put a file under /config/www & also under /config/www/local
STILL NO LUCK...:: any inputs? below is how my config look:
header:
type: picture
image: local/living-room-header.jpg
tap_action:
action: none
hold_action:
action: none
@@ZackBarett Ignore my previous comment...cleared the cache and worked like a charm!!!
Some really nice tips on how to use standard HA Lovelace to create good looking interfaces. However, don't make everyone fear YAML, it is not hard. What is hard about YAML is knowing what the options are. Videos covering styling with YAML would be welcome!
What resolution are you using for the photo headers?
1920x500
@@ZackBarett thanks! Looking forward to the release where I can change the columns and still have visual editor!
Not sure I am doing something wrong but as soon as I try to edit the config of the card to change the columns number I can no longer go back to the visual editor. Instead I get that message:
UI editor is not supported for this config:
Key "columns" is not supported by the UI editor.
You can still edit your config in yaml.
Hi. I am running the DEV instance of Home Assistant that runs the latest code that's pushed. So we fixed it so that you can still use the visual editor when specifying columns but it may not have made it up to Production yet.
@@ZackBarett The privilege of being a Home Assistant dev ;)
If I may ask is it normal that adding a card is slowing firefox to a crawl...This makes adding new card a real pain
@@PhilippeLeToquin haha indeed.
About the slowing to a crawl. I definitely do not think that is normal haha. How many entities do you have in your HA instance? I have seem where over a thousand or so starts to slow it down
@@ZackBarett when I select all the entities it says 291! so should be good. If it is not normal I should ask on the forum rahter than hijacking you here !
@@PhilippeLeToquin It may find better answers as a GitHub issue on the Frontend Repository. With a Gif or Video of the issue
Hi Zack
Is there a way to break the boxes, meaning you have a row with 3 columns and the next row you have 2 columns but the first one has the width of 2 column of the row above.
+++xxx+++
++++++xxx
+++xxx+++
There is not a current way to do this. Sorry
@@ZackBarett Thanks for the fast answer! 👍
I just thought if somebody knows a way you would be the one who could advise.
@@RogerStocker there may be a way to hack it that way potentially. You have me thinking now. Going to look at doing that
@@ZackBarett Great 🚀
HI,
can you tell me please how to add jpeg picture in home assistant.
To add a JPEG image into Home Assistant to be used in a Lovelace config, you can do two things. First one is easy, find the image online or add it to imgr or somewhere. Grab the .jpg url and use that for your Picture Header or Picture card. Second, you can save the image to the .homeassistant/www folder (.homeassistant is just the root folder of your Home Assistant instance) and then use the image in the picture header using "local/image_name.jpg". Hope this helps!
What size of pictures you using?
I got the latest HA update but when I follow your examples to create the weather card using the Grid Card Configuration. I get error of "UI editor is not supported for this config: Key "columns" is not supported by the UI editor. You can still edit your config in yaml." This happen after I edit the editor with columns: 1 and save okay. What did I do wrong?
You will need upgrade to beta for that
The full release is coming on the 13th
@@ZackBarett I accepted Channel beta? I do upgrade to Version: 2020.12.6 and Newest Version: 2020.12.6. Reboot the HA. I edited the dashboard, still the same issue. How do I upgrade to beta version?
@@mrteausaable upgrade via the supervisor page to 1.0.0b0
@@ZackBarett I am at the Supervisor page. I see beta channel but no way for me to check upgrade to beta version.
Hi, Zack. When I make the first step to include the weather card and try to add columns: 1 by code, I get the following error on the card:
"UI editor is not supported for this config:
* Key "columns" is not supported by the UI editor.
You can still edit your config in yaml. "
And it no longer allows me to add more cards graphically.
What could I do?
Hi. I am running the DEV instance of Home Assistant that runs the latest code that's pushed. So we fixed it so that you can still use the visual editor when specifying columns but it may not have made it up to Production yet.
What you can do for now is remove the columns config. Add the cards and then add it back after all the cards are added
@@ZackBarett Thank you for answering, and I am a faithful follower of your channel from the Dominican Republic
@@ZackBarett What version code is that? 0.118.4 or later?
@@rufus4779 it's the dev version. So unreleased
@@ZackBarett I am facing the exact same issue...would have been good to have that specified when u were explaining....have been breaking my head since last 1 hour :)
looked the comments now ...
I don't see the header and or footer option. How do you turn that on?
Header and footer UI config was added in 0.117 or 0.118 so it depends on the version of HA
@@ZackBarett I have 0.118.4
@@SVRockChalk then you should see it in the entities card
@@ZackBarett Thx, i have been looking for it in other cards.
Psst square doesn't work not supported
Question: Is there a way to have my dashboard automatically default to mobile if I open it on my phone. Or do you just open HA then select the mobile dashboard? I guess if its the latter it may be considered a what the heck submission.
Yes you can! If you go to profile on your phone there is a default dashboard option. This is a per device setting
@@ZackBarett Thanks Zack had the same question. Also awesome tutorials and very understandable.
Hi
Im using the new grid option as you have but entity looks great until something is too big on your mobile ie the temperature, date, state etc. Is there a way to size the text in entity ?
There is not a default way to size the text
Is this just for home assistant ?
This video is just for Home Assistant's Lovelace UI
@@ZackBarett 😔
Are U trying to help or just showing off?
unfortunately everything is different in the latest OS.
That’s the problem with these open source things.
They have a half-life time of some weeks.
lets go ahead and.......and lets go ahead......ok so lets go ahead and d.........and lets go ahead a...
as helpful as it is, the constant 'lets go ahead' annoyed me to the point of turning it off - American TH-camrs eh?
It is really disappointing and frustrating to see a tutorial that you cannot replicate on your computer because what you show is only possible by having the DEV instance of Home Assistant.
Please avoid this method of disclosure in the future.
Furthermore, the title of your video is also deviant when you write "with no YAML Files" as it is only partially true and only for you who have the DEV instance of HA.
Hi, I didn't realize at the time of making the video that the feature I was using wasn't released yet. I apologize and will make note of what version I am running and when to expect the feature in future videos.
The feature will hopefully be release in the next dot release of 0.118 as I have talked to the devs about adding it in. Or it will be available in a couple of weeks for 0.119. Either way, everything can be accomplished that is in this video with out the feature you are referring to
Furthermore, the title of the video still stands as you still do not have to edit YAML Files. I did mention in the intro we would be editing YAML in the editors but not actually opening files and editing them in a file editor.
@@ZackBarett Thanks a lot
Oh, that's why I couldn't replicate it ^^
Tip : to avoid sounding like a lemming, stop using the phrase "go ahead".
Watch your video, listening for that, and try to find one instance where the "go ahead" adds any value to what you are saying.
Relax. I enjoy his voice and personality. You can tell he’s a genuine guy, knows what he’s doing, and he explains things well for noobs like me.
@@eclecticlight.design thank you for reminding me to relax. So often, one forgets that relaxing is good to avoiding cortisol production. I suppose that relaxing will allow me to be healthier which will allow me to visit more places and be more worldly. So often, a well rounded world view is pre-empted by our tenseness. Perhaps my newfound relaxing will allow me to get to more locations earlier, allowing me too to "go ahead"...
OR...
I might just continue to understand the negative impact that "linguistic convergence" has on the listener's ability to focus on the message.
Had you not been an ignorant person, you might understand that I was being relaxed and I was offering advice that would allow the audience to better follow the content of the video without the distraction that linguistic convergence causes.
@@KarlMiller you’re not offering advice, you’re just being a dick.