A different take on designing a Lovelace UI

MaxBec92 · August 8, 2021, 11:04am

Hey guys,

do you know how to update the hassio core via a button click on the lovelace interface?
I didn’t find any solution for that yet.

All the best,
Max

remy1010 · August 8, 2021, 1:42pm

Hello,

I really like this dashboard so I tried to copy all the files to recreate it for my own HA instance.
I changed the theme to “tablet”.

I can’t get it to work, things that are not working properly are:

layout is not right, for example the 3 icons at the buttom of the sidebar are at the top of the next column.
popups aren’t working
Overall there seems to be less margin between the tiles, so it can’t fit the same tiles on the screen as the screenshot.

I also noticed that the custom icons that are included are not showing up right to.
I attached a screenshot to show what I mean.

Some help yo get me started on this dashboard would be greatly appreciated!
Maybe I just forgot some obvious thing.

remy1010 · August 8, 2021, 1:45pm

I had the same issue, seems that the used integration “layout-card” is changed.
I used the folliwing instead and that seemed to fix it.

- type: custom:layout-card

pedolsky · August 8, 2021, 3:53pm

Do you mean the service call service: homeassistant.reload_core_config ?

remy1010 · August 8, 2021, 5:16pm

I see in your screenshot your dashboard is similar to mine. (icons and layout not working)
Please let me know if you fix any of these issues

Mattias_Persson · August 8, 2021, 8:16pm

@cristi.costache @remy1010

modern browser and clear cache
select the theme “tablet” Link to User profile – My Home Assistant
use valid grid if you edit layout https://grid.layoutit.com/
if you remove certain cards, the theme selectors targets the wrong cards #1309

Mattias_Persson · August 8, 2021, 8:19pm

I’m using Home Assistant Container Installation - Home Assistant

https://github.com/philhawthorne/ha-dockermon
Connects to docker sock so you can start/stop containers from hass
https://github.com/containrrr/watchtower
Updates containers if new images are available

Watchtower is configured with --run-once. It’s stopped until I press the switch in lovelace - communicates with ha-dockermon which starts watchtower. So all containers are up to date at least once a month with hass release schedule

Mattias_Persson · August 8, 2021, 8:21pm

Maybe a browser rendering issue, also mentioned here

cristi.costache · August 9, 2021, 5:54am

Hi Mattias,
First I want to tell you how much I appreciate your work. This is clearly the best design I saw for home assistant.
Regarding my problem, indeed for browsers is working fine now (I cleared the cache as suggested: @remy1010 you’re design look different because you changed the grid-layout to layout-card. Change it back and clear the browser cache and it will work), but the main problems are for ios hosted apps. This is strange because I know you developed this interface especially for ios.
Do you use it with browser or with home assistant application?
Do you have some hints regarding this issue?
Best regards,
Cristi

remy1010 · August 9, 2021, 9:44am

Hi Mattias and Cristi,

thanks for your help!
I changed the grid type and cleared the cache.
It looks some better now, but the icons on the buttom of the left sidebar are still different from the example.
Also the pop-ups aren’t working.

Any clue why?

Attached how my dashboard looks now, I removed the conditional media section myself because it was giving me errors.

cristi.costache · August 9, 2021, 10:39am

Hi Remy,
Do you have browser-mod installed?
Regards,
Cristi

remy1010 · August 9, 2021, 11:58am

Yes it is installed.

Do I need to configure/change anything for browser_mod?

I saw some references to the Galaxy tablet for browser_mod but for now I’m only viewing this in the browser, Mac OS/Windows apps and tablet will be relevant is everything is set up.

MaxBec92 · August 9, 2021, 12:20pm

Thank you @Mattias_Persson ,

but is there a similar solution for a non-docker installation?

swifty · August 9, 2021, 12:42pm

Yes that’s exactly it - the same as the screenshot you linked.
Not sure why it does it, as it does display correctly sometimes - I think it could possibly be related to the animation as it mostly has the error if the TV is already on when HA restart or the dashboard reloads, but if I click the button on the dashboard to turn the TV on then it seems to work OK.

damiantje99 · August 9, 2021, 5:20pm

U should put browser_mod: in your configuration.yaml. Probably already is, because Mattias used it for his tablet, but you could just remove is and only add browser_mod: to it.

When you did that, restart HA and after it fully booted, refresh the page. It should work.

Mattias_Persson · August 9, 2021, 5:50pm

I’ve never encountered it (chrome), but my best guess is icon_tv in button_card_templates.yaml,
fill="url(#A)" gets its color from linearGradient above. Try fill="blue" instead, ignoring the gradient. Could also be state/animation issue.

Mattias_Persson · August 9, 2021, 5:50pm

Well, you always have the CLI option

OS/Supervised ha core update
Core pip3 install --upgrade homeassistant

Shell Command can run this as a service, and you call that service with a tap_action on a button.

Mattias_Persson · August 9, 2021, 5:52pm

I’m using macOS - Chrome/homeassistant-desktop
Android - Fully Kiosk Browser
iOS - Home Assistant (Companion)

You can clear cache in the iOS app too,
sidebar → app configuration → debugging → reset frontend cache

Reaper0n3 · August 9, 2021, 6:13pm

I’m sorry for asking this, but I’m 100% noob when it comes to HA. how do you even install this?

remy1010 · August 9, 2021, 6:52pm

Thx for your help, I commented it out a while ago because I thought… Well I didn’t think I guess
Popups are working now.

I will just look for other icons (from materialicons) to workaround the custom icons not working issue.