🎨 [Mon Dashboard] - @Clemalex

[antyamok]

bonjour Clemalex,

Peux-tu me dire ce que tu as utilisé comme card pour faire la partie volet?
J’ai tenté avec grille mais je ne retrouve pas ce que je souhaite. J’aimerai qu’il y ait un titre principal comme par exemple le tien « Volets », puis compartimenter par pièce comme toi tu l’as fait en coin jour, coin nuit, coin coin (petit dél!re perso du vendredi aprem youhouuuuu).

De plus quel notion utilises-tu pour indiquer que le coin jour est fermé ?
Et enfin je souhaiterai changer la couleur des titres mais je ne vois pas quoi modifier comme valeur. Si tu as une idée… et je pense que tu meme la réponse !

[Clemalex]

@antyamok

coin coin (petit dél!re perso du vendredi aprem youhouuuuu)

J’ai adoré

Je te reponds dès que possible car la réponse ne sera pas forcément courte…

[deliwyn]

Joyeux Anniversaire @Clemalex !

[Clemalex]

[Clemalex]

@antyamok

De plus quel notion utilises-tu pour indiquer que le coin jour est fermé ?

J’utilise une entité créée (template_sensor) qui détermine l’état en fonction des volets de la zones :

sensor:
  - platform: template
    sensors:
      volet_jour_position:
        friendly_name: Partie Jour
        value_template: >
            {% if (state_attr('cover.volet_rue','current_position') | int == 100) and (state_attr('cover.volet_jardin','current_position') | int == 100) and (state_attr('cover.volet_cuisine','current_position') | int == 100) %}
              Ouverts
            {% elif (state_attr('cover.volet_rue','current_position') | int > 0) or (state_attr('cover.volet_jardin','current_position') | int > 0) or (state_attr('cover.volet_cuisine','current_position') | int > 0) %}
              Ouvert(s)
            {% else %}
               Fermés
            {% endif %}

[Clemalex]

@antyamok

Peux-tu me dire ce que tu as utilisé comme card pour faire la partie volet?
J’ai tenté avec grille mais je ne retrouve pas ce que je souhaite. J’aimerai qu’il y ait un titre principal

C’est l’utilisation d’une carte verticale qui contient une carte entités et une carte horizontale qui contient les boutons d’actions…

Ca donne ça :

[Clemalex]

Le code des boutons

type: vertical-stack
cards:
  - entities:
      - entity: sensor.volet_jour_position
        icon: 'mdi:weather-sunny'
        name: Partie Jour
        style: |
          .pointer{
          top: -5px;
          }
          :host {
            --paper-item-icon-active-color: var(--primary-color);
            --paper-item-icon-color: var(--primary-color);
          }
    show_header_toggle: false
    style: |
      ha-card {
      font-size: 23px;
      height: 45px;
      box-shadow: none;
      background-color: rgba(0,0,0,0);
      }
      ha-icon {
      color: var(--primary-color) !important;
      }
      .card-content{
      padding: 0px 16px 0px 16px;
      }
      .mdc-switch {
      displey: none;
      }
      hui-generic-entity-row {
      font-size: 10px;
      }
    type: entities
  - type: horizontal-stack
    cards:
      - template:
          - volet
          - volet_descendre_2_volets
          - volet_descendre
        variables:
          volet_1: cover.volet_rue
          volet_2: cover.volet_jardin
          volets: 'cover.volet_rue, cover.volet_jardin'
        type: 'custom:button-card'
      - template:
          - volet
          - volet_monter
          - volet_monter_2_volets
        variables:
          volet_1: cover.volet_rue
          volet_2: cover.volet_jardin
          volets: 'cover.volet_rue, cover.volet_jardin'
        type: 'custom:button-card'
      - template:
          - volet
          - volet_canicule
          - volet_canicule_2_volets
        variables:
          volet_1: cover.volet_rue
          volet_2: cover.volet_jardin
          volets: 'cover.volet_rue, cover.volet_jardin'
        type: 'custom:button-card'
      - template:
          - volet
          - volet_stop
          - volet_stop_2_volets
        variables:
          volet_1: cover.volet_rue
          volet_2: cover.volet_jardin
          volets: 'cover.volet_rue, cover.volet_jardin'
        type: 'custom:button-card'

[Clemalex]

Le code des modèles (templates)

button_card_templates:
  volet_stop:
    icon: 'mdi:stop'
    name: Stop
  volet_monter:
    icon: 'mdi:chevron-up'
    name: Monter
  volet_descendre:
    icon: 'mdi:chevron-down'
    name: Descendre
  volet_canicule:
    icon: 'mdi:weather-sunset-up'
    name: Soleil
    styles:
      icon:
        - transform: rotate(0.5turn)
  volet_stop_2_volets:
    variables:
      volet_1: ''
      volet_2: ''
      volets: ''
    tap_action:
      action: call-service
      service: cover.stop_cover
      service_data:
        entity_id: |
          [[[ return variables.volets ]]]
  volet_canicule_2_volets:
    variables:
      volet_1: ''
      volet_2: ''
      volets: ''
    styles:
      card:
        - background-color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--primary-background-inactive-color)';
              else return 'var(--primary-background-active-color)';
            ]]]
      icon:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]
      name:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]
    tap_action:
      action: call-service
      service: cover.set_cover_position
      service_data:
        entity_id: |
          [[[ return variables.volets ]]]
        position: 25
  volet_monter_2_volets:
    variables:
      volet_1: ''
      volet_2: ''
      volets: ''
    styles:
      card:
        - background-color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--primary-background-inactive-color)';
              else return 'var(--primary-background-active-color)';
            ]]]
      icon:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]
      name:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]  
    tap_action:
      action: call-service
      service: cover.open_cover
      service_data:
        entity_id: |
          [[[ return variables.volets ]]]
  volet_descendre_2_volets:
    variables:
      volet_1: ''
      volet_2: ''
      volets: ''
    styles:
      card:
        - background-color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].attributes.current_position == '0') ) return 'var(--primary-background-inactive-color)';
              else return 'var(--primary-background-active-color)';
            ]]]
      icon:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].attributes.current_position == '0') ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]
      name:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].attributes.current_position == '0') ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]  
    tap_action:
      action: call-service
      service: cover.close_cover
      service_data:
        entity_id: |
          [[[ return variables.volets ]]]
  volet:
    color: auto
    color_type: icon
    show_icon: true
    show_label: false
    show_last_changed: false
    show_name: true
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - height: 80px
        - width: 80px
        - margin: 5px 5px 0px 11px
        - padding: 0px 0px
        - background-color: var(--primary-background-active-color)
      grid:
        - position: relative
      icon:
        - position: absolute
        - left: 2px
        - top: '-15px'
        - transform: scale(1)
        - color: var(--primary-color)
      name:
        - position: absolute
        - left: 5px
        - bottom: 5px
        - font-variant: small-caps
        - font-size: 14px
        - color: var(--primary-color)

[antyamok]

Je te remercie pour toutes ses indications.
Je vais regarder ça dès que j’ai un peu de temps.

[antyamok]

Bon j’ai enfin pris le temps de regarder. Je me retrouve avec une erreur constante, peu importe ce que je fais. J’ai le message suivant

Button-card template « volet » is missing !

J’ai tenté de mettre le code dans un fichier button_card_templates.yaml ou dans ui-lovelace.yaml mais je me retrouve toujours avec cette erreur!

Un peu d’aide serait la bien venue

[Clemalex]

Partage tes fichiers, c’est un problème d’inclusion…

Partage ton ui-lovelace.yaml et ton button-card-templates.yaml ET une capture de ton arborescence (dossiers/fichiers)

enleve les données sensible

[antyamok]

Pour info, ici n’est présent mon HA non fonctionnel. Mais qui remplacera, quand j’y arriverai le HA basique fournie par défaut.

ui-lovelace

> ##########################################################################
#                                                                        #
#                              * SETTINGS *                              #
#                                                                        #
##########################################################################

button_card_template: !include button_card_templates.yaml


##########################################################################
#                                                                        #
#                              * LOVELACE *                              #
#                                                                        #
##########################################################################

views:
  - title: La Ome
    panel: true

button_card_templates

button_card_templates:
  volet_stop:
    icon: 'mdi:stop'
    name: Stop
  volet_monter:
    icon: 'mdi:chevron-up'
    name: Monter
  volet_descendre:
    icon: 'mdi:chevron-down'
    name: Descendre
  volet_canicule:
    icon: 'mdi:weather-sunset-up'
    name: Soleil
    styles:
      icon:
        - transform: rotate(0.5turn)
  volet_stop_2_volets:
    variables:
      volet_1: ''
      volet_2: ''
      volets: ''
    tap_action:
      action: call-service
      service: cover.stop_cover
      service_data:
        entity_id: |
          [[[ return variables.volets ]]]
  volet_canicule_2_volets:
    variables:
      volet_1: ''
      volet_2: ''
      volets: ''
    styles:
      card:
        - background-color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--primary-background-inactive-color)';
              else return 'var(--primary-background-active-color)';
            ]]]
      icon:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]
      name:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]
    tap_action:
      action: call-service
      service: cover.set_cover_position
      service_data:
        entity_id: |
          [[[ return variables.volets ]]]
        position: 25
  volet_monter_2_volets:
    variables:
      volet_1: ''
      volet_2: ''
      volets: ''
    styles:
      card:
        - background-color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--primary-background-inactive-color)';
              else return 'var(--primary-background-active-color)';
            ]]]
      icon:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]
      name:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]  
    tap_action:
      action: call-service
      service: cover.open_cover
      service_data:
        entity_id: |
          [[[ return variables.volets ]]]
  volet_descendre_2_volets:
    variables:
      volet_1: ''
      volet_2: ''
      volets: ''
    styles:
      card:
        - background-color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].attributes.current_position == '0') ) return 'var(--primary-background-inactive-color)';
              else return 'var(--primary-background-active-color)';
            ]]]
      icon:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].attributes.current_position == '0') ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]
      name:
        - color: |
            [[[
              if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].attributes.current_position == '0') ) return 'var(--grey-color)';
              else return 'var(--primary-color)';
            ]]]  
    tap_action:
      action: call-service
      service: cover.close_cover
      service_data:
        entity_id: |
          [[[ return variables.volets ]]]
  volet:
    color: auto
    color_type: icon
    show_icon: true
    show_label: false
    show_last_changed: false
    show_name: true
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - height: 80px
        - width: 80px
        - margin: 5px 5px 0px 11px
        - padding: 0px 0px
        - background-color: var(--primary-background-active-color)
      grid:
        - position: relative
      icon:
        - position: absolute
        - left: 2px
        - top: '-15px'
        - transform: scale(1)
        - color: var(--primary-color)
      name:
        - position: absolute
        - left: 5px
        - bottom: 5px
        - font-variant: small-caps
        - font-size: 14px
        - color: var(--primary-color)

Capture de l’arborescence

[Clemalex]

La vue est vide ? Je ne vois pas l’appel au modèle …

Il me semble que c’est bien un problème d’inclusion.

Regarde par ici pour l’exemple : GitHub - matt8707/hass-config: ✨ A different take on designing a Lovelace UI (Dashboard)

Mais pour ton cas :

@antyamok

button_card_template: !include button_card_templates.yaml

il manque un s à la clé button_card_templateS:

##########################################################################
#                                                                        #
#                              * SETTINGS *                              #
#                                                                        #
##########################################################################

#button_card_template: !include button_card_templates.yaml
button_card_templates: !include button_card_templates.yaml


##########################################################################
#                                                                        #
#                              * LOVELACE *                              #
#                                                                        #
##########################################################################

views:
  - title: La Ome
    panel: true

Et, en plus le fait de l’inclure dans un autre fichier tu dois enlever la clé du fichier inclus et tout indenter correctement :

#button_card_templates
volet_stop:
  icon: 'mdi:stop'
  name: Stop
volet_monter:
  icon: 'mdi:chevron-up'
  name: Monter
volet_descendre:
  icon: 'mdi:chevron-down'
  name: Descendre
volet_canicule:
  icon: 'mdi:weather-sunset-up'
  name: Soleil
  styles:
    icon:
      - transform: rotate(0.5turn)
volet_stop_2_volets:
  variables:
    volet_1: ''
    volet_2: ''
    volets: ''
  tap_action:
    action: call-service
    service: cover.stop_cover
    service_data:
      entity_id: |
        [[[ return variables.volets ]]]
volet_canicule_2_volets:
  variables:
    volet_1: ''
    volet_2: ''
    volets: ''
  styles:
    card:
      - background-color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--primary-background-inactive-color)';
            else return 'var(--primary-background-active-color)';
          ]]]
    icon:
      - color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--grey-color)';
            else return 'var(--primary-color)';
          ]]]
    name:
      - color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '24' || states[variables.volet_1].attributes.current_position == '25' || states[variables.volet_1].attributes.current_position == '26') && (states[variables.volet_2].attributes.current_position == '24' || states[variables.volet_2].attributes.current_position == '25'  || states[variables.volet_2].attributes.current_position == '26' ) ) return 'var(--grey-color)';
            else return 'var(--primary-color)';
          ]]]
  tap_action:
    action: call-service
    service: cover.set_cover_position
    service_data:
      entity_id: |
        [[[ return variables.volets ]]]
      position: 25
volet_monter_2_volets:
  variables:
    volet_1: ''
    volet_2: ''
    volets: ''
  styles:
    card:
      - background-color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--primary-background-inactive-color)';
            else return 'var(--primary-background-active-color)';
          ]]]
    icon:
      - color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--grey-color)';
            else return 'var(--primary-color)';
          ]]]
    name:
      - color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '100') && (states[variables.volet_2].attributes.current_position == '100') ) return 'var(--grey-color)';
            else return 'var(--primary-color)';
          ]]]  
  tap_action:
    action: call-service
    service: cover.open_cover
    service_data:
      entity_id: |
        [[[ return variables.volets ]]]
volet_descendre_2_volets:
  variables:
    volet_1: ''
    volet_2: ''
    volets: ''
  styles:
    card:
      - background-color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].attributes.current_position == '0') ) return 'var(--primary-background-inactive-color)';
            else return 'var(--primary-background-active-color)';
          ]]]
    icon:
      - color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].attributes.current_position == '0') ) return 'var(--grey-color)';
            else return 'var(--primary-color)';
          ]]]
    name:
      - color: |
          [[[
            if ( (states[variables.volet_1].attributes.current_position == '0') && (states[variables.volet_2].attributes.current_position == '0') ) return 'var(--grey-color)';
            else return 'var(--primary-color)';
          ]]]  
  tap_action:
    action: call-service
    service: cover.close_cover
    service_data:
      entity_id: |
        [[[ return variables.volets ]]]
volet:
  color: auto
  color_type: icon
  show_icon: true
  show_label: false
  show_last_changed: false
  show_name: true
  show_state: false
  styles:
    card:
      - border-radius: 10px
      - height: 80px
      - width: 80px
      - margin: 5px 5px 0px 11px
      - padding: 0px 0px
      - background-color: var(--primary-background-active-color)
    grid:
      - position: relative
    icon:
      - position: absolute
      - left: 2px
      - top: '-15px'
      - transform: scale(1)
      - color: var(--primary-color)
    name:
      - position: absolute
      - left: 5px
      - bottom: 5px
      - font-variant: small-caps
      - font-size: 14px
      - color: var(--primary-color)

[antyamok]

Merci pour ton oeil avisé, c’est déjà mieux.

Par contre lorsque j’appuie sur le bouton « soleil » rien ne se passe !
Je crois que le problème vient du fait que les interrupteurs de volets ne renvoient pas l’état dans lequel se trouve le moteur (fermé à 30% ou ouvert à 50% par ex.).
C’est normal ? il y a quelque chose à faire ?

[Clemalex]

@Clemalex

service: cover.set_cover_position

C’est ce service qui est appelé, essaye le depuis Outils de développement → Onglet SERVICES

[antyamok]

Et bien j’i l’impression que mes interrupteurs gérant les volets ne comprennent pas ce service.
Lorsque je par ex :

service: cover.set_cover_position
target:
  entity_id: cover.volet_bureau
data:
  position: 50

Je n’ai rien qui se passe !

[Clemalex]

Ouvre un sujet d’entraide pour ça
En indiquant le materiel utilisé.

[antyamok]

yes. Je vais le faire !

[Clemalex]

Le code :

type: vertical-stack
cards:
  - color: auto
    color_type: icon
    icon: 'mdi:gas-station-outline'
    layout: icon_name
    name: SP95
    show_icon: true
    show_label: false
    show_last_changed: false
    show_name: true
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - height: 50px
        - width: 200px
        - margin: 5px 5px 0px 0px
        - padding: 0px 0px
        - background-color: 'rgba(0,0,0,0)'
        - box-shadow: none
      grid:
        - position: relative
      icon:
        - position: absolute
        - left: 25px
        - width: 30%
        - top: 0px
        - color: var(--sp95-color)
      name:
        - position: absolute
        - left: '-20px'
        - font-size: 20px
    tap_action:
      action: none
    type: 'custom:button-card'
  - color_type: icon
    custom_fields:
      price: |
        [[[
         return `
           <span style="color: var(--text-color-sensor);">${states['sensor.essence_sp95_intermarche'].state}</span>`
        ]]]
    name: Intermarché
    show_icon: false
    show_last_changed: false
    show_name: true
    styles:
      card:
        - border: 2px solid var(--primary-color)
        - border-radius: 5px
        - height: 1em
      custom_fields:
        price:
          - background-color: 'rgba(0, 0, 0, 0)'
          - position: absolute
          - bottom: '-10px'
          - right: 5px
          - font-size: 15px
          - line-height: 20px
          - '--text-color-sensor': |
              [[[
                if ( (states['sensor.essence_sp95_best_price'].state == 'intermarche') ) return 'green';
                else return 'var(--primary-color)';
              ]]]
      grid:
        - position: relative
      name:
        - font-variant: small-caps
        - justify-self: start
        - padding: 0 15px
        - color: |
            [[[
              if ( (states['sensor.essence_sp95_best_price'].state == 'intermarche') ) return 'green';
              else return 'var(--primary-color)';
            ]]]
    type: 'custom:button-card'
    color_type: icon
    icon: 'mdi:gas-station-outline'
    layout: icon_name
    name: SP95
    show_icon: true
    show_label: false
    show_last_changed: false
    show_name: true
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - height: 50px
        - width: 200px
        - margin: 5px 5px 0px 0px
        - padding: 0px 0px
        - background-color: 'rgba(0,0,0,0)'
        - box-shadow: none
      grid:
        - position: relative
      icon:
        - position: absolute
        - left: 25px
        - width: 30%
        - top: 0px
        - color: var(--sp95-color)
      name:
        - position: absolute
        - left: '-20px'
        - font-size: 20px
    tap_action:
      action: none
    type: 'custom:button-card'
  - color_type: icon
    custom_fields:
      price: |
        [[[
         return `
           <span style="color: var(--text-color-sensor);">${states['sensor.essence_sp95_carrefour'].state}</span>`
        ]]]
    name: Carrefour
    show_icon: false
    show_last_changed: false
    show_name: true
    styles:
      card:
        - border: 2px solid var(--primary-color)
        - border-radius: 5px
        - height: 1em
      custom_fields:
        price:
          - background-color: 'rgba(0, 0, 0, 0)'
          - position: absolute
          - bottom: '-10px'
          - right: 5px
          - font-size: 15px
          - line-height: 20px
          - '--text-color-sensor': |
              [[[
                if ( (states['sensor.essence_sp95_best_price'].state == 'carrefour') ) return 'green';
                else return 'var(--primary-color)';
              ]]]
      grid:
        - position: relative
      name:
        - font-variant: small-caps
        - justify-self: start
        - padding: 0 15px
        - color: |
            [[[
              if ( (states['sensor.essence_sp95_best_price'].state == 'carrefour') ) return 'green';
              else return 'var(--primary-color)';
            ]]]
    type: 'custom:button-card'

[engi]

Bonjour Clemalex,

Je débute avec les custom button card.
Peux tu me dire où tu stockes la valeur de cette variable : var(--sp95-color) ?
Merci pour ton aide