Custom UI - icon color change

Greetings @Norik_Krasniqi, I am very new to Hass’ world and I would like you to share how you made this group of icons and their data. Thank you very much!

Captura

Here is my current config (the coloring now working right now)

sensor.yaml

- platform: systemmonitor
    resources:
      - type: disk_use_percent
        arg: /home
      - type: processor_use
      - type: memory_use_percent
      - type: last_boot
      - type: since_last_boot

- platform: sql
    db_url: mysql://XXXXX:XXXXX@localhost/homeassistant
    queries:
      - name: DB Size
        query: 'SELECT table_schema "homeassistant", Round(Sum(data_length + index_length) / 1024 / 1024, 1) "value" FROM information_schema.tables WHERE table_schema="homeassistant" GROUP BY table_schema'
        column: 'value'
        unit_of_measurement: MB

- platform: speedtest
    minute:
      - 0
      - 15
    monitored_conditions:
      - download
      - upload
      - ping

- platform: template
    sensors:
      since_last_boot_templated:
        value_template: >-
          {%- set slb = states.sensor.since_last_boot.state.split(' ') -%}
          {%- set count = slb | length -%}
          {%- set hms = slb[count - 1] -%}
          {%- set hms_trimmed = hms.split('.')[0] -%}
          {%- set hms_split = hms_trimmed.split(':') -%}
          {%- set hours = hms_split[0] | int -%}
          {%- if count == 3 -%}
            {{ slb[0] ~ ' ' ~ slb[1] ~ ' ' }}
          {%- endif -%}
          {%- if hours > 0 -%}
            {%- if hours == 1 -%}
              1 hour
            {%- else -%}
              {{ hours }} hours
            {%- endif -%}
          {%- endif -%}

- platform: version
    name: Installed Version

- platform: scrape
    resource: https://www.home-assistant.io
    name: Latest Release
    select: ".current-version h1"
    value_template: '{{ value.split(":")[1] }}'
2 Likes

Thank you very much for sharing @Norik_Krasniqi, every day we learn more :slight_smile:

Can you help me with a link on how to get the sql stuff set up?

i try this solution in my customize.yaml and it not working to change color of badge for my tempo… Still is RED color.

sensor.eurochron_0001_temp:
  state_card_mode: badges
  templates:
    theme: >
      if (state > 29) return 'hot'; else if (state >= 27 ) return 'comfortable'; else return 'cold';

I try change icon color for switch, but when switch is ON all is ok and color is GREEN, but when is off should be RED but it is light blue. Why ?

templates:
  hs_color: "if (state === 'on') return [98,158,81]; else if (state === 'off') return [191,27,0];"

1

My sensor has an attribute “color”, and the values comes like “#6ee86e”.

I cant get this to work:

sensor.nilu_xxx_yyy_pm25:
  friendly_name: PM 2.5
  templates:
    icon_color: >
      return attributes.color

Should it work. Is it possible to use the attributes directly?

try:

  templates:
    theme: >
      if (state > 29) return 'hot';
      if (state >= 27 ) return 'comfortable'; 
     return 'cold';

try:

templates: 
  icon_color: >
    if (state === 'on') return 'hs[98,158,81]'; 
    return 'hs[191,27,0]';

It works like this with hex colors and rgb colors.
disclaimer: not really sure about the hs color format like hs[98,158,81], I don’t use these. Only hs colors in my setup are with 2 numbers, not 3.

see: home-assistant-custom-ui/docs/features.md at master · andrey-git/home-assistant-custom-ui · GitHub

not sure, never tried it, what happens if you do :wink:
Only comparable sensor I use is where the state of the sensor itself is used in the value_template for its icon. feared endless recursive issue’s but it works just fine.

lets give it a go and report back!

Actually, it works : D

I had a line underneath commented out. When removing this line, it did work.

return attributes.color
# bla bla bla
1 Like

thats because you should end the line with a ;

return attributes.color;
# bla bla bla

should be good to go, and leave all the blabla you want :wink:

1 Like

My icon doesn’t change.

I put this in my customize.yaml.

sensor.fibaro_system_fgms001zw5_motion_sensor_temperature_2:
    templates:
      rgb_color: >
        if (state > 25) {
          return [0, 128, 0];
        } else if (state >= 18 ) {
          return [223, 76, 30];
        } else {
          return [35, 76, 99];
        }
sensor.fibaro_system_fgms001zw5_motion_sensor_temperature:
  templates:
    rgb_color: >
      if (state > 25) {
        return [0, 128, 0];
      } else if (state >= 18 ) {
        return [223, 76, 30];
      } else {
        return [35, 76, 99];
      }

I get no errors. Can anybody help me out ?

there’s no icon template? won’t change if you don’t tell it to.

the color won’t change either like this, because you use rgb_color . use icon_color instead and then the correct formatting of the Cdd color you need: https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/features.md#icon-color

example:

  templates:
    icon: >
      if (state === 'on') return 'mdi:fridge-filled';
      return 'mdi:fridge';
    icon_color: >
      if (state === 'on') return 'rgb(251, 210, 41)';
      return 'rgb(54, 95, 140)';

or

  templates:
    icon_color: >
      if (state > 12) return 'rgb( 192, 39, 30 )';
      if (state > 10) return 'rgb( 244, 101, 35 )';
      if (state > 8) return 'rgb( 255, 194, 15 )';
      if (state > 4) return 'rgb(251, 210, 41)';
      return 'rgb(54, 95, 140)';
1 Like

like this ?

sensor.fibaro_system_fgms001zw5_motion_sensor_temperature:
  templates:
    icon_color: >
      if (state > 25) {
        return 'rgb(0, 128, 0 )'
      } else if (state >= 18 ) {
        return 'rgb(223, 76, 00 )'
      } else {
        return 'rgb(35, 76, 99 )'
      }

Like this:

sensor.fibaro_system_fgms001zw5_motion_sensor_temperature:
  templates:
    icon_color: >
      if (state > 25)  return 'rgb(0, 128, 0 )’;
      if (state >= 18 ) return 'rgb(223, 76, 00 )';
      return 'rgb(35, 76, 99 )';
sensor.fibaro_system_fgms001zw5_motion_sensor_temperature_2:
  templates:
    icon_color: >
      if (state > 25) return 'rgb(0, 128, 0 )’;
      if (state >= 18 ) return 'rgb(223, 76, 00 )';
      return 'rgb(35, 76, 99 )';
  
sensor.fibaro_system_fgms001zw5_motion_sensor_temperature:
  templates:
    icon_color: >
      if (state > 25) return 'rgb(0, 128, 0 )’;
      if (state >= 18 ) return 'rgb(223, 76, 00 )';
      return 'rgb(35, 76, 99 )';

no changing colour :slight_smile: I give it up

Do you have custom-ui installed?

I think I did, but not sure if I did it right …

added this to frontend.yaml

  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html

  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html

and this in config.yaml :

frontend: !include config/frontend.yaml

edit : I get this error
custom_ui/state-card-custom-ui-es5.html.js:2:0 NotSupportedError: Operation is not supported

Should be:

frontend: !include frontend.yaml