Custom UI - icon color change

[Ildar_Gabdullin]

@Mariusthvdb

can you confirm commenting out the above template solves the Error? if so you are I the right track?

I excluded this part:

Restarted, no errors.
But before these errors took place not every restart - so I need more restarts, more statistics.

@Mariusthvdb

if (state && state.state === 'on')

Does it guarantee that the 1st condition will be checked first?

@Mariusthvdb

if (entity && entity.attributes && entity.attributes.templates)

Seems that this entity variable relates to the sensor (sensor.daylight_savings_times in your example).
And this code checks THIS sensor.
Is there any meaning to check if THIS sensor exists in the code which customizing THIS sensor?

Also, how to check OTHER sensors - like input_numbers from my case?

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

Is there any meaning to check if THIS sensor exists in the code which customizing THIS sensor?

yes, because those can be template sensors not yet initialized, or created by other integrations during setup. If bad luck, a non guarded customization can lock your instance in repeating errors…

you can check external entities (global is what they’re called ) as you know you can do like in other JS ( eg custom:button-card)

# using an attribute of another (global) entity
    sensor.power_consumption:
      templates:
        icon_color: >
          if (entities['sensor.smart_meter'].attributes.power > 3000) return 'red';
          return green;

see custom-ui/EXAMPLES.md at 053380a7f1628ea5efe8b385e7552ec92fd35b21 · Mariusthvdb/custom-ui · GitHub for some further explanation

[Ildar_Gabdullin]

Changed the code to:

        icon_color: >-
          if (entity &&
              entities['input_number.battery_level_critical'] &&
              entities['input_number.battery_level_warning'])
          {
            var WARNING = entities['input_number.battery_level_critical'].state;
            var CRITICAL = entities['input_number.battery_level_warning'].state;
            if (state <= Number(WARNING))
              return 'red';
            if (state <= Number(CRITICAL))
              return 'rgb(250,218,67)';
            return 'green';
          }
          else
            return 'brown';

Will see…
Hope it helps.
Thank you for support!

[broekieman (Maarten)]

Hello Marius,

Are you from Holland? I am and need your help. I am new to this but learned al lot the past weeks.
I installed mod-card and your custom-ui. It’s in resources. I would like to change the color of the icon of the Mode when its Perm.Low to orange. Do i have to create this in the configuration of the ventilation in configuration.yaml or in this card? The card has this code:

type: custom:layoutcard
layout_type: masonry
cards:
  - type: entities
    title: Ventilatie
    entities:
      - entity: sensor.duco_ventilation_mode
        name: Mode
      - entity: sensor.duco_fan_speed
        name: Rpm
      - entity: sensor.duco_current_fan_percentage
        name: Percentage
      - entity: sensor.duco_ventilation_countdown
        name: Countdown
    show_header_toggle: false
    state_color: false
  - type: grid
    columns: 1
    square: false
    cards:
      - type: custom:button-card
        entity: switch.duco_ventilation_auto
        name: Auto Mode
        styles:
          card:
            - height: 80px
      - type: grid
        columns: 3
        square: false
        cards:
          - type: custom:button-card
            entity: switch.duco_ventilation_low_perm
            name: P. Low
            styles:
              card:
               - height: 55px

[Mariusthvdb (Marius)]

HI Maarten
yes I am

you can either install custom-ui and customize those entities under:

homeassistant:
  customize:

as is described in the examples file on my repo, or you can install/use card-mod, and mod these in the lovelace card config, as is described in the card-mod repo docs ;-))

btw, please format your code correctly with the </> button in the editor, so we can check for errors. or use triple (not single) ``` backticks

[Mariusthvdb (Marius)]

please try first, and present us with the outcome of your results? scroll down to the end of this post 🔹 Card-mod - Add css styles to any lovelace card - #1188 by Ildar_Gabdullin and see all options.

to get you on track:

          - entity: sensor.backup_state
            card_mod:
              style: |
                :host {
                  --card-mod-icon:
                    {% if states(config.entity) == 'backed_up' %} mdi:check-circle
                    {% else %} mdi:alert-circle
                    {% endif %};

                  --paper-item-icon-color:
                    {% if states(config.entity) == 'backed_up' %} green
                    {% else %} red
                    {% endif %};
                }

adapt to your liking ofc.

[broekieman (Maarten)]

I have the low icon in red now, so it’s working.
What i would like to have is the icon of the sensor Mode changing to red when mode is Low.

type: custom:layout-card
layout_type: masonry
cards:
  - type: entities
    title: Ventilatie
    entities:
      - entity: sensor.duco_ventilation_mode
        name: Mode
      - entity: sensor.duco_fan_speed
        name: Rpm
      - entity: sensor.duco_current_fan_percentage
        name: Percentage
      - entity: sensor.duco_ventilation_countdown
        name: Countdown
    show_header_toggle: false
    state_color: false
  - type: grid
    columns: 1
    square: false
    cards:
      - type: custom:button-card
        entity: switch.duco_ventilation_auto
        name: Auto Mode
        styles:
          card:
            - height: 80px
      - type: grid
        columns: 3
        square: false
        cards:
          - type: custom:button-card
            entity: switch.duco_ventilation_low
            name: Low
            card_mod:
              style: |
                :host {
                  --card-mod-icon:
                    {% if states(config.entity) == 'backed_up' %} mdi:check-circle
                    {% else %} mdi:alert-circle
                    {% endif %};

                  --paper-item-icon-color:
                    {% if states(config.entity) == 'backed_up' %} green
                    {% else %} red
                    {% endif %};
                }
            styles:
              card:
                - height: 55px
          - type: custom:button-card
            entity: switch.duco_ventilation_middle
            name: Mid
            styles:
              card:
                - height: 55px
          - type: custom:button-card
            entity: switch.duco_ventilation_high
            name: High
            styles:
              card:
                - height: 55px
          - type: custom:button-card
            entity: switch.duco_ventilation_low_perm
            name: P. Low
            icon: mdi:fan-speed-1
            styles:
              card:
                - height: 55px
          - type: custom:button-card
            entity: switch.duco_ventilation_mid_perm
            name: P. Mid
            icon: mdi:fan-speed-2
            styles:
              card:
                - height: 55px
          - type: custom:button-card
            entity: switch.duco_ventilation_high_perm
            name: P. High
            icon: mdi:fan-speed-3
            styles:
              card:
                - height: 55px

This is in my configuration.yaml

- platform: mqtt
  unique_id: duco_vent_mode
  name: Duco Ventilation Mode
  state_topic: "VENTILATION_GATEWAY/VENTILATION_GATEWAY/Ventilationmode"
  icon: mdi:hvac
  value_template: >-
    {% set status = value | int %}
    {% if status == 13 %}
    {{'Perm. High'}}
    {% elif status == 12 %}
    {{'Perm. Mid'}}
    {% elif status == 11 %}
    {{'Perm. Low'}}
    {% elif status == 3 %}
    {{'High'}}
    {% elif status == 2 %}
    {{'Mid'}}
    {% elif status == 1 %}
    {{'Low'}}
    {% elif status == 0 %}
    {{'Auto'}}
    {% else %}
    {{'Undefined'}}
    {% endif %}

[Mariusthvdb (Marius)]

right… my code was an example, and ofc based on an entity with its specific states. I dont think your entity has state 'backed_up’ so adjust to your specific setting and needs

how do you find the state of your entity?

(not trying to be a pain here, but trying to help you find out yourself)

[broekieman (Maarten)]

I know that and i found out
Just one thing left to do. I like to have the Mode Auto Icon to be not white but like the transparant Rpm.

        card_mod:
          style: |
            :host {
                --paper-item-icon-color:
                {% if states(config.entity) == 'Perm. High' %} red
                {% else %} primary-color
                {% endif %};
                }

[Mariusthvdb (Marius)]

that seems like var(--disabled-text-color) but you could simply test that and check your theme?
or, it could be what ever color is in your paper-item-icon-color:.

ofc you can also put var(--paper-item-icon-color) in the case

[broekieman (Maarten)]

@Mariusthvdb

(–paper-item-icon-color)

var(–disabled-text-color) works and (–paper-item-icon-color) to. Thank you very much.
Can i add Mode Mid and Low also to color red?

[dbrunt (Daniel)]

HI Marius,
I have 171 of these errors at every startup. I’ve just been ignoring them as every thing works once HA is fully started.

ERROR (MainThread) [frontend.js.latest.202202030] https:/[redacted]/hacsfiles/custom-ui/custom-ui.js:219:9 Uncaught TypeError: Cannot read properties of undefined (reading 'state')

I don’t think I have 171 customized entities but will start trying to add the if coding…

[Mariusthvdb (Marius)]

yes, thats a familiar error, when you dont ‘guard’ your templates. The state you use in the template isnt yet properly initialized at startup, and thus can not be used in the template.

it throws these until the state is ready, and you probably see no issues after that?

I would strongly suggest you find the incorrect templates, because if things go wild, you might not be able to reach the frontend at all, and all you see is frontend errors in your log

[dbrunt (Daniel)]

@Mariusthvdb

if (state && state.state === 'on')

Down to 54 errors now!

[dbrunt (Daniel)]

sensor.brunt_win10:
  templates:
    icon: >
      if (state && state.state == 'Unavailable') return 'mdi:alert';
      if (states('sensor.brunt_win10_system_idle_time') < states('input_number.pc_active_timeout')) return 'mdi:monitor-dashboard';
      return 'mdi:monitor';
    icon_color: >
      if (state && state.state == 'Unavailable') return 'red';
      if (states('sensor.brunt_win10_system_idle_time') < states('input_number.pc_active_timeout')) return 'yellow';
      return 'grey';

will need to be this?

sensor.brunt_win10:
  templates:
    icon: >
      if (state && state.state == 'Unavailable') return 'mdi:alert';
      if (states('sensor.brunt_win10_system_idle_time') && states('input_number.pc_active_timeout') && states('sensor.brunt_win10_system_idle_time') < states('input_number.pc_active_timeout')) return 'mdi:monitor-dashboard';
      return 'mdi:monitor';
    icon_color: >
      if (state && state.state == 'Unavailable') return 'red';
      if (states('sensor.brunt_win10_system_idle_time') && states('input_number.pc_active_timeout') && states('sensor.brunt_win10_system_idle_time') < states('input_number.pc_active_timeout')) return 'yellow';
      return 'grey';

[dbrunt (Daniel)]

27 now. But where are they???

Do I need to safe-guard these?

switch.coffee_maker:
  icon: mdi:toggle-switch
switch.dryer_master_power:
  icon: mdi:toggle-switch
switch.garage_door_opener:
  icon: mdi:light-switch
switch.kitchen_blind_1:
  icon: mdi:window-shutter
switch.kitchen_blind_2:
  icon: mdi:window-shutter
switch.kitchen_blind_3:
  icon: mdi:window-shutter
switch.bedroom_blind:
  icon: mdi:window-shutter
switch.mimolite_switch:
  icon: hass:power
  device_type: garage
switch.nzw30_smart_switch_switch:
  icon: mdi:light-switch
switch.patio_door_blind:
  icon: mdi:window-shutter
switch.pole_lamp:
  icon: hass:light-switch
switch.rgbw_dimmer_module:
  icon: hass:toggle-switch-off-outline
switch.sonoff_1000627ef1:
  icon: hass:toggle-switch-off-outline
switch.sonoff_1000ca1644:
  icon: hass:toggle-switch-off-outline
switch.sonoff_1000ca5efa:
  icon: hass:toggle-switch-off-outline
switch.sonoff_inching:
  icon: hass:toggle-switch-off-outline
switch.tyzb01_iuepbmpv_ts0121_on_off:
  icon: hass:toggle-switch-off-outline
switch.washer_master_power:
  icon: hass:toggle-switch-off-outline
light.bedroom_lamps:
  icon: hass:lightbulb-multiple
switch.switchlinc_relay_dual_band_1f_b5_4a:
  icon: hass:light-switch
switch.switchlinc_relay_dual_band_1f_b3_c5:
  icon: hass:light-switch
switch.switchlinc_relay_dual_band_1f_b7_25:
  icon: hass:light-switch

[Mariusthvdb (Marius)]

its a matter of elimination. comment them all and see if the error is gone? ok?

than enable half of them and retry. error still gone? enable half of the rest. if not, check in the last enabled section…

but, you dont need to do this in all your custom-ui templates, just the ones where the state is created during startup. Mostly HA template sensors, or things made by python scripts etc etc

@dbrunt

Do I need to safe-gaurd these?

wouldnt think so no, only templates. but, with the method above, its easily checked

btw, a state.state will most likely ever be ‘unavailable’ , not ‘Unavailable’. you need to check the true state in the state machine, not what is shown in the Frontend

[dbrunt (Daniel)]

@Mariusthvdb

btw, a state.state will most likely ever be ‘unavailable’ , not ‘Unavailable’

huh? I do not understand that statement!

[Mariusthvdb (Marius)]

@dbrunt

if (state && state.state == 'Unavailable')

id use
if (state && state.state == 'unavailable')

but, you forget even state can be none, so, you either want to check for state alone

if (state) and, if state exists, you can continue. Or, you check for

if (state.state != 'unavailable') and continue.

see:

        icon_color: >
          if (attributes && attributes['dst active']
              && attributes['dst active'] == true )
          return 'maroon';
          return 'green';

it checks if attributes are available, And if a certain attributes is available, And then if that attributes is true. in all other cases it returns the exception

[dbrunt (Daniel)]

I commented those out and zero errors on this boot…