Bonjour à tous !
Je me jette à l’eau et j’ai le plaisir de vous présenter la toute dernière mouture de ma carte à tout faire :
Ma carte pièce ou « room card »
Elle a l’air d’une carte tuile toute simple comme celle d’un aspirateur par exemple:
Et c’est bien le but ! Mais ne vous y trompez pas, ici, absolument tout est configurable, et mieux encore, tout est configurable simplement sans YAML !
Bref c’est la carte de base de l’ensemble de mon dashboard. Elle me permet d’avoir d’un coup d’œil l’état de chaque pièce, quelques informations clefs, et d’accéder directement à quelques contrôles bien pratiques. Je l’utilise essentiellement pour les pièces, mais on peut l’utiliser comme on le souhaite vu que tout est configurable…
D'autres cas d'utilisation
Puisque tout est configurable, vous pouvez utiliser les infos et boutons de cette carte pour plein d’autres choses que des pièces, c’est vous qui choisissez ! Quelques exemples:
- carte robot tondeuse (ça semble être à la mode pour le concours):
- carte de synthèse des volets:
- carte de synthèse des lumières:
- carte de synthèse du système:
- carte pour lancer de la musique sur les groupes d’enceintes:
- et comme c’est basé sur des fonctionnalités (
features) si vous voulez en ajouter d’autres, c’est possible:
Pour ceux que ça intéressent, le chemin parcouru, parce que Rome ne s’est pas faite en un jour…
Un peu d'histoire sur la création de ces cartes
Mon dashboard est basé depuis le tout début sur les cartes mushroom que j’ ai apprécié en tant que débutant pour leur facilité et leur possibilités de personnalisation sans yaml. Ceci m’a permis de modifier progressivement mon dashboard vers des choses de plus en plus personnalisées, mais « en douceur », parfait pour le débutant que j’étais.
C’est comme ça que j’ai découvert les dashboards home assistant et leur interface graphique. Aujourd’hui les cartes tuiles ont pris le relai de mushroom pour presque tout, et ces premières expériences de dashboard ont fait de moi l’auteur que vous avez peut être déjà lu… Vous pouvez voir tout ce qu’on peut faire avec Home Assistant en mode « standard » dans cet article: [Article] Un beau dashboard, tout simplement !
Cependant, même si les cartes mushroom ou les tuiles sont géniales, j’ai eu besoin de me fabriquer une carte de synthèse par pièce ou par grande fonction pour compacter un peu le dashboard.
Beaucoup d’entres vous ont probablement déjà suivi une partie de l’histoire sur le forum via le post sur le forum sur la creation de ma « room card » et le tuto pas à pas associé.
Pour résumer, ces fils montrent la génération d’une première version de room cards, entièrement basées sur Mushroom (template et chips) et vertical-stack-in-card, avec un peu de card-mod aussi.
L’idée de base: compacter l’affichage et les contrôles
- Par exemple pour le salon et la cuisine on est passé de ça (mon premier dashboard, avec une ligne de mushroom chips et 9 cartes mushroom « standard », et tout ça bien avant les sections):
- A ça avec deux « room card », beaucoup plus compactes, plus standardisées et avec plus de fonctions intégrées:
Tout ceci m’a donc conduit à cette première version de ma room card (ici le salon), partagée largement avec la communauté HACF:
Une version mise à jour !
Il aurait été trop simple de reprendre cette carte pour participer au concours… Il fallait donc la mettre à jour! La version proposée est donc la toute dernière, basée sur les fonctionnalités (features), et corrige (presque) toutes les petites imperfections de la version précédente.
Pourquoi une mise à jour ?
-
Parce que certains aspects de la ligne de chips ne me satisfaisaient pas:
- chips pas complètement centrés suivant la taille de la carte
- passage sur deux lignes pour certaines largeur d’écran trop étroites
- nécessité de card-mod pour avoir des marges correctes => YAML obligatoire
-
Parce que certains échanges sur le forum m’ont donné envie de tester un bouton « info » à tout faire pour chaque pièce.
-
Parce que les stack-in-card n’étaient pas vraiment maintenues (jusqu’il y a peu).
-
Parce que cela faisait un certain temps que je lorgnais du coté des tuiles et surtout des « features » suite à l’écriture de l’article sur le dashboard…
J’ai donc partagé quelques tests sur le forum pour tenter de faire une « room card » 100% “core”, nous sommes quelques’uns à tenter d’enlever HACS… J’ai aussi passé quelques mois en tentatives infructueuses de lobbying dans github et discord pour faire évoluer les tuiles et les features… avant de me faire une raison…
J’ai donc fini par me lancer dans une refonte en profondeur de mon dashboard, repoussée depuis longtemps en attente d’évolution qui ne viendront pas…
Il me fallait donc revoir en profondeur ces room cards… Aussitôt dit, aussitôt fait ! Avec une simplification de la structure de la carte en prime, qui la rend beaucoup plus facile à manipuler et a modifier.
La carte n’est plus la fusion de plusieurs éléments comme auparavant, elle est désormais composée d’une seule carte. Une tuile si cela vous convient, mais pour un contrôle total j’utilise la « super tuile » : la carte mushroom template. Ensuite au choix on utilise les fonctionnalités (features) disponibles pour faire des boutons, ou si on veut un contrôle total des fonctionnalités, les custom-card-features.
Voici donc l’objet du concours: ma version rénovée de ma room card « mushroom », en quatre versions, avec des tutos pour que chacun quel que soit son niveau puisse se faire la sienne.
C’est bien beau ton baratin mais à quoi ça ressemble ton truc?
Cette « room card », c’est la carte de base de mon dashboard: en mode mobile comme en mode tablette ou PC. Mon dashboard est uniquement composé de ces cartes (A l’exception d’une ligne de badges en haut et d’un pied de page en mode mobile):
-
En mode mobile :
-
En mode PC / tablette :
Chaque carte du dashboard représente donc une pièce ou une fonction particulière, avec d’un coup d’œil, l’état de la piece et de ses fonctions principales et l’accès à des contrôles ou info spécifiques.
Pour la suite prenons un exemple: le salon (chaque pièce a ses spécificités, tout est configurable, regardez le dashboard complet pour avoir des idées):
Les fonctionnalités:
Pilotage complet possible par l'Interface graphique
Pour permettre à tous de les utiliser, j’ai cherché à conserver le plus possible un pilotage par l’interface graphique. On peut faire plus beau, ou plus compact, mais en général on passe en YAML, et il existe alors d’autres cartes qui sont plus adaptées que mushroom (button card par exemple).
Seule entorse : les pop ups. Ils sont gérés par des « fire-dom-event » utilisant browser-mod, qui sont écrits en YAML dans la description des « tap-actions ». Il y a des pop-up sur tous les boutons.
Mais ils ne sont pas obligatoires, on peut les remplacer par le « more info » de l’entité liée, c’est le choix des versions simplifiées qui sont donc 100% configurables en interface graphique, sans YAML (et même pour certaines sans template voire sans HACS !).
Quelques règles de design pour le dashboard...
On s’éloigne des cartes pour une petite disgression sur le dashboard… Mais quand on ajoute des cartes, afin de garder de la cohérence dans le dashboard, il est bon de se fixer quelques règles.
Voici les miennes, libre à vous de vous fixer les vôtres. Il est utile d’y réfléchir avant de se lancer dans les cartes.
Gestion homogène des couleurs :
- Gris : C’est la couleur de base du dashboard. Ce gris signifie que rien n’est anormal. Une carte entièrement grise signifie qu’il n’y a rien de spécial, seul ce qui ne sera pas gris aura pour but d’attirer l’œil sur ce qui sort de l’ordinaire.
- Rouge: Les éléments anormaux qui doivent être connus ou traités rapidement (couleur d’alerte): quelques exemples : capteur de fumée, porte ou fenêtre restée ouverte, capteur de fuite d’eau, indicateur de crue de la rivière voisine (au dessus du seuil d’alerte).
- Orange: Les élément anormaux qui sont moins urgents (couleur d’avertissement) : quelques exemples : présence détectée, robot en erreur ou bloqué, présence de pollens, redémarrage nécessaire, piles <15%, lessive terminée, tarif tempo rouge, etc..
- Vert et Bleu: Les éléments anormaux qui sont liés à un système qui fonctionne normalement (vert : mode normal) ou (bleu : mode inhabituel ou à surveiller ou à penser à éteindre) : quelques exemples : vert: robot en marche, lessive/sèche linge en marche… bleu: mise à jour disponible, robot en pause, volets ouverts, media player en fonctionnement
Toutes mes « room cards » essaient de respecter ce guide (sauf les lumières qui sont en orange car c’était la couleur « naturelle »… mais j’hésite à les passer en bleu comme les volets…). Pour ce qui est des autres vues du dashboard… c’est le bazar… et c’est le prochain chantier de rénovation…
Gestion homogène des boutons :
J’essaie d’avoir toujours les boutons positionnés au même endroit, en partant de la gauche, (quitte dans certain cas à laisser des trous):
- 1/ lumière
- 2/ volet
- 3/ autre entité importante de la pièce (média player, chauffage, robot, etc…)
- 4/ bouton info
Toutes mes cartes ont donc 4 boutons, mais il est tout à fait possible de faire des cartes à 1,2 ou 3 boutons ou même 5 et plus. Ou d’utiliser d’autres fonctionnalités disponibles (toggle, slider, liste de choix, etc…).
Fonctions détaillées
Ci dessous la description détaillée d’une carte pièce. On s’appuie entièrement sur les possibilités offertes par la carte mushroom template et les custom features:
Les affichages (pour avoir toutes les infos en un coup d’œil):
-
L’icône principale de la carte template : son comportement (icône et couleur) est entièrement pilotable, en particulier sa couleur dépend de l’état des lumières dans la pièce (Chez moi l’icone est bleu clair si la pièce est « en fonction » donc si une lumière est allumé (pour les pieces qui ont une lumière) ou si quelque chose s’y passe (par exemple une lessive en cours)…
-
Le titre est entièrement personnalisable, même si chez moi il reste fixe. C’est l’info principale de la carte mushroom template (Rien n’empêche donc d’avoir un titre dynamique et d’y afficher des informations supplémentaires).
-
Le texte, c’est l’info secondaire de la carte mushroom, elle affiche via un template des informations pertinentes sur la pièce (On peut choisir de l’avoir sur une ou plusieurs lignes. J’ai choisi d’avoir toujours 2 lignes avec souvent une première ligne avec temperature et humidité et une deuxième ligne pour des informations textuelles. ici pour le salon j’ai deux capteurs de temperature, mais d’autres cartes vont afficher l’état de l’aspi ou de la tondeuse, les emploi du temps des enfants, les machines en cour, etc…)
par exemple:
-
le badge de l’icône me sert pour afficher l’état des détecteurs de mouvements et des ouvertures (icône orange pour les détecteurs et rouge pour les ouvertures), d’autre utilisations sont possibles sur certaines cartes (alertes variées, mises à jour de HA, etc…)
-
les boutons ont un design qui dépend de l’entité qu’ils contrôlent, ceci est géré dans la parte custom feature, bouton par bouton, en CSS avec du code Jinja2. En général on a donc une icone et couleur qui correspond à la fonction du bouton et l’état de la fonction (état de la lumière, du volet, du média player, etc…)
-
cas particulier, chaque pièce a un bouton info, qui indique ce qui est inhabituel pour la pièce (La couleur indique le niveau d’attention (rouge, orange, bleu, vert) et en cliquant dessus, le pop up permet de savoir quel est le point inhabituel: robot bloqué, alerte crue, fuite d’eau, mise à jour HA en attente, reboot nécessaire, etc…) par exemple sur la carte « Home assistant », le bleu indique qu’il y a 2 mises à jour en attente.
Les contrôles (pour tout piloter en un clic):
La carte template permet de définir le comportement a adopter pour le clic sur l’icone ou sur la carte (comme la carte tuile) on peut séparer six comportement différents suivant les clic simple, long ou double sur l’icone ou la carte. J’utilise principalement les comportements suivants:
- L’appui court sur la carte (en dehors de l’icône du canapé) comme un raccourci de navigation vers une autre vue du dashboard dédiée à cette pièce.
- L’appui long sur l’icône (canapé pour le salon) pour faire basculer (
toggle) la lumière principale de la pièce (pour éviter les fausses manipulations qui allumeraient la pièce sans le vouloir vraiment sur un appui simple). - Quelques cartes utilisent le double clic, mais c’est un raccourci peu naturel, donc c’est juste pour moi pour naviguer vers certaines pages, comme un cheat code, mais les autres utilisateurs ne les utilisent pas.
La ligne de boutons réalisée avec custom-card-features permet d’afficher des boutons supplémentaires, j’utilise des comportements similaires pour les boutons (appui court, appui long):
- L’appui court sur le bouton ampoule ouvre un pop-up avec toutes les lumières de la pièce
- L’appui long sur le bouton ampoule fait basculer (
toggle) le groupe de lumières de la pièce - L’appui court sur le bouton volet ouvre un pop-up avec tous les volets de la pièce
- L’appui long sur le bouton volet fait basculer (
toggle) le groupe des volets de la pièce - L’appui court sur le bouton media ouvre un pop-up avec un mini mediaplayer avec tous les raccourcis qui vont bien pour gérer l’amazon echo de la pièce et les raccourcis pour envoyer certains types de musique en multiroom
- L’appui court sur le bouton info ouvre un pop-up avec toutes les info particulières de la pièce
- Comme pour les appuis sur la carte, je n’ai pas beaucoup joué avec les double clics dans les boutons (sauf une ou deux exception uniquement pour moi pour appeler des sous-vues très spécifiques), mais ils sont bien entendu disponibles (via les custom features)…
Pop Ups
La carte fait usage de pop up pour chaque appui court sur les boutons (les doubles appui ou appui long permettent un usage rapide, ou des raccourcis spécifiques, voir fonctionnalités détaillées ci dessus):
-
appui sur le bouton ampoule : pop up lumières
-
appui sur le bouton volet: pop up volets
-
appui sur le bouton media : pop up media player (réalisé avec mini media player)
-
appui sur le bouton info : pop up info avec une synthèse rapide sur toute la piece
Pourquoi des pop ups et pas des sous vues ?
Parce que les pop up permettent de revenir très facilement au dashboard avec un simple clic hors du pop up. Sur smartphone, avec la bonne option (adaptive:true merci @WarC0zes !), le pop up occupe le bas de l’écran:
On peut très simplement se passer de ces pop up et de leur YAML associé, comme dans la version simplifiée, en utilisant le more info d’une entité (un groupe par exemple) ou en navigant vers une sous vue dédiée, il suffit d’utiliser l’interface graphique et de changer ce qu’on trouve dans les onglets “interactions”:
Les variantes :
Vous n’êtes peut être pas fan de cette mise en page en rectangle horizontal avec des coins arrondis, pas de soucis, il y a des variantes possibles.
Il existe de nombreuses possibilités de mise en page
Quelques exemples:
Grace à la structure simple de la carte rénovée (sans card-mod) les changement de mise en page sont simplifiées!
En seulement trois clics dans l'interface
En jouant uniquement sur la disposition de la carte mushroom, l’affichage sur deux lignes et sur la position des fonctionnalités (features) on peut facilement et en interface graphique modifier le style de cette carte en quelques clics dans l’interface:
Si en plus on joue avec les options de mise en page (en section) on peut aussi faire varier facilement sa taille:
Si on supprime les infos principales et secondaires de la carte mushroom template, on peut faire une version minimaliste encore plus compacte:
Si l’un de ces styles vous plait, suivez les tutos et changez le style en seulement 3 clics à la fin…
Si vous préférez un autre style, un petit thème avec les variables suivantes et vous avez des coins carrés…
# pour les coins de la carte
ha-card-border-radius: 4px
# pour les coins de l'icone
ha-tile-icon-border-radius: 4px
# pour les coins des boutons
ha-card-features-border-radius: 4px
Faites la votre en suivant les tutos
Parce que le but de notre forum, c’est le partage, vous trouverez ci dessous:
- le code de la version complète.
- le code et des tutos pas à pas pour trois version simplifiées.
- et même, en bonus, un petit tuto simplifié pour les templates…
Alors choisissez en une version ou testez les quatre, comme vous voulez, mais surtout Lancez vous !
Le code de la version complète
Pour les plus aventureux, le code de ma version complète. A vous de le modifier pour le faire coller à vos entités! Si vous voulez un tuto pas à pas, regardez les tutos simplifiés ci dessous. La seule différence avec la version simplifiée c’est l’utilisation de pop-ups… les explications restent valables en dehors de cette partie.
Les sources nécessaires
Installer les différentes fonctionnalités disponibles dans HACS:
- La collection de cartes Mushroom: on utilisera la carte Mushroom template.
- Custom card features pour personnaliser les boutons de la carte Mushroom
- Browser mod pour générer des pop up
le code de la carte salon
type: custom:mushroom-template-card
entity: group.lumieres_salon
primary: Salon
secondary: |
Alexa: {{ states('sensor.echo_jeanne_temperature') }}°C
Marsu: {{ states('sensor.alocatia_temperature_2') }}°C
multiline_secondary: true
icon: mdi:sofa
badge_icon: >-
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
mdi:motion-sensor {% else %}{% endif %}
badge_color: >-
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %} #ff9800 {% else
%}{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
icon_tap_action:
action: none
icon_hold_action:
action: perform-action
perform_action: light.toggle
target:
entity_id: light.salon_ampoule_petitelampe
color: "{{ '#03a9f4' if is_state('group.lumieres_salon', 'on') else '#9e9e9e' }}"
features_position: bottom
features:
- type: custom:service-call
entries:
- type: button
icon: mdi:lightbulb
styles: >
:host { --icon-color: {{ '#ff9800' if
is_state('light.salon_ampoule_petitelampe', 'on') else '#9e9e9e' }}; }
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
adaptive: true
title: Lumières salon
content:
type: custom:streamline-card
template: pop-up-light-salon
hold_action:
action: perform-action
perform_action: light.toggle
target:
entity_id: group.lumieres_salon
data: {}
entity_id: group.lumieres_salon
- type: button
icon: |-
{% set s = states('cover.salon') %}
{% if s == 'open' %} mdi:window-shutter-open
{% elif s == 'closed' %} mdi:window-shutter
{% else %} mdi:window-shutter-alert {% endif %}
styles: >
:host { --icon-color: {{ '#03a9f4' if states('cover.salon') not in
['closed'] else '#9e9e9e' }}; }
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
adaptive: true
title: Volets du salon
content:
type: vertical-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.volet_du_salon_apero
name: Volet Apero
show_position_control: true
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.volet_du_salon_tv
name: Volet TV
show_position_control: true
show_buttons_control: true
hold_action:
action: perform-action
perform_action: cover.toggle
target:
entity_id: cover.salon
data: {}
entity_id: group.lumieres_salon
- type: button
icon: mdi:play-pause
styles: >
:host { --icon-color: {{ '#03a9f4' if
is_state('media_player.echo_jeanne', 'playing') else '#9e9e9e' }}; }
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
adaptive: true
title: Echo salon
content:
type: custom:streamline-card
template: pop-up-alexa
variables:
media_player_entity_name: echo_jeanne
entity_id: group.lumieres_salon
- type: button
icon: mdi:information
styles: >
:host { --icon-color: {{ '#ff9800' if is_state('plant.alocatia',
'problem') else '#9e9e9e' }}; }
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
adaptive: true
title: Salon
content:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: entity
entity: binary_sensor.echo_salon_mouvement
- type: entity
entity: sensor.echo_jeanne_temperature
icon_color: blue
- type: entity
entity: sensor.alocatia_temperature_2
icon_color: green
- type: template
icon_color: >-
{% if is_state('plant.alocatia','problem') %} #ff9800
{% else %} #9e9e9e
{% endif %}
icon: mdi:information-box
content: >-
{% if is_state('plant.alocatia','problem') %} Plante
Marsu {% else %} RAS {% endif %}
- type: heading
icon: ""
heading: Contrôles rapides
heading_style: subtitle
- type: tile
entity: light.lumieres_salon
features_position: inline
name: lumières
vertical: false
features:
- type: toggle
- type: horizontal-stack
cards:
- type: tile
entity: cover.volet_du_salon_tv
name: volet TV
vertical: false
features_position: inline
features:
- type: cover-open-close
- type: tile
entity: cover.volet_du_salon_apero
name: volet apéro
vertical: false
features_position: inline
features:
- type: cover-open-close
- type: tile
entity: media_player.echo_jeanne
name:
type: entity
show_entity_picture: true
state_content:
- media_title
- media_artist
vertical: false
features:
- type: media-player-playback
features_position: inline
- type: heading
icon: ""
heading: Plante Marsu
heading_style: subtitle
- type: custom:flower-card
entity: plant.alocatia
show_bars:
- moisture
- temperature
- illuminance
- conductivity
battery_sensor: sensor.alocasia_zebrina_battery
display_type: compact
entity_id: group.lumieres_salon
grid_options:
columns: 6
rows: 2
Lancez vous !
Le tuto pas à pas: version simplifiée sans yaml
Pour cette version à peine simplifiée, seuls Mushroom et custom features sont nécessaires, on ne fera pas de pop-up mais on utilisera le more info à la place. Ceci permet d’éviter d’avoir à définir le pop up en YAML. Si vous êtes vraiment allergiques, c’est la carte qu’il vous faut. Rien n’empêche non plus de remplacer le more info par une navigation vers une sous vue dédiée à une piece ou une entité pour encore plus de contrôle (en particulier pour le bouton « info »).
L’apparence est identique (même si j’ai mis un seule ligne pour simplifier le code).
Il n’y a plus qu’à suivre la procédure pas à pas ci dessous :
1: Ajouter les ressources HACS nécessaires
Les sources nécessaires
Installer les différentes fonctionnalités disponibles dans HACS:
- La collection de cartes Mushroom: on utilisera la carte Mushroom template.
- Custom card features pour personnaliser les boutons de la carte Mushroom
2: Ajouter cette carte à votre dashboard
intégrer la carte brute
C’est simple, copiez le code ci dessous.
type: custom:mushroom-template-card
entity: group.lumieres_salon
primary: Salon
secondary: |
Temperature: {{ states('sensor.echo_jeanne_temperature') }}°C
multiline_secondary: true
icon: mdi:sofa
badge_icon: >-
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
mdi:motion-sensor {% else %}{% endif %}
badge_color: >-
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %} #ff9800 {% else
%}{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
icon_tap_action:
action: none
icon_hold_action:
action: perform-action
perform_action: light.toggle
target:
entity_id: light.salon_ampoule_petitelampe
color: "{{ '#03a9f4' if is_state('group.lumieres_salon', 'on') else '#9e9e9e' }}"
features_position: bottom
grid_options:
columns: 6
rows: 2
features:
- type: custom:service-call
entries:
- type: button
icon: mdi:lightbulb
styles: >
:host { --icon-color: {{ '#ff9800' if
is_state('group.lumieres_salon', 'on') else '#9e9e9e' }}; }
tap_action:
action: more-info
target:
entity_id: group.lumieres_salon
data: {}
hold_action:
action: perform-action
perform_action: light.toggle
target:
entity_id: group.lumieres_salon
data: {}
entity_id: group.lumieres_salon
- type: button
icon: |-
{% set s = states('cover.salon') %}
{% if s == 'open' %} mdi:window-shutter-open
{% elif s == 'closed' %} mdi:window-shutter
{% else %} mdi:window-shutter-alert {% endif %}
styles: >
:host { --icon-color: {{ '#03a9f4' if states('cover.salon') not in
['closed'] else '#9e9e9e' }}; }
tap_action:
action: more-info
target:
entity_id: cover.salon
data: {}
hold_action:
action: perform-action
perform_action: cover.toggle
target:
entity_id: cover.salon
data: {}
entity_id: cover.salon
- type: button
icon: mdi:play-pause
styles: >
:host { --icon-color: {{ '#03a9f4' if
is_state('media_player.echo_jeanne', 'playing') else '#9e9e9e' }}; }
tap_action:
action: more-info
target:
entity_id: device_tracker.echo_jeanne
data: {}
entity_id: device_tracker.echo_jeanne
- type: button
icon: mdi:information
styles: >
:host { --icon-color: {{ '#ff9800' if is_state('plant.alocatia',
'problem') else '#9e9e9e' }}; }
tap_action:
action: more-info
target:
entity_id: plant.alocatia
data: {}
entity_id: plant.alocatia
Dans votre dashboard, cliquez sur le crayon en haut pour « modifier le dashboard »:
Cliquez sur ajouter une carte, et sélectionnez la carte « manuel » tout en bas.
Remplacez type: ' ' par le code que vous venez de copier, sauvegardez la carte (cliquez « Enregistrer ») et passez à l’étape suivante, « vos réglages »…
3: Configurer la carte avec vos entités
Faites vos réglages
Cliquez sur le petit crayon de la carte nouvellement ajoutée:
Ceci va ouvrir l’interface graphique suivante:
Etape A la carte mushroom template: la partie haute de la carte
On va parcourir un par un tous les onglets de la carte mushroom pour y renseigner vos entités à la place des miennes:
-
l’onglet contexte va vous permettre de gérer les raccourcis de la carte mushroom template:
- en premier l’entité (à la place de group.lumières salon) qui sera ensuite nommée entity dans le reste de la carte.
- Ensuite la pièce d’installation (ce n’est pas capital ici, ça le sera dans le cas minimaliste)
-
l’onglet contenu: c’est lui qui va régler les éléments principaux de la carte template (les textes, l’icone et sa couleur):
- l’info principale (ici le texte fixe « Salon », mais libre à vous de mettre ce que vous voulez, voir le tuto template au dessus pour plus de renseignements…)
- l’info secondaire (ici la température, mettre votre capteur de température à la place de sensor.echo_jeanne_temperature, vous pouvez ajouter un capteur d’humidité en utilisant le même type de template, supprimer cette information ou mettre ce que vous voulez, voir le tuto template au dessous pour plus de renseignements…)
- la couleur de l’icone (ici bleu si l’entité est on, rien sinon, voir le tuto template)
- l’icône principale (ici mdi:sofa => à remplacer par l’icone de votre choix, par exemple mdi:bathtub pour une salle de bain => liste des icones mdi). Vous pouvez remplacer l’icone par un image si besoin…
-
l’onglet badge pour régler toutes les variables du minibadge: l’icone du badge, sa couleur, etc… (mini icône capteur de mouvement dans ce cas, où il faut remplacer binary_sensor.echo_salon_mouvement par la bonne entité pour gérer la couleur et l’icone, voir le tuto template pour les détails)
-
l’onglet disposition : pour choisir votre mise en page:
-
l’onglet interaction pour régler tous les comportements en cas de clic sur la carte (simple clic, clic long, double clic, sur l’icone ou sur le reste de la carte => jusqu’à 6 comportement différents si besoin):
- Action à l’appui: ce qu’il se passe quand on clique sur la carte, dans mon cas je choisi naviguer en cas de simple clic (ici mettre le lien vers la page « votre url salon »)
- Action a l’appui sur l’icone : ce qu’il se passe quand on clique sur l’icone (canapé) dans mon cas je met “ne rien faire”
- Action à l’appui long sur l’icone: ici je mets « toggle » ce qui fera basculer l’état des entités qu’on choisira dans la partie cibles (moi je met la lumière principale de mon salon… nommée « petite lampe »)
Etape B la ligne de boutons en bas de la carte avec custom-card-features
En cliquant sur l’onglet fonctionnalités on accède au réglage des features de la carte :
- on peut ici changer la disposition pour passer en mode « en ligne »
- On peut aussi cliquer sur le crayon pour entrer dans la « custom feature row » et ainsi régler notre ligne de boutons.
-
Pour régler chaque bouton (Lumière, volet, média player et info) il faudra appuyer sur le petit crayon à coté du bouton concerné, exemple avec la lumière (le premier):
-
Et là encore il suffit de mettre votre lumière à la place de l’entité au début (ou un groupe de lumières le cas échéant) à la place de Lumières du salon
-
puis de régler l’onglet apparence: il faudra aller dans le cadre css pour changer l’entité et les couleurs. c’est un peu moins simple avec custom-card-features qui manipule du css, mais le modèle fourni et le tuto template devraient vous permettre d’y arriver.
-
Enfin dans l’onglet interactions vous pouvez modifier les comportement sur les appui boutons (simple clic, clic long et double clic). Par défaut j’ai mis toggle sur appui long (si on reste appuyé on bascule l’éclairage) et « more info » pour le simple clic pour faire un genre de pop up, il faut juste câbler vos entités à la place des miennes.
-
Il suffit ensuite de recommencer le même réglage avec les autres boutons pour les volets, le média-player et l’info.
Libre à vous d’ajouter d’autres boutons sur le même modèle (pour un chauffage par exemple), de les modifier ou d’en supprimer…
Lancez vous !
Le tuto pas à pas: version minimaliste sans custom feature
Pour cette version: seul Mushroom sera nécessaire. On va utiliser la possibilité d’utiliser les features de la zone afin de générer des boutons simples.
L’apparence est proche (même si j’ai mis un seule ligne pour simplifier le code), la grosse différence, c’est la ligne de boutons qui va être générée automatiquement en fonction des entités assignées à votre pièce (elle sera donc moins personnalisée).
Il n’y a plus qu’à suivre la procédure pas à pas ci dessous :
1: Ajouter les éléments nécessaires depuis HACS
Les sources nécessaires
Pour cette carte simplifiée, il suffit d’installer uniquement La collection de cartes Mushroom disponible dans HACS.
2: Ajouter cette carte à votre dashboard
intégrer la carte brute
C’est simple, copiez le code ci dessous.
type: custom:mushroom-template-card
entity: group.lumieres_salon
primary: Salon
secondary: |
Temperature: {{ states('sensor.echo_jeanne_temperature') }}°C
multiline_secondary: true
icon: mdi:sofa
badge_icon: >-
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
mdi:motion-sensor {% else %}{% endif %}
badge_color: >-
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %} #ff9800 {% else
%}{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
icon_tap_action:
action: none
icon_hold_action:
action: perform-action
perform_action: light.toggle
target:
entity_id: light.salon_ampoule_petitelampe
color: "{{ '#03a9f4' if is_state('group.lumieres_salon', 'on') else '#9e9e9e' }}"
features_position: bottom
grid_options:
columns: 6
rows: 2
area: salon
features:
- type: area-controls
Dans votre dashboard, cliquez sur le crayon en haut pour « modifier le dashboard »:
Cliquez sur ajouter une carte, et sélectionnez la carte « manuel » tout en bas.
Remplacez type: ' ' par le code que vous venez de copier, sauvegardez la carte (cliquez « Enregistrer ») et passez à l’étape suivante, « vos réglages »…
3: Configurer la carte avec vos entités
Faites vos réglages
Cliquez sur le petit crayon de la carte nouvellement ajoutée:
Ceci va ouvrir l’interface graphique suivante:
Etape A la carte mushroom template: la partie haute de la carte
On va parcourir tous les onglets de la carte mushroom pour y renseigner vos entités à la place des miennes:
-
l’onglet contexte va vous permettre de gérer les raccourcis de la carte mushroom template:
- en premier l’entité (à la place de group.lumières salon) qui sera ensuite nommée entity dans le reste de la carte.
- Ensuite la pièce d’installation (c’est pas capital ici, c’est ce qui permet d’afficher les boutons)
-
l’onglet contenu: c’est lui qui va régler les éléments principaux de la carte template (les textes, l’icone et sa couleur):
-
l’info principale (ici le texte fixe « Salon », mais libre à vous de mettre ce que vous voulez, voir le tuto template au dessus pour plus de renseignements…)
-
l’info secondaire (ici la température, mettre votre capteur de température à la place de sensor.echo_jeanne_temperature, vous pouvez ajouter un capteur d’humidité en utilisant le même type de template, supprimer cette information ou mettre ce que vous voulez, voir le tuto template au dessous pour plus de renseignements…)
-
la couleur de l’icone (ici bleu si l’entité est on, rien sinon, voir le tuto template)
-
l’icône principale (ici mdi:sofa => à remplacer par l’icone de votre choix, par exemple mdi:bathtub pour une salle de bain => liste des icones mdi). Vous pouvez remplacer l’icone par un image si besoin…
-
-
l’onglet badge pour régler toutes les variables du minibadge: l’icone du badge, sa couleur, etc… (mini icône capteur de mouvement dans ce cas, où il faut remplacer binary_sensor.echo_salon_mouvement par la bonne entité pour gérer la couleur et l’icone, voir le tuto template pour les détails)
-
l’onglet disposition : pour choisir votre mise en page:
-
l’onglet interaction pour régler tous les comportements en cas de clic sur la carte (simple clic, clic long, double clic, sur l’icone ou sur le reste de la carte => jusqu’à 6 comportement différents si besoin):
- Action à l’appui: ce qu’il se passe quand on clique sur la carte, dans mon cas je choisi naviguer en cas de simple clic (ici mettre le lien vers la page « votre url salon »)
- Action a l’appui sur l’icone : ce qu’il se passe quand on clique sur l’icone (canapé) dans mon cas je met “ne rien faire”
- Action à l’appui long sur l’icone: ici je mets « toggle » ce qui fera basculer l’état des entités qu’on choisira dans la partie cibles (moi je met la lumière principale de mon salon… nommée « petite lampe »)
Etape B la ligne de boutons en bas de la carte avec custom-card-features
En cliquant sur l’onglet fonctionnalités on accède au réglage des features de la carte :
- On peut ici changer la disposition pour passer en mode « en ligne »
- Ici on utilise la fonctionnalité “contrôles de la pièce” qui affiche la même feature qu’une carte area-card et permet de contrôler toutes les entités d’une pièce. Si vous ne voulez pas contrôler toutes les lumières ou tous les volets, mais par exemple seulement une entité, c’est possible:
On clique sur le crayon a coté des contrôles de la pièce:
Puis sur personnaliser les contrôles:
Et on peut ajouter ou retirer des contrôles (des lumières ou des volets uniquement chez moi, suivant vos entités vous aurez peut être accès à d’autres entités):
Lancez vous !
Le tuto pas à pas: version de base sans template
Pour cette version, on va tout simplement utiliser la carte « pièce » ou area, déjà disponible dans Home Assistant, et voir comment la configurer pour qu’elle ressemble à notre room card. Ainsi il n’y a rien à installer, pas de YAML, et pas de template pour afficher des infos dans la carte…
Pour cela il faudra que vos pièces soient bien configurées. (Dans paramètres / Pieces et zones, pensez à bien définir les options de vos pièces et à attribuer touts vos appareils et vos entités aux bonnes pièces):
Puis dans votre dashboard, passez en mode modification :
Ajoutez une carte, et sélectionnez le type « pièce » :
Sélectionnez la pièce concernée (ici le salon):
Il suffit ensuite de parcourir les onglets :
-
onglet contenu:
passage en mode compact (testez les autres modes si vous voulez d’autres look…):
Choix des capteurs à afficher.
-
onglet interactions pour gérer la navigation:
Aller vers la sous vue du salon au clic
-
onglet fonctionnalités: cliquez sur le bouton bleu “ajouter une fonctionnalité” et choisissez d’ajouter les contrôles de la pièce
Note, Ici on utilise la fonctionnalité “contrôles de la pièce” qui permet de contrôler toutes les entités d’une pièce. Si vous ne voulez pas contrôler toutes les lumières ou tous les volets, mais par exemple seulement une entité, c’est désormais possible:
On clique sur le crayon a coté des contrôles de la pièce:
Puis sur personnaliser les contrôles:
Et on peut ajouter ou retirer des contrôles (des lumières, des volets, des ventilateurs et des switchs uniquement):
et voilà !
Ce n’est pas 100% identique, mais on a déjà une bonne partie du travail de fait et en 5 clics dans l’interface !
Lancez vous !
Bonus : Le tuto “template“, pour customiser l'affichage
Il s’agit de la syntaxe des templates (JINJA2) qui est utilisée pour piloter le texte, l’icone et le badge de la carte mushroom template et l’affichage des boutons dans les fonctionnalités.
Ce qui suit est un tuto hyper simplifié pour comprendre vos premières syntaxes et être capable de les modifier pour afficher vos propres capteurs, ou changer les couleurs selon vos souhaits.
Ces templates sont utilisés un peu partout dans home assistant, alors autant les découvrir ensemble !
La doc officielle (en anglais) est vraiment bien faite, avec plein d’exemples et très progressive, alors n’hésitez pas à la parcourir: Templating - Home Assistant
Les syntaxes utilisées dans les tutos sont de deux types :
Les structures textuelles :
Ce sont les doubles accolades {{ ... }} HA calculera quelque chose et l’ajoutera au texte défini par ailleurs, comme par exemple dans le texte de la carte mushroom:
{{ states('sensor.votre_capteur_temperature') }}°C
Cette structure vous permet de transformer en texte ce qui va se trouver entre double accolades, donc par exemple le texte
{{ states('sensor.votre_capteur_temperature') }}°C
donnera:
- la valeur (en texte) de
states('sensor.votre_capteur_temperature')(c’est à dire l’état de l’entité, ou encore dans l’exemple la temperature de votre capteur) - suivi du texte « °C ».
Cette syntaxe permet ainsi de modifier un texte avec des valeurs de capteurs (comme par exemple dans l’info secondaire de la carte).
Ainsi si vous voulez afficher température et humidité sous la forme « 18°C / 55% » il vous faut taper la syntaxe:
{{ states('sensor.votre_capteur_temperature') }}°C / {{ states('sensor.votre_capteur_humidite') }}%
Ce qui est entre doubles accolades sera « calculé » par HA, le reste sera juste le texte que vous avez tapé.
Les structures conditionnelles:
Ce sont les accolades avec %: {% ... %} HA va effectuer des tests logiques (if, else ou for par exemple), sans rien ajouter au texte défini par ailleurs.
Ce type de code va donc afficher un texte qui changera en fonction de conditions prédéfinies. Ce sera utile pour le choix des icones et leurs couleur par exemple, mais aussi si vous voulez un texte évolutif.
- Par exemple pour des couleurs:
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
red
{% else %}
grey
{% endif %}
- Ou pour des icones:
{% if is_state('binary_sensor.votre-capteur-de-mouvement', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
Le principe utilisé ici est de tester des blocs conditionnels (tout ce qui sera entre les {% et %}):
{% if condition1 %}
message1
{% else %}
message2
{% endif %}
Si la condition 1 est vraie, on affichera le texte qui suit les accolades (message1 ici) sinon le texte qui suit les accolades de {% else %} donc ici message2.
On n’affichera donc que le texte qui correspond aux conditions (message1 ou message2 dans l’exemple ci dessus). C’est cette syntaxe qui est utilisée pour choisir par exemple la couleur ou l’icone dans les templates:
- pour l’icone de la carte mushroom.
- pour le badge de la carte mushroom
- pour les boutons des fonctionnalités (features)
Spécificité de Mushroom:
La condition peut être faite de plusieurs façon équivalentes (entity correspond à l’entité qui a été liée dans la carte, c’est un raccourci offert par la carte mushroom…) il sera donc complètement equivalent d’écrire (dans la carte mushroom uniquement, pas dans les features ou ailleurs dans HA):
{% if is_state(entity, 'on') %}
{% if is_state('sensor.entity_id', 'on') %}
{% if states(entity) == 'on' %}
{% if states('sensor.entity_id') == 'on' %}
Ou un mélange des deux !
Vous pouvez bien entendu mélanger les deux types de structures… Et plus encore, le langage Jinja2 est très puissant! Je me répète, mais la doc officielle est bien faite, n’hésitez pas à la parcourir: Templating - Home Assistant
Par exemple le code du texte de ma carte « Home assistant » (qui utilise en plus set pour mémoriser des variables et simplifier l’écriture):
{% set ram = states('sensor.memory_use_percent') | float(0) | round(0) %}
{% set cpu = states('sensor.processor_use') | float(0) | round(0) %}
{% set maj = states('sensor.available_updates') | int(0) %}
{% set reboot = states('sensor.restart_required') | int(0) %}
{% if ram > 50 or cpu > 10 %}RAM: {{ ram }}% | CPU: {{ cpu }}%{% else %}Système OK{% endif %}
{% if reboot >= 1 %}Redémarrage requis {% elif maj >= 1 %}{{ maj }} Mise(s) à jour{% else %}-{% endif %}
N’oubliez pas les outils existant pour vous faciliter la vie:
Testez vos syntaxes:
Astuce à utiliser sans retenue: vous pouvez tester vos syntaxes en allant les taper dans paramètres / « outils de développement » / onglet « modèles »:
Lancez vous !
Et {{ states('sensor.votre_capteur_temperature') }}°C n’aura plus de secret pour vous !
Et surtout concours ou pas, n’hésitez pas à tester et à partager vos cartes sur le forum !
(Mais votez pour moi quand même… 
)