Couleur button-card / thermostat

Entraide Home Assistant
1

Bonjour à tous et toutes,

Je souhaiterais lorsque je sélectionne la température sur 19°c, (idem pour les autres) soit d’une couleur différente par rapport aux autres. Est-ce que c’est possible?
Pour le on/off j’ai réussi.

Merci d’avance
C.

type: custom:vertical-stack-in-card
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.mon_thermostat_indoor_temperature
            name: T° thermostat
        show:
          extrema: true
          average: true
          graph: true
        hour24: true
        hours_to_show: 72
        card_mod:
          style: |
            .info.flex .info__item .info__item__type {
              color: red;
              align-self: center;
            }
            .info.flex .info__item .info__item__value {
              color: orange;
              align-self: center;
            }
            .info.flex .info__item .info__item__time {
              color: cyan;
              align-self: center;
            }
            .states.flex .state .state__value.ellipsis{
              color: orange;
            }
            .states.flex .state .state__uom.ellipsis{
              color: orange;
            }
            .header.flex .icon {
              --mdc-icon-size: 30px;
            }
            .header.flex .name.flex {
              color: green;
              font-size: 20px;
              opacity: 1;
            }
            .header.flex .icon {
              color: red;
            }
            ha-card {
              background: transparent;
              font-weight: bold;
            }
    card_mod:
      style: |
        ha-card {
          height: auto;
          background: none !important;
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.mon_thermostat
        primary_info: none
        secondary_info: none
        icon_type: none
        show_temperature_control: true
        card_mod:
          style: |
            ha-card {
              height: 350px;
              background: none !important;
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        type: custom:button-card
        tap_action:
          action: perform-action
          service: climate.toggle
          target:
            device_id: 6aba0e02a7c04bf3804888175ef19a03
        entity: climate.mon_thermostat
        name: On / Off
        icon: mdi:thermometer-off
        show_state: false
        styles:
          icon:
            - color: |
                [[[
                  if (states['climate.mon_thermostat'].state == 'heat') return "green";
                  return "red";
                ]]]
        state:
          - value: 'off'
            styles:
              name:
                - color: rgba(255,0,0,0.7)
                - animation: blink 2s ease infinite
          - value: heat
            styles:
              name:
                - color: green
        card_mod:
          style: |
            ha-card {
              height: auto;
              background: none !important;            
      - show_name: true
        show_icon: true
        type: custom:button-card
        tap_action:
          action: perform-action
          perform_action: climate.set_temperature
          target:
            device_id: 6aba0e02a7c04bf3804888175ef19a03
          data:
            temperature: 19
        entity: climate.mon_thermostat
        name: '19'
        icon: mdi:temperature-celsius
        card_mod:
          style: |
            ha-card {
              height: auto;
              background: none !important;
            }
      - show_name: true
        show_icon: true
        type: custom:button-card
        tap_action:
          action: perform-action
          service: climate.set_temperature
          target:
            device_id: 6aba0e02a7c04bf3804888175ef19a03
          data:
            temperature: 20
        entity: climate.mon_thermostat
        name: 20
        icon: mdi:temperature-celsius
        card_mod:
          style: |
            ha-card {
              height: auto;
              background: none !important;
              
      - show_name: true
        show_icon: true
        type: custom:button-card
        tap_action:
          action: perform-action
          service: climate.set_temperature
          target:
            device_id: 6aba0e02a7c04bf3804888175ef19a03
          data:
            temperature: 21
        entity: climate.mon_thermostat
        name: '21'
        icon: mdi:temperature-celsius
        card_mod:
          style: |
            ha-card {
              height: auto;
              background: none !important;
      - show_name: true
        show_icon: true
        type: custom:button-card
        tap_action:
          action: perform-action
          service: climate.set_temperature
          target:
            device_id: 6aba0e02a7c04bf3804888175ef19a03
          data:
            temperature: 22
        entity: climate.mon_thermostat
        name: '22'
        icon: mdi:temperature-celsius
        card_mod:
          style: |
            ha-card {
              height: auto;
              background: none !important; 
card_mod:
  style: |
    ha-card {
      height: auto;
      background: none !important;
      box-shadow: 0px 0px 1px 1px #FFC300 !important;

Capture d’écran 2024-08-12 à 14.05.56
Capture d’écran 2024-08-12 à 14.05.561052×1020 46.7 KB

2

Bonjour, que quoi soit d’une couleur différente ? Ta demande n’est pas claire… Quand tu dis « je sélectionne la température », tu parles du clic sur le bouton « 19 » en bas, c’est ça ?

Par ailleurs, tu mets du card_mod de partout y compris sur des custom:button-card, ce qui n’a aucun intérêt.

3

re,

tout a fait :smiling_face:
Capture d’écran 2024-08-12 à 14.37.14

Je suis pas le champion de HA, je m’inspire et j’fais pas mal de copier coller et puis j’essaie certaine chose^^ en bidouillant :wink:

merci pour ton info, je vais regarder pour travailler le card mod

4

Personnellement, je traivaille qu’avec custom:button-card et si je devais faire une carte ayant le visuel que tu veux, je partirais sur une carte de ce type avec des custom_fields dont un pour la mini-graph-card.
Tu voudrais donc que lors du clic sur le bouton « 19 » l’icône « °C » et le « 19 » soient écrits en vert et idem pour les autres boutons (20, 21, 22) et si le bouton n’est pas cliqué, l’écriture reste telle que tu l’as définie sur ta capture ?

5

Oui tout à fait :slight_smile:

Merci

6

Essaie ça :

      - type: custom:button-card
        show_name: true
        show_icon: true
        entity: climate.mon_thermostat
        name: '19'
        icon: mdi:temperature-celsius
        styles:
          icon:
            - color: |
                [[[
                  if (states['climate.mon_thermostat'].state == '19.0')
                    return 'rgba(0,255,0,1.0)';
                  else
                    return 'orange';
                ]]]
        tap_action:
          action: perform-action
          perform_action: climate.set_temperature
          target:
            device_id: 6aba0e02a7c04bf3804888175ef19a03
          data:
            temperature: 19
        card_mod:
          style: |
            ha-card {
              height: auto;
              background: none !important;
            }

Si l’entité est bonne, ça devrait changer la couleur de l’icône « °C ».

Sinon, il faut regarder dans « Outils de développement » → « ETATS » quelle entité indique la température cible.

EDIT : je pense qu’il faut passer par un

(state_attr('climate.mon_thermostat', 'temperature') == '19.0')
7

Merci mais toujours au même point. J’ai essayé les 2 facons :persevere:

Capture d’écran 2024-08-12 à 16.01.57
Capture d’écran 2024-08-12 à 16.01.571114×184 11.6 KB

info du thermostat :

Capture d’écran 2024-08-12 à 16.04.12
Capture d’écran 2024-08-12 à 16.04.121170×840 68.7 KB

8

En mettant ceci ca fonctionne :

        state:
          - operator: template
            value: '[[[ return entity.attributes.temperature == 19 ]]]'
            color: rgba(255,255,255,255)
1 « J'aime »
9

Capture d’écran 2024-08-12 à 17.09.45
Capture d’écran 2024-08-12 à 17.09.451118×414 19.6 KB

Capture d’écran 2024-08-12 à 17.09.54
Capture d’écran 2024-08-12 à 17.09.541132×408 19.2 KB

Capture d’écran 2024-08-12 à 17.09.26
Capture d’écran 2024-08-12 à 17.09.261058×278 13.1 KB

10

Avec un peu de rouge; les autres temperature ne sont pas activées

        state:
          - operator: template
            value: '[[[ return entity.attributes.temperature == 19 ]]]'
            color: green
          - operator: template
            value: 'off'
            color: red
            icon: mdi:thermometer-off

Capture d’écran 2024-08-12 à 17.25.29
Capture d’écran 2024-08-12 à 17.25.291070×274 13.4 KB

1 « J'aime »