A different take on designing a Lovelace UI

Share your Projects!
1511

I think you should see this as a complete configuration as an example and not a package you can install. So just take the individual parts and read the readme for some clarification.

The way I did it is by copying all the files from the repo and merge them with your own configurations.
Install the addons from HACS from your own instance. (files in /www/community)

And after that removing everything I don’t need. But still had some issues so might not be the best way.
Since I was also struggling with this I want to help out, but maybe someone else can help you better.

1512

I appreciate any help. I’m going to take a snapshot before I do any major changes.

1513

Unfortunately this is not working. Am i doing something wrong?
Error-Code: 127

shell_command:
    ha_core_update: ha core update

- type: custom:button-card
                  entity: sensor.hass_version_installed
                  triggers_update:
                      - sensor.hass_version_latest
                      - sensor.hass_version_latest_beta
                  name: Aktualisiere HASS
                  icon: mdi:update
                  styles:
                      card:
                          - filter: >
                                [[[
                                  return entity.state === (states['sensor.hass_version_latest'].state ||
                                  states['sensor.hass_version_latest_beta'].state) ?
                                    'opacity(30%)' :
                                    'drop-shadow(3px 3px 5px #00000050)';
                                ]]]
                  tap_action:
                      action: call_service
                      service: shell_command.ha_core_update
                  template: icon_name
1514

Thanks for the tip - I tried this out but it still has the same issue, so doesn’t appear to be related to the gradient itself.

I found that if I sit and refresh the page (just using the browser refresh button) it will almost 100% of the time alternate between displaying correctly, and displaying skewed like the screenshot you linked.
It’s very strange, and so far I have only seen it affect the TV icon - none of the other animated icons do it.
I’m using Chrome too (for Windows).

1515

That is weird but hard for me to troubleshoot :sweat_smile:

1516

This should work:

https://my.home-assistant.io/redirect/profile/
Create “Long Lived Access Token”

shell_command:
  update_core: 'curl -X POST "http://supervisor/core/update" -H "Authorization: Bearer LONG-LIVED-ACCESS-TOKEN" 2> /dev/null'

source

1517

Hello,

I have put the www folder, popup folder, button_card_template.yaml and ui-lovelace.yaml and change file configuration to lovelace mode yaml and I have that :

image
image1808×937 68.5 KB

(in the include folder, I have just add theme.yaml. Is it sufficient ?)

Can you help me ?

If you need file configuration let me know.

Thank all in advanced

1518

Unfortunately not… That’s the error:
21-08-10 14:55:48 ERROR (MainThread) [supervisor.api.middleware.security] Invalid token for access /core/update
I tried the Token itself and the name of the token. Both are not working.

1519

This worked now:

shell_command:
    ha_core_update: 'curl -X POST "http://supervisor/core/update" -H "Authorization: Bearer $SUPERVISOR_TOKEN" 2> /dev/null'
    ha_supervisor_update: 'curl -X POST "http://supervisor/supervisor/update" -H "Authorization: Bearer $SUPERVISOR_TOKEN" 2> /dev/null'
1 Like
1520

Can you share background wallpaper?
Thank you.

1521

Did you change the theme of the currently logged in user?
You can change that on each device or session by navigation to the sidebar and your user logo at the buttom.
Choose “Tablet” for theme.

Also merge the configuration.yml for stuff like the includes and copy the entire include folder to your filesystem

1522

Theme user is OK
configuration.yaml is linked with the include folder
but if I add all yaml file in my include folder I have that :
image

1523

All the values in the secrest.yaml are replaced with [redacted], this is because secrets.yaml is meant to contain sensitive information.

I just stripped it down as much as possible.
If you don’t know where to start, just start by replacing [redacted] with a random number. I think that will at least pass the configuration test and it won’t affect the look of the dashboard (besides possble errors of course).

1524

Thank you, I tested but there is no change …

I don’t no why

Is it because I have home assistant OS ?

image
image1768×824 152 KB

image

If you have an idea it would be with pleasure I like this interface so much

Thank you again for your precious help

1525

I also use Home Assisstant OS, without problem, so that’s not it
maybe something to do with the resolution you are using?

1526

As you can see in the following picture, the unavailable light (Toilet top) has white color.
image

what should I change in the code. I guess light_color is the right place to change?

image
image957×184 6.44 KB

1527

I think the resolution is correct

But I don’t install fully kiosk integration but I don’t use fully kiosk so I don’t need install that ?!

Maybe an integration or an extra frontend that does this

It sure I have make mistake but where I don’t no

On my lovelace when I make CTRL + F5, I have long scroll bar and I once have that :
image
And once that :
image

1528 
light_color: >
  [[[ return entity === undefined || entity.state === 'unavailable' ? 'var(--state-icon-color)' : 'var(--button-card-light-color-no-temperature)'; ]]]

whoops, yes. if entity is undefined or unavailable return theme variable “state-icon-color” else “button-card-light-color-no-temperature”…

1 Like
1529

You don’t need to install anything really, just look at the structure of ui-lovelace.yaml. card-mod for styles, button-card for buttons and layout-card for grid. The rest is optional.

1530

That’s what seemed to me but even with that I can’t seem to have the same interface as you…