Card Mod et Picture Elements

Entraide Home Assistant
1

Bonjour,
Je cherche à personnaliser via Card Mod ma carte Picture Elements et je n’y arrive pas pour ceux de type state-label :thinking:
J’y suis arrivé pour du state-icon, exemple :

  - type: state-icon
    entity: switch.prise_lave_linge
    style:
      top: 42.4%
      left: 45.4%
      '--mdc-icon-size': 16px
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: {% if states('switch.prise_lave_linge') == "on" %} green {% endif %};
          }

Comme vous l’aurez certainement compris, l’idée est d’afficher l’icône en vert quand la prise est allumée … ça fonctionne :smiley:
Mais par-contre pour du state-label là je sèche, autre exemple :

  - type: state-label
    entity: cover.porte_du_garage
    style:
      top: 93%
      left: 87.5%
      color: white
      font-weight: bold
      font-size: 14px

Merci d’avance pour votre aide :wink:

2

Salut,
Moi je fais pas un state label mais j’ai créé mes icones en png puis je les change avec des state_image

        - type: image
            entity: switch.multiprise_estelle_switch
            tap_action:
              action: toggle
            state_image:
              'on': /local/floorplan/icones/bulb-on2.png
              'off': /local/floorplan/icones/bulb-off2.png
              unavailable: /local/floorplan/icones/bulb-out2.png
            style:
              top: 78%
              left: 22%
              width: 2%
1 « J'aime »
3

Regarde ce sujet qui contient pas mal d’exemples et une vidéo :

4

Hello

Quel sujet ?? :thinking:

5

C’est édité :+1:

1 « J'aime »
6

J’ai (beaucoup) regardé avant de poser la question ici mais je dois vraiment pas être doué car je n’y arrive pas :roll_eyes:
Dans mon exemple l’état s’affiche ouvert ou fermé et je voudrais simplement que la couleur du texte change en fonction.

7

Et directement à partir de la documentation :

8

En suivant la documentation, dans mon exemple, ça devrait fonctionner comme ça :

  - type: state-label
    entity: cover.porte_du_garage
    style:
      top: 93%
      left: 87.5%
      color: white
      font-weight: bold
      font-size: 14px
    card_mod:
      style: |
        :host {
          color: green;
        }

Là j’ai même pas mis de conditions mais le texte ne passe pas en vert !

Autre essai mais toujours pas concluant :face_exhaling:

    card_mod:
      style:
        hui-state-label-element:
          $: |
            div {
              color: green;
            }
9

Voici ce que tu souhaites :

animate

Code de la carte 
type: picture-elements
image: >-
  https://www.smarthomeexplained.com/wp-content/uploads/2020/04/homeassistant.png?ezimgfmt=ngcb3/notWebP
elements:
  - type: state-icon
    tap_action:
      action: toggle
    entity: light.ceiling_lights
    style:
      top: 20%
      left: 10%
  - type: state-label
    tap_action:
      action: toggle
    entity: light.ceiling_lights
    style:
      top: 20%
      left: 22%
    card_mod:
      style: |
        {% if is_state('light.ceiling_lights','on') %}
          div{
            color:green;
            font-family: cursive;
          }
        {% else %}
          div{
            color:#ff0000;
            font-family: fantasy;
          }
        {% endif %}

Je te conseille de revoir la vidéo que j’ai faite car j’ai suivi ce que je dis (cela fais des mois que je n’utilisais plus card-mod)… :wink:

1 « J'aime »