ScrampleHA Floorplan : contrôle domotique sur plan
Prologue
Sur la page de démo d’Home Assistant,
on peut voir un plan interactif d’une maison.
C’est un “Picture Elements”
avec le plan en fond de carte et des icônes positionnées aux endroits adéquats.
Petar Kožul est allé un peu plus loin en proposant le module
ha-floorplan qui s’utilise avec des images au format SVG.
Ce dernier a ensuite été refait en gardant le même nom.
Nous avons donc Floorplan for Home Assistant
qui fait suite à Floorplan for Home Assistant.
Afin de faire le mien, je me suis donc penché sur cette solution qui
s’installe avec HACS.
Je vais donc vous expliquez comment vous pouvez faire pour vous lancer dans ce
chantier.
Scrampletionary
Scalable Vector Graphics
Le Scalable Vector Graphics, ou SVG, est un format de données ASCII conçu pour décrire des ensembles de graphiques vectoriels et basés sur XML. Ce format inspiré directement du VML et du PGML est spécifié par le World Wide Web Consortium.
Wikipedia
Ce qu’il faut retenir c’est qu’un fichier SVG définit des éléments
comme une droite ou un cercle ce qui est différent d’une image classique où
l’on définit la couleur de chaque pixel (pour fait simple).
Difficile à comprendre ? Ouvrons un SVG avec un éditeur de texte (oui c’est possible).
Voici un exemple d’image SVG (crédit : monkik) :
|
|
Comme vous pouvez le voir (si vous vous donné la peine de copier ce code
dans un fichier et de l’enregistré au format .svg)
cette suite de valeur définit l’image.
Ce qui est intéressant dans ce format, c’est qu’il est éditable :
on peut changer la couleur ou y ajouter des effets par exemple.
Cascading Style Sheets
Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web.
[…]
De la même façon que HTML, CSS n’est pas vraiment un langage de programmation. C’est un langage de feuille de style, c’est-à-dire qu’il permet d’appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner tous les éléments d’une page HTML qui sont paragraphes et afficher leurs textes en rouge.
MDN Web Docs
C’est le CSS qui est utilisé aujourd’hui pour mettre en forme les contenus
des sites web (police, couleur …).
Pourquoi j’en parle ici ? Parce que les fichiers SVG peuvent être customisés
par du CSS. Cela veut donc dire que l’on peut par exemple changer la couleur
d’un icône SVG.
Principe
Dans un premier temps, on va réaliser notre fichier SVG. Il sera constitué d’une image représentant le logement et d’icônes illustrant les différents éléments domotisés de notre installation.
Ensuite, on va faire le nécessaire pour que le résultat apparaisse sur HA. On configurera donc les actions sur les éléments ajoutés.
Dans la dernière partie, on ajoutera le CSS qui permettra aux icônes de changer d’apparence en fonction de l’état de l’entité ciblé.
Application
Fichier SVG
Plan de base
Pour faire notre fichier SVG, nous allons utiliser le logiciel Inkscape.
Une fois le logiciel ouvert, il faut éditer le format du fichier.
On ouvre donc les Propriétés du document… depuis le menu Fichier
ou on utilise le raccourci Maj+Ctrl+D.
Ainsi, on édite les propriétés en précisant les éléments suivants :
- Général
- Unité par défaut :
px
- Unité par défaut :
- Dimensions personnalisées
- Largeur :
1920(à adapter en fonction de votre support) - Hauteur :
1080(à adapter en fonction de votre support) - Unités :
px
- Largeur :
- Échelle
- Échelle x :
1 - Zone de vue…
- Largeur : identique à celle des dimensions personnalisées
- Hauteur : identique à celle des dimensions personnalisées
- Échelle x :
Vous avez donc la base pour faire votre plan.
À partir de là, vous avez plusieurs choix dont deux principaux :
- Faire votre plan avec les outils de construction de Inkscape
- Importer une image existante
Ayant un plan de chez moi, j’ai opté pour la seconde option.
J’ai donc fait un glisser-déposer de mon image et je l’ai redimensionné
pour qu’elle s’intègre bien au cadre.
Si vous faites pareil, je vous conseille de verrouiller cette dernière sur
la feuille (clic droit + Verrouiller les objets sélectionnés)
afin de ne pas la déplacer par erreur plus tard.
Sachez que vous pouvez faire de joli plan avec le logiciel
SweetHome3D.
Ajout des éléments
Maintenant que notre base est prête, on va pouvoir ajouter les éléments que l’on
souhaite voir/contrôler sur le plan. Pour cela, il vous faut des images au
format SVG.
Pour trouver vos icônes, je vous conseille le site Flaticon
ainsi que TheNounProject
(un compte est nécessaire sur ce dernier).
Lors de l’insertion des icônes, il vous est demandé de choisir le
type d’importation. Il faut alors laisser le choix pas défaut :
Ctrl
afin d’en conserver les proportions.Après avoir placé vos icônes sur le plan, il va falloir leur attribuer un ID.
La méthode la plus simple est de faire que cet ID corresponde au nom de
l’entité ciblé sur Home Assistant.
Pour éditer cet ID, on fait un clic droit sur l’icône et on sélectionne
Propriétés de l’objet… (ou on utilise le raccourci Maj+Ctrl+O).
Dans le menu qui s’ouvre à droite, on remplace donc l’ID :
Vous pouvez utiliser la touche
tab pour passer rapidement
d’un objet à l’autre.J’ai aussi ajouté des champs texte qui me permettront d’afficher les
températures remontées par mes capteurs pour chaque pièce.
De la même manière que pour les icônes, il faut spécifier l’ID du champ
(par exemple : sensor.salon_temperature).
Dans cet article, je prendrais en exemple le cas des sensor et des light.
Enregistrez donc votre fichier final au format SVG.
Intégration à HA
Installation
On installe donc le composant “Ha Floorplan” depuis le menu Frontend
du Home Assistant Community Store (HACS).
Normalement, le module JavaScript s’ajoute tout seul aux ressources.
Si ce n’est pas le cas, il suffit d’y ajouté
/hacsfiles/ha-floorplan/floorplan.js.
Copie du fichier
Maintenant il va falloir copier notre SVG sur HA.
J’ai choisi de le copier dans le dossier www situé à la racine du dossier
de configuration. Afin de structurer un peu mieux la chose, je l’ai placé
dans un dossier floorplan.
Mon fichier est donc dans la localisation suivante :
<dossier de configuration d'HA>/www/floorplan/floorplan.svg
Dans HA, cela se traduira par :
/local/floorplan/floorplan.svg
Ajout du plan sur HA
Nous allons intégrer notre plan avec un nouveau type de carte que nous allons installer. Cette dernière sera mise sur une vue dédiée à cela.
Pour créer une vue, sur l’interface d’HA, on clique sur l’icône
en haut à droite et on clique sur
Modifier le tableau de bord.
On clique alors sur le au niveau des vues
pour en créer une nouvelle.
Pour la création de la vue, il faut que vous choisissiez le mode panneau
afin que la carte créer prenne toute la largeur.
Sur notre vue, on clique sur AJOUTER UNE CARTE et on sélectionne une carte de type Manuel (tout en bas).
On va donc y coller le code d’une carte de type custom:floorplan-card.
Dans l’exemple ci-dessous, j’ajoute la lumière d’entité
light.suspension_cuisine ainsi que le capteur de
température sensor.salon_temperature.
|
|
N’ayant pas encore réalisé la partie CSS, j’ai remis le SVG
en tant que stylesheet car c’est la seule méthode qui ne génère pas
d’erreur sur Lovelace.
La clé entity définie l’entité sur HA et element l’ID du SVG.
Par défaut, le survol de chaque entité va dévoiler des
informations dessus (hover_action: hover-info).
Le clic quant a lui ouvrira les détails de l’entité (tap_action: more-info).
Sur la lumière, le clic changera l’état de cette dernière (allumer/éteindre).
La zone de texte dédié à la température affichera la valeur actuelle
en ajoutant l’unité °C pour plus de commodité. En cas de valeur inconnue
(ex: capteur HS), la valeur inscrite sera ??.
Complétez donc la liste des rules avec toutes vos entités.
À ce moment-là, vous devriez donc avoir un plan fonctionnel.
Cependant, il est difficile de connaitre l’état de vos lumières d’un simple
coup d’œil. Pour y remédier, je vous invite à regarder la partie suivante.
Tunning (CSS)
À la manière du couple HTML/CSS, on précise des classes aux éléments HTML dont on précise le format en CSS.
Nous allons donc ici devoir éditer notre définition des éléments
de la carte afin de pouvoir les customiser en CSS.
Le gros point à noter ici est que cette configuration sera dynamique
(en fonction de l’état de l’entité).
On revoit donc la définition de notre entité light.suspension_cuisine :
|
|
Les changements d’état vont donc appeler le service floorplan.class_set
avec lum-${entity.state} comme données. Sur une lumière, l’état de l’entité
étant soit on, soit off. En fonction de ces états, la lumière appartiendra
donc respectivement à la classe lum-on ou bien lum-off.
À partir des exemples présents dans
la documentation officielle, j’ai construit le fichier CSS
(que j’ai appelé floorplan.css) suivant :
|
|
Les lignes [6-16] font en sorte que lorsque l’on survole les icônes,
une lueur bleue apparait aux contours de ces dernières.
Les lignes au-dessus font en sorte que ne résultat soit propre.
En dessous, on voit la définition des classes liées aux lumières.
Lorsque la lumière est allumée, l’icône prend une couleur jaune et les contours
une couleur plus foncée. À l’inverse, le noir est de mise.
On copie donc ce nouveau fichier sur HA est on remplace
|
|
On teste :
👏🎉㊗️ !!!
Epilogue
Vous arrivez à la fin de l’article, mais vous n’avez toujours pas vu mon
plan…
Désolé de vous décevoir, mais je ne souhaite pas afficher publiquement
le plan de mon logement, je pense que vous comprendrez. 🥺
La découverte de cet outil m’a remis un peu dans le CSS (bien que je ne m’y suis
jamais vraiment intéressé). On a vu ici comment avoir un résultat convenable
avec les exemples de base.
On y comprend bien que les possibilités sont immenses : je vois bien mon
aspirateur robot ou mon imprimante 3D qui vibre sur le plan quand elles sont en
fonctionnement.
Si vous voulez découvrir ou voir d’autre possibilité je vous invite a regarder les quelques exemples de la documentation officielle et aussi de consulter le fil de discussion sur le forum d’HA.