Présentation + [Mon Dashboard] BBE

corto · Décembre 21, 2025, 5:49

j’aime bien le ventilo tournant au début du thread , sauf que quand j’ai voulu insérer le code dans mon badge …. ben j’ai foiré, comme d’ab ! à force, pour quelqu’un qui a commencé à programmer en assembleur en 1977 c’est rageant !

PS : je sais que c’est du superflu, mais comme j’ai très peu de choses domotisables chez moi (pas de volets roulants, ni de possibilité de gestion de la conso électrique [tarif bleu], ni d’électroménager connectable, alors je me fait plaisir avec de la personnalisation.

BBE · Décembre 21, 2025, 6:22

C’est pas chez moi… Je n’ai aucun ventilateur qui tourne dans mon dashboard

corto · Décembre 22, 2025, 5:42

Non, effectivement, c’est bien ce thread mais c’est un exemple donné par WarC0zes

WarC0zes · Décembre 22, 2025, 5:45

Salut,
un exemple avec la carte mushroom-template :

type: custom:mushroom-template-card
primary: RPI Fan
entity: fan.rpi_cooling_fan
icon: mdi:fan
icon_color: |
  {% if is_state(entity,'on') %} 
    green
  {% else %}
    red
  {% endif %}        
fill_container: true
tap_action:
  action: more-info
layout: horizontal
card_mod:
  style: |
    ha-state-icon {
      {% if is_state('fan.rpi_cooling_fan','off') %} 
        animation: none;
      {% else %}              
        animation: rotation 2.5s linear infinite;
      {% endif %} 
    }
    @keyframes rotation { 
      0% { transform: rotate(0deg); }
      100% { transform: rotate(359deg); }
    }

ou avec la carte tuile :

type: tile
entity: fan.rpi_cooling_fan
vertical: false
features_position: bottom
card_mod:
  style: |
    ha-state-icon {
      {% if is_state('fan.rpi_cooling_fan','off') %} 
        animation: none;
      {% else %}              
        animation: rotation 2.5s linear infinite;
      {% endif %} 
    }
    @keyframes rotation { 
      0% { transform: rotate(0deg); }
      100% { transform: rotate(359deg); }
    }

pour augmenter la rotation, diminu le 2.5s.

corto · Décembre 22, 2025, 6:15

Merci.

Je n’ai pas de soucis pour prendre ce code et le copier dans le YAML d’une carte entité vide créee pour l’occasion dans mon onglet de test (avec un mdi : et une entité existantes bien sûr) et ça marche.

C’est quand je veux l’insérér dans le Yaml existant d’un de mes badges (pareil pour une carte) que là je me plante quand à l’endroid où le poser et au niveau d’indentation dans mon card_mod: ha-card

WarC0zes · Décembre 22, 2025, 6:23

quel type de badge ?
un mushroom badge template ou un badge classqiue ?

met ton code.

corto · Décembre 22, 2025, 6:59

Alors, voici mon code qui fonctionne

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: switch.clim_bureau
    icon: mdi:air-conditioner
    content: |
      {% set entity = 'switch.clim_bureau' %}         
          {% if is_state(entity,'off') %}
        Clim Bureau
         coupée        
          {% elif is_state(entity,'on') %}
        Clim Bureau 
         en service        
          {% else %}
          Indisponible
          {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %}
        light-blue
      {% elif is_state(entity, 'off') %}  
        grey
      {% else %} 
        red
      {% endif %}
    card_mod:
      style: |
        ha-card 
        {
           white-space: pre;
          {% set entity = 'switch.clim_bureau' %}
          {% if is_state(entity,'on') %}
            --text-color: rgba(0, 150, 200, 1);
          {% elif is_state(entity,'off') %}
            --text-color: blue-grey;            
          {% else %}
            --text-color: red;
          {% endif %} 
          {% if is_state(entity,'on') %}
            --chip-background: rgba(225, 250, 240, 1);
          {% elif is_state(entity,'off') %}
            --chip-background: rgba(255, 255, 255, 1);   
          {% else %}
            --chip-background: orange;
          {% endif %} 
        }
tap_action:
  action: perform-action
  perform_action: switch.turn_on
  target:
    entity_id: switch.clim_bureau
view_layout:
  position: main

ET celui qui ne fonctionne pas que l’ajout soit en commentaire ou non (en fait mis en commentaire il ‘compile’ en ne me permettant pas d’enregistrer ! je pensais que les lignes de commentaires n’étaient pas prises en compte ! si je décommente (et que j’indente) il le prend mais le résultat n’est pas bon.

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: switch.clim_bureau
    icon: mdi:air-conditioner
    content: |
      {% set entity = 'switch.clim_bureau' %}
          {% if is_state(entity,'off') %}
        Clim Bureau
         coupée        
          {% elif is_state(entity,'on') %}
        Clim Bureau 
         en service 
# {% elif is_state('sensor.clim_bureau_puissance', > '2.0') %}
# Clim Bureau
# en fonction 
          {% else %}
          Indisponible
          {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %}
        light-blue
      {% elif is_state(entity, 'off') %}  
        grey
      {% else %} 
        red
      {% endif %}
    card_mod:
      style: |
        ha-card 
        {
           white-space: pre;
          {% set entity = 'switch.clim_bureau' %}
          {% if is_state(entity,'on') %}
            --text-color: rgba(0, 150, 200, 1);
          {% elif is_state(entity,'off') %}
            --text-color: blue-grey;            
          {% else %}
            --text-color: red;
          {% endif %} 
          {% if is_state(entity,'on') %}
            --chip-background: rgba(225, 250, 240, 1);
          {% elif is_state(entity,'off') %}
            --chip-background: rgba(255, 255, 255, 1);   
          {% else %}
            --chip-background: orange;
          {% endif %} 
        }
tap_action:
  action: perform-action
  perform_action: switch.turn_on
  target:
    entity_id: switch.clim_bureau
view_layout:
  position: main

ça fait 50 ans que je code depuis le Cobol et les assembleurs jusqu’au code des Arduino (pour lesquels je n’ai pas de soucis) mais là, avec le YAML j’en perds mon latin (qui lui remonte à 60 ans)

corto · Décembre 22, 2025, 7:23

Et en intégrant (mal évidemment) ton code ça ne fonctionne pas (le badge est bon mais le ventilo ne tourne pas

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: switch.clim_bureau
    icon: mdi:air-conditioner
    content: |
      {% set entity = 'switch.clim_bureau' %}         
          {% if is_state(entity,'off') %}
        Clim Bureau
         coupée        
          {% elif is_state(entity,'on') %}
        Clim Bureau 
         en service        
          {% else %}
          Indisponible
          {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %}
        light-blue
      {% elif is_state(entity, 'off') %}  
        grey
      {% else %} 
        red
      {% endif %}
    card_mod:
      style: |
        ha-card 
        {
           white-space: pre;
          {% set entity = 'switch.clim_bureau' %}
          {% if is_state(entity,'on') %}
            --text-color: rgba(0, 150, 200, 1);
          {% elif is_state(entity,'off') %}
            --text-color: blue-grey;            
          {% else %}
            --text-color: red;
          {% endif %} 
          {% if is_state(entity,'on') %}
            --chip-background: rgba(225, 250, 240, 1);
          {% elif is_state(entity,'off') %}
            --chip-background: rgba(255, 255, 255, 1);   
          {% else %}
            --chip-background: orange;
          {% endif %} 
        }
        ha-state-icon 
        {
          {% if is_state(entity,'off') %} 
            animation: none;
          {% else %}              
            animation: rotation 2.5s linear infinite;
          {% endif %} 
        @keyframes rotation { 
          0% { transform: rotate(0deg); }
          100% { transform: rotate(359deg); }
        }
tap_action:
  action: perform-action
  perform_action: switch.turn_on
  target:
    entity_id: switch.clim_bureau
view_layout:
  position: main

corto · Décembre 22, 2025, 7:51

Et en rajoutant l’accolade fermante qui manquait avant keyframe: pas mieux.

WarC0zes · Décembre 22, 2025, 8:20

Ok, avec un chip template, un exemple :

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: switch.0x50325ffffe304677
    icon: mdi:fan
    content: |     
      {% if is_state(entity,'off') %}
        Clim Bureau
        coupée        
      {% elif is_state(entity,'on') %}
        Clim Bureau 
        en service        
      {% else %}
        Indisponible
      {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %}
        light-blue
      {% elif is_state(entity, 'off') %}  
        grey
      {% else %} 
        red
      {% endif %}
    card_mod:
      style: |
        ha-card {
          white-space: pre;
          {% set entity = 'switch.0x50325ffffe304677' %}
          {% if is_state(entity,'on') %}
            --text-color: rgba(0, 150, 200, 1);
          {% elif is_state(entity,'off') %}
            --text-color: blue-grey;            
          {% else %}
            --text-color: red;
          {% endif %} 
          {% if is_state(entity,'on') %}
            --chip-background: rgba(225, 250, 240, 1);
          {% elif is_state(entity,'off') %}
            --chip-background: rgba(255, 255, 255, 1);   
          {% else %}
            --chip-background: orange;
          {% endif %}
        }
tap_action:
  action: perform-action
  perform_action: switch.turn_on
  target:
    entity_id: switch.clim_bureau
view_layout:
  position: main
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {% if is_state('switch.0x50325ffffe304677','off') %} 
          animation: none;
        {% else %}              
          animation: rotation 2.5s linear infinite;
        {% endif %}
      }    
      @keyframes rotation { 
        0% { transform: rotate(0deg); }
        100% { transform: rotate(359deg); }
      }

corto · Décembre 22, 2025, 8:59

alors évidemment ça fonctionne mais c’est quoi ça ? nth-child(1)$ ?

ça fonctionne MAIS, bizarrement, en gardant votre entité ! {% if is_state(‹ switch.0x50325ffffe304677
› dans le code (pour la rotation uniquement) si je le remplace par switch.clim_bureau (mon entité donc impératif dan le reste du code) ça ne tourne plus !?

Et je n’aurais jamais eu l’idée de repartir du niveau card_mod (en déplaçant l’indentation en plus) !!!
Et si je veux que ça ne tourne que si la clim est active je déplace le niveau card_mod de la rotation ?

Et pour les commentaires pas ignorés , c’est quoi le souci ?

WarC0zes · Décembre 22, 2025, 9:12

c’est le numéro de l’emplacement du chip (1) pour le premier. Si tu en ajoutes un deuxième, ça sera (2), ainsi de suite.

Pourtant ça doit fonctionner, juste en changeant l’entité. Mets ton code complet avec tes entités pour voir le souci.

popup5

Je comprends pas ta question ???

corto · Décembre 22, 2025, 11:04

Ok, c’est subtil : ça fonctionne si je mets ‹ switch.clim_bureau › mais pas si je mets entity … qui est la même chose et fonctionne dans le reste du code !

pour les commentaires : dans mon post je mets 2 exemples le 1er fonctionne et je ne peux pas enregistrer le 2ème qui est identique mais comporte 3 lignes mises en commentaires (et qui apparaissent bien en gris)

WarC0zes · Décembre 22, 2025, 11:13

normal, card_mod est différent de la carte mushroom. Pour card mod ,c’est config.entity.
exemple: {% if is_state(config.entity,'off') %}.
Mais si card_mod n’est pas au même niveau que ton entité a utiliser ça ne fonctionnera pas, il te faudra utiliser l’entité.

Pas sur que les commentaires fonctionne dans une carte.

corto · Décembre 22, 2025, 11:34

Okéééé ! entity est ce que j’appellerais une variable ‹ locale › et comme (par hasard ou parce qu’on m’a filé le code) je l’ai redéfinie dans l’autre card_mod là ça marche.
Et c’est un mot réservé ou bien j’aurais pu en utiliser un autre dans la définition ha-card { white-space: pre; {% set entity = 'switch.clim_bureau' %}?

Pour les commentaires vu les exemples dans des tutos ça marche … mais pas forcément dans le YAML de H.A. … ou pas partout.

Question : tu sais énormement (et encore plus ) de choses mais un jour t’as été un bleu alors t’as trouvé tes infos où ?

WarC0zes · Décembre 22, 2025, 3:16

En cherchant sur le forum ici ou sur le forum us. Puis surtout, en regardant la documentation et des tests, a force sa viendras.

BBE · Mars 20, 2026, 4:22

Petite nouveauté, nous avons adopté un mouton… On l’a appelé Shaun…

Pas d’integration Gardena smart home officielle, donc je suis passé par cette intégration: GitHub - py-smart-gardena/hass-gardena-smart-system: Home Assistant custom component integration for Gardena Smart System · GitHub

Le mouton remonte avec une entité lawn_mover, un sensor batterie et deux actions pour le démarrer ou le ramener à la maison:

Je me suis pelé la doc pour me faire une petite carte mushroom template hyper complète affichée dans la vue Jardin (tous les codes d’état et d’erreur sont traduits en français, le badge affiche la batterie ou les erreurs), les boutons (features) permettent de démarrer ou retourner à la base.

le code

features:
  - type: lawn-mower-commands
    commands:
      - start_pause
      - dock
type: custom:mushroom-template-card
primary: >-
  Shaun : {{ state_translated(entity) }} {{ states('sensor.shaun_battery_level')
  }}%
secondary: >-
  {% set s = state_attr(entity, 'state') %} {% set err = state_attr(entity,
  'error') %} {%- if s == 'PAUSED' -%}En pause capot fermé {%- elif s ==
  'PAUSED_IN_CS' -%}En pause sur la base {%- elif s == 'OK_CUTTING' -%}En train
  de tondre (auto) {%- elif s == 'OK_CUTTING_TIMER_OVERRIDDEN' -%}En train de
  tondre (hors planning) {%- elif s == 'OK_SEARCHING' -%}Recherche de la base
  {%- elif s == 'OK_LEAVING' -%}Sortie de la base {%- elif s == 'OK_CHARGING'
  -%}En charge (batterie faible) {%- elif s == 'PARKED_TIMER' -%}Garé (attend le
  planning) {%- elif s == 'PARKED_PARK_SELECTED' -%}Garé jusqu'à nouvel ordre
  {%- elif s == 'PARKED_AUTOTIMER' -%}Garé (herbe trop courte) {%- elif s ==
  'PARKED_FROST' -%}Garé (gel détecté) {%- elif s == 'PARKED_NO_LIGHT' -%}Garé
  (luminosité insuffisante) {%- elif s == 'PARKED_MOWING_COMPLETED' -%}Terminé
  (zone couverte) {%- elif s == 'PARKED_RAIN' -%}Garé (pluie détectée) {%- elif
  s == 'STOPPED_IN_GARDEN' -%}Arrêté dans le jardin {%- elif s ==
  'INITIATE_NEXT_ACTION' -%}Préparation de l'action suivante {%- elif s ==
  'SEARCHING_FOR_SATELLITES' -%}Recherche des satellites GPS {%- elif s ==
  'NONE' -%}État inconnu ou erreur {%- else -%}Inconnu{%- endif %}

  {% if err == 'NO_MESSAGE' -%}Système OK {%- elif err in ['NONE', none] -%}Pas
  de soucis {%- elif err == 'OUTSIDE_WORKING_AREA' -%}Hors zone de travail {%-
  elif err == 'NO_LOOP_SIGNAL' -%}Pas de signal boucle {%- elif err == 'TRAPPED'
  -%}Shaun est coincé ! {%- elif err == 'UPSIDE_DOWN' -%}Shaun est sur le dos !
  {%- elif err == 'LIFTED' -%}Shaun a été soulevé {%- elif err ==
  'CUTTING_SYSTEM_BLOCKED' -%}Lames bloquées {%- elif err.startswith('ALARM_')
  -%}⚠️ ALERTE : {{ err | replace('ALARM_MOWER_', '') | lower }} {%- elif
  'SENSOR_DEFECT' in err or 'PROBLEM' in err -%}Défaut capteur ({{ err }}) {%-
  else -%}Erreur : {{ err | lower | replace('_', ' ') }}{%- endif %}
icon: >-
  {% set s = state_attr(entity, 'state') %} {% if s == 'PAUSED' %}
  mdi:pause-circle {% elif s == 'PAUSED_IN_CS' %} mdi:home-pause {% elif s in
  ['OK_CUTTING', 'OK_CUTTING_TIMER_OVERRIDDEN'] %} mdi:robot-mower {% elif s ==
  'OK_SEARCHING' %} mdi:home-search {% elif s == 'OK_CHARGING' %}
  mdi:battery-charging-high {% elif s == 'PARKED_TIMER' %} mdi:clock-outline {%
  elif s == 'PARKED_AUTOTIMER' %} mdi:grass {% elif s == 'PARKED_FROST' %}
  mdi:snowflake {% elif s == 'PARKED_RAIN' %} mdi:weather-rainy {% elif s ==
  'STOPPED_IN_GARDEN' %} mdi:alert-octagon {% else %} mdi:robot-mower-outline {%
  endif %}
color: >-
  {% set s = state_attr(entity, 'state') %} {% if s in ['OK_CUTTING',
  'OK_CUTTING_TIMER_OVERRIDDEN', 'OK_LEAVING'] %} green {% elif s in
  ['OK_CHARGING', 'OK_SEARCHING', 'SEARCHING_FOR_SATELLITES'] %} blue {% elif s
  in ['PAUSED', 'PAUSED_IN_CS', 'PARKED_TIMER', 'PARKED_RAIN', 'PARKED_FROST']
  %} orange {% elif s == 'STOPPED_IN_GARDEN' %} red {% else %} grey {% endif %}
entity: lawn_mower.shaun
multiline_secondary: true
badge_icon: >-
  {% set bat = state_attr(entity, 'battery_level') | int(0) %} {% set err =
  state_attr(entity, 'error') %} {% if err not in ['NO_MESSAGE', 'NONE', none]
  %}
    mdi:alert-decagram
  {% elif bat == 100 %}
    mdi:battery
  {% elif bat <= 5 %}
    mdi:battery-outline
  {% else %}
    mdi:battery-{{ (bat / 10) | round(0, 'floor') | int }}0
  {% endif %}
badge_color: >-
  {% set bat = state_attr(entity, 'battery_level') | int(0) %} {% set err =
  state_attr(entity, 'error') %} {% if err not in ['NO_MESSAGE', 'NONE', none]
  %}
    red
  {% elif bat >= 80 %}
    green
  {% elif bat >= 50 %}
    light-green
  {% elif bat >= 25 %}
    orange
  {% else %}
    red
  {% endif %}
features_position: bottom
grid_options:
  columns: 12
  rows: auto

J’ai un état plus compact dans le dashboard principal:

le chip ouvre un pop up qui affiche la carte complete vue juste au dessus, et la tuile rappelle le mode en cours en plus compact via un template :

code du template etat compact

Template pour un état compact qui va au delà du state de l’entité lawn_mover (tonte, sur la base, retour, erreur) tous les états de l’attribut states sont décodés…

{% if state_attr('lawn_mower.shaun','state') == 'PAUSED' %} Pause
{% elif state_attr('lawn_mower.shaun','state') == 'PAUSED_IN_CS' %} Pause (base)
{% elif state_attr('lawn_mower.shaun','state') == 'OK_CUTTING' %} Tonte (auto)
{% elif state_attr('lawn_mower.shaun','state') == 'OK_CUTTING_TIMER_OVERRIDDEN' %} Tonte (manuel)
{% elif state_attr('lawn_mower.shaun','state') == 'OK_SEARCHING' %} Retour...
{% elif state_attr('lawn_mower.shaun','state') == 'OK_LEAVING' %} Sortie...
{% elif state_attr('lawn_mower.shaun','state') == 'OK_CHARGING' %} En charge
{% elif state_attr('lawn_mower.shaun','state') == 'PARKED_TIMER' %} Planifié
{% elif state_attr('lawn_mower.shaun','state') == 'PARKED_PARK_SELECTED' %} Garé
{% elif state_attr('lawn_mower.shaun','state') == 'PARKED_AUTOTIMER' %} Repos (gazon)
{% elif state_attr('lawn_mower.shaun','state') == 'PARKED_FROST' %} Gel
{% elif state_attr('lawn_mower.shaun','state') == 'PARKED_NO_LIGHT' %} Nuit
{% elif state_attr('lawn_mower.shaun','state') == 'PARKED_MOWING_COMPLETED' %} Terminé
{% elif state_attr('lawn_mower.shaun','state') == 'PARKED_RAIN' %} Pluie
{% elif state_attr('lawn_mower.shaun','state') == 'STOPPED_IN_GARDEN' %} BLOQUÉ
{% elif state_attr('lawn_mower.shaun','state') == 'INITIATE_NEXT_ACTION' %} Calcul...
{% elif state_attr('lawn_mower.shaun','state') == 'SEARCHING_FOR_SATELLITES' %} Signal GPS...
{% elif state_attr('lawn_mower.shaun','state') == 'NONE' %} Inconnu
{% else %}
Inconnu
{% endif %}

BBE · Mars 25, 2026, 2:40

Nouveauté, j’ai refait mon dashboard avec des cartes mushroom et des custom features… Plus de stack in…

Je joue avec le pied de page pour tester (en mode mobile uniquement, il disparait et les cartes lumières et volets apparaissent en mode tablette et pc)…

A voir à l’usage…

Pour chaque « room card » j’ai ajouté un bouton « info » qui change de couleur et ouvre un pop up de synthèse sur ce qui cloche… J’ai réarrangé l’ordre des boutons pour avoir quasi toujours les mêmes boutons aux mêmes endroits.

Je tente d’avoir:

tout en gris clair quand tout va bien
en bleu ou vert des info que qqch d’inhabituel mais normal arrive (par exemple le robot nettoie), un media player joue, etc…
en orange une info à connaitre
en rouge un truc à corriger important (fuite/fenêtre restée ouverte, etc…)

Tristao · Mars 25, 2026, 8:37

Sympa. Moi qui veux mettre à jour mon dashboard, ça donne des idées. Merci !

BBE · Avril 1, 2026, 6:31

J’arrête mushroom, je passe sur button-card pour simplifier le code de mon dashboard…

Mais non, la vraie news c’est que la toute dernière mouture de la room card et de ses tutos est là: [ConcoursDash] Ma room card entièrement configurable (+ tutos)

Avec les nouvelles room cards où les features ont remplacé la ligne de chips, sans vertical stack in, sans card mod, la mise en page est toujours au top contrairement aux versions précédentes…

Avec pour la peine une refonte complète du dashboard (comme montré deux messages au dessus):

en mode PC:

image1915×912 73.7 KB
en mode tablette:

image799×600 50.1 KB
en mode mobile:

image334×697 41 KB
et toujours un nano dashboard pour un vieux smartphone en mode wall-panel (basé sur des cartes heading uniquement):

image683×387 25.5 KB