Sommaire
Introduction
Dans ce projet, j’ai voulu donner vie à mon dashboard Home Assistant en créant un floorplan interactif et animé qui soit à la fois esthétique, fonctionnel et optimisé pour une utilisation sur tablette.
Grâce à un mélange d’outils de modélisation 3D, de retouche graphique et d’intégrations HACS, j’ai pu concevoir une interface immersive : animations en temps réel, éléments cliquables, blocs d’informations dynamiques, et même un affichage personnalisé de l’alarme.
Dans ce post, je partage en détail les prérequis, la mise en place et le fonctionnement de ce floorplan, afin que vous puissiez vous en inspirer ou le reproduire chez vous.
Présentation générale
Prérequis
Pour la création de ce floorplan, j'ai utilisé les logiciels et les intégrations suivantes :
Logiciels
- SketchUp (payant) : pour la création de mon appartement
- Enscape (payant) : pour la création des rendus 3D de SketchUp
- Adobe Photoshop (payant) : pour la création de la base d'image à intégrer pour le dashboard.
Intégrations HACS
- button-card : carte personnalisable
- clock-weather-card : affichage de la météo
- swipe-card : permet l'ajout de plusieurs cartes accessibles en "swipe"
- mini-media-player : affichage d'une entité multimédia avec contrôles
- config-template-card : permet l'ajout de cartes personnalisées sur un picture element
- decluttering-card : permet de créer des modèles de cartes et de l'appeler dans les vues (allège le code)
- browser_mod : pour affichage de popups et la suppression du menu latéral et la barre horizontale
- alarmo-card : pour l'affichage d'un clavier pour Alarmo
Fonctionnalités
- Floorplan animé : des GIF sont utilisés afin de rendre vivant et animé le floorplan. Il y a par exemple la chaudière, la climatisation en fonction de la vitesse de soufflage, les lumières, la porte d'entrée ouverte, la pluie en premier plan avec l'entité weather, le mode jour/nuit avec l'entité sun.sun.
- Floorplan cliquable : Dans plusieurs parties du floorplan, des éléments sont cliquables tels que pour accéder aux sous-vues, pour allumer la climatisation ou les lumières...
- Blocs cliquables : les 4 blocs du bas ont des icônes cliquables à côté du titre via des listes déroulantes, permettant d'augmenter le nombre d'informations sur la page d'accueil du floorplan.
Voici une petite vidéo démonstration de ce que l'on peut faire avec la page d'accueil :
Vidéo démonstration accueil floorplan
Liste des vues/sous-vues
Accueil (avec animations)
Vues par pièces (exemple du salon)
Alarme
NB : cette page s'affiche lorsque l'alarme est déclenchée grâce à Browser mod.
Listes des repas et recettes
Livre de recettes
Météo
Budget
Étapes pour créer le floorplan et les images
Création du floorplan avec SketchUp
Le plus gros du travail est de créer sa maison/appartement sur SketchUp.
Voici un tutoriel pour vous montrer comment faire un floorplan 3D avec SketchUp (en anglais) : How to Make 3d Floor Plan in Sketchup (Sketchup Tutorial).
Pour la plupart des objets, j'ai utilisé la base de données 3D Warehouse de SketchUp (un compte est requis pour y accéder) :
Export de l'image Enscape
Il faut savoir que Enscape est un plugin de SketchUp. Les deux sont donc synchronisés. Ce plugin permet de régler différents paramètres comme la disposition du soleil, l'heure de la vue et leur sauvegarde... Ce qui permet d'avoir des captures de jour comme de nuit.
Tout d'abord, il faut créer toutes les vues que vous voulez :
Une fois ces réglages effectués, il suffit d'exporter la vue en cliquant sur "Capture d'écran" :
Il permet aussi de créer les points lumineux directement via SketchUp :
Il suffit de choisir la lumière voulue (sphère, spot, ligne...) puis de la paramétrer et la placer. Cela créera un calque pour la lumière qui sera visible depuis Enscape. Ensuite, il suffit d'activer ou non les calques sur les vues souhaitées.
Création d'un fichier PSD sur Photoshop :
Une fois l'image exportée d'Enscape, le travail final consiste à créer l'image de fond de notre floorplan.
Voici une démonstration du contenu de mon fichier PSD :
J'ai créé plusieurs groupes : day, night, pièces,lights et blocs 1,2,3 et 4. Cela me permet de dissocier toutes les parties de mon dashboard et de pouvoir exporter en PNG les calques qui m'intéressent.
Comme montré sur la vidéo, pour l'éclairage, j'ai récupéré uniquement la pièce concernée par la lumière pour en exporter uniquement la partie allumée, qui se superpose au dashboard.
Intégration à Home Assistant
Une fois les vues exportées en png, voici comment les intégrer à Home Assistant :
- Utiliser un explorateur de fichiers afin d'accéder au dossier de Home Assistant.
- Pour ma part, j'ai uploadé les images dans un dossier sous "www/floorplan"
- Créer un tableau de bord vide en mode panneau
- Intégrer une carte picture-element
Mise en place sur une tablette
Présentation générale
J'ai opté pour l'achat d'une tablette Dodgee U10 sur Amazon. Son prix relativement faible et largement suffisant pour l'utilisation uniquement de Home Assistant
Au début, j'ai voulu utiliser une prise connectée afin de gérer la recharge de la tablette et de préserver la batterie.
Je me suis retrouvé confronté à un problème : bug de la tablette à cause de l'allumage et de l'extinction de la prise ; la tablette ne répondait plus et je devais la redémarrer de force. J'ai donc branché en permanence la tablette et je la débranche lorsque j'en ai besoin.
J'utilise Home Assistant Companion pour l'affichage du dashboard avec un utilisateur propre à la tablette en non-administrateur.
Configuration de Browser mod
J'ai configuré Browser mod afin de masquer le menu, la barre horizontale ainsi que l'affichage automatique de la vue alarme en fonction de son état.
Paramétrage de Browser mod et suppression des menus
Cliquer sur le menu latéral sur "Browser mod"
Tout d'abord, il faut enregistrer l'appareil dans Browser Mod en cochant "Register". N'hésitez pas à renommer votre appareil afin de retrouver plus facilement.
Ensuite, aller dans Frontend Settings et paramétrer "Hide sidebar" et "Hide header" pour l'utilisateur comme ici :
Enfin, relancer HA Companion sur la tablette et les menus disparaîtrons.
Affichage de la page alarme automatiquement
Il suffit de créer tout simplement une automatisation :
alias: Wallpanel vue alarme lorsque déclenché
description: >-
Lorsque l'alarme va se déclencher ou sonne, mets sur le wallpanel la page
alarme.
triggers:
- trigger: state
entity_id:
- alarm_control_panel.alarmo
to: triggered
- trigger: state
entity_id:
- alarm_control_panel.alarmo
to: pending
- trigger: state
entity_id:
- alarm_control_panel.alarmo
from: triggered
- trigger: state
entity_id:
- alarm_control_panel.alarmo
from: pending
conditions: []
actions:
- choose:
- conditions:
- condition: or
conditions:
- condition: state
entity_id: alarm_control_panel.alarmo
state: triggered
- condition: state
entity_id: alarm_control_panel.alarmo
state: pending
sequence:
- data:
path: /dashboard-floorplan/alarme
browser_id:
- 953776aa98d152c64bcad0f1449818a1
action: browser_mod.navigate
- conditions:
- condition: not
conditions:
- condition: state
entity_id: alarm_control_panel.alarmo
state: triggered
- condition: state
entity_id: alarm_control_panel.alarmo
state: pending
sequence:
- data:
path: /dashboard-floorplan/
browser_id:
- 953776aa98d152c64bcad0f1449818a1
action: browser_mod.navigate
mode: single
Explications de l'automatisation
Lorsque l'état de l'alarme passe à "Déclenché" ou à "En suspens" ou change de "Déclenché" ou de "En suspens", un choix se fera :
- Pour la première option lorsque que l'alarme se déclenche ou est sur le point de se déclencher, affiche la page du Dashboard "Alarme" sur la tablette.
- Pour la deuxième option, lorsque l'alarme a été désactivée, affiche l'accueil du Dashboard.
NB : pour trouver "browser_id", il suffit d'aller dans la page de Browser mod, trouver l'appareil et cliquer sur l'appareil.
Vous trouverez dans la barre d'adresse l'ID :
http://xxx.xxx.xx.xx:8123/config/devices/device/abcdefgh
Ajout de raccourcis d'applications de la tablette sur le floorplan
Dans le bloc apps, j'ai mis en place des liens permettant d'ouvrir les applications Android dont je me sers souvent. L'appui sur ce logo ouvre directement l'application sur la tablette.
Installer une application de ce type permettant de trouver le nom de l'application : Package Name Viewer
Le nom doit être du type "com.spotify.music" pour Spotify par exemple.
Pour chaque bouton, il suffit d'ajouter ceci dans le tap action de la carte :
tap_action:
action: url
url_path: app://com.spotify.music
Explication du fonctionnement
Structure du dashboard
J'ai vraiment apprécié l'existence de decluttering-card afin d'alléger au maximum le code et le chargement du floorplan. Toutes les cartes lourdes et appelées plusieurs fois dans le dashboard sont dans cette partie. Cela permet aussi d'avoir une meilleure visibilité des cartes présentes dans le floorplan.
L'utilisation de button-card est presque identique à la précédente partie, sauf qu'elle permet d'avoir des modèles et des styles de cartes à appeler aussi dans les cartes du dashboard.
Voici un schéma simplifié de la structure :
Explication partielle du code
Rentrons plus dans la technique, je vais expliquer une partie du code, afin que vous compreniez le fonctionnement.
Explications des templates et de l'appel dans les vues (en commentaire dans le code) :
decluttering_templates: #Ici, les templates à appeler dans les vues
bloc_1_meteo:
card:
type: custom:button-card
template:
- around_card
- around_clear_card
custom_fields:
info:
card:
type: custom:clock-weather-card
entity: weather.saint_egreve
title: ''
sun_entity: sun.sun
weather_icon_type: fill
animated_icon: true
forecast_days: 7
locale: fr
time_format: 24
date_pattern: d MMMM y
hide_today_section: true
hide_forecast_section: false
card_mod:
style: |
ha-card {
font-size: 12px;
background-color: transparent;
}
button_card_templates: #Idem que decluttering_templates, mais pour les styles de cartes
around_card:
styles:
grid:
- grid-template-areas: '"n" "info"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- padding: 12px
around_clear_card:
styles:
card:
- padding: 05px
- background: none
- box-shadow: none
title: Floorplan
views:
- title: Appartement
icon: mdi:floor-plan
type: panel
cards:
- type: picture-elements #Appel du picture element
image: /local/floorplan/day/floorplan_day.png?v=14 #Image du floorplan. ASTUCE : ?v=x permet de rafraîchir l'image. Incrémenter de 1 à chaque fois
card_mod: #Adaptation de la vue à la résolution de la tablette
style: |
ha-card {
max-width: 1280px;
max-height: 800px;
}
elements:
- type: custom:decluttering-card
template: bloc_1_meteo #Appel du template bloc_1_meteo, qui allège considérablement le code des vues et des sous-vues
style:
left: 12.5% #Emplacement en partant de la gauche sur la carte picture element
top: 83% #Emplacement en partant du haut sur la carte picture element
width: 26% #Taille sur la carte picture element
Explications de changement pour le mode jour/nuit :
elements:
- action: none
entity: sun.sun
hold_action:
action: none
state_image:
above_horizon: /local/floorplan/images/nixx.png
below_horizon: /local/floorplan/night/floorplan_night.png?v=5
style:
left: 50%
top: 50%
width: 100%
tap_action:
action: none
type: imageIci, nous surveillons les changements de l'entité sun.sun. lorsque l'entité est en état "above_horizon", affiche un png transparent.
Mais, si l'entité passe à "below_horizon", le floorplan_night.png s'affichera par-dessus le floorplan jour.
Explications du changement des blocs
J'utilise une entrée input_select pour chaque bloc. Simplement, l'ajout d'une condition en fonction de l'état de l'input select affiche ou non le bloc. L'appel du bloc se fait grâce à decluttering-card.
Exemple pour le bloc 1 qui a 3 blocs (Météo, Qualité air et températures) :
- type: conditional
conditions:
- entity: input_select.floorplan_title_bloc_1
state: Météo
elements:
- type: custom:decluttering-card
template: bloc_1_meteo
style:
left: 12.5%
top: 83%
width: 26%
- type: conditional
conditions:
- entity: input_select.floorplan_title_bloc_1
state: Qualité air
elements:
- type: custom:decluttering-card
template: bloc_1_qualite_air
style:
left: 13%
top: 83%
width: 26%
- type: conditional
conditions:
- entity: input_select.floorplan_title_bloc_1
state: Températures
elements:
- type: custom:decluttering-card
template: bloc_1_temp
style:
left: 15%
top: 83%
width: 26%Conclusion
Ce floorplan est le fruit d’un mélange entre créativité graphique et personnalisation avancée de Home Assistant.
Au-delà de l’aspect esthétique, il apporte une vraie valeur pratique au quotidien : navigation intuitive, accès rapide aux commandes, affichage contextuel et interactions fluides depuis la tablette murale.
J’espère que cette présentation et mes explications techniques vous aideront à réaliser votre propre interface sur mesure. Libre à vous d’adapter, d’améliorer et de personnaliser chaque élément pour créer un dashboard qui vous ressemble vraiment.
Et n'hésitez par à partager vos commentaires ou réalisations.
Sources
Ce floorplan n'aurait jamais existé sans l'aide du repo de re-1st pour la base de travail du code, du floorplan et des GIF animés ainsi qu'à Aurel pour la base de travail des button card.
