Custom UI - icon color change

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…

Mariusthvdb · February 4, 2022, 10:56am

well, there you have it system never lies…

what switches are those? template switches maybe?

dbrunt · February 4, 2022, 11:15am

No, those are real switches. I uncommented them and no errors from them this time. Go figure!
Just 2 left:

  - name: Period of day
    unique_id: period_of_day
    state: >-
      {% if (as_timestamp(state_attr("sun.sun","next_dusk"))) - (as_timestamp(state_attr("sun.sun","next_setting"))) < 0 %} Dusk
      {% elif (as_timestamp(state_attr("sun.sun","next_rising"))) - (as_timestamp(state_attr("sun.sun","next_dawn"))) < 0 %} Dawn
      {% elif (state_attr("sun.sun","elevation")) < 0 %} Night
      {% else %} Day
      {% endif %}
    icon: >-
      {% if is_state('sun.sun', 'above_horizon') %} mdi:weather-sunny
      {%elif (as_timestamp(state_attr("sun.sun","next_dusk"))) - (as_timestamp(state_attr("sun.sun","next_setting"))) < 0 %} mdi:weather-sunset-down
      {% elif (as_timestamp(state_attr("sun.sun","next_rising"))) - (as_timestamp(state_attr("sun.sun","next_dawn"))) < 0 %} mdi:weather-sunset-up
      {% else %} mdi:weather-night
      {% endif %}

Mariusthvdb · February 4, 2022, 11:18am

thats a core template sensor…

forget about those, use:

      - unique_id: part_of_day
        name: Part of day
        state: >
          {% set hour = now().hour %}
          {% if hour in range(0,6) %} Night
          {% elif hour in range(6,12) %} Morning
          {% elif hour in range(12,18) %} Afternoon
          {% else %} Evening
          {% endif %}
        <<: &pod_icon
          icon: >
            {% set hour = now().hour %}
            {% if hour in range(0,6) %} mdi:weather-night
            {% elif hour in range(6,12) %} mdi:weather-sunset-up
            {% elif hour in range(12,18) %} mdi:weather-sunny
            {% else %} mdi:weather-sunset-down
            {% endif %}

unless you specifically want to hold to those timestamps…

dbrunt · February 4, 2022, 11:21am

I also have this but do not have it in configuration.yaml!

2022-02-04 03:04:40 WARNING (MainThread) [homeassistant.components.version] Configuration of the Version platform in YAML is deprecated and will be removed in Home Assistant 2022.4; Your existing configuration has been imported into the UI automatically and can be safely removed from your configuration.yaml file
2022-02-04 03:04:40 WARNING (MainThread) [homeassistant.components.version] Configuration of the Version platform in YAML is deprecated and will be removed in Home Assistant 2022.4; Your existing configuration has been imported into the UI automatically and can be safely removed from your configuration.yaml file

Also already removed from configuration.yaml:

Logger: homeassistant.components.androidtv.config_flow
Source: components/androidtv/config_flow.py:179
Integration: Android TV (documentation, issues)
First occurred: 3:04:56 AM (1 occurrences)
Last logged: 3:04:56 AM

Host [192.168.1.91] already configured. This yaml configuration has already been imported. Please remove it

And I can’t for the life of me the source for this!

Logger: homeassistant.helpers.script
Source: helpers/script.py:638
First occurred: 3:05:29 AM (1 occurrences)
Last logged: 3:05:29 AM

Error in 'condition' evaluation: In 'template' condition: UndefinedError: list object has no element 157

dbrunt · February 4, 2022, 11:22am

I know! it should be available pdq. If I put that into template editor it’s fine!

Mariusthvdb · February 4, 2022, 11:23am

haha, well, yes, but you cant drop all your yaml errors in here