Installation d’Home Assistant Floorplan

Si vous utilisez Home Assistant depuis quelques temps, votre dashboard commence peut-être à ressembler à ça :

Je suis sûr qu’il reste encore de la place pour quelques boutons

Trop de boutons ? Home Assistant Floorplan est peut-être la solution.

Floorplan est une extension pour Home Assistant qui simplifie le contrôle de votre maison. Plutôt que de contrôler votre installation via les contrôles de Home Assistant, vous pouvez utiliser un plan de votre maison et interagir avec celui-ci.

Dans cet article, nous allons voir dans comment installer l’extension et comment la configurer pour votre installation.

Installation

Pour commencer, nous allons installer l’exemple donné par Floorplan. Récupérez les sources de Floorplan et copiez www et floorplan.yaml dans votre dossier Home Assistant :

[gist https://gist.github.com/Dramloc/be5299e55974627168c1fa3541686cfd /]

Maintenant, nous allons voir les deux façons d’activer Floorplan : en ajoutant un nouveau panel à Home Assistant ou en ajoutant une carte à la page States d’Home Assistant.

La version « carte » pourra être utilisée pour afficher plusieurs plans simultanément sur votre page States (plusieurs étages, plusieurs pièces, etc.). Cependant, les cartes offrent un affichage plus petit. Si vous désirez un affichage en pleine page, utilisez plutôt la vue panel.

Activer le panel Floorplan

C’est la méthode la plus simple.

• Copiez panels et panel_custom.yaml dans votre dossier Home Assistant :
  
  [gist https://gist.github.com/Dramloc/ecd1e2930d44341b179c6ba0c2e48f9f /]
• Ajoutez la ligne suivante à votre fichier configuration.yaml pour activer le panel :

  
  [gist https://gist.github.com/Dramloc/c55a5d24554469ab4d65aebe6128f233 /]

C’est terminé ! Après redémarrage de Home Assistant, vous devriez voir un nouveau panel apparaître dans la barre latérale :

Panel Floorplan

Activer la carte Floorplan

L’ajout de carte est un peu plus compliqué et repose sur quelques hacks de Home Assistant pour l’instant.

• Pour pouvoir activer une carte d’état sur la page States de Home Assistant, il faut déclarer une entité virtuelle qui représentera notre plan.
  En ajoutant les lignes suivantes au fichier configuration.yaml, nous allons déclarer un binary sensor :

  
  [gist https://gist.github.com/Dramloc/af2b80de5c8b0f2b4c126f80513745d0 /]

  Si nous n’avez pas MQTT d’installé, Home Assistant utilisera le serveur MQTT embarqué.
  Il est censé fonctionner sans modifications mais chez moi j’ai dû ajouter la configuration suivante au fichier configuration.yaml pour le faire fontionner :

  
  [gist https://gist.github.com/Dramloc/e051d3fc9b3b04ff8b66e82b8843c92e /]

• Ensuite, on ajoute les lignes suivantes dans la section frontend: du fichier configuration.yaml pour indiquer à Home Assistant de charger le composant Polymer state-card-floorplan :

  
  [gist https://gist.github.com/Dramloc/ebf212b95620012ea869060057995a4b /]

• Nous pouvons customiser la façon dont binary_sensor.floorplan sera affiché en ajoutant les lignes suivantes au fichier customize.yaml :


[gist https://gist.github.com/Dramloc/e907ce57cf4ec8e697f9e92bc28d4329 /]

• Dernière étape : nous devons ajouter le binary sensor à un groupe pour qu’il apparaisse sur la page States. On ajoute donc les lignes suivantes à groups.yaml :

  
  [gist https://gist.github.com/Dramloc/a6826da01ac9e3401e523d195deb7a11 /]

La carte devrait maintenant être activée et vous devriez la voir sur la page States :

Carte Floorplan

Personnaliser Floorplan pour votre installation

Maintenant que Floorplan est fonctionnel, nous allons le personnaliser pour notre installation. D’abord, nous allons configurer les entités et groupes que nous voulons contrôler via Floorplan puis nous verrons comment changer le plan et le style de celui-ci.

Configurer les appareils

Pour configurer les entités et les groupes contrôlables, nous allons éditer le fichier floorplan.yaml. Celui-ci contient déjà des exemples que vous pouvez adapter à votre installation. Pour mon installation, voici la configuration que j’ai utilisée :

[gist https://gist.github.com/Dramloc/feb67cc95b2a9c8a69d8098cb155f782 /]

Créer le plan

Floorplan utilise un fichier SVG (~/.homeassistant/www/custom_ui/floorplan/floorplan.svg) pour représenter votre habitation et ses appareils.

Cette étape va sans doute être la plus fastidieuse… créer le plan de votre habitation. Pour ma part, j’ai utilisé l’éditeur de floorplanner.com pour créer le plan que j’ai ensuite exporté avec un peu de magie JavaScript. J’ai ensuite modifié le plan avec InkScape pour ajouter mes appareils et les configurer. Ici, nous nous intéresserons juste à la configuration via InkScape (ou un autre éditeur).

Pour reconnaître vos appareils et vos groupes, Floorplan va rechercher dans le SVG un noeud avec un id égal à l’entity_id utilisé dans Home Assistant. Par example, pour mon groupe group.living_room, j’ai ajouté le noeud suivant :

[gist https://gist.github.com/Dramloc/db6f54275737e85edf0834917e055dfd /]

Vous pouvez également ajouter des classes CSS à vos éléments pour pouvoir les customiser par la suite (ici room).

Une fois le SVG modifié, vous devriez obtenir un plan de la sorte dans Home Assistant :

Le plan sans styles appliqués

Vous devez déjà pouvoir cliquer sur vos pièces et vos appareils et effectuer des actions sur ceux-ci.

Styliser les éléments de votre plan

Pour rendre le plan un peu plus utilisable nous allons appliquer des styles CSS à celui-ci. Le fichier CSS utilisé par Floorplan est situé ici : ~/.homeassistant/www/custom_ui/floorplan/floorplan.svg.

Vous êtes entièrement libres sur cette partie de customisation : vous pouvez jouer avec les couleurs des pièces et des éléments en fonction de leur état, changer le style en fonction de la météo, de l’heure, etc. Voici les styles simples que j’ai utilisés pour mon installation :

[gist https://gist.github.com/Dramloc/828c63039e3dd97f18d80f7cb169bb06 /]

Après avoir modifié le fichier floorplan.css, voici le résultat dans Home Assistant :

Conclusion

Floorplan est prometteur. Il possède déjà de nombreuses fonctionnalités qui permettent beaucoup de flexibilité. Dans cet article, nous nous sommes limités à des plans 2D, mais il est possible d’utiliser Floorplan pour afficher tout type de graphiques : une télécommande, une vue 3D, etc.

Cependant, il reste le gros soucis qui est l’édition des plans : les outils manquent, ne sont pas adaptés pour Home Assistant et je comprends que cela puisse rebuter plus d’une personne. Ce problème est sans doute un soucis de jeunesse et je ne serais pas étonné de voir un outil adapté voir le jour d’ici peu de temps.

Antoine Colmard

JavaScript and Progressive Web Apps enthusiast
☕ Coffee lover ☕
Home automation newbie