A different take on designing a Lovelace UI

Share your Projects!
611

It’s yaml anchors. You can think of it as:

& = copy 
* = paste

I think you’re getting undefined alias because it has nothing to copy from

#button-card icon
icon_spot: &icon_spot >
  [[[ const state = entity.state === 'on' ? 'animate_on' : 'animate_off';
  return `<svg viewBox="0 0 50 50"><style>@keyframes animate_on{0%{tra...

#another button with same icon
icon_spot: *icon_spot
1 Like
612

:frowning:

So we’ll need a different way to have it appear full screen?

613

I believe so but kiosk mode was the only feature I used and this script works just as well.

https://github.com/matt8707/hass-config/blob/ac5c462d7646415c2ebcc44eadbb9d6c37c55b12/www/kiosk.js

EDIT: Added it to HACS instead

2 Likes
614

Mattias, thanks. I have removed custom header from HACS and also removed it from my configuration.yaml and my lovelace yaml.

In configuration.yaml I now have

    - url: /local/kiosk.js
      type: module

and that file in the root of www.

I rebooted Home Assistant.

Is there something I need to add in my lovelace yaml to use kiosk.js ?

thanks!

615

If it matters type should be type: js. It checks if you have the query string ?kiosk in your url.

hass:8123/lovelace/default_view?kiosk

1 Like
616

It is working now. Thank you Mattias!

I had copied type: module from the entry above. Updating it to type: js and then adding ?kiosk to the url made it work perfectly.

I appreciate it.

618

Mmm, something else broke again with an update of a custom component, but I have no clue which. Some cards aren’t being styled anymore :frowning:

619

Check my include/themes.yaml

620

Euh? Do I understand it correctly I have to remove whitespace around the “>” in the element path in style definitions?

621

Yeah. Don’t ask me why

622

But I’m still on 0.114.4?

623

But you updated card-mod, where the issue is

624

Aha, I see. Thanks.

625

OK fixed it, thanks! Until the next breaking change :slight_smile:

626

I can’t seem to get this to work. After numerous HA restarts it worked once, then after a refresh it was gone again. I put the kiosk.js file (with that exact code double check) on www/ folder. Then in configuration exactly like you wrote and put ?kiosk at the end of url.

Do I need to do something else as well? I already cleared CH. Using Edge Chromium btw.

Thanks in advance :slight_smile:

627

I follow you for some time. Love your Lovelace UI. Always say will try this also. But always stop because don’t know where to start… haha :smiley: but I still follow you… One day I will see the logic!

1 Like
628

thank you :slight_smile: one more question how can i size my bottom ??

image
image859×502 22.3 KB

629

You need to uninstall ch from hacs (important), then remove it from ui-lovelace and from configuration resources as well.

1 Like
630 
- type: custom:button-card
  style:
    ...
    width: 10% #card size
  styles:
    custom_fields:
      icon:
        [width: 2vw...] #icon size

button_card_templates:
  base:
    ...
    styles:
      card:
        [font-size: 1vw] #text size
631

I will try that, I think that’s the issue then. I only commented out the resource and restared HA. Figured if the resource is not loaded it sould work. Will completely remove it.