Custom UI - icon color change

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

dbrunt · February 4, 2022, 11:24am

LOL! thought I’d try…
Have a good night (or day, where ever you are)…and thanks!

Trouble-51 · April 10, 2022, 5:42pm

@mariustvbd, question: is it possible to change the colour of an icon based on the state of a source. For example Apple TV has various sources, if one source is playing can the icon related to that source change in colour? I am using the button card.

what I came up with is:
- type: button
icon: mdi:television
icon_height: 80px
state_color: red
name: SET TOP BOX
show_state: true
styles:
icon:
- color: |
[[[
if (state_source[‘media_player.apple_tv’, ‘GSE IPTV PRO’].state == ‘playing’) return “red”;
return “darkgreen”;
]]]
tap_action:
action: call-service
service: script.lounge_box
service_data: {}
target: {}
hold_action:
action: call-service
service: script.lounge_box
service_data: {}
target: {}

but that doesn’t seem to be working. Any help would be highly appreciated

Mariusthvdb · April 11, 2022, 10:06am

first of, your template is valid for custom:button-card, and not core button.

You could however try a template like that with card-mod, but then you’d need to change it to Jinja, and not use Javascript

in both cases, its not a custom-ui question, and in the wrong spot here because of that.

besides that, custom-ui is currently partly broken, because of Breaking! HA 2022.4 (partly) breaks Custom-ui · Issue #48 · Mariusthvdb/custom-ui · GitHub, so dont hold your breath on getting that back.

in all cases: format your code correctly please (using the </> button in the toolbar) , so we can see what you’re actually posting

Cool_Hansen · June 24, 2022, 5:40pm

A simple button should show the icon highlighted if the mower is mowing. I don’t have any idea why it’s not working. Here my code in customize.yaml:

mower.mahndy:  
  templates:
    icon_color: if (state == 'mowing') return 'rgb(214,162,69)';return 'rgb(102,102,102)';

Mariusthvdb · June 25, 2022, 10:02am

could be many things, without anything further we cant help you.

please show the frontend config of the card

and show the Settings/About bottom line on custom-ui

kajmaj · July 25, 2022, 10:04am

Hi all, I have a pair of custom-buttons with following lovelace config:

            - type: custom:button-card
              entity: input_boolean.hvac_bedroom_preset
              icon: mdi:snowflake
              name: Preset
              show_state: false
              show_label: false 

            - type: custom:button-card
              entity: sensor.temperature_bedroom
              icon:  mdi:thermometer
              show_name: false
              show_state: true

resulted in different icon's color
Is there any way how to “unify” color of icons?
I have some of these within my whole config and not able to solve it

Any advice please?

Mariusthvdb · July 25, 2022, 11:06am

with button-card, you dont need custom-ui at all.

any color setting can be done in the styles directly.
for further instructions/exmaples, you’d best hop over to the dedicated thread on custom:button-card

kajmaj · July 25, 2022, 11:16am

Sorry for my ignorance. Thanks

moto2000 · January 9, 2023, 7:23pm

Did the recent updates in Jan 2023 remove the icon color changes in customize.yaml?

For example:

templates:
  icon_color: if (state == 'on') return 'red';