Custom UI - icon color change

Share your Projects! Dashboards & Frontend
125

…

well, I am still on 84.3 and 84.6 as I stated earlier.

no issues on the GitHub though Issues · andrey-git/home-assistant-custom-ui · GitHub, which is remarkable if this kind of issues arise.

and what does

custom-ui stopped working for badges

imply, the regular badges as displayed on a card, extra-badges (these have issues indeed,as is on the issue tracker) or badges in a view.

My 84.6 HA instance has the extra_badge issue, but shows the regular badges and badges in a view just fine, and customizes these.

So, please be precise when saying I told you so…

1 Like
126

Makes sense. I am running hassio 0.87.1 and the custom UI. Followed all your great instructions @Mariusthvdb and @cameron and I can’t get it to work.

127

Been fighting with icon color on my cards. All my devices have a yellow icon! i even downloaded an icon from mdi in purple but it show up as yellow. I tried to use customize piece in the front end to allow the UI override and I’ve tried to add a line for icon_color in my customize.yaml where I was able to set the icon after putting the icons in my www folder. WHAT am i doing wrong???! Do I have to create what I’ve seen loosely referenced, a theme first?? pulling my hair out

128

Actually there is an issue which I had previously opened a while back.

129

I see now, thanks for alerting me.
Seems the author has left planet earth for a while… :wink: Many issues are left unanswered. Guess Lovelace takes its toll, fixing all breaking changes

130

So I assume it is broken (by using lovelace UI).
Two things do not work when using Lovelace and badges:

  • I have configured not to display the badge if away
  • Have colors on badges in certain states
131

Will it work on 0.88.2?
edit:
So it is BROKEN in classic UI and Lovelace also gets it from there.

132

Hi,
I’m trying to change icon colours and the following is not working, any ideas?

  • entity: light.downstairs_study
    icon: ‘mdi:ceiling-light’
    name: Study Downstairs
    templates:
    icon_color: >
    return ‘#008300’;
133

yes, many ideas :wink:

you should read up on how to format code in the community (use the back ticks, or the code block </> in the toolbar)

and on using custom_ui. Assuming you have installed the latter, you can then start using

homeassistant:
  customize:
    light.downstairs_study:
      templates:
        icon_color: >
          if (state === 'on') return 'yellow';
          return 'grey';

use any css accepted color styles

134

I want use RGB codes instead of names how can I fix this?

I tried your explanation. But the icon is not changing color

input_boolean.nest_disable_control:
  friendly_name: DNC
  homebridge_name: Disable Nest Control
  icon: mdi:nintendo-switch
  templates:
    icon_color: >
      if (state == 'on') {
        return [blue]; }
      else {
        return [red];} 

frontend:
  extra_html_url:
    - /local/custom_ui/state-card-custom-fanspeed.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-fanspeed.html

customizer:
  custom_ui: local

homeassistant:
  customize: !include_dir_merge_named package/customize/
  customize_glob:
    fan.*:
      custom_ui_state_card: state-card-custom-fanspeed
  auth_providers:
    - type: homeassistant
135 
input_boolean.nest_disable_control:
  friendly_name: DNC
  homebridge_name: Disable Nest Control
  templates:
    icon: mdi:nintendo-switch
    icon_color: if (state === 'on') return 'rgb(0, 0, 255)'; else return 'rgb(255, 0, 0)';
1 Like
136

taking things strictly, this is not correct.

you don’t have an icon template, so you should simply set it 1 hierarchy higher.

not sure if you don’t have to quote the template, but, I always use multiline notation to get rid of that issue, using:

icon_color: >
  if (state === 'on') return 'rgb(0, 0, 255)';
  return 'rgb(255, 0, 0)';

note you don’t need the ‘else’ .

2 Likes
137

i single line most of mine for readability. my customize file is nearly 400 lines of similar templates. lol. probably should figure out a better way, or use glob.

138

haha yes, glob is great to use, especially when using templates a bit more involved:

sensor.*_motion_sensor_temperature:
  templates:
    icon_color: >
      if (state < -20) return 'black';
      if (state < -15) return 'navy';
      if (state < -10) return 'darkblue';
      if (state < -5) return 'mediumblue';
      if (state < 0) return 'blue';
      if (state < 5) return 'dodgerblue';
      if (state < 10) return 'lightblue';
      if (state < 15) return 'turquoise';
      if (state < 20) return 'green';
      if (state < 25) return 'darkgreen';
      if (state < 30) return 'orange';
      if (state < 35) return 'crimson';
      return 'firebrick';

btw, I find multiline easier to debug in these cases, not sure how I would do that using single line…

or using true js:

automation.*:
  templates:
    icon_color: >
      if (state === 'on') return 'rgb(251, 210, 41)';
      return 'rgb(54, 95, 140)';
  extra_data_template: >
    if(!attributes.last_triggered) return null;
    var t,s=(new Date()-new Date(attributes.last_triggered))/1e3;
    return(
    (t=Math.floor(s/86400))?t+(t>1?" days":" day"):
    (t=Math.floor(s/3600))?t+(t>1?" hours":" hour"):
    (t=Math.floor(s/60))?t+(t>1?" minutes":" minute"):
    (t=Math.floor(s))!==1?t+" seconds":" second"
    )+" ago";
1 Like
139

is there a way to have it when the door is unlocked that the icon will flash yellow and red? just keep going back and forth until it is locked?

140

you can do that with custom button-card in an animation.

expand on:

  styles:
    icon:
      - color: >
          [[[ if (entity.state == 'on') return 'green'; return 'grey'; ]]]
      - animation: >
          [[[
            if (entity.state == 'on') return 'blink 2s ease infinite';
          ]]]

Haven’t tried that in custom-ui before… might be doable, not not available in custom-ui.

1 Like
141

thank you, that will work.

142

hello all,

Fisrt of all the context. I had to re build my hardware configuration (on a Pi3 to boot on USB) and thus to rebuild my HA installation.

I went through HA Core manually installer in a docker container plus 2 other containers for the Configurator and Mosquitto broker.

I wanted to play with icon colors so tried to install CustomUI manually as local.

I managed to get HA to restart but get a notification that customizer could not load !

The log says :
custom_components/customizer/init.py:118
TypeError: async_register() takes from 4 to 5 positional arguments but 6 were given

but the given line in the file seems correct:
hass.services.async_register(DOMAIN, SERVICE_SET_ATTRIBUTE,
set_attribute,
descriptions[SERVICE_SET_ATTRIBUTE],
SERVICE_SET_ATTRIBUTE_SCHEMA)

Of course none of the statements set in my customize_glob.yaml are working. What am I doing wrong ?

many thanks in advance for any help given.

143

read up on custom_ui here https://github.com/Mariusthvdb/custom-ui and delete all installed configs that you now have, and replace with the new code and configuration option of your liking.

return after that has been processed successfully ( check config/info, or the inspector to reveal Custom ui being installed)

144

Thanks a lot Marius for taking a bit of your time on this.
well, I did not succeed so far, neither by the frontend method nor by declaring a ressource in Lovelace configuration.

It wouldn’t load (no track of that in the inspector) and the lovelace.reload_resources service is not found in my install (not part of HA Core ?).

So it’s like I did nothing but uninstall the old version (which did not work for me anyway).

I feel sorry to bother again but what would you suggest now ?