Custom UI - icon color change

Ildar_Gabdullin · November 26, 2021, 9:12pm

I excluded this part:

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

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

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 · November 27, 2021, 10:35pm

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 · November 28, 2021, 3:14am

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 · January 27, 2022, 11:46am

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

Ventilation UI

Mariusthvdb · January 27, 2022, 2:24pm

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 · January 28, 2022, 2:58pm

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 · January 29, 2022, 9:23am

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 · January 29, 2022, 4:56pm

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 · January 30, 2022, 3:33pm

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 · January 30, 2022, 3:38pm

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 · January 30, 2022, 4:10pm

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 · February 4, 2022, 9:46am

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 · February 4, 2022, 9:58am

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 · February 4, 2022, 10:11am

Down to 54 errors now!

dbrunt · February 4, 2022, 10:15am

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 · February 4, 2022, 10:21am

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 · February 4, 2022, 10:41am

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

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 · February 4, 2022, 10:47am

huh? I do not understand that statement!

Mariusthvdb · February 4, 2022, 10:55am

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 · February 4, 2022, 10:55am

I commented those out and zero errors on this boot…