Quel type de carte pour capteur température + humidité?

AngryKaribou · Mars 10, 2025, 9:30

Bonjour a tous,

Je me suis aussi laissé tombé dans la domotique il y a peu. J’adore les cartes que tu a fait avec les anneaux. Je me suis permis de réutiliser le code. J’aimerais y apporter une modification mais je ne trouve pas comment faire. Je commence a avoir un doute sur le fait qu’on puisse le faire avec apex.

J’aimerais que les anneaux change de couleur en fonction de la valeur de la donnée.
J’arrive a changer la couleur de chiffre ou d’image (comme la batterie plus haut) mais je n’arrive pas a changer la couleurs des anneaux. (en fonction des valeurs de capteurs)
une idée ?

Merci

Integra · Mars 10, 2025, 6:16

Bonjour @AngryKaribou,

Oui tu peux modifier la couleur des barres du graphique, donc des anneaux, en fonction de la valeur de l’entité, mais tu perdras le dégradé de couleur (ça je pense que tu t’en doutes ).

Pour jouer avec ça il faut rajouter l’entrée suivante dans la carte ApexCharts :

experimental:
      color_threshold: true

Puis, dans la partie « series » de la carte ApexCharts, il faudra jouer avec le paramétrage « color_threshold: » en lieu et place du « color: ».

Petite précision pour la série température, les « value » à renseigner sont un pourcentage du maximum (40° dans ma carte) et non une valeur brute en degré C° (par exemple pour 20° alors value : 50). Pour la série humidité pas de problème car il s’agit déjà de pourcentage.

En image :

Et le code correspondant :

Code

type: custom:stack-in-card
cards:
  - type: custom:apexcharts-card
    experimental:
      color_threshold: true
    chart_type: radialBar
    series:
      - entity: sensor.capteur_temperature_1_temperature
        max: 40
        color_threshold:
          - value: 0
            color: "#00e5ff"   # Cyan pour moins de 37.5% (0-15°C)
          - value: 37.5
            color: "#00ff15"   # Vert pour moins de 55% (15-22°C)
          - value: 55
            color: "#ffd500"   # Orange pour moins de 70% (22-28°C)
          - value: 70
            color: "#ff0000"   # Rouge pour plus de 70% (28-40°C)
        show:
          legend_value: false
      - entity: sensor.capteur_temperature_1_humidity
        max: 100
        color_threshold:
          - value: 25
            color: "#a7effc"
          - value: 40
            color: "#03d3fc"
          - value: 60
            color: "#0390fc"
          - value: 75
            color: "#033dfc"
        show:
          legend_value: false
    apex_config:
      plotOptions:
        radialBar:
          hollow:
            size: 70%
          dataLabels:
            name:
              show: false
            value:
              show: false
          track:
            dropShadow:
              enabled: true
              top: 3
              left: 0
              blur: 4
              opacity: 0.25
            strokeWidth: 75%
            margin: 3
      legend:
        show: false
      chart:
        height: 220
    card_mod:
      style: |
        ha-card {
          background: none;
          box-shadow: none;
          border: none;
        }
  - type: custom:button-card
    entity: sensor.capteur_temperature_1_temperature
    size: 6%
    icon: mdi:sofa
    show_state: false
    show_name: false
    label: Chambre
    show_label: true
    styles:
      grid:
        - grid-template-areas: " \"battery\" \"i\" \"l\" \"temp\" \"hum\""
      label:
        - font-size: 12px
        - font-style: italic
        - opacity: 75%
      icon:
        - opacity: 75%
      custom_fields:
        temp:
          - font-size: 27px
        hum:
          - font-size: 14px
          - font-style: italic
        battery:
          - position: absolute
          - left: 75%
          - top: 0%
    custom_fields:
      temp: >
        [[[ var temp = states['sensor.capteur_temperature_1_temperature'
        ].state; return `<ha-icon
          icon="mdi:thermometer"
          style="width: 20px; height: 20px; color: #7dc8ff ">
          </ha-icon>` + temp + '°'; ]]]
      hum: >
        [[[ var hum = states['sensor.capteur_temperature_1_humidity' ].state;
        return `<ha-icon
          icon="mdi:water"
          style="width: 15px; height: 15px; color: #7dc8ff ">
          </ha-icon>` + hum + '%'; ]]]
      battery: >
        [[[ var battery = states['sensor.capteur_temperature_1_battery'
        ].state;
            if (states['sensor.capteur_temperature_1_battery'].state >= 70) return `<ha-icon 
              icon="mdi:battery"
              style="width: 20px; height: 20px; color: green ">
              </ha-icon>` + battery + '%';
            if (states['sensor.capteur_temperature_1_battery'].state >= 20) return `<ha-icon 
              icon="mdi:battery-50"
              style="width: 20px; height: 20px; color: orange ">
              </ha-icon>` + battery + '%';
            if (states['sensor.capteur_temperature_1_battery'].state >= 1) return `<ha-icon 
              icon="mdi:battery-10"
              style="width: 20px; height: 20px; color: red ">
              </ha-icon>` + battery + '%'; ]]]
    card_mod:
      style: |
        ha-card {
          margin-top: -165px;
          background: none;
          box-shadow: none;
          border: none;
        }

À toi d’ajuster, ajouter ou supprimer des stops de couleurs en fonction de tes choix.

Entités à remplacer dans le code :

sensor.capteur_temperature_1_temperature
sensor.capteur_temperature_1_humidity
sensor.capteur_temperature_1_battery

MilesTEG1 · Mars 10, 2025, 7:39

Salut @Integra
Comment ça rend avec une taille plus réduite en largeur ?
Genre 2 cartes dans la place d’une seule de ta grande ?

Integra · Mars 10, 2025, 7:47

Salut @MilesTEG1,

En ajustant quelques paramètres ça s’adapte très bien dans une carte type grille.

L’idéal pour moi c’est 2 colonnes, à la limite 3 pourraient convenir pour certains moi je trouve ça un peu petit… .

Sinon en dashboard type section, on peut faire une carte bien plus large, et même aller jusqu’au pleine page :

AngryKaribou · Mars 10, 2025, 9:24

Nickel !!! Merci beaucoup !

il me manquait ca en fait :

experimental:
      color_threshold: true

Oui effectivement en bidouillant un peu je me suis rendu compte que la température était affiché en pourcentage.

hexagone · Mars 15, 2025, 4:59

Bonjour,
Je me permet, ce style de carte c’est tout à fait ce que je recherche.
Il est possible d’avoir le code?
Merci d’avance.

WarC0zes · Mars 15, 2025, 5:01

Sur ce message:

hexagone · Mars 15, 2025, 9:32

OUPS, j’ai lu tout le sujet mais cette partie avait du m’échapper.
Merci beaucoup de m’avoir répondu.

SoG · Octobre 25, 2025, 8:14

Un peu de déterrage, déjà je tiens à remercier tous ceux qui ont participer et qui ont donner leurs codes.

J’ai suivi particulièrement @Integra et @herveaurel pour leurs idées de cartes. Merci à vous deux.

Integra · Octobre 27, 2025, 7:42

Pas de soucis @SoG, c’est jamais un problème de partager le code si ça peut donner des idées au contraire !

J’en profite pour partager la dernière version de ma carte (la V3 ou 4 probablement ), pour laquelle j’ai viré Stack-in-Card, car finalement tout rentre dans une seule et même Button-Card. J’ai également remplacé tous les réglages de taille de cartes par des valeurs en pourcentage et non en pixel pour une meilleure compréhension et prise en main.

Voici la version minimaliste de la carte :

Code de la carte

type: custom:button-card
entity: sensor.capteur_temperature_1_temperature
size: 5%
icon: mdi:sofa
show_state: false
show_name: false
label: Salon
show_label: true
styles:
  card:
    - position: relative
  grid:
    - grid-template-areas: '"i" "l" "temp" "hum" "apex"'
    - margin-top: 2%
    - padding-bottom: 5%
  label:
    - font-size: 11px
    - font-style: italic
    - opacity: 75%
  icon:
    - opacity: 75%
  custom_fields:
    temp:
      - font-size: 26px
    hum:
      - font-size: 13px
      - font-style: italic
    apex:
      - position: absolute
      - top: 0%
      - left: 0%
      - width: 100%
      - height: 100%
      - "--ha-card-border-width": 0
      - "--ha-card-background": transparent
custom_fields:
  temp: >
    [[[ var temp = states['sensor.capteur_temperature_1_temperature' ].state;
    return `<ha-icon
      icon="fas:temperature-half"
      style="width: 18px; height: 18px; color: #7dc8ff ">
      </ha-icon>` + temp + '°'; ]]]
  hum: >
    [[[ var hum = states['sensor.capteur_temperature_1_humidity' ].state;    
    return `<ha-icon
      icon="mdi:water"
      style="width: 15px; height: 15px; color: #7dc8ff ">
      </ha-icon>` + hum + '%'; ]]]
  apex:
    card:
      type: custom:apexcharts-card
      chart_type: radialBar
      series:
        - entity: sensor.capteur_temperature_1_temperature
          max: 40
          color: "#7dc8ff"
          show:
            legend_value: false
        - entity: sensor.capteur_temperature_1_humidity
          max: 100
          color: "#ffd27f"
          show:
            legend_value: false
      apex_config:
        plotOptions:
          radialBar:
            offsetY: 0
            hollow:
              size: 70%
            dataLabels:
              name:
                show: false
              value:
                show: false
            track:
              dropShadow:
                enabled: true
                top: 3
                left: 0
                blur: 4
                opacity: 0.25
              strokeWidth: 75%
              margin: 3
        fill:
          type: gradient
          gradient:
            type: vertical
            gradientToColors:
              - "#2a75cf"
              - "#ffc04c"
            stops:
              - 0
              - 100
        legend:
          show: false
        chart:
          height: 100%

Entités à remplacer :

sensor.capteur_temperature_1_temperature
sensor.capteur_temperature_1_humidity

Ajustement des tailles et placement des cartes, dans l’ordre :

“size: 5%” (ligne 3) : taille de l’icône
“margin-top: 2%” (ligne 14) : fait descendre la Button-card pour la centrer dans la jauge
“padding-bottom: 5%” (ligne 15) : rajoute de la marge en bas de carte pour ne pas tronquer la jauge
“height: 100%” (ligne 97) : ajuste la taille de la jauge, on peut aller au delà de 100% si on veut plus grand

Et voici la version la plus complète et verbeuse :

Code de la carte

type: custom:button-card
entity: sensor.capteur_temperature_1_temperature
size: 5%
icon: mdi:sofa
show_state: false
show_name: false
label: Salon
show_label: true
styles:
  card:
    - position: relative
  grid:
    - grid-template-areas: '"link battery" "i i" "l l" "temp temp" "hum hum" "update heure" "apex apex" "graph graph"'
    - grid-template-columns: 50% 50%
    - margin-top: 2%
    - padding-bottom: 0%
  label:
    - font-size: 11px
    - font-style: italic
    - opacity: 75%
  icon:
    - opacity: 75%
  custom_fields:
    temp:
      - font-size: 26px
    hum:
      - font-size: 13px
      - font-style: italic
    link:
      - position: absolute
      - left: 15%
      - top: 5%
    battery:
      - position: absolute
      - left: 80%
      - top: 5%
    update:
      - justify-self: middle
      - align-self: middle
      - font-style: italic
      - font-size: 12px
      - opacity: 60%
      - margin-top: 10%
    heure:
      - justify-self: middle
      - align-self: middle
      - font-style: italic
      - font-size: 12px
      - opacity: 60%
      - margin-top: 10%
    apex:
      - position: absolute
      - top: 0%
      - left: 0%
      - width: 100%
      - height: 100%
      - "--ha-card-border-width": 0
      - "--ha-card-background": transparent
    graph:
      - margin-top: 0%
      - "--ha-card-border-width": 0
      - "--ha-card-background": transparent
custom_fields:
  temp: >
    [[[ var temp = states['sensor.capteur_temperature_1_temperature' ].state;
    return `<ha-icon
      icon="mdi:thermometer"
      style="width: 18px; height: 18px; color: #7dc8ff ">
      </ha-icon>` + temp + '°'; ]]]
  hum: >
    [[[ var hum = states['sensor.capteur_temperature_1_humidity' ].state;    
    return `<ha-icon
      icon="mdi:water"
      style="width: 15px; height: 15px; color: #7dc8ff ">
      </ha-icon>` + hum + '%'; ]]]
  link: |
    [[[ var link = states['sensor.capteur_temperature_1_linkquality'].state;
      if (link >= 170)
        return `<ha-icon icon="mdi:signal-cellular-3" style="width: 20px; height: 20px; color: #7dc8ff "></ha-icon>`; 
      else if (link >= 85)
        return `<ha-icon icon="mdi:signal-cellular-2" style="width: 20px; height: 20px; color: #7dc8ff "></ha-icon>`;
      else if (link >= 1)
        return `<ha-icon icon="mdi:signal-cellular-1" style="width: 20px; height: 20px; color: #7dc8ff "></ha-icon>`;
      else
        return `<ha-icon icon="mdi:signal-cellular-outline" style="width: 20px; height: 20px; color: #7dc8ff "></ha-icon>`;
        ]]]
  battery: |
    [[[ var battery = states['sensor.capteur_temperature_1_battery'].state;
      if (battery >= 70)
        return `<ha-icon icon="mdi:battery" style="width: 20px; height: 20px; color: green"></ha-icon>`;
      else if (battery >= 20)
        return `<ha-icon icon="mdi:battery-50" style="width: 20px; height: 20px; color: orange"></ha-icon>`;
      else if (battery >= 1)
        return `<ha-icon icon="mdi:battery-10" style="width: 20px; height: 20px; color: red"></ha-icon>`;
      else
        return `<ha-icon icon="mdi:battery-alert-variant-outline" style="width: 20px; height: 20px; color: darkred"></ha-icon>`; ]]]
  update: |
    [[[
      return `<ha-icon icon="mdi:progress-clock" style="width: 20px; height: 20px;"></ha-icon>` + 
      ' Dernière M.A.J.';
    ]]]
  heure: |
    [[[
      return helpers.relativeTime(states['sensor.capteur_temperature_1_last_seen'].state);
    ]]]
  apex:
    card:
      type: custom:apexcharts-card
      chart_type: radialBar
      series:
        - entity: sensor.capteur_temperature_1_temperature
          max: 40
          color: "#7dc8ff"
          show:
            legend_value: false
        - entity: sensor.capteur_temperature_1_humidity
          max: 100
          color: "#ffd27f"
          show:
            legend_value: false
      apex_config:
        plotOptions:
          radialBar:
            offsetY: 0
            hollow:
              size: 70%
            dataLabels:
              name:
                show: false
              value:
                show: false
            track:
              dropShadow:
                enabled: true
                top: 3
                left: 0
                blur: 4
                opacity: 0.25
              strokeWidth: 75%
              margin: 3
        fill:
          type: gradient
          gradient:
            type: vertical
            gradientToColors:
              - "#2a75cf"
              - "#ffc04c"
            stops:
              - 0
              - 100
        legend:
          show: false
        chart:
          height: 100%
  graph:
    card:
      type: custom:mini-graph-card
      name: Salon
      hours_to_show: 24
      points_per_hour: 1
      hour24: true
      line_width: 2
      decimals: 1
      entities:
        - entity: sensor.capteur_temperature_1_temperature
          name: Temp.
          color: "#2a75cf"
        - entity: sensor.capteur_temperature_1_humidity
          color: "#ffc04c"
          name: Humidité
          show_line: true
          show_points: true
          show_legend: true
          y_axis: secondary
      show:
        fill: true
        graph: line
        icon: false
        name: false
        state: false
        labels: false
        extrema: true
        average: true
        icon_adaptive_color: false
        labels_secondary: false
      align_icon: right
      align_state: left

En plus de la version minimale on retrouve :

ajout du niveau de batterie avec icône qui évolue selon l’état
ajout du niveau de signal avec icône qui évolue selon l’état
ajout de l’info de dernière mise à jour (last_seen) du capteur

Entités à remplacer :

sensor.capteur_temperature_1_temperature
sensor.capteur_temperature_1_humidity
sensor.capteur_temperature_1_linkquality
sensor.capteur_temperature_1_battery
sensor.capteur_temperature_1_last_seen

Ajustement des tailles et placement de cartes, dans l’ordre :

“size: 5%” (ligne 3) : taille de l’icône
“margin-top: 2%” (ligne 15) : fait descendre la Button-card pour la centrer dans la jauge
“padding-bottom: 0%” (ligne 16) : rajoute de la marge en bas de carte pour ne pas tronquer la jauge
“margin-top: 10%” (ligne 43 et 50) : rajoute de la marge pour redescendre l’info de mise à jour du capteur
“height: 100%” (ligne 154) : ajuste la taille de la jauge, on peut aller au delà de 100% si on veut plus grand

Les paramètres de tailles et emplacements sont à ajuster selon le nombre de cartes utilisées (par exemple utilisation de grille ou pile horizontale).

MilesTEG1 · Octobre 27, 2025, 8:47

Salut
@Integra wha c’est chouette !
Saurais-tu faire en sorte de pouvoir slider gauche/droite pour afficher d’autres cartes pour d’autres pièces ?

WarC0zes · Octobre 28, 2025, 3:55

Salut,
utilise simple-swipe-card et la carte de @Integra :

Bello65 · Octobre 30, 2025, 6:49

Bonjour,
J’ai du raté quelques choses, mais je ne vois pas quoi, si vous pouviez m’aider, merci beaucoup.

Code

type: custom:stack-in-card
cards:
  - type: custom:apexcharts-card
    experimental:
      color_threshold: true
    chart_type: radialBar
    series:
      - entity: sensor.temperature_158d00010b78b4
        max: 40
        color_threshold:
          - value: 0
            color: "#00e5ff"
          - value: 37.5
            color: "#00ff15"
          - value: 55
            color: "#ffd500"
          - value: 70
            color: "#ff0000"
        show:
          legend_value: false
      - entity: sensor.humidity_158d00010b78b4
        max: 100
        color_threshold:
          - value: 25
            color: "#a7effc"
          - value: 40
            color: "#03d3fc"
          - value: 60
            color: "#0390fc"
          - value: 75
            color: "#033dfc"
        show:
          legend_value: false
    apex_config:
      plotOptions:
        radialBar:
          hollow:
            size: 70%
          dataLabels:
            name:
              show: false
            value:
              show: false
          track:
            dropShadow:
              enabled: true
              top: 3
              left: 0
              blur: 4
              opacity: 0.25
            strokeWidth: 75%
            margin: 3
      legend:
        show: false
      chart:
        height: 220
    card_mod:
      style: |
        ha-card {
          background: none;
          box-shadow: none;
          border: none;
        }
  - type: custom:button-card
    entity: sensor.temperature_158d00010b78b4
    size: 6%
    icon: mdi:bed-double-outline
    show_state: false
    show_name: false
    label: Parents
    show_label: true
    styles:
      grid:
        - grid-template-areas: " \"battery\" \"i\" \"l\" \"temp\" \"hum\""
      label:
        - font-size: 12px
        - font-style: italic
        - opacity: 75%
      icon:
        - opacity: 75%
      custom_fields:
        temp:
          - font-size: 27px
        hum:
          - font-size: 14px
          - font-style: italic
        battery:
          - position: absolute
          - left: 75%
          - top: 0%
    custom_fields:
      temp: >
        [[[ var temp = states['sensor.temperature_158d00010b78b4' ].state;
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 20px; height: 20px; color: #7dc8ff ">
          </ha-icon>` + temp + '°'; ]]]
      hum: >
        [[[ var hum = states['sensor.humidity_158d00010b78b4' ].state; return
        `<ha-icon
          icon="mdi:water"
          style="width: 15px; height: 15px; color: #7dc8ff ">
          </ha-icon>` + hum + '%'; ]]]
      battery: |
        [[[ var battery = states['sensor.battery_158d00010b78b4' ].state;
            if (states['sensor.battery_158d00010b78b4'].state >= 70) return `<ha-icon 
              icon="mdi:battery"
              style="width: 20px; height: 20px; color: green ">
              </ha-icon>` + battery + '%';
            if (states['sensor.battery_158d00010b78b4'].state >= 20) return `<ha-icon 
              icon="mdi:battery-50"
              style="width: 20px; height: 20px; color: orange ">
              </ha-icon>` + battery + '%';
            if (states['sensor.battery_158d00010b78b4'].state >= 1) return `<ha-icon 
              icon="mdi:battery-10"
              style="width: 20px; height: 20px; color: red ">
              </ha-icon>` + battery + '%'; ]]]
    card_mod:
      style: |
        ha-card {
          margin-top: -165px;
          background: none;
          box-shadow: none;
          border: none;
        }

Bello65 · Octobre 30, 2025, 7:00

et j’en profite aussi pour savoir : comment vous faites pour avoir le code en couleur après <details> ?

Merci

Integra · Octobre 30, 2025, 7:35

Bonjour @Bello65,

Je pense qu’il te manque Card-mod (disponible sur HACS). Mais je vois que tu utilises une ancienne version de la carte, j’ai posté une version plus récente deux posts au dessus du tiens, qui évite l’utilisation de Stack-in-Card et de Card-mod.

Essaie donc avec ce code :

Code

type: custom:button-card
entity: sensor.temperature_158d00010b78b4
size: 6%
icon: mdi:bed-double-outline
show_state: false
show_name: false
label: Parents
show_label: true
styles:
  card:
    - position: relative
  grid:
    - grid-template-areas: "\"i\" \"l\" \"temp\" \"hum\" \"battery\" \"apex\""
    - margin-top: 2%
    - padding-bottom: 5%
  label:
    - font-size: 11px
    - font-style: italic
    - opacity: 75%
  icon:
    - opacity: 75%
  custom_fields:
    temp:
      - font-size: 26px
    hum:
      - font-size: 13px
      - font-style: italic
    battery:
      - position: absolute
      - left: 75%
      - top: 10%
    apex:
      - position: absolute
      - top: 0%
      - left: 0%
      - width: 100%
      - height: 100%
      - "--ha-card-border-width": 0
      - "--ha-card-background": transparent
custom_fields:
  temp: >
    [[[ var temp = states['sensor.temperature_158d00010b78b4' ].state;
    return `<ha-icon
      icon="fas:temperature-half"
      style="width: 18px; height: 18px; color: #7dc8ff ">
      </ha-icon>` + temp + '°'; ]]]
  hum: >
    [[[ var hum = states['sensor.humidity_158d00010b78b4' ].state;    
    return `<ha-icon
      icon="mdi:water"
      style="width: 15px; height: 15px; color: #7dc8ff ">
      </ha-icon>` + hum + '%'; ]]]
  battery: |
    [[[ var battery = states['sensor.battery_158d00010b78b4'].state;
      if (battery >= 70)
        return `<ha-icon icon="mdi:battery" style="width: 20px; height: 20px; color: green"></ha-icon>`;
      else if (battery >= 20)
        return `<ha-icon icon="mdi:battery-50" style="width: 20px; height: 20px; color: orange"></ha-icon>`;
      else if (battery >= 1)
        return `<ha-icon icon="mdi:battery-10" style="width: 20px; height: 20px; color: red"></ha-icon>`;
      else
        return `<ha-icon icon="mdi:battery-alert-variant-outline" style="width: 20px; height: 20px; color: darkred"></ha-icon>`; ]]]
  apex:
    card:
      type: custom:apexcharts-card
      experimental:
        color_threshold: true
      chart_type: radialBar
      series:
        - entity: sensor.temperature_158d00010b78b4
          max: 40
          color_threshold:
            - value: 0
              color: "#00e5ff"
            - value: 37.5
              color: "#00ff15"
            - value: 55
              color: "#ffd500"
            - value: 70
              color: "#ff0000"
          show:
            legend_value: false
        - entity: sensor.humidity_158d00010b78b4
          max: 100
          color_threshold:
            - value: 25
              color: "#a7effc"
            - value: 40
              color: "#03d3fc"
            - value: 60
              color: "#0390fc"
            - value: 75
              color: "#033dfc"
          show:
            legend_value: false
      apex_config:
        plotOptions:
          radialBar:
            hollow:
              size: 70%
            dataLabels:
              name:
                show: false
              value:
                show: false
            track:
              dropShadow:
                enabled: true
                top: 3
                left: 0
                blur: 4
                opacity: 0.25
              strokeWidth: 75%
              margin: 3
        legend:
          show: false
        chart:
          height: 100%

Lorsque je colle du texte préformaté en haut à droite de la fenêtre je sélectionne “yaml”.

Bello65 · Octobre 30, 2025, 9:21

Bon, je dois être un boulet je n’ai pas trouvé, par contre nickel, le code fonctionne parfaitement, merci

Et que dois je rajouter si je veux le % à côté de l’icone batterie ?

Integra · Octobre 30, 2025, 10:26

Pour le pourcentage de batterie, dans la partie custom_fields “battery” remplace le code par celui-là:

  battery: |
    [[[ var battery = states['sensor.battery_158d00010b78b4'].state;
      if (battery >= 70)
        return `<ha-icon icon="mdi:battery" style="width: 20px; height: 20px; color: green"></ha-icon>` + battery + '%';
      else if (battery >= 20)
        return `<ha-icon icon="mdi:battery-50" style="width: 20px; height: 20px; color: orange"></ha-icon>` + battery + '%';
      else if (battery >= 1)
        return `<ha-icon icon="mdi:battery-10" style="width: 20px; height: 20px; color: red"></ha-icon>` + battery + '%';
      else
        return `<ha-icon icon="mdi:battery-alert-variant-outline" style="width: 20px; height: 20px; color: darkred"></ha-icon>` + battery + '%'; ]]]

WarC0zes · Octobre 31, 2025, 1:50

Bonjour,
utilise la balise texte préformaté puis ajoute yaml avec l’ancien éditeur

Exemple :

Avec le nouvel éditeur choisi yaml dans la liste déroulante à droite.

Bello65 · Novembre 1, 2025, 12:05

Merci, parfait, tout est bon.

J’ai compris la modif, j’essaie de comprendre encore (et cela va durer je pense) quelle code mettre pour ces petis ajouts. J’ai déjà du mal avec les “alignements” du yaml qui me prennent la tête….

Si j’ose aller plus loin, si je souhaite réduire la carte pour qu’elle soit comme celle du dessus :

quel paramètre toucher dans le code ?

Bello65 · Novembre 1, 2025, 12:06

Ah ok, noir sur fond noir, je ne voyais pas cette fenêtre. Nickel, bon à savoir car le code est plus lisible, merci