A different take on designing a Lovelace UI

Pablo_Gustavo_Fiscel · July 9, 2021, 10:29pm

With what app do you create the svg icons?

mhackdo18 · July 11, 2021, 5:18am

any body knows why text is not appeared on IOS

Thanks Man Cheers

Pablo_Gustavo_Fiscel · July 11, 2021, 5:50pm

What text?
The same thing happens to me with images that are deformed because they reach the bottom of the cards. I assume that the versions of the browsers do not include any attribute

mhackdo18 · July 12, 2021, 10:33am

Hi pablo its okay now but the problem which im working on the couple of days. i nee to create hui for weather so that it will be align at center and 3 forcast shows only. everything my weather card is inside conditional card some times working sometimes not see the diffrence of the photos of weather forecast.

Pablo_Gustavo_Fiscel · July 12, 2021, 11:17am

The card shows 5 days. If you want less, you will have to put it together yourself.
It puts in the programmer tools what values the climate vector has to know how to display it

mhackdo18 · July 13, 2021, 4:44am

Thanks… I used custom weather and edit it the js files now its okay…

mrpharderwijk · July 13, 2021, 8:23pm

@Mattias_Persson Thank you so much for all the inspiration. Your icons are amazing! Besides that your take on lovelace made me learn home assistant even better and faster. Still work in progress but getting there!

Thanks again!!!

[UPDATE] A lot of your requested the config for this lovelace ui, so I made a separate topic to share the codebase when it is officially released!

flyingdutchman7588 · July 14, 2021, 5:56pm

Wow! This is absolutely amazing!! For someone who just got into the HA community last week, this is both inspiring but also overwhelming. I have a couple of questions:

How do I get a grey background or black background for my buttons?
How do I get the Hue lights set so that when I click on a bulb it shows me the brightness with the color picker similar to what you have under “Lights and sensors”

Mustafa_Fathy · July 14, 2021, 8:13pm

@Mattias_Persson your work is very nice and genius.
I have a little experience in home assistant dashboards, so may you help me to install your work in my OS.
can you give me a steps?

mrpharderwijk · July 15, 2021, 7:09am

Hi fellow dutchman ,

I understand this can be overwhelming. I’m in IT (developer) and for me it is also a lot to comprehend. So it is not just you .

To style and edit your buttons install GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant from within HACS (https://hacs.xyz/). When defining custom:button-card there is a property style: you can use to alter the looks of your buttons.
This can be achieved by reading the entity's attributes brightness if I’m correct.

If above seem like acracadabra to you, it might be worth to head over to YouTube and search for some lovelace dashboard tutorials. The more you build yourself the easier and better you get…

flyingdutchman7588 · July 15, 2021, 5:50pm

For point #2, I wanted to know more about how to set up the layout like his HA. Not so much what entity is being read but more how did he put the brightness layout in that format as well as the custom color selector.

mrpharderwijk · July 21, 2021, 6:40am

That’s because for the font size you’ve used - font-size: 4vw (see state). The vw CSS measering unit looks at the viewport width hence the VW and thus when the viewport width gets smaller the font will get smaller as well. You can try using rem, px, pt, % and play around with them. I just use the rem unit for my font size, padding, margin etc. to keep it consistent over all media queries.

TLDR; For you maybe - font-size: 2rem or - font-size: 3rem, should do the trick. Play around with the numbers…

swifty · July 21, 2021, 11:00am

Has anyone made any additional animated icons that fit with the style of Mattias ?

I’ve had a little play with creating some vectors, but my skills aren’t great in that department, so interested to see if anyone has any extra icons to share!

l19bal · July 21, 2021, 11:46am

hey @Mattias_Persson this is seriously amazing! definitely the best dashboard i’ve seen! i’m a little confused as i cannot see any guide on how to install it. i’ve added the custom components in HACS but it seems some of them are not in HACS - i’ve added them manually by copying the folder over into www/community and reloaded/restarted HA but again they are not appearing. when I added the

lovelace: 
    mode:yaml

part into my configuration.yaml my entire dashboard breaks and it cannot find any components. what am i doing wrong? any help would be greatly appreciated! thanks

Pablo_Gustavo_Fiscel · July 21, 2021, 3:24pm

Thank you. Because of the translation, I misinterpreted and that’s why I didn’t understand.

Equally. It does not scale the font size. Now it is of the initial size

Pablo_Gustavo_Fiscel · July 21, 2021, 3:33pm

Hi @Mattias_Persson.

Why can it be that on a mini ipad the image of the device_tracker is stretched to the bottom? On all other devices it looks good. On the ipad the image respects the width but the length occupies the entire card.

Thanks

Drealine · July 22, 2021, 7:00am

Hi ,

I’ve got this error :

ButtonCardJSTemplateError: TypeError: Cannot read property ‘state’ of undefined in 'const state = states[‘script.home_leave’].state === ‘on’ ? ‘locked’ : null; if (states[‘lock.dat…’

Anyone already have this error ?

Thank you,

mysciencefriend · July 23, 2021, 6:32pm

Oh my god why didn’t I come and read these posts first! I have been pulling my hair out for 2 days trying to figure out how to get the formatting to apply, including starting from scratch with a totally fresh HA install… and all along all I needed to do was select “tablet” as my default theme

Thank you for this write up!!

nhanld · July 24, 2021, 3:55am

Hello guys. How to deploy it on a new hassio? I’m a newbie so I don’t know how to install it. Please just help me through the video if possible. Thanks

Vasco · July 25, 2021, 9:20am

@nhanld no one has a video. You should get familiar with Home Assistant first. Also read this: