Index de l'article

Mais comment on l'utilise, ton bouzin?

Ce qui se faisait

La solution historique dans OpenHab, c'est de créer un sitemap qui sera exploitée dans Basic UI.

Pour ce faire, un générateur nommé Home Builder est installé d'office et fait très bien son travail. Dans ce sitemap, on va créer les étages/zones de la maison, pour chaque étage on renseignera les pièces et pour chaque pièces on pourra renseigner les capteurs et autres actionneurs disponibles.

L'interface Basic UI dans toute sa "splendeur"

L'interface n'est ni très moderne, ni vraiment jolie, ni très ergonomique à mon goût (et encore, comparé à Classic UI c'est la fête du slip!)... Mais il faut malgré tout prévoir de créer cette sitemap car c'est la seule UI disponible pour les applications natives  iOS et Windows.

 

Ce qui se fait

PaperUI étant une interface d'administration, c'est HABPanel qui est proposée comme interface facile et rapide à mettre en place, pour l'usage de tous les jours.

L'écran d'accueil, nommé "panneau" dans les paramètres, est un menu, des boutons seront générés pour chaque "tableau de bord" que l'on va créer.

Ces boutons sont redimensionnables et positionnables (dans une certaines mesure vu qu'il "s'empilent" obligatoirement en haut de l'écran) sur une grille dont on va pouvoir régler le nombre de colonnes entre 1 et 6.

Les tableaux de bord sont les écrans dans lesquels on va placer les éléments de l'interface. Le positionnement de ces éléments, nommés widgets dans HABPanel, se fait sur une grille de cases carrées. La grille est divisée en 12 colonnes et autant de ligne que nécessaire pour accueillir les widgets ajoutés, peu importe les dimensions en pixels de votre fenêtre (défilement uniquement vertical). Vous imaginez bien que sur le screenshot à droite, les widgets affichant les valeur font bien plus d'une case de grille. Sur un écran horizontal en 1080P, on verrait probablement au mieux la ligne Salon et le dessus de la ligne Bureau.

Il est donc quasiment impossible de créer une interface qui soit universelle pour format vertical et horizontal. Heureusement il est possible de sauver de multiples configurations de panneau ! Prévoyez au moins 2 formats : un vertical pour votre téléphone et le second horizontal. Un bon conseil si vous prévoyez d'avoir plusieurs écrans de contrôle dans la maison, choisissez des écrans au même format et à la même résolution, ça vous simplifiera grandement la vie.

Boutons, curseurs, voyants et bien d'autres éléments sont des widgets disponibles dans la bibliothèque de base. D'autres widgets créés par la communauté pourront être téléchargés directement depuis l'interface d'édition. Ces widgets sont redimentionnables dans les deux dimensions avec des résultats plus ou moins heureux en fonction de la taille des cases et de leur contenu. Ils sont positionnables partout (contrairement au panneau d'accueil qui "stack" tout en haut), dans la limite des 12 colonnes.

La plupart du temps, après avoir renseigné le ou les items avec lesquels le widget va interagir dans les menus déroulants et sauvé les modifications, le widget est fonctionnel. Certains widgets plus complexes (comme le widget openWeather Map que je veux ajouter à certains tableaux de bord) demandent l'ajout de ressources (images ou autres) à OpenHab pour pouvoir fonctionner.

J'ai choisi un thème sombre histoire de ne pas terminer aveugle quand je l'utilise la nuit, mais d'autres thèmes son fournis d'office. Il est aussi possible d'ajouter une image de fond directement depuis les paramètre OpenHab. Si vous vous y connaissez en CSS, vous pourrez bien entendu créer votre thème perso. 

 

Améliorations

Après avoir ajouté un binding pour open weather map et le widget qui va bien, je me suis rendu compte que sa mise en page ne fonctionnait pas bien sur l'écran de mon téléphone. Quelques éditions de code du widget plus tard...

L'affichage de l'heure est remplacé par la pression barométrique.

Les dimensions des deux colonnes supérieures sont mieux équilibrées et permet d'éviter des retours à la ligne impromptus dans la colonnes des mesures.

Il reste encore quelques soucis de mise en page. La taille du texte casse la mise en page et le CSS sombre ne contient pas la classe mettant la première lettre d'un texte en majuscule.

De plus, le créateur du widget semble ne pas avoir prévu le cas où on voudrait utiliser son widget sur un fond clair. Les icônes pour la l'humidité et la vitesse du vent sont blanche et au format PNG. Pourtant, toutes les autres icônes sont des svg ce qui permet de choisir la couleur de remplissage. Une autre amélioration à réaliser

 L'icône de la pression barométrique n'existe pas, dans un soucis d'unité graphique, il faudra l'ajouter.

 L'icône de t° n'existe pas non plus, il serait envisageable de la créer et d'ajouter l'option de l'afficher ou non...

 

 

 

 

 

Et plus loin

Des utilisateurs encore plus avancés se sont amusés à créer des plans d'étages en .svg de leur maison et à les intégrer dans HABPanel. Ca donne des écrans très simple à utiliser, mais pas toujours très jolis en fonction des compétences en graphisme des créateurs (les goûts et les couleurs).

 Je suppose qu'il ne me reste plus qu'à prendre grossièrement les mesures de la maison et refaire un plan sur un logiciel de dessin vectoriel. Une fois que ça sera fait, il sera possible d'ajouter des éléments pour contrôler les volets directement, des afficheurs de t° et autres directement dans l'image.