CustomUI - discussion thread

Configuration Frontend
42

after changing from rgb_color to hs_color
in the square bracket [ ] , Can I put [Hue, Saturation, Brightness ] [100, 150, 100] instead of only [100, 150] as most of the icon now black when I put only 2.

So where to check what color will I get if I put only 2 values inside square bracket. or can I put the HEX in square bracket [#94856B]

43

that would surely be the more logical, not to mention easiest thing to do:
templates:
icon_color: [#fefefe]

too bad we don’t have icon_color…

44

No, unfortunately, you can only use hs_color :frowning:

45

How to make this work in Safari and in the iOS app too?

46

I only made this change instead of rgb and everything works good!

hs_color: "if (state === 'on') return [48, 96];"
47

If the slider is hidden for lights-off then you can’t turn on the light to a specific brightness.
Another downside that unless the light is in single-line mode turning the light on/off will change the height of the card.

What’s the use-case? To adjust brightness for an already-on light?

To protect again accidental switch you can indeed use confirmable controls that should protect the slider too.

48

Solved!

We have icon_color:
Thank you @andrey

hoping

  templates:
    rgb_color: "if (state === 'on') return [251, 210, 41]; else return [54, 95, 140];"

will translate easily to:

  templates:
    icon_color: "if (state === 'on') return rgb(251, 210, 41); else return rgb(54, 95, 140);"
2 Likes
49

Note that you need to use 'rgb(251, 210, 41)' (quoted)

1 Like
50

You don’t think HA allows to hide views or groups.

Also for the syntax:

customize_glob:
  group.tab_settings:
    device:
      "*.*":
        hidden: true
      mydevice:
        hidden: false
  • The device name matching is a regexp, not a glob, so if you meant to match “everything” it should be ".*"
  • Note that “mydevice” also matches ".*" and the order of matching if a name matches several line is undefined.
  • An “empty name” will never match anything under device:. If you want to hide by default, but only in the frontend use templates:
my.device:
  templates:
    hidden: true 
  device:
    admin_device:
      hidden: false

Anything you can theme globally you can theme per-entity using custom UI.

What specifically would you like to change?

I don’t know what the app does, but everything should work in Safari. Could you try a config that works on Chrome in Mac Safari?

51

Please can I clarify what is the working syntax these days?

In customize.yaml I currently (0.65.5) have

sensor.door_front_battery:
  templates:
    rgb_color: "if (state < 20) return [200, 100, 30]; else return [10, 20, 30];"

On upgrade should this become:

    rgb_color: "if (state < 20) return 'rgb(200, 100, 30)'; else return 'rgb(10, 20, 30)';"
52

try:

    icon_color: "if (state === 'on') return 'rgb(251, 210, 41)'; else return 'rgb(54, 95, 140)';"
1 Like
53

@andrey thanks for the feedback.

Anything you can theme globally you can theme per-entity using custom UI.

What specifically would you like to change?

In this case I want to change only the icon and battery percentage (state) colors, keeping name/friendly_name in default colors.

I don’t know what the app does, but everything should work in Safari. Could you try a config that works on Chrome in Mac Safari?

Please take a look at these screenshots. I don’t know how to make it work in Safari.

chrome
chrome1264×1170 44.5 KB

safari
safari1264×1170 40.5 KB

54

thanks for the very quick response and update @andrey

I can confirm all rgb values to showup perfectly, while still under 0.65.5.

(forgot to change the version info?
18
still showing)

55

see one post above :wink:
working just fine .

not sure about the value though, maybe the author will be able to answer that. Maybe the per-entities theming could be of help here: home-assistant-custom-ui/docs/features.md at master · andrey-git/home-assistant-custom-ui · GitHub though it might need some further templating…

56

Sadly, neither

    rgb_color: "if (state < 20) return 'rgb(200, 100, 30)'; else return 'rgb(10, 20, 30)';"

nor

    icon_color: "if (state < 20) return 'rgb(200, 100, 30)'; else return 'rgb(10, 20, 30)';"

are working :frowning:

57

depending on the custom_ui version either the first or the latter should work. You can confirm you have the custom-ui installed properly? https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/installing.md

58

Try this or use hs_color.

59

Hi @Mariusthvdb

I have been using custom_ui for many months, so believe it is installed correctly. A run of update.sh reports all files are up to date.

Oddly, the UI seems to think that icon_color has been set, but the colour of the icon no longer changes.

07

sensor.door_front_status:
  templates:
    icon_color: "if (state === 'Open') return 'rgb(200, 100, 30)'; else if (state === 'Closed') return 'rgb(100, 200, 30)'; else return 'rgb(10, 20, 30)';"
60

ok, well if so maybe the template is wrong.
How many states other than open and closed can the door have?

seems to me it can only be open or closed, so no need for the extra condition in the template?

maybe try:

templates:
    icon_color: "if (state === 'Open') return 'rgb(200, 100, 30)'; else return  'rgb(100, 200, 30)'; "
61

The other state that it can have is “Unknown”