Comment changer l'intensité de la couleur d'une icône sur une card Button-card

[clerelus]

Impossible de changer l’intensité de la couleur d’une icône sur une card Button-card

*Bonjour,

J’ai créé une card sous Button-Card qui affiche et gère l’état de mes radiateurs.
Chaque radiateur peut avoir un état indépendant en fonction des actions sélectionnées (barre inférieure) : Arrêt, Automatique, HG, Eco, Confort.

En fonction des états sélectionnés, l’icône « Radiator » change et la couleur s’active en vert avec une variation de l’intensité de celle-ci : Confort = 100%, Eco = 70%, HG = 50%, Arrêt = couleur neutre.
Jusque là, tout fonctionne très bien.

C’est au niveau du mode automatique que je rencontre des difficultés. Le mode automatique est lié à un programme sous Scheduler qui définit les plages de fonctionnement avec l’état du radiateur.

Exemple :

• de 6h à 20h, le radiateur est en mode Arrêt
• de 20h à 22h30, le radiateur est en mode Confort
• de 22h30 à 6h, le radiateur est en mode Eco

Le programme fonctionne bien.

Par contre, je n’arrive pas à faire varier l’intensité de la couleur de l’icône en fonction des modes Confort ou Eco du programme. L’icône « Radiator » passe du bleu (mode éteint) ou vert 100% (mode allumé).

Voici le code utilisé :

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:button-card
        entity: light.radiateur_parent
        name: Chambre Parent
        icon: |
          [[[ 
            if ((states['input_boolean.radiateur_parent_off'].state == "on") && (states['input_boolean.radiateur_parent_hg'].state == "off")) return "mdi:radiator-disabled";
            else if ((states['input_boolean.radiateur_parent_confort'].state == "on") && (states['input_boolean.radiateur_parent_hg'].state == "off")) return "mdi:radiator";
            else if ((states['input_boolean.radiateur_parent_eco'].state == "on") && (states['input_boolean.radiateur_parent_hg'].state == "off")) return "mdi:radiator";
            else if ((states['input_boolean.chauffage_eteint'].state == "off") && (states['input_boolean.radiateur_parent_hg'].state == "on")) return "mdi:radiator";
            else if ((states['input_boolean.radiateur_parent_auto'].state == "on") && (states['light.radiateur_parent'].state == "on")) return "mdi:radiator";
            else if ((states['input_boolean.radiateur_parent_auto'].state == "on") && (states['light.radiateur_parent'].state == "30")) return "mdi:radiator";
            else if ((states['input_boolean.radiateur_parent_auto'].state == "on") && (states['light.radiateur_parent'].state == "off")) return "mdi:radiator-disabled";
            else if (states['input_boolean.chauffage_eteint'].state == "on") return "mdi:radiator-disabled";
          ]]]
        styles:
          icon:
            - color: |
                [[[ 
                  if ((states['input_boolean.radiateur_parent_off'].state == "on") && (states['input_boolean.radiateur_parent_hg'].state == "off")) return "rgb(68, 115, 158)";
                  else if ((states['input_boolean.radiateur_parent_confort'].state == "on") && (states['input_boolean.radiateur_parent_hg'].state == "off")) return "rgb(100, 200, 0)";
                  else if ((states['input_boolean.radiateur_parent_eco'].state == "on") && (states['input_boolean.radiateur_parent_hg'].state == "off"))  return "rgb(100, 200, 0, 70%)";
                  else if ((states['input_boolean.chauffage_eteint'].state == "off") && (states['input_boolean.radiateur_parent_hg'].state == "on")) return "rgb(100, 200, 0, 50%)";
                  else if ((states['input_boolean.radiateur_parent_auto'].state == "on") && (states['light.radiateur_parent'].state == "on")) return "rgb(100, 200, 0)";          
                  else if ((states['input_boolean.radiateur_parent_auto'].state == "on") && (states['light.radiateur_parent'].state == "30")) return "rgb(100, 200, 0, 70%)";
                  else if ((states['input_boolean.radiateur_parent_auto'].state == "on") && (states['light.radiateur_parent'].state == "off")) return "rgb(68, 115, 158)";
                  else if (states['input_boolean.chauffage_eteint'].state == "on") return "rgb(68, 115, 158)";
                ]]]
        size: 100px
        show_state: false
        tap_action:
          action: none
        hold_action:
          action: none
      - type: horizontal-stack
        cards:
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.radiateur_parent_off
            name: 'Off'
            theme: Github Dark Theme
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.radiateur_parent_auto
            name: Auto
            theme: Github Dark Theme
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.radiateur_parent_hg
            name: Hors-Gel
            theme: Github Dark Theme
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.radiateur_parent_eco
            name: Eco
            theme: Github Dark Theme
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.radiateur_parent_confort
            name: Confort
            theme: Github Dark Theme
  - type: vertical-stack
    cards:
      - type: custom:button-card
        entity: light.radiateur_tao
        name: Chambre Tao
        icon: |
          [[[ 
            if ((states['input_boolean.radiateur_tao_off'].state == "on") && (states['input_boolean.radiateur_tao_hg'].state == "off")) return "mdi:radiator-disabled";
            else if ((states['input_boolean.radiateur_tao_confort'].state == "on") && (states['input_boolean.radiateur_tao_hg'].state == "off")) return "mdi:radiator";
            else if ((states['input_boolean.radiateur_tao_eco'].state == "on") && (states['input_boolean.radiateur_tao_hg'].state == "off")) return "mdi:radiator";
            else if ((states['input_boolean.chauffage_eteint'].state == "off") && (states['input_boolean.radiateur_tao_hg'].state == "on")) return "mdi:radiator";
            else if ((states['input_boolean.radiateur_tao_auto'].state == "on") && (states['light.radiateur_tao'].state == "on")) return "mdi:radiator";
            else if ((states['input_boolean.radiateur_tao_auto'].state == "on") && (states['light.radiateur_tao'].state == "30")) return "mdi:radiator";
            else if ((states['input_boolean.radiateur_tao_auto'].state == "on") && (states['light.radiateur_tao'].state == "off")) return "mdi:radiator-disabled";
            else if (states['input_boolean.chauffage_eteint'].state == "on") return "mdi:radiator-disabled";
          ]]]
        styles:
          icon:
            - color: |
                [[[ 
                  if ((states['input_boolean.radiateur_tao_off'].state == "on") && (states['input_boolean.radiateur_tao_hg'].state == "off")) return "rgb(68, 115, 158)";
                  else if ((states['input_boolean.radiateur_tao_confort'].state == "on") && (states['input_boolean.radiateur_tao_hg'].state == "off")) return "rgb(100, 200, 0)";
                  else if ((states['input_boolean.radiateur_tao_eco'].state == "on") && (states['input_boolean.radiateur_tao_hg'].state == "off")) return "rgb(100, 200, 0, 70%)";
                  else if ((states['input_boolean.chauffage_eteint'].state == "off") && (states['input_boolean.radiateur_tao_hg'].state == "on")) return "rgb(100, 200, 0, 50%)";
                  else if ((states['input_boolean.radiateur_tao_auto'].state == "on") && (states['light.radiateur_tao'].state == "on")) return "rgb(100, 200, 0)";          
                  else if ((states['input_boolean.radiateur_tao_auto'].state == "on") && (states['light.radiateur_tao'].state == "30")) return "rgb(100, 200, 0, 70%)";
                  else if ((states['input_boolean.radiateur_tao_auto'].state == "on") && (states['light.radiateur_tao'].state == "off")) return "rgb(68, 115, 158)";
                  else if (states['input_boolean.chauffage_eteint'].state == "on") return "rgb(68, 115, 158)";
                ]]]
        size: 100px
        show_state: false
        tap_action:
          action: none
        hold_action:
          action: none
      - type: horizontal-stack
        cards:
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            name: 'Off'
            theme: Github Dark Theme
            entity: input_boolean.radiateur_tao_off
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.radiateur_tao_auto
            name: Auto
            theme: Github Dark Theme
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.radiateur_tao_hg
            name: Hors-Gel
            theme: Github Dark Theme
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.radiateur_tao_eco
            name: Eco
            theme: Github Dark Theme
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.radiateur_tao_confort
            name: Confort
            theme: Github Dark Theme
  - type: vertical-stack
    cards:
      - type: custom:button-card
        entity: light.radiateur_lalie
        name: Chambre Lalie
        icon: |
          [[[ 
            if ((states['input_boolean.radiateur_lalie_off'].state == "on") && (states['input_boolean.radiateur_lalie_hg'].state == "off")) return "mdi:radiator-disabled";
            else if ((states['input_boolean.radiateur_lalie_confort'].state == "on") && (states['input_boolean.radiateur_lalie_hg'].state == "off")) return "mdi:radiator";
            else if ((states['input_boolean.radiateur_lalie_eco'].state == "on") && (states['input_boolean.radiateur_lalie_hg'].state == "off")) return "mdi:radiator";
            else if ((states['input_boolean.chauffage_eteint'].state == "off") && (states['input_boolean.radiateur_lalie_hg'].state == "on")) return "mdi:radiator";
            else if ((states['input_boolean.radiateur_lalie_auto'].state == "on") && (states['light.radiateur_lalie'].state == "on")) return "mdi:radiator";
            else if ((states['input_boolean.radiateur_lalie_auto'].state == "on") && (states['light.radiateur_lalie'].state == "30")) return "mdi:radiator";
            else if ((states['input_boolean.radiateur_lalie_auto'].state == "on") && (states['light.radiateur_lalie'].state == "off")) return "mdi:radiator-disabled";
            else if (states['input_boolean.chauffage_eteint'].state == "on") return "mdi:radiator-disabled";
          ]]]
        styles:
          icon:
            - color: |
                [[[ 
                  if ((states['input_boolean.radiateur_lalie_off'].state == "on") && (states['input_boolean.radiateur_lalie_hg'].state == "off")) return "rgb(68, 115, 158)";
                  else if ((states['input_boolean.radiateur_lalie_confort'].state == "on") && (states['input_boolean.radiateur_lalie_hg'].state == "off")) return "rgb(100, 200, 0)";
                  else if ((states['input_boolean.radiateur_lalie_eco'].state == "on") && (states['input_boolean.radiateur_lalie_hg'].state == "off")) return "rgb(100, 200, 0, 70%)";
                  else if ((states['input_boolean.chauffage_eteint'].state == "off") && (states['input_boolean.radiateur_lalie_hg'].state == "on")) return "rgb(100, 200, 0, 50%)";
                  else if ((states['input_boolean.radiateur_lalie_auto'].state == "on") && (states['light.radiateur_lalie'].state == "on")) return "rgb(100, 200, 0)";          
                  else if ((states['input_boolean.radiateur_lalie_auto'].state == "on") && (states['light.radiateur_lalie'].state == "30")) return "rgb(100, 200, 0, 70%)";
                  else if ((states['input_boolean.radiateur_lalie_auto'].state == "on") && (states['light.radiateur_lalie'].state == "off")) return "rgb(68, 115, 158)";
                  else if (states['input_boolean.chauffage_eteint'].state == "on") return "rgb(68, 115, 158)";
                ]]]
        size: 100px
        show_state: false
        tap_action:
          action: none
        hold_action:
          action: none
      - type: horizontal-stack
        cards:
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            name: 'Off'
            theme: Github Dark Theme
            entity: input_boolean.radiateur_lalie_off
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.radiateur_lalie_auto
            name: Auto
            theme: Github Dark Theme
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.radiateur_lalie_hg
            name: Hors-Gel
            theme: Github Dark Theme
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.radiateur_lalie_eco
            name: Eco
            theme: Github Dark Theme
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.radiateur_lalie_confort
            name: Confort
            theme: Github Dark Theme
  - type: vertical-stack
    cards:
      - type: custom:button-card
        entity: light.seche_serviette
        name: Salle de bain
        icon: |
          [[[ 
            if ((states['input_boolean.seche_serviette_off'].state == "on") && (states['input_boolean.seche_serviette_hg'].state == "off")) return "mdi:heating-coil";
            else if ((states['input_boolean.seche_serviette_confort'].state == "on") && (states['input_boolean.seche_serviette_hg'].state == "off")) return "mdi:heating-coil";
            else if ((states['input_boolean.seche_serviette_eco'].state == "on") && (states['input_boolean.seche_serviette_hg'].state == "off")) return "mdi:heating-coil";
            else if ((states['input_boolean.chauffage_eteint'].state == "off") && (states['input_boolean.seche_serviette_hg'].state == "on")) return "mdi:heating-coil";
            else if ((states['input_boolean.seche_serviette_auto'].state == "on") && (states['light.seche_serviette'].state == "off")) return "mdi:heating-coil";
            else if ((states['input_boolean.seche_serviette_auto'].state == "on") && (states['light.seche_serviette'].state == "30")) return "mdi:heating-coil";
            else if ((states['input_boolean.seche_serviette_auto'].state == "on") && (states['light.seche_serviette'].state == "on")) return "mdi:heating-coil";
            else if (states['input_boolean.chauffage_eteint'].state == "on") return "mdi:heating-coil";
          ]]]
        styles:
          icon:
            - color: |
                [[[ 
                  if ((states['input_boolean.seche_serviette_off'].state == "on") && (states['input_boolean.seche_serviette_hg'].state == "off")) return "rgb(68, 115, 158)";
                  else if ((states['input_boolean.seche_serviette_confort'].state == "on") && (states['input_boolean.seche_serviette_hg'].state == "off")) return "rgb(100, 200, 0)";
                  else if ((states['input_boolean.seche_serviette_eco'].state == "on") && (states['input_boolean.seche_serviette_hg'].state == "off")) return "rgb(100, 200, 0, 70%)";
                  else if ((states['input_boolean.chauffage_eteint'].state == "off") && (states['input_boolean.seche_serviette_hg'].state == "on")) return "rgb(100, 200, 0, 50%)";
                  else if ((states['input_boolean.seche_serviette_auto'].state == "on") && (states['light.seche_serviette'].state == "off")) return "rgb(68, 115, 158)";
                  else if ((states['input_boolean.seche_serviette_auto'].state == "on") && (states['light.seche_serviette'].state == "30")) return "rgb(100, 200, 0, 70%)";
                  else if ((states['input_boolean.seche_serviette_auto'].state == "on") && (states['light.seche_serviette'].state == "on")) return "rgb(100, 200, 0)";
                  else if (states['input_boolean.chauffage_eteint'].state == "on") return "rgb(68, 115, 158)";
                ]]]
        size: 90px
        show_state: false
        tap_action:
          action: none
        hold_action:
          action: none
      - type: horizontal-stack
        cards:
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.seche_serviette_off
            name: 'Off'
            theme: Github Dark Theme
            show_state: false
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.seche_serviette_auto
            name: Auto
            theme: Github Dark Theme
            show_state: false
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.seche_serviette_hg
            name: Hors-Gel
            theme: Github Dark Theme
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.seche_serviette_eco
            name: Eco
            theme: Github Dark Theme
          - show_icon: true
            show_name: false
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.seche_serviette_confort
            name: Confort
            theme: Github Dark Theme
title: Radiateurs

J’espère que mes explications ont été claires. Auriez-vous une idée pour résoudre ce problème qui je l’avoue est purement cosmétique ?

Merci
*

Raspberry Pi 4

---

Texte à remplacer par votre configuration

Comment récupérer ma configuration :
Dans votre HA, Menu latéral Paramètres > Système > Corrections puis les trois petits points en haut a droite > Informations Système puis une fois en bas Copier

---

[Pulpy-Luke]

Salut,

Je pense que c’est pas RGB qu’il faut utiliser mais RGBA .RGB ça ne gère pas la tranparence.

CSS RGB and RGBA Colors

Après et ça n’a rien a voir avec ta demande, mais je pense que tu t’embêtes beaucoup avec les input_boolean pour faire les modes de ton chauffage…
Etant donné qu’il ne peut y voir qu’un mode actif à la fois, je pense que les input select sont beaucoup plus appropriés

Input Select

Ensuite il faut bricoler un peu pour passer d’une liste déroulante à un menu comme toi, mais c’est pas super compliqué (ici c’est un selecte mais c’est le même principe

  type: custom:auto-entities
  show_empty: false
  card:
    type: custom:mushroom-chips-card
  card_param: chips
  filter:
    template: >
      {% set ns =
      namespace(select=[],entity="select.convecteur_bureau_cable_outlet_mode")
      %} {% for opt in state_attr(ns.entity, 'options') %}
        {% set icon = iif(opt== 'off', 'mdi:radiator-off', icon) %}
        {% set icon_color_select = iif(opt== 'off', 'red', icon_color_select) %}
        {% set icon = iif(opt== 'frost_protection', 'mdi:snowflake-thermometer', icon) %}
        {% set icon_color_select = iif(opt== 'frost_protection', 'blue', icon_color_select) %}
        {% set icon = iif(opt== 'eco', 'mdi:thermometer-low', icon) %}
        {% set icon_color_select = iif(opt== 'eco', 'green', icon_color_select) %}
        {% set icon = iif(opt== 'comfort', 'mdi:checkbox-multiple-outline', icon) %}
        {% set icon_color_select = iif(opt== 'comfort', 'yellow', icon_color_select) %}
        {% set icon = iif(opt== 'comfort-1', 'mdi:numeric-1-box-multiple-outline', icon) %}
        {% set icon_color_select = iif(opt== 'comfort-1', 'yellow', icon_color_select) %}
        {% set icon = iif(opt== 'comfort-2', 'mdi:numeric-2-box-multiple-outline', icon) %}
        {% set icon_color_select = iif(opt== 'comfort-2', 'yellow', icon_color_select) %}
        {% set ns.select = ns.select + [
          {
            "type": "template",
            "icon": icon,
            "entity": ns.entity,
            "icon_color": '{{ iif(is_state("' ~ ns.entity ~ '", "' ~ opt ~ '"), "' ~ icon_color_select ~ '", "disabled") }}',
            "tap_action": {
              "action": "call-service",
              "service": "select.select_option",
              "service_data": {
                "entity_id": ns.entity,
                "option": opt
              }
            },
            "card_mod": {
              "style": 'ha-card {
                  {% if is_state( "' ~ ns.entity ~ '" , "' ~ opt ~ '" ) %}
                     --chip-background: rgba(var(--mush-rgb-state-entity), 0.3);
                  {% else %}
                    --chip-background: rgba(var(--rgb-grey), 0.1);
                  {% endif %}
                }'
            }
          }
        ] %}
      {% endfor %} {{ ns.select }}

[clerelus]

Bonjour Pulpy-Luke et merci pour ta réponse rapide.

Je ferais des essais avec le RGBA et je me pencherais sur la solution Input-select.

Merci encore pour ton aide.