Changer une image de fond en fonction d'un sensor

Pandta · Juillet 17, 2022, 4:48

Bonjour à tous, je débute le « bidouillage » de mon dashboard et j’aimerai avoir un conseil.
J’ai créer deux boutons, l’un est un icône ON/OFF qui change de couleur en fonction de la capacité de mes batteries (je commence une installation photovoltaïque). L’autre est un bouton dont l’image de fond change selon s’il est sur ON ou sur OFF. J’essaie de coupler les deux programme afin que celui à base d’images puisse avoir un un contour qui change de couleur en fonction de la capacités des batteries. En gros comment insérer des images venant du dossier www à la place des couleurs dans cet exemple

type: custom:button-card
name: Frigo
entity: switch.frigo_outlet
label: >
  [[[ return 'Capacité : ' + states['sensor.wks1_battery_capacity_2'].state + '
  %'; ]]]
show_name: true
show_last_changed: false
show_state: true
show_label: true
color: auto
color_type: icon
icon: mdi:power-socket-fr
styles:
  name:
    - font-size: 120%
  label:
    - color: gray
    - font-size: 80%
  icon:
    - color: |
        [[[
          if (states['sensor.wks1_battery_capacity_2'].state < 50) return "red";
          if (states['sensor.wks1_battery_capacity_2'].state < 70) return "orangered";
          if (states['sensor.wks1_battery_capacity_2'].state < 80) return "orange";
          if (states['sensor.wks1_battery_capacity_2'].state < 90) return "yellowgreen";
          if (states['sensor.wks1_battery_capacity_2'].state = 100) return "green";
          return "blue";
        ]]]
tap_action:
  action: toggle

Pandta · Juillet 17, 2022, 4:50

l’autre àa base d’images

type: custom:button-card
styles:
  card:
    - width: 220px
    - height: 110px
entity: switch.frigo_outlet
tap_action:
  action: toggle
icon: none
state:
  - value: 'on'
    styles:
      card:
        - background: url(/local/background/Bouton_ON2.png) 
  - value: 'off'
    styles:
      card:
        - background: url(/local/background/Bouton_OFF.png)

Pulpy-Luke · Juillet 17, 2022, 4:53

Salut,

Justement je suis devant un exemple

type: gauge
entity: input_number.seuil_isolation
card_mod:
  style: |
    ha-card {
      {% if states('input_number.seuil_isolation')|float < 10 %}
        background: url('/local/images/red.png');
      {% else %}
        background: url('/local/images/green.png');
      {% endif %}
    }

il faut par contre réintégrer le style que tu as déjà (mais syntaxe un peu différente)

type: gauge
entity: input_number.seuil_isolation
card_mod:
  style: |
    ha-card {
      width: 220px;
      height: 110px;
      {% if states('input_number.seuil_isolation')|float < 10 %}
        background: url('/local/images/red.png');
      {% else %}
        background: url('/local/images/green.png');
      {% endif %}
    }

Pandta · Juillet 17, 2022, 5:34

Un truc comme ça? Mais ça passe pas…

type: custom:button-card
styles:
  card:
    - width: 220px
    - height: 110px
entity: switch.frigo_outlet
tap_action:
  action: toggle
icon: none
states:
  - value: 'on'
    styles:
      card:
     {
        {% if states('sensor.wks1_battery_capacity_2').state < 80}
        background: url('/local/background/Bouton_ON_JAUNE.png');
        {% if states('sensor.wks1_battery_capacity_2').state < 70)}
        background: url('/local/background/Bouton_ON_ORANGE.png');
        {% if states('sensor.wks1_battery_capacity_2').state < 60}
        background: url('/local/background/Bouton_ON_ROUGE.png');
        {% else %}
        background: url('/local/background/Bouton_ON_VERT.png');
        {% endif %}
    }
  - value: 'off'
    styles:
      card:
              {
        {% if states('sensor.wks1_battery_capacity_2').state < 80}
        background: url('/local/background/Bouton_ON_JAUNE.png');
        {% if states('sensor.wks1_battery_capacity_2').state < 70)}
        background: url('/local/background/Bouton_ON_ORANGE.png');
        {% if states('sensor.wks1_battery_capacity_2').state < 60}
        background: url('/local/background/Bouton_ON_ROUGE.png');
        {% else %}
        background: url('/local/background/Bouton_ON_VERT.png');
        {% endif %}
    }

Pulpy-Luke · Juillet 17, 2022, 5:36

ça empêche pas d’utiliser la bonne syntaxe et la bonne indentation yaml, hein
Sur l"exemple que je t’ai donné

c’est pas à mettre dans un state
il manque le selecteur ha-card
les { sont mals placées

Dans ton exemple, dans un state

les { sont mals placées
c’est pas background qu’il te faut, mais directement l’image

Plutôt que de gérer 6 images (3 couleurs * 2 états), passe par une couleur ou une image de fond de bouton + 2 images d’état (avec éventuellement de la transparence)

Genre comme ça

type: custom:button-card
card_mod:
  style: |
    ha-card {
      width: 220px;
      height: 110px;
        {% if states('sensor.wks1_battery_capacity_2').state < 80}
           background: url('/local/background/Bouton_ON_JAUNE.png');
         {% elif states('sensor.wks1_battery_capacity_2').state < 70)}
           background: url('/local/background/Bouton_ON_ORANGE.png');
        {% elif states('sensor.wks1_battery_capacity_2').state < 60}
           background: url('/local/background/Bouton_ON_ROUGE.png');
        {% else %}
           background: url('/local/background/Bouton_ON_VERT.png');
        {% endif %}
entity: switch.frigo_outlet
tap_action:
  action: toggle
icon: none
state:
  - value: 'on'
    styles:
      card:
        - background: url(/local/background/Bouton_ON2.png) 
  - value: 'off'
    styles:
      card:
        - background: url(/local/background/Bouton_OFF.png)

Pandta · Juillet 17, 2022, 5:49

Woua en effet, un peu plus d’attention de ma part serait mieux, les 38°c en Bretagne on est pas habitué
J’vais revoir ma copie après une pose!
J’te remercie en tout cas!

jerome6994 · Juillet 17, 2022, 6:05

Avec un rendu visuel du résultat c’est top. Ça donnera envie à d’autre de faire ou pas

WarC0zes · Juillet 18, 2022, 5:21

Obliger d’utiliser card-mod si tu as plusieurs status (plus de 2 ), car button-card ne peu faire que sur on/off.
@Pulpy-Luke ta oublier de préciser qui faut installer card-mod . Certe dans l’exemple du code on le voit, mais l’utilisateur lambda n’est pas sensé savoir qui faut c’est carte en plus. Et vu le code de @Pandta , il ne doit pas l’avoir.

Pandta · Juillet 18, 2022, 7:55

Bonjour et Merci!
Bon, pour commencer, comme je suis un boulet, en effet, l’installation de card-mod n’était pas faite…C’est chose faite à présent.
Donc, je vous joins un montage visuel pour mieux comprendre. en haut, le "bouton qui fonctionne sur deux image de fond ON et OFF, en dessous, la version avec le fichier que vous m’avez proposé. Bon, ça marche pas (enfin si ça fait toujours ON/OFF) mais pas de changement de couleurs et l’image est dupliquée 12 fois.
En dessous une des images que j’essaie d’obtenir. Après, j’me complique un peu la vie (et la votre ) Mais je suis sur que ça va être trop bien comme rendu.

Pandta · Juillet 18, 2022, 12:12

Bon, j’ai réussi à obtenir quelque chose. En me simplifiant la vie…Bouton ON/OFF en image et fond qui change de couleur. C’était plus simple et ça fait le taf! Y’a plus qu’à rendre ça un peu plus « joli » avec un fond de dashboard, mettre les bons sensors et se sera nikel. Le but final étant, de manière simple, d’avoir un visuel sur ce que l’on peut allumer ou non en fonction de la production solaire et de la capacité des batteries. Un automatisme pour bloqué certain appareil si la conso est trop élevée et hop, ce sera top!
Encore merci en tout cas! Je vous laisse le petit programme, un peu adapté de copié/collé, un peu de pif (oui dsl) et hop!

type: custom:button-card
name: Lave Linge
styles:
  card:
    - width: 110px
    - height: 75px
entity: switch.lave_linge_outlet
tap_action:
  action: toggle
icon: none
state:
  - value: 'on'
    styles:
      card:
        - background: url(/local/image/Bouton_ON_3.png) round
        - background-color: |
            [[[
              if (states['sensor.wks1_battery_capacity_2'].state < 50) return "red";
              if (states['sensor.wks1_battery_capacity_2'].state < 70) return "orangered";
              if (states['sensor.wks1_battery_capacity_2'].state < 80) return "orange";
              if (states['sensor.wks1_battery_capacity_2'].state < 90) return "yellowgreen";
              if (states['sensor.wks1_battery_capacity_2'].state = 100) return "green";
            ]]]
  - value: 'off'
    styles:
      card:
        - background: url(/local/image/Bouton_OFF_3.png) round
        - background-color: |
            [[[
              if (states['sensor.wks1_battery_capacity_2'].state < 50) return "red";
              if (states['sensor.wks1_battery_capacity_2'].state < 70) return "orangered";
              if (states['sensor.wks1_battery_capacity_2'].state < 80) return "orange";
              if (states['sensor.wks1_battery_capacity_2'].state < 90) return "yellowgreen";
              if (states['sensor.wks1_battery_capacity_2'].state = 100) return "green";
            ]]]

Pandta · Juillet 18, 2022, 12:13

Pulpy-Luke · Juillet 18, 2022, 12:27

ça fonctionne donc c’est le principal, par contre le fait de passer par les states pour la couleur de fond t’oblige à faire 2 fois le code (pour on et pour off)…
En passant par card_mod, tu aurai la couleur d’un coté (codé 1 fois) et les boutons de l’autre (comme là pour l’image)

Pandta · Juillet 18, 2022, 12:38

J’ai bien essayé ça en suivant ton idée, mais je merde quelque part, ça duplique l’image dans la carte…Comme j’ai pas trouvé de solution, j’en suis revenu au plus simple qui fonctionnait.