Icône de la couleur de la lumère mushroom-chips-card

Bonjour à tous,

Est-il possible, dans une mushroom-chips-card template, que la couleur de l’icône soit de la couleur de la lumière ? J’ai déjà réussi à le faire pour le background, mais impossible de trouver un code qui fonctionne pour l’icône :frowning:

Voici le code de la carte actuellement :

type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: toggle
          entity: light.rampe_led
          icon: mdi:led-strip-variant
          hold_action:
            action: more-info
          double_tap_action:
            action: none
          icon_color: |-
            {% if is_state(entity, 'on') and state_attr(entity, 'rgb_color') %}
              {% set r = state_attr(entity, 'rgb_color')[0] %}
              {% set g = state_attr(entity, 'rgb_color')[1] %}
              {% set b = state_attr(entity, 'rgb_color')[2] %}
              {{ 'rgb(' ~ r ~ ',' ~ g ~ ',' ~ b ~ ')' }}
            {% else %}
              light-grey
            {% endif %}
          card_mod:
            style: |
              ha-card {
                {% if is_state(config.entity, 'on') and state_attr(config.entity, 'rgb_color') %}
                  {% set r = state_attr(config.entity, 'rgb_color')[0] %}
                  {% set g = state_attr(config.entity, 'rgb_color')[1] %}
                  {% set b = state_attr(config.entity, 'rgb_color')[2] %}
                  --chip-background: rgba({{r}}, {{g}}, {{b}}, 0.3);
                {% else %}
                  --chip-background: rgba(240, 240, 240, 0.5);
                {% endif %}
                border: none;
              }

J’ai aussi testé cela, mais ça ne donne rien du tout :

          icon_color: |-
            {% if is_state(entity, 'on') %}
              light-color({{ entity }})
            {% else %}
              light-grey
            {% endif %}

Voilà également les attributs de la lumière, lorsque celle ci est allumée :

min_color_temp_kelvin: 2000
max_color_temp_kelvin: 9009
min_mireds: 111
max_mireds: 500
effect_list: , Accumulation, ARRAKIS, Aurora, Birthday, Blossom, Bouncing Ball, Bubble, Candy, Carnival, Cheerful, Cherry blossoms, Christmas, Christmas Gift, Christmas Tree, Dance Party, Deep sea, Desert, Downpour, Dreamland, Dreamlike, Easter, Electro Dance, Enthusiastic, Father's Day, Fight, Fire, Fireworks, Flower Field, Forest, Game, Glacier, Halloween, Happy, Heartbeat, Journey of Flowers, Karst Cave, Karst Cave-A, Karst Cave-B, Lake, Leisure, Leisurely, Light, Meditation, Meteor, Morning, Mother's Day, Mountain Forest, Movie, Music: Bounce, Music: Calm, Music: CandyCrush, Music: Dynamic, Music: Energic, Music: Fusion, Music: Hopping, Music: Luminous, Music: Separation, Music: Skittles, Music: Strike, Music: Torch, Music: Vibrate, New Years, Night, Night Light, Party, Profound, Quiet, Rainbow, Rainbow-A, Rainbow-B, Release, Ripple, River, Romantic, Rush, Rustling leaves, Saint Patrick's Day, Sky, SPICE, Stacking, Study, Sunrise, Sunset, Sweet, Swing, Technology, Tenderness, Tension, Thanksgiving, The Piano, Thunderstorm, Tunnel, Twilight, Unspoken Love, Valentine's Day, Volcano, Warm, Wave, White Light, Work
supported_color_modes: color_temp, rgb
effect: null
color_mode: rgb
brightness: 189
color_temp_kelvin: null
color_temp: null
hs_color: 9.123, 67.059
rgb_color: 255, 110, 84
xy_color: 0.589, 0.329
icon: mdi:floor-lamp
friendly_name: Rampe LED
supported_features: 44

Merci d’avance pour votre aide :slight_smile:

Bonjour,
il y a plus simple :

icon_color: "{{ state_attr('light.0x540f57fffe0b7675', 'rgb_color') }}"

1 « J'aime »

C’est parfait, merci beaucoup !
Je savais que tu allais me sortir de cette impasse :sweat_smile:

La carte finale :

Pour ceux que ça intéresse, voici le code :

type: custom:button-card
template: room_card
name: Bureau
icon: mdi:desk
variables:
  icon_color: rgba(139, 195, 74, 1)
  icon_color_bg: rgba(139, 195, 74, 0.2)
custom_fields:
  infos: |
    [[[ 
      var temp = states['sensor.thermometre_bureau_temperature'].state;
      var hum = states['sensor.thermometre_bureau_humidite'].state;
      return `
      ${parseFloat(temp).toFixed(0)}° <span style="font-size:
    70%;opacity:0.6">${parseFloat(hum).toFixed(0)}%</span>
      `
    ]]]
  btn1:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: toggle
          entity: light.rampe_led
          icon: mdi:led-strip-variant
          hold_action:
            action: more-info
          double_tap_action:
            action: none
          icon_color: |-
            {% if is_state(entity, 'on') %}
              {{ state_attr(entity, 'rgb_color') }}
            {% else %}
              light-grey
            {% endif %}
          card_mod:
            style: |
              ha-card {
                {% if is_state(config.entity, 'on') and state_attr(config.entity, 'rgb_color') %}
                  {% set r = state_attr(config.entity, 'rgb_color')[0] %}
                  {% set g = state_attr(config.entity, 'rgb_color')[1] %}
                  {% set b = state_attr(config.entity, 'rgb_color')[2] %}
                  --chip-background: rgba({{r}}, {{g}}, {{b}}, 0.2);
                {% else %}
                  --chip-background: rgba(240, 240, 240, 0.5);
                {% endif %}
                border: none;
              }
        - type: template
          tap_action:
            action: toggle
          hold_action:
            action: more-info
          entity: cover.volet_bureau_window_covering
          icon: |-
            {% if is_state(entity, 'open') %} 
             mdi:window-shutter-open
            {% elif is_state(entity, 'closed') %} 
             mdi:window-shutter
            {% else %}
             mdi:window-shutter-alert
            {% endif %}
          icon_color: |-
            {% if is_state(entity, 'open') %} 
             blue
            {% elif is_state(entity, 'closed') %} 
             light-grey
            {% else %}
             light-grey
            {% endif %}
          card_mod:
            style: |
              ha-card {
                {% if is_state(config.entity, 'open') %}
                  --chip-background: rgba(3, 169, 244, 0.2);
                {% else %}
                  --chip-background: rgba(240, 240, 240, 0.5);
                {% endif %}
                border: none;
              }
grid_options:
  columns: 6
  rows: auto

Son template :

button_card_templates:
  room_card:
    tap_action:
      action: none
    styles:
      grid:
        - grid-template-areas: '"n btn2 btn1" "infos btn2 btn1" "i btn2 btn1"'
        - grid-template-columns: 1fr min-content min-content
        - grid-template-rows: min-content min-content 1fr
      img_cell:
        - justify-content: start
        - position: absolute
        - width: 100px
        - height: 100px
        - left: 0
        - bottom: 0
        - margin: 0 0 -20px -20px
        - background: '[[[ return variables.icon_color_bg ]]]'
        - border-radius: 500px
      icon:
        - position: relative
        - width: 50px
        - color: '[[[ return variables.icon_color ]]]'
      card:
        - padding: 18px 14px 18px 18px
        - height: 168px
      name:
        - justify-self: start
        - align-self: start
        - font-size: 16px
        - font-weight: 500
      custom_fields:
        btn1:
          - justify-content: end
          - align-self: start
          - padding-left: 8px
        btn2:
          - justify-content: end
          - align-self: start
        infos:
          - justify-self: start
          - font-size: 20px
          - padding-top: 5px
          - font-weight: 400

Bonjour,

Je ne comprends pas pourquoi, alors que ton support est une carte custom:button-card, tu utilises du custom:mushroom-chips-card, du card_mod, alors que tu pourrais avoir exactement la même chose avec uniquement custom:button-card

Je suis plus à l’aise avec des chips que je peux intégrer facilement dans ma carte principale. J’utilise l’idée de BEE ici et cette vidéo qui consiste à mettre des chips pour faire plus simple. En gros, si je dois ajouter un appareil à la carte, je vais créer une chips quelque part, et je copie colle le code de celle ci dans ma room card. Mais si tu peux m’adapter la carte complètement avec une button-card je suis preneur bien evidement :slight_smile: cela me permettra d’en apprendre un peu plus sur son fonctionnement :slight_smile:

Je te ferai un exemple demain (si j’ai le temps) mais sinon, tu peux regarder cet article, ce qui fera un bon début (publicité gratuite :grin:) : Aller plus loin avec la carte custom:button-card

2 « J'aime »

il faudrait une section avec extra_styles. De ce que je comprends c’est comme card_mod pour button-card, mais je n’arrive pas à l’ utiliser sur un custom_field avec carte mushroom-chip.

“extra_styles” sert essentiellement pour les animations un peu complexe. Du moins je ne m’en sers que pour cela.

Un exemple de fondu du gris clair au rouge :

type: custom:button-card
name: Fade Icon Color
aspect_ratio: 2/1
icon: mdi:heart
extra_styles: |
  @keyframes colorfade {
    0% {
      color: lightgray;
    }
    100% {
      color: red;
    }
  }
styles:
  icon:
    - animation: colorfade 2s linear infinite alternate
  name:
    - color: white

ou un exemple avec rotation horaire puis anti-horaire en boucle :

type: custom:button-card
custom_fields:
  machine_a_laver:
    card:
      type: custom:button-card
      styles:
        card:
          - background-image: url(/local/images/machine-a-laver.png)
          - width: 340px
          - height: 480px
          - background-size: cover
          - background-position: center
          - border-radius: 0px
          - border: none
          - background-color: rgba(28,28,28,0.0)
  tambour:
    card:
      type: custom:button-card
      entity: input_boolean.lave_linge
      show_icon: false
      show_name: false
      styles:
        card:
          - width: 187px
          - height: 187px
          - border-radius: 50%
          - background-image: none
          - background-size: cover
          - background-position: center
          - background-color: rgba(28,28,28,0.8)
      state:
        - value: "off"
          styles:
            card:
              - background-image: url(/local/images/tambour.png)
        - value: "on"
          styles:
            card:
              - background-image: url(/local/images/linge.png)
              - animation: rotate-cycle 10s linear infinite
      extra_styles: |
        @keyframes rotate-cycle {
          0%, 50% { transform: rotate(0deg); }
          10% { transform: rotate(360deg); }
          20% { transform: rotate(720deg); }
          30% { transform: rotate(1080deg); }
          40% { transform: rotate(1440deg); }
          50% { transform: rotate(1800deg); }
          60% { transform: rotate(1440deg); }
          70% { transform: rotate(1080deg); }
          80% { transform: rotate(720deg); }
          90% { transform: rotate(360deg); }
          100% { transform: rotate(0deg); }
        }
  hublot:
    card:
      type: custom:button-card
      entity: input_boolean.lave_linge
      show_icon: false
      show_name: false
      styles:
        card:
          - width: 187px
          - height: 187px
          - border-radius: 50%
          - background-image: none
          - background-size: cover
          - background-position: center
          - background-color: rgba(28,28,28,0.8)
      state:
        - value: "off"
          styles:
            card:
              - background-image: url(/local/images/hublot.png)
              - opacity: 0.4
        - value: "on"
          styles:
            card:
              - background-image: url(/local/images/hublot.png)
              - opacity: 0.7
  bouton_marche_arret:
    card:
      type: custom:button-card
      name: Power
      entity: input_boolean.lave_linge
      show_icon: false
      show_name: false
      state:
        - value: "on"
          styles:
            card:
              - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
            icon:
              - color: rgba(0,128,255,1.0)
        - value: "off"
          styles:
            card:
              - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
            icon:
              - color: black
      styles:
        card:
          - aspect-ratio: 1/1
          - width: 100%
          - height: 42px
          - border-radius: 50%
          - background: >-
              conic-gradient(rgba(211, 211, 211, 0.8) 100deg, rgba(255, 255,
              255, 1) 130deg, rgba(211, 211, 211, 1) 170deg, rgba(211, 211, 211,
              0.8) 190deg)
          - border: 3px rgba(128,128,128,1.0) outset
        icon:
          - width: 70%
      tap_action:
        action: toggle
      hold_action:
        action: none
  led:
    card:
      type: custom:button-card
      name: Power
      icon: mdi:power
      entity: input_boolean.lave_linge
      show_name: false
      state:
        - value: "on"
          styles:
            card:
              - background-color: rgba(0,128,255,0.3)
              - box-shadow: 0px 0px 3px 2px rgba(0,128,255,0.5)
            icon:
              - color: rgba(0,255,255,1.0)
        - value: "off"
          styles:
            icon:
              - color: rgba(211,211,211,0.5)
      styles:
        card:
          - aspect-ratio: 1/1
          - width: 100%
          - height: 20px
          - border-radius: 50%
          - border: none
          - background: none
        icon:
          - width: 100%
styles:
  card:
    - width: 600px
    - height: 480px
    - background-size: cover
    - background-position: center
    - border-radius: 0px
    - border: none
    - background-color: rgba(250,250,250,1.0)
  custom_fields:
    machine_a_laver:
      - position: absolute
      - top: 0px
      - left: 0px
    tambour:
      - position: absolute
      - top: 133px
      - left: 77px
    hublot:
      - position: absolute
      - top: 133px
      - left: 77px
    bouton_marche_arret:
      - position: absolute
      - top: 28px
      - left: 157px
    led:
      - position: absolute
      - top: 22px
      - left: 292px

Mais là, il n’y a pas besoin d’extra_styles, de ce que j’en ai vu

oui, je le savais, mais ça peut servir pour d’autre modification CSS.

ça permettrait de modifier du CSS sur une carte non button-card dans button-card et pas utiliser card_mod :grin:

As-tu essayé de l’utiliser dans les styles de custom:button-card ? (là ou tu définis la position du custom_fields)

1 « J'aime »

Oui, mais j’ai du mal faire le code de modification du CSS. Je retenterai à l’occase :wink:

Voici le code (carte custom:button-card uniquement) :

type: custom:button-card
custom_fields:
  nom:
    card:
      type: custom:button-card
      name: Bureau
      styles:
        card:
          - background-color: transparent
          - width: auto
          - height: auto
          - border-radius: 0
          - border: none
        name:
          - color: black
          - font-size: 1.2em
          - font-weight: 500
          - align-self: center
          - padding-left: 10px
  infos:
    card:
      type: custom:button-card
      show_label: true
      show_name: true
      name: |
        [[[ 
          const temp = states['sensor.chambre_sous_sol_thermometre_temperature'].state;
          return temp ? parseFloat(temp).toFixed(1) + ' °C' : 'N/A';
        ]]]
      label: |
        [[[ 
          const hum = states['sensor.chambre_sous_sol_thermometre_humidity'].state;
          return hum ? parseFloat(hum).toFixed(0) + ' %' : 'N/A';
        ]]]
      styles:
        card:
          - background-color: transparent
          - width: auto
          - height: auto
          - border-radius: 0
          - border: none
        name:
          - color: black
          - font-size: 1.2em
          - font-weight: 400
          - align-self: center
          - padding-left: 10px
        label:
          - color: black
          - opacity: 0.6
          - font-size: 0.9em
          - align-self: center
          - padding-right: 10px
        grid:
          - grid-template-areas: "\"n l\""
          - grid-template-columns: 1fr 1fr
          - grid-template-rows: auto
  icone:
    card:
      type: custom:button-card
      icon: mdi:desk
      styles:
        card:
          - background-color: rgba(139, 195, 74, 0.2)
          - width: 100px
          - height: 100px
          - border-radius: 50%
          - border: none
        icon:
          - color: rgba(139, 195, 74, 1)
          - width: 50px
  lumiere:
    card:
      type: custom:button-card
      entity: light.perron_lampe_alarme
      show_name: false
      icon: mdi:led-strip-variant
      styles:
        card:
          - background-color: |
              [[[
                const entityId = 'light.perron_lampe_alarme';
                const entityState = states[entityId].state;
                const rgb = states[entityId].attributes.rgb_color;
                if (entityState === 'on' && rgb) {
                  return `rgba(${rgb.join(',')}, 0.2)`; 
                }
                return 'rgba(240, 240, 240, 0.5)';
              ]]]
          - width: 40px
          - height: 40px
          - border-radius: 50%
          - border: none
        icon:
          - color: |
              [[[
                const entityState = states['light.perron_lampe_alarme'].state;
                const rgb = states['light.perron_lampe_alarme'].attributes.rgb_color;
                if (entityState === 'on' && rgb) {
                  return `rgb(${rgb.join(',')})`; 
                }
                return 'lightgrey';
              ]]]
          - width: 25px
  garage:
    card:
      type: custom:button-card
      entity: input_text.
      show_name: false
      icon: |
        [[[
          const entityState = states['input_text.garage_etat_porte'].state;
          if (entityState === 'closed') {
            return `mdi:garage-variant`;
          } else if (entityState === 'open') {
            return `mdi:garage-open-variant`;
          } else {
            return 'mdi:garage-alert-variant';
          }
        ]]]
      styles:
        card:
          - background-color: |
              [[[
                const entityId = 'input_text.garage_etat_porte';
                const entityState = states[entityId].state;
                if (entityState === 'closed') {
                  return `rgba(117,249,77, 0.5)`; 
                }
                return 'rgba(240, 240, 240, 0.5)';
              ]]]
          - width: 40px
          - height: 40px
          - border-radius: 50%
          - border: none
        icon:
          - color: |
              [[[
                const entityState = states['input_text.garage_etat_porte'].state;
                if (entityState === 'closed') {
                  return `rgba(117,249,77, 1.0)`;
                } else if (entityState === 'open') {
                  return `rgba(0,255,0, 1.0)`;
                } else {
                  return 'lightgrey';
                }
              ]]]
          - width: 25px
styles:
  card:
    - height: 168px
    - width: 250px
    - cursor: default
  custom_fields:
    nom:
      - position: absolute
      - top: 10px
      - left: 10px
    infos:
      - position: absolute
      - top: 35px
      - left: 10px
    icone:
      - position: absolute
      - bottom: "-20px"
      - left: "-20px"
    lumiere:
      - position: absolute
      - top: 20px
      - right: 20px
    garage:
      - position: absolute
      - top: 70px
      - right: 20px

Je te commenterai le code ce WE. En attendant, si tu as des questions, n’hésites pas.

Il y a quand même un souci avec ce code, souci qui sera le même avec les cartes mushrooms : en cas de lumière blanche (blanc froid), le bouton (lumiere ou btn1) n’apparaitra pas (en thème clair) car la couleur de l’icône et du background sera trop proche de celle du fond de la carte.

Pour cette carte, j’ai mis tous les éléments (nom, icône, infos, boutons en custom_fields car je trouve que c’est plus facilement modifiable. Et je n’ai pas mis de CSS…)

2 « J'aime »

Un grand merci à toi !!! Je vais regarder ça de plus près.
Et oui tu as complètement raison concernant la couleur de la lumière blanche… Je n’avais pas anticiper ce problème ! Du coup j’ai abandonné l’idée et je suis sur une icône jaune pour la lumière allumée…

Hello,

Je n’ai pas tout relu ni tout suivi :sweat_smile:, mais pas possible de changer les fond? j’ai le même style de problème suivant que j’allume ou pas la pièce sur le plan, du coup j’ai contourné ça

1

  - type: custom:button-card
    entity: sensor.esp_labo_temperature
    name: Temperature
    show_name: true
    show_state: true
    show_icon: false
    layout: name_state
    styles:
      card:
        - background: transparent
        - border: none
        - border-radius: 15px
        - box-shadow: none
        - padding: 10px
      name:
        - font-size: 16px
        - font-weight: bold
        - color: white
        - margin-right: 10px
      state:
        - font-size: 20px
        - font-weight: bold
        - color: orange
    card_mod:
      style: |
        {% set lights_on = states('light.lampe_labo') == 'on' or 
                           states('light.bandeau_labo') == 'on' or 
                           states('light.gateway_labo_light') == 'on' %}
        ha-card {
          background: {% if lights_on %}rgba(0, 0, 0, 0.7){% else %}transparent{% endif %} !important;
        }

cdt

Bonjour @freetronic,

Si, il est possible de changer la couleur du fond sans problème mais le faire dynamiquement en fonction de la couleur d’éclairage de l’ampoule est plus compliqué, de même que de mettre l’icône et le fond en jaune en cas d’éclairage blanc.

En revanche, tu utilises card_mod alors que c’est inutile avec custom:button-card :grin:

Re,

je pense surtout que j’avais fais le minigraph avant et que du coup j’ai bêtement copié le code :smiley:

et sauf erreur je n’ai pas le choix pour celle-ci :slight_smile:

      - type: custom:mini-graph-card
        entities:
          - sensor.esp_labo_temperature
        decimals: 1
        line_width: 3
        height: 100
        show:
          name: false
          icon: false
          state: false
        color_thresholds:
          - value: 15
            color: skyblue
          - value: 20
            color: green
          - value: 25
            color: orange
          - value: 29
            color: red
          - value: 35
            color: brown
        card_mod:
          style: |
            {% set lights_on = states('light.lampe_labo') == 'on' or 
                               states('light.bandeau_labo') == 'on' or 
                               states('light.gateway_labo_light') == 'on' %}
            ha-card {
              background: {% if lights_on %}rgba(0, 0, 0, 0.7){% else %}transparent{% endif %} !important;
              box-shadow: none !important;
              border-radius: 15px !important;
            }

cdt

@freetronic

Juste pour exemple (ou comment ne pas avoir besoin de card_mod grace à custom:button-card :grin: ) :

type: custom:button-card
aspect_ratio: 4.25/1
custom_fields:
  temp:
    card:
      type: custom:mini-graph-card
      entities:
        - sensor.perron_thermometre_temperature
      decimals: 1
      line_width: 3
      height: 100
      show:
        name: false
        icon: false
        state: false
      color_thresholds:
        - value: 15
          color: skyblue
        - value: 20
          color: green
        - value: 25
          color: orange
        - value: 29
          color: red
        - value: 35
          color: brown
styles:
  card:
    - border-radius: 15px
    - background-color: |
        [[[
          const entityId = 'switch.salle_a_manger_relais_buffet';
          const entityState = states[entityId].state;
          if (entityState === 'on') {
            return `rgba(0,0,0,0.7)`; 
          }
          return 'transparent';
        ]]]
  custom_fields:
    temp:
      - position: absolute
      - left: 0px
      - top: 0px
      - border-radius: 15px
      - width: 100%
      - height: 100%
      - overflow: hidden
      - "--ha-card-border-width": 0
      - "--ha-card-background": transparent

1 « J'aime »

@Spl4sh

Teste ce code qui devrait permettre d’afficher l’icône (lumiere) en jaune et le fond en jaune pâle en cas de lumière blanche (chaude ou froide) ou l’absence d’indication sur la couleur de la lumière et d’afficher l’icône avec la couleur de la lumière et le fond avec la couleur la lumière mais avec de la transparence en cas de lumière de couleur (je ne suis pas sur d’avoir été très clair…) :

type: custom:button-card
custom_fields:
  nom:
    card:
      type: custom:button-card
      name: Bureau
      styles:
        card:
          - background-color: transparent
          - width: auto
          - height: auto
          - border-radius: 0
          - border: none
        name:
          - color: black
          - font-size: 1.2em
          - font-weight: 500
          - align-self: center
          - padding-left: 10px
  infos:
    card:
      type: custom:button-card
      show_label: true
      show_name: true
      name: |
        [[[ 
          const temp = states['sensor.chambre_sous_sol_thermometre_temperature'].state;
          return temp ? parseFloat(temp).toFixed(1) + ' °C' : 'N/A';
        ]]]
      label: |
        [[[ 
          const hum = states['sensor.chambre_sous_sol_thermometre_humidity'].state;
          return hum ? parseFloat(hum).toFixed(0) + ' %' : 'N/A';
        ]]]
      styles:
        card:
          - background-color: transparent
          - width: auto
          - height: auto
          - border-radius: 0
          - border: none
        name:
          - color: black
          - font-size: 1.2em
          - font-weight: 400
          - align-self: center
          - padding-left: 10px
        label:
          - color: black
          - opacity: 0.6
          - font-size: 0.9em
          - align-self: center
          - padding-right: 10px
        grid:
          - grid-template-areas: "\"n l\""
          - grid-template-columns: 1fr 1fr
          - grid-template-rows: auto
  icone:
    card:
      type: custom:button-card
      icon: mdi:desk
      styles:
        card:
          - background-color: rgba(139, 195, 74, 0.2)
          - width: 100px
          - height: 100px
          - border-radius: 50%
          - border: none
        icon:
          - color: rgba(139, 195, 74, 1)
          - width: 50px
  lumiere:
    card:
      type: custom:button-card
      entity: light.perron_lampe_alarme
      show_name: false
      icon: mdi:led-strip-variant
      styles:
        card:
          - background-color: |
              [[[
                const eid1 = 'light.perron_lampe_alarme';
                const s1 = states[eid1];
                if (!s1) return 'rgba(240,240,240,0.5)';
                const st1 = s1.state;
                const rgb1 = (s1.attributes && s1.attributes.rgb_color) ? s1.attributes.rgb_color : null;
                const xy1 = (s1.attributes && s1.attributes.xy_color) ? s1.attributes.xy_color : null;
                if (st1 === 'on') {
                  if (xy1 && xy1.length >= 2 && xy1[0] >= 0.30 && xy1[0] <= 0.46 && xy1[1] >= 0.25 && xy1[1] <= 0.42) {
                    return 'rgba(255,215,0,0.3)';
                  }
                  if (rgb1 && rgb1.length >= 3) {
                    return `rgba(${rgb1.join(',')}, 0.2)`;
                  }
                  return 'rgba(255,215,0,0.3)';
                }
                return 'rgba(240,240,240,0.5)'; // éteint
              ]]]
          - width: 40px
          - height: 40px
          - border-radius: 50%
          - border: none
        icon:
          - color: |
              [[[
                const eid2 = 'light.perron_lampe_alarme';
                const s2 = states[eid2];
                if (!s2) return 'lightgrey';
                const st2 = s2.state;
                const rgb2 = (s2.attributes && s2.attributes.rgb_color) ? s2.attributes.rgb_color : null;
                const xy2 = (s2.attributes && s2.attributes.xy_color) ? s2.attributes.xy_color : null;
                if (st2 === 'on') {
                  if (xy2 && xy2.length >= 2 && xy2[0] >= 0.30 && xy2[0] <= 0.46 && xy2[1] >= 0.25 && xy2[1] <= 0.42) {
                    return 'rgb(255,215,0)';
                  }
                  if (rgb2 && rgb2.length >= 3) {
                    return `rgb(${rgb2.join(',')})`;
                  }
                  return 'rgb(255,215,0)';
                }
                return 'lightgrey';
              ]]]
          - width: 25px
  garage:
    card:
      type: custom:button-card
      entity: input_text.
      show_name: false
      icon: |
        [[[
          const entityState = states['input_text.garage_etat_porte'].state;
          if (entityState === 'closed') {
            return `mdi:garage-variant`;
          } else if (entityState === 'open') {
            return `mdi:garage-open-variant`;
          } else {
            return 'mdi:garage-alert-variant';
          }
        ]]]
      styles:
        card:
          - background-color: |
              [[[
                const entityId = 'input_text.garage_etat_porte';
                const entityState = states[entityId].state;
                if (entityState === 'closed') {
                  return `rgba(117,249,77, 0.5)`; 
                }
                return 'rgba(240, 240, 240, 0.5)';
              ]]]
          - width: 40px
          - height: 40px
          - border-radius: 50%
          - border: none
        icon:
          - color: |
              [[[
                const entityState = states['input_text.garage_etat_porte'].state;
                if (entityState === 'closed') {
                  return `rgba(117,249,77, 1.0)`;
                } else if (entityState === 'open') {
                  return `rgba(0,255,0, 1.0)`;
                } else {
                  return 'lightgrey';
                }
              ]]]
          - width: 25px
styles:
  card:
    - height: 168px
    - width: 250px
    - cursor: default
  custom_fields:
    nom:
      - position: absolute
      - top: 10px
      - left: 10px
    infos:
      - position: absolute
      - top: 35px
      - left: 10px
    icone:
      - position: absolute
      - bottom: "-20px"
      - left: "-20px"
    lumiere:
      - position: absolute
      - top: 20px
      - right: 20px
    garage:
      - position: absolute
      - top: 70px
      - right: 20px

Ce code vient vérifier l’attribut xy_color de façon à savoir si la lumière est dans la zone des blancs (x compris entre 0.30 et 0.46 et y compris entre 0.25 et 0.42) ce qui devrait être valable pour des blancs allant du blanc froid au blanc chaud. Tu pourras ajuster ces bornes en fonction de ton ampoule.

1 « J'aime »

Merci beaucoup pour le partage, je vais la mettre chez moi et l’adatper à mes sensors.

Ce sujet a été automatiquement fermé après 2 jours. Aucune réponse n’est permise dorénavant.