3.4.0/1 breaks --card-mod-xxx variables.

[Mariusthvdb]

My Home Assistant version: 2024.1.0b2

My lovelace configuration method (GUI or yaml): yaml

What I am doing:

modding an icon and icon color based on state What I expected to happen: immediate change when state changed What happened instead: need to refresh the state for the change to happen

note the --paper-item-icon-color: does change upon state change, but replacing that with the --card-mod-icon-color: makes the reload necessary as a matter of fact, thats how I found this mod to no longer function the same as in 3.3.1

of course, there is no replacement for the icon element....

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
debug: true
style: |
  :host {
    --card-mod-icon:
      {% set vol = states(config.entity)|float(0) %}
      {% if vol == 0.0 %} mdi:volume-off
      {% elif vol <= 0.3 %} mdi:volume-low
      {% elif vol <= 0.6  %} mdi:volume-medium
      {% else %} mdi:volume-high
      {% endif %};
    --paper-item-icon-color: # --card-mod-icon-color:
      {% if vol == 0.0 %} gray
      {% elif vol <= 0.3 %} dodgerblue
      {% elif vol <= 0.6 %} green
      {% elif vol <= 0.8 %} orange
      {% else %} red
      {% endif %};
  }

# End of code

mods are injected like:

card_mod: !include /path/card_mods/volume_color.yaml

so the new requirement for the full hierarchy is already implemented (as I had those long before it became the new requirement now in 3.4.0)

Error messages from the browser console: set to debug, the mod is supposed to be set correctly upon state change:

but as said, it only happens on reload

https://github.com/thomasloven/lovelace-card-mod/assets/33354141/0e984d2d-4a49-40e3-af3d-ac9bf8e90045

---

By putting an X in the boxes ([]) below, I indicate that I:

• [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [X] Have made sure I am using the latest version of the plugin.

• [X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[erkr]

Same issue. I'm running on core 2023.12.4. I changed an icon, based on the state. Now I need to refresh the page to see the change.

- entity: input_boolean.show_all_attention_points
    icon: true
    card_mod:
      style: |
        :host {
              --card-mod-icon: {{ 'mdi:chevron-up' if is_state('input_boolean.show_all_attention_points','on') else 'mdi:chevron-down' }};
            }

[Mariusthvdb]

So at least we are sure it is card-mod now, That’s good ;-)

[thomasloven]

Man, that was a stupid typo...

Fix is coming up.

[Mariusthvdb]

Thomas, this is still not working as expected in all places. On first load, only the colors are applied, the icons change much later (minute?)

Seems as if the card mods cant keep up with the changes anymore

      filter:
        include:
          - integration: shelly
            entity_id: sensor.*_rssi
            options:
              card_mod: # !include /config/dashboard/card_mods/wifi_signal_strength.yaml
                style: |
                  :host {
                    --card-mod-icon:
                      {% set signal = states(config.entity)|int(default=0) %}
                      {% if signal == 'unknown' %} mdi:help
                      {% elif signal >= -50 %} mdi:wifi-strength-4
                      {% elif signal >= -60 %} mdi:wifi-strength-3
                      {% elif signal >= -67 %} mdi:wifi-strength-2
                      {% elif signal >= -70 %} mdi:wifi-strength-1
                      {% elif signal >= -80 %} mdi:wifi-strength-outline
                      {% else %} mdi:wifi-strength-alert-outline
                      {% endif %};
                    --paper-item-icon-color:
                      {% if signal == 'unknown' %} gray
                      {% elif signal >= -50 %} darkgreen
                      {% elif signal >= -60 %} green
                      {% elif signal >= -67 %} lightgreen
                      {% elif signal >= -70 %} gold
                      {% elif signal >= -80 %} orange
                      {% else %} maroon
                      {% endif %};
                  }

immediately colors the icon, but the icon change is only happening now and then. This is on a view with a few of these auto-entities cards, but before where always immediate on the icon change.

btw changing to --card-mod-icon-color: also breaks the color change, so something still is not ok.

overview

and a detail of a few sec later:

[erkr]

My icon is working again in 3.4,1. Thanks 🙏

[Mariusthvdb]

My icon is working again in 3.4,1. Thanks 🙏

would you be willing to test my volume mod I posted above? seems the icon change is now even worse than before, and totally random if happening at all, while the icon color is immediate.

[erkr]

@Mariusthvdb Of course, I tried it. Presuming you use an auto entities card, I used as configuration:

type: custom:auto-entities
card:
  type: entities
filter:
  include:
    - entity_id: input_number.test_volume
      options:
        card_mod:
          style: |
            :host {
             --card-mod-icon:
              {% set vol = states(config.entity)|float(0) %}
              {% if vol == 0.0 %} mdi:volume-off
              {% elif vol <= 0.3 %} mdi:volume-low
              {% elif vol <= 0.6  %} mdi:volume-medium
              {% else %} mdi:volume-high
              {% endif %};
             --paper-item-icon-color: # --card-mod-icon-color:
              {% if vol == 0.0 %} gray
              {% elif vol <= 0.3 %} dodgerblue
              {% elif vol <= 0.6 %} green
              {% elif vol <= 0.8 %} orange
              {% else %} red
              {% endif %};
             }
  exclude: []

The result for me is that the icon changes as expected, but I don't have color changes. Not at all, even after a refresh: https://github.com/thomasloven/lovelace-card-mod/assets/4363599/b39ee8e8-03fb-437f-838f-30b627df90a8

Update: when I use --card-mod-icon-Color instead of paper, colour works as well, maybe a bit delayed, but no need to refresh.

[Mariusthvdb]

how odd, this is getting weirder by the effort.... icon-color is perfect here, and immediate, everywhere I set it using card-mod.

(btw, you can pull the

{% set vol = states(config.entity)|float(0) %}

out of the card-mod-icon and set it as first line in the object. just a bit cleaner..)

but check this:

the icon of the input_select (account-settings) is again showing while the card-mod sets an entity_picture, and hides the icon:

  - entity: input_select.mode
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              {% set state = states(config.entity)|slugify %}
              {% set path = '/local/modes/' %}
              background-image:
                url('{{path}}{{state}}.png');
            }
        <<: &no_icon
          .: |
            :host {
              --card-mod-icon: none;
            }

maybe there is a change in the mod required (release notes mentions a change of which I did not yet find out the impact, but this was 100% robust earlier...

@thomasloven : should we change the title of this issue btw, its no longer about a reload, it's back to being a issue on card-mod-icon I fear.

[erkr]

(btw, you can pull ... out of the card-mod-icon

Yes better, but I didn't want to change your code when evaluating it on my system.

[Mariusthvdb]

changed the title, as with all my --card-mod-icon mods, this has become completely unreliable, while --paper-time-icon-color works perfectly and immediate. --card-mod-icon-color is also not reliable.

Ive even taken the exact template from https://github.com/thomasloven/lovelace-card-mod/blob/c87939fd89c3e5344715c52be21ac6d5c40d4b8c/test/views/4_templates.yaml#L148

and use

        - entity: light.silver_cabinet
          card_mod:
            style: |
              :host {
                --card-mod-icon: {% if is_state(config.entity, 'on') %} mdi:star
                                 {% else %} mdi:star-outline
                                 {% endif %};
              }

which does exactly nothing to the icon:

https://github.com/thomasloven/lovelace-card-mod/assets/33354141/68e5fef8-83bb-48b0-88e5-abe91888d064

and then suddenly kicks in after leaving the view and returning some time later in this case, maybe I could have waited for it too.

https://github.com/thomasloven/lovelace-card-mod/assets/33354141/a362d36d-3b53-4470-a404-89b603a427c3

reloading the pages repeats this process, starting with the unmoved icon.

Finally I figured it might be the intensity of the view, with a lot of mods. so I created a dedicated single entity view:

- title: Test single
  path: test_single
  icon: mdi:numeric-1
  badges: []

  cards:

    - type: entities
      title: Test single card_mod
      entities:
        - entity: light.silver_cabinet
          card_mod:
            style: |
              :host {
                --card-mod-icon: {% if is_state(config.entity, 'on') %} mdi:star
                                 {% else %} mdi:star-outline
                                 {% endif %};
              }

all in all this seems to indicate a timing/processing issue in the background, and not a syntax/template issue

[Fullmetal11]

Update 3.4.1, icons in tile card no longer change color based on the state of another entity!!! In the example I am reporting, the color of the icon of a tile card now no longer changes based on the state of an input boolean: red if the input boolean "example" is on, white if it is off. Before the update to 3.4.0 it worked great :( I have lots of tiles card that change the color of their icons based on the value of another entity... they're all screwed up..

type: tile
entity: sensor.any_sensor_you_want
icon_tap_action:
  action: call-service
  service: input_boolean.toggle
  target:
    entity_id: input_boolean.input_boolean_example
  data: {}
card_mod:
  style: |
    .tile {
      {% if is_state("input_boolean_example", "on") %}
        --tile-color:red;
      {% else %}  
        white;
      {% endif %}  
    }

[Mariusthvdb]

@Fullmetal11 please format your code, and you'll see you have an incorrect template... check the --tile-color missing in the else

also, this thread is about card-mod variables (--card-mod-icon and --card-mod-icon-color), so please keep to that. you should check/create another topic for your specific issue (if it still is an issue after correcting the template)

[erkr]

@Fullmetal11 please check this core issue: https://github.com/home-assistant/core/issues/107362 as you are using is_state(). Try state() == 'on' instead.

Best Eric

[Mariusthvdb]

maybe also check your target: entity_id: input_boolean.input_boolean.example ....

these are very poor issue reports, we should comment off topic really

bw, nothing going on with is_state()?? seems an incorrect issue too

[Fullmetal11]

maybe also check your target: entity_id: input_boolean.input_boolean.example ....

these are very poor issue reports, we should comment off topic really

I corrected the small error in the example.

@erkr I try state() == 'on' , nothing change; I also edited the line white; to: --tile-color: white; same result.

Shall I open a new thread?

[Mariusthvdb]

please, so we can hide the last few posts in this thread, and help you out there. thanks!

[Mariusthvdb]

anyways, back to the issue at hand:

downgrading to 3.3.1 fixes it, and --card-mod-icon changes are immediate. --card-mod-icon-color is functional again too.

[thomasloven]

Try as I might I cannot reproduce this even once.

I've tried to add some extra styling checks though. At least things should work better now if themes and card icon styles are combined.

[WhimsySpoon]

Unfortunately it's still broken in 3.4.2 when changing the colour of icons:

type: custom:auto-entities
card:
  type: entities
  state_color: true
  show_header_toggle: false
filter:
  include:
    - entity_id: sensor.plant_*_status
      area: Kitchen
      options:
        secondary_info: last-changed
        style: |
          :host {
            --paper-item-icon-color:
            {% if states(config.entity) == 'Sensor Error' %}
              red
            {% elif states(config.entity) != 'Healthy' %}
              #f59b42
            {% endif %}
          }
  exclude: []
sort:
  method: friendly_name

[Mariusthvdb]

Try as I might I cannot reproduce this even once.

I've tried to add some extra styling checks though. At least things should work better now if themes and card icon styles are combined.

wow: seems rock solid! (#fingerscrossed this is not cache ;-) ) I mean, even those chatty hydro-temp entities (which I separated for the rest) now seem stable. Before the complete auto-entities card would constantly recalculate, and now this seems to happen only on the entries that actually change state. Was some cache after all I believe, still very chatty and flashy, but at least it works! Thank you very much!

btw, it would still be cool (because of above chatty issue) if we could set some update_interval on those auto-entities (like eg apexcharts has). Would you be willing to consider a FR for that? if yes, I'll write it up .

[Mariusthvdb]

Unfortunately it's still broken in 3.4.2 when changing the colour of icons:

thats because you don't use the correct syntax, check the breaking changes (hint: use card_mod:)

[WhimsySpoon]

you don't use the correct syntax

Yep, that one's on me. I thought I had updated all of my cards, but I missed that one. I should have double checked. Apologies.

[Mariusthvdb]

so unless there could still be done some fine-tuning on those often recurring states, I suppose this can now be closed. Ive tested extensively on Mac Desktop in Safari, Chrome and Firefox and the iOS app, and all seem back to the 3.3.1 state, meaning:

working card-mod variables --card-mod-icon and --card-mod-icon-color

[erkr]

Works fine for me as well