Modifier lumières ('thème' de Mattias_Persson)

Plouf34 · Mars 8, 2021, 4:15

Hello.

Comment faire pour ne pas mettre l’icone de l’ampoule hue dans ton template, mais la remplacer par l’icone par defaut de chaque entity?

Dapolux · Mars 8, 2021, 4:59

Hello,

Je ne comprends pas bien la question, en l’occurrence justement je n’utilise pas l’icone par défaut mais l’ampoule HUE.
Les tuiles sont des « custom:button-card », pour lesquelles j’ai spécifié les icones hue:

Exemple de tuile:

              ###  Cuisine  ######
              - type: 'custom:button-card'
                entity: light.cuisine
                template: light
                name: Cuisine

Templates pour ma tuile light:

base:
    show_state: false
    show_icon: false
    aspect_ratio: 1/1
    state:

      ## Specific style when state is "On"
      - value: 'on'
        styles:
          card:
            - background-color: 'rgba(255, 255, 255, 0.8)'
            - border: 1px rgba(80, 80, 80) solid
          name:
            - color: 'rgba(0, 0, 0, 0.6)'
          custom_fields:
            temperature:
              - color: "#8d8e90"

    double_tap_action:
      action: more-info    styles:
      name:
        - top: 74%
        - left: 11%
        - position: absolute

      card:
        - font-family: Passion One
        - letter-spacing: 0px
        - color: 'rgba(255, 255, 255, 0.3)'
        - font-size: 100%
        - background-color: 'rgba(80, 80, 80, 0.6)'
        - border-radius: 15%
        - box-shadow: none
        - transition: none
        - border: 1px rgba(255, 255, 255) solid

light_circle:

    custom_fields:
      circle_light: >
        [[[ if (entity.state === 'on' && entity.attributes.brightness) { const
        brightness = Math.round(entity.attributes.brightness / 2.54); const
        radius = 20.5; const circumference = radius * 2 * Math.PI;  return `<svg
        viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
        stroke="#b2b2b2" stroke-width="1.5" fill="none" style=" transform:
        rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray:
        ${circumference}; stroke-dashoffset: ${circumference - brightness / 100
        * circumference};" /> <text x="50%" y="54%" fill="#8d8e90"
        font-size="14" text-anchor="middle"
        alignment-baseline="middle">${brightness}<tspan
        font-size="10">%</tspan></text></svg>`; } ]]]

  light_icon:

    custom_fields:
      icon_hue: >
        [[[ const state = entity.state === 'on' ? 'animate' : null;
        return `<svg viewBox="0 0 50 50"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
        <path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
        <path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/></svg>`; ]]]

Si tu souhaite modifier l’icone, c’est justement sur cette dernière partie qu’il faut jouer, après

light_icon:

    custom_fields:
      icon_hue: >

Avec par exemple:

        custom_fields:
          icon_hue: >
            <font> <ha-icon icon="mdi:lightbulb"> </font>

Plouf34 · Mars 8, 2021, 5:08

En fait je souhaite remplacer toutes tes icones hue, par celles des entity par defaut.

En gros, en utilisant ton code ci-dessus, j’ai cela :

Je souhaiterais garder ton template mais juste remplacer tes icones par celle des entity par defaut comme celles-ci:

Dapolux · Mars 8, 2021, 5:16

Jai regardé vite fait et je n’ai pas trouvé comment les récupérer (j’ai fait des tests avec par exemple states.light.cuisine.attributes.icon ou autre, mais je n’ai pas abouti), peut être que quelqu’un d’autre aura une autre piste.

Sinon tu as une autre possibilité, mais moins propre/ plus galère, pour chaque bouton tu redéfinis l’icone souhaité (tu n’as pas a redéfinir tous les paramètres de ta carte, mais uniquement l’icone).
En gros, bouton 1 par exemple, dans ta déclaration tu ajoutes:

custom_fields:
          icon_hue: >
            <font> <ha-icon icon="mdi:lightbulb-group"> </font>

puis la deuxième:

custom_fields:
          icon_hue: >
            <font> <ha-icon icon="mdi:coach-lamp"> </font>

Plouf34 · Mars 8, 2021, 6:09

En fait, je veux juste enlever l’ampoule Hue (ce code)

icon_hue: >
        [[[ const state = entity.state === 'on' ? 'animate' : null; return `<svg
        viewBox="0 0 50 50"><style>@keyframes animate{0%{transform:
        scale(0.85);}20%{transform: scale(1.1);}40%{transform:
        scale(0.95);}60%{transform: scale(1.03);}80%{transform:
        scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate
        0.8s; transform-origin: center;}</style> <path fill="#9da0a2" d="M27.4
        47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0
        .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0
        .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0
        .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0
        .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8
        0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0
        .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18
        3.2-18.8.1-.4.1-.5.1-.7"/> <path class="${state}"
        fill="var(--button-card-light-color-no-temperature)" d="M14.1
        15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9
        6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5
        2.1 8.2 0 .3.3.8.7 1.1z"/></svg>`; ]]]

Si j’enleve ce bout de code: j’obtiens ceci:

Pour que chaque bouton inscrive l’Icon par defaut que j’ai déjà défini au niveau des customization entity et, et non pas pas l’icone Hue.

Plouf34 · Mars 8, 2021, 6:12

Mais si j’inscris une icone comme tu me le montres, elle sera valable pour tous mes boutons. Je souhaite avoir une icone différente pour chaque bouton.

Dapolux · Mars 8, 2021, 6:15

J’ai bien compris, ne connaissant pas comment récupérer l’icon définit par défaut, comme je te le suggère tu peux les « redéfinir » à l’affichage. Pour ce faire, tu peux retirer le code que tu mentionne (ou le laisser, mais de toutes façon il sera remplacé par le suivant), puis la ou tu déclares tes boutons, tu redéfini l’icone, exemple pour la lampe de ta terrasse:

custom_fields:
          icon_hue: >
            <font> <ha-icon icon="mdi:coach-lamp"> </font>

tu peux si tu le souhaite changer le nom « icon_hue », mais il faut que tu adaptes le template en conséquence.

Plouf34 · Mars 8, 2021, 7:05

Well, ça marche, merci: j’ai effectivement ajouté ton bout de code pour chaque button card dns mon vertical stack/grid.
Exemple pour ma terrasse:

Maintenant, faut que je vois pourquoi le state_color ne fonctionne plus. Que j’allume ou éteigne, l’icône reste blanche.

Dapolux · Mars 8, 2021, 7:21

Tu peux définir la couleur au même endroit, j’ai par exemple:

       custom_fields:
          my_icon: >
            <font color='#8d8e90'><ha-icon icon="mdi:thermometer"> </font>

Sinon tu peux aussi dans le template, définir 2 couleurs en fonction de l’état de l’entité.
Cela donnerais quelque chose comme ceci (je n’ai pas testé directement, mais ça dois s’en approcher):

  light:
    template:
      - base
      - light_icon    
    state:
      ## Specific style when state is "On"
      - value: 'on'
        styles:
          custom_fields:
            icon_hue:
              - color: 'rgba(200, 200, 200, 0.6)' #Couleur quand c'est on
    styles: 
      custom_fields:
        icon_hue:
          color: 'rgba(80, 80, 80, 0.6)' #Couleur quand c'est off

Plouf34 · Mars 8, 2021, 7:35

C,est bizarre, quand on utilise tes icônes hue, on a bien la couleur exact de l’ampoule suivant ce qu’on demande. La tu me parles de couleur pré définie pour chaque ampoule.

Dapolux · Mars 8, 2021, 7:38

C’est inclus dans le code de l’icon HUE (regarde les paramètres « fill »).

Plouf34 · Mars 8, 2021, 10:15

Je comprends pas les valeurs dans fill.
Tes ampoules hue arrivent a prendre la couleur verte si tu leur met la couleur verte.

Pour ma part, et avec ce que tu m’as donné, je ne peux définir que 1 à 2 couleurs. Or si on prend ton code, on peut aboir toutes les couleurs possibles reflétant les vrais couleurs des ampoules.

Clemalex · Mars 8, 2021, 10:27

Tu pars d’un bouton button-card qui est personnalisé et dont l’icône n’est pas affichée de façon standard.

L’icône Hue est affiché dans un élément personnalisé du button-card (custom_fields).
Cet élément, dans le cas des ampoules HUE contient 2 SVG :

Le premier qui est de couleur fixe :

<path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>

représente la base de l’ampoule de couleur #9da0a2 GRIS:

Le second qui est de la couleur var(--button-card-light-color-no-temperature) :

<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/>

représentant la partie Led et donc luminescente de l’ampoule :

Ce qui donne quand on les superposent à la bonne position une seule ampoule représentant la couleur actuelle:

image367×582 7 KB

La couleur de l’ampoule est donnée dans le deuxième SVG à l’aide de la propriété :

--button-card-light-color-no-temperature

Qui est une variable de la carte button-card et qui représente la couleur de l’entité Lumière sans la température (documentation)

Code de la carte avec les modèles réunis

type: 'custom:button-card'
entity: light.kitchen_lights
name: Cuisine
show_state: false
show_icon: false
aspect_ratio: 1/1
state:
  - value: 'on'
    styles:
      card:
        - background-color: 'rgba(255, 255, 255, 0.8)'
        - border: '1px rgba(80, 80, 80) solid'
      name:
        - color: 'rgba(0, 0, 0, 0.6)'
double_tap_action:
  action: more-info
variables:
  circle_input: >
    [[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
  name:
    - top: 74%
    - left: 11%
    - position: absolute
  card:
    - font-family: Passion One
    - letter-spacing: 0px
    - color: 'rgba(255, 255, 255, 0.3)'
    - font-size: 100%
    - background-color: 'rgba(80, 80, 80, 0.6)'
    - border-radius: 15%
    - box-shadow: none
    - transition: none
    - border: '1px rgba(255, 255, 255) solid'
  custom_fields:
    icon_hue:
      - top: 11%
      - left: 4.5%
      - width: 3.05vw
      - position: absolute
    circle: &person
      - top: 8.5%
      - left: 56.2%
      - width: 3.5vw
      - position: absolute
      - letter-spacing: 0.03vw
custom_fields:
  circle: >
    [[[
      if (entity.state === 'on') {
        const input = variables.circle_input;
        const radius = 20.5;
        const circumference = radius * 2 * Math.PI;
        return `
          <svg viewBox="0 0 50 50">
            <style>
              circle {
                transform: rotate(-90deg);
                transform-origin: 50% 50%;
                stroke-dasharray: ${circumference};
                stroke-dashoffset: ${circumference - input / 100 * circumference};
              }
              tspan {
                font-size: 10px;
              }
            </style>
            <circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
            <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
          </svg>
        `;
      }
    ]]]
  icon_hue: >
    [[[
      const state = entity.state === 'on' ? 'animate' : null;
      return `
        <svg viewBox="0 0 50 50">
          <style>
            @keyframes animate {
              0% {
                transform: scale(0.85);
              }
              20% {
                transform: scale(1.1);
              }
              40% {
                transform: scale(0.95);
              }
              60% {
                transform: scale(1.03);
              }
              80% {
                transform: scale(0.97);
              }
              100% {
                transform: scale(1);
              }
            }
            .animate {
              animation: animate 0.8s;
              transform-origin: center;
            }
          </style>
          <path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
          <path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/>
        </svg>
      `;
    ]]]

Voilà pour l’explication rapide.

Pour en revenir à ta demande :

Partir sur un élément personnalisé dans ton cas pour afficher une icône de base me paraît lourd.
Je passerais par l’utilisation de base du button-card avec la propriété show_icon à Vrai (même si la réponse de @Dapolux est totalement valable, je la trouve seulement moins facile d’approche pour un non initié).

Ce qui donnerais :

Code de la carte

type: ‹ custom:button-card ›
entity: light.kitchen_lights
name: Cuisine
show_state: false
show_icon: true
icon: ‹ mdi:coach-lamp ›
aspect_ratio: 1/1
state:

value: ‹ on ›
styles:
card:
- background-color: ‹ rgba(255, 255, 255, 0.8) ›
- border: ‹ 1px rgba(80, 80, 80) solid ›
name:
- color: ‹ rgba(0, 0, 0, 0.6) ›
double_tap_action:
action: more-info
variables:
circle_input: |
[[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
icon:
- top: ‹ -20% ›
- left: 4.5%
- width: 3.05vw
- position: absolute
  name:
- top: 74%
- left: 11%
- position: absolute
  card:
- font-family: Passion One
- letter-spacing: 0px
- color: ‹ rgba(255, 255, 255, 0.3) ›
- font-size: 100%
- background-color: ‹ rgba(80, 80, 80, 0.6) ›
- border-radius: 15%
- box-shadow: none
- transition: none
- border: ‹ 1px rgba(255, 255, 255) solid ›
  custom_fields:
  circle:
  - top: 8.5%
  - left: 56.2%
  - width: 3.5vw
  - position: absolute
  - letter-spacing: 0.03vw
    custom_fields:
    circle: |
    [[[
    if (entity.state === ‹ on ›) {
    const input = variables.circle_input;
    const radius = 20.5;
    const circumference = radius * 2 * Math.PI;
    return <svg viewBox="0 0 50 50"> <style> circle { transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference}; stroke-dashoffset: ${circumference - input / 100 * circumference}; } tspan { font-size: 10px; } </style> <circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" /> <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text> </svg>;
    }
    ]]]

Et si tu veux garder le principe de coloration (ajout du style de l’icône):

Code de la carte

type: 'custom:button-card'
entity: light.kitchen_lights
name: Cuisine
show_state: false
show_icon: true
icon: 'mdi:coach-lamp'
aspect_ratio: 1/1
state:
  - value: 'on'
    styles:
      card:
        - background-color: 'rgba(255, 255, 255, 0.8)'
        - border: '1px rgba(80, 80, 80) solid'
      name:
        - color: 'rgba(0, 0, 0, 0.6)'
      icon:
        - color: var(--button-card-light-color-no-temperature)
double_tap_action:
  action: more-info
variables:
  circle_input: |
    [[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
  icon:
    - top: '-20%'
    - left: 4.5%
    - width: 3.05vw
    - position: absolute
  name:
    - top: 74%
    - left: 11%
    - position: absolute
  card:
    - font-family: Passion One
    - letter-spacing: 0px
    - color: 'rgba(255, 255, 255, 0.3)'
    - font-size: 100%
    - background-color: 'rgba(80, 80, 80, 0.6)'
    - border-radius: 15%
    - box-shadow: none
    - transition: none
    - border: '1px rgba(255, 255, 255) solid'
  custom_fields:
    circle:
      - top: 8.5%
      - left: 56.2%
      - width: 3.5vw
      - position: absolute
      - letter-spacing: 0.03vw
custom_fields:
  circle: |
    [[[
      if (entity.state === 'on') {
        const input = variables.circle_input;
        const radius = 20.5;
        const circumference = radius * 2 * Math.PI;
        return `
          <svg viewBox="0 0 50 50">
            <style>
              circle {
                transform: rotate(-90deg);
                transform-origin: 50% 50%;
                stroke-dasharray: ${circumference};
                stroke-dashoffset: ${circumference - input / 100 * circumference};
              }
              tspan {
                font-size: 10px;
              }
            </style>
            <circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
            <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
          </svg>
        `;
      }
    ]]]

Et pour aller encore plus loin :

Il te faut récupérer l’icone svg depuis le site https://materialdesignicons.com/, et de la mettre aux mêmes dimensions que l’ampoule Hue et ajouter un élément de remplissage :

Code de la dernière carte

type: 'custom:button-card'
entity: light.kitchen_lights
name: Cuisine
show_state: false
show_icon: false
aspect_ratio: 1/1
state:
  - value: 'on'
    styles:
      card:
        - background-color: 'rgba(255, 255, 255, 0.8)'
        - border: '1px rgba(80, 80, 80) solid'
      name:
        - color: 'rgba(0, 0, 0, 0.6)'
double_tap_action:
  action: more-info
variables:
  circle_input: |
    [[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
styles:
  name:
    - top: 74%
    - left: 11%
    - position: absolute
  card:
    - font-family: Passion One
    - letter-spacing: 0px
    - color: 'rgba(255, 255, 255, 0.3)'
    - font-size: 100%
    - background-color: 'rgba(80, 80, 80, 0.6)'
    - border-radius: 15%
    - box-shadow: none
    - transition: none
    - border: '1px rgba(255, 255, 255) solid'
  custom_fields:
    icon_hue:
      - top: 11%
      - left: 4.5%
      - width: 3.05vw
      - position: absolute
    circle:
      - top: 8.5%
      - left: 56.2%
      - width: 3.5vw
      - position: absolute
      - letter-spacing: 0.03vw
custom_fields:
  circle: |
    [[[
      if (entity.state === 'on') {
        const input = variables.circle_input;
        const radius = 20.5;
        const circumference = radius * 2 * Math.PI;
        return `
          <svg viewBox="0 0 50 50">
            <style>
              circle {
                transform: rotate(-90deg);
                transform-origin: 50% 50%;
                stroke-dasharray: ${circumference};
                stroke-dashoffset: ${circumference - input / 100 * circumference};
              }
              tspan {
                font-size: 10px;
              }
            </style>
            <circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
            <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
          </svg>
        `;
      }
    ]]]
  icon_hue: |
    [[[
      const state = entity.state === 'on' ? 'animate' : null;
      return `
        <svg viewBox="0 0 50 50">
          <style>
            @keyframes animate {
              0% {
                transform: scale(0.85);
              }
              20% {
                transform: scale(1.1);
              }
              40% {
                transform: scale(0.95);
              }
              60% {
                transform: scale(1.03);
              }
              80% {
                transform: scale(0.97);
              }
              100% {
                transform: scale(1);
              }
            }
            .animate {
              animation: animate 0.8s;
              transform-origin: center;
            }
          </style>
          <path fill="#9da0a2" d="M 28.73684,6.15789 26.68421,0 H 22.57895 L 20.52632,6.15789 8.21053,12.31578 h 4.10526 l 1.23158,6.15789 H 4.10526 V 10.26314 H 0 v 20.52632 h 4.10526 v -8.21053 h 10.26316 l 2.05263,10.26316 4.10526,4.10526 2.05263,4.10526 h 4.10526 l 2.05263,-4.10526 4.10526,-4.10526 4.10526,-20.52632 h 4.10526 M 29.06524,30.78945 H 20.19787 L 16.42103,12.31577 h 16.42105 z"/>
          <path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="m 29.45402,30.78945 h -9.27111 l -3.9488,-19.3148 h 17.16871 z"/>
        </svg>
      `;
    ]]]

Voili voilou…

PS: dans le dernier cas seul un svg est nécessaire de base car l’icône est présente de façon native dans HA, mais j’explique ainsi pour être sûr de la superposition le plus rapidement possible sans jouer avec la position de l’élément

Plouf34 · Mars 8, 2021, 11:03

Ok, merci merci et merci.
Regarderais cela demain et vais l’implémenter.
Par contre, j’ai l’impression que la couleur de la lumière affichée ne varie pas selon l’intensité en % qu’on applique comme sur les cards normales.

Clemalex · Mars 8, 2021, 11:26

Si si, c’est le même fonctionnement… C’est simplement que aucun des gifs ne le montrent…

Edit : on le voit sur le dernier en fait

Dapolux · Mars 9, 2021, 6:58

Super explication!

J’ai une question hors du sujet, tu utilises quel outil pour tes captures d’ecran en mode video? (Dont tu fais un gif je suppose)

Clemalex · Mars 9, 2021, 7:33

C’est directement un créateur de gif dédié (super simple donc marche parfaitement) :

https://www.cockos.com/licecap/

Plouf34 · Mars 9, 2021, 7:41

Aïe. Faut que je regarde car le résultat est pas top en mode 2 ou 3 colonnes. Que ce soit sur pc, encore pire sur l’iPhone.
Je n’ai testé que pour le terrasse pour le moment.

Mais en tout cas, la couleur de l’entité fonctionne.

Clemalex · Mars 9, 2021, 7:45

Il ne faut pas prendre mon code pour comptant… Il faut s’en inspirer.

T’as un problème de style j’ai l’impression vu la police utilisée pour le mot Terrasse…

Plouf34 · Mars 9, 2021, 3:24

JE ne trouve pas solution. Sur PC, l’icone est presque normale, sur Iphone, microscopique.