Card-mod.js et couleur

Entraide Home Assistant
1

Bonjour,
j’ai vu qu’il était faisable de changer la couleur des entités suivant les états avec card-mod.js.
mais je n’y arrive pas.
(j’ai réussi avec button-card)
mais la je veux le faire sur une carte « élément d’image »

J’ai bien recharger dans HACS le module card-mod.
j’ai été dans paramètre, tableau de bord, ressource et j’ai ajouter :

resources:   - url: /hacsfiles/lovelace-card-mod/card-mod.js     type: module

(j’ai fait le même avec button-card et lui semble bien conventionner)

j’ai redémarrer HA.

voici le code que j’ai fait :

type: picture-elements
image: /local/cuve.jpg
elements:
  - type: state-icon
    entity: binary_sensor.decante_niveau_haut
    style:
      top: 20%
      left: 50%
      '--mdc-icon-size': 5vw
      '--paper-item-icon-color': >
        [[[ return entity.state == 'on' ? 'green' : 'red'; ]]]
  - type: state-icon
    entity: binary_sensor.decante_niveau_milieu_haut
    style:
      top: 30%
      left: 40%
      '--mdc-icon-size': 5vw
      '--paper-item-icon-color': >
        [[[ return entity.state == 'on' ? 'green' : 'red'; ]]]
  - type: state-icon
    entity: binary_sensor.decante_niveau_milieu_bas
    style:
      top: 80%
      left: 40%
      '--mdc-icon-size': 5vw
      '--paper-item-icon-color': >
        [[[ return entity.state == 'on' ? 'green' : 'red'; ]]]
  - type: state-icon
    entity: binary_sensor.decante_niveau_bas
    style:
      top: 90%
      left: 50%
      '--mdc-icon-size': 5vw
      '--paper-item-icon-color': >
        [[[ return entity.state == 'on' ? 'green' : 'red'; ]]]

mais les icônes reste jaune et bleu.
auriez vous une idée sur mon problème?

merci

2

j’ai réussi avec button-car

si ca peu aider :

type: picture-elements
image: /local/cuve.jpg
elements:
  - type: 'custom:button-card'
    entity: binary_sensor.decante_niveau_haut
    style:
      top: 20%
      left: 50%
      width: 2vw
      height: 2vw
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 50%
        - background-color: >
            [[[ return entity.state === 'on' ? 'green' : 'red'; ]]]
  - type: 'custom:button-card'
    entity: binary_sensor.decante_niveau_milieu_haut
    style:
      top: 30%
      left: 40%
      width: 2vw
      height: 2vw
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 50%
        - background-color: >
            [[[ return entity.state === 'on' ? 'green' : 'red'; ]]]
  - type: 'custom:button-card'
    entity: binary_sensor.decante_niveau_milieu_bas
    style:
      top: 80%
      left: 40%
      width: 2vw
      height: 2vw
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 50%
        - background-color: >
            [[[ return entity.state === 'on' ? 'green' : 'red'; ]]]
  - type: 'custom:button-card'
    entity: binary_sensor.decante_niveau_bas
    style:
      top: 90%
      left: 50%
      width: 2vw
      height: 2vw
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 50%
        - background-color: >
            [[[ return entity.state === 'on' ? 'green' : 'red'; ]]]

merci

3

Bonjour,
Normal que ça ne fonctionne pas, tu utilises du code card_mod dans le style de la carte élément.
Tu as le style de la carte élément et le style de card_mod.

Un exemple :

type: picture-elements
image: /local/cuve.jpg
elements:
  - type: state-icon
    entity: binary_sensor.decante_niveau_haut
    style:
      top: 20%
      left: 50%
    card_mod:
      style: |
        :host {
          {% if is_state(config.entity,'on') %} 
            --paper-item-icon-color: green;
          {% else %}
            --paper-item-icon-color: red;
          {% endif %}                  
          --mdc-icon-size: 5vw;
        }

Pour card_mod il faut ajouter ces lignes dans ton configuration.yaml:

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

image
image911×369 17.5 KB