Rendre Jeedom beau et convivial avec les widgets custom : Notre tuto complet

Si vous avez cliqué sur cet article, c’est sans doute que vous cherchez désespérément comment rendre l’interface de votre Jeedom plus agréable et beau. Car il faut être franc, si le système domotique est efficace, on ne peut pas en dire autant de son interface graphique. En effet, bien que l’équipe Jeedom ne cesse d’améliorer son logiciel, le design des différents périphériques domotiques répartis dans les pièces du système sont loin d’être sexy.

Heureusement pour nous, rien n’est figé. avec un peu d’ingéniosité et de créativité, mais aussi et surtout beaucoup de temps et de patience, vous pourrez tout simplement transformer votre interface domotique, passant de ça :

À une interface Jeedom plus user friendly et franchement différente comme ça :

Oui, il s’agit de la même page système dans une installation Jeedom. Ici, plusieurs types de périphériques différents. De marques différentes et fonctionnant sur des protocoles eux aussi différents. Tout ça pour dire que vous allez voir dans ce nouveau guide, qu’il est possible d’aller assez loin dans la customisation. Bien assez pour disposer d’une interface enfin claire, agréable à l’oeil et surtout efficace.

Voyons un exemple concret avec le widget d’un détecteur de fumée Fibaro. Concrètement, ce guide va vous permettre de passer de la vue de gauche, vue par défaut de Jeedom, à la vue de droite, une vue dynamique, interactive et franchement plus belle.

Avant de commencer à modifier Jeedom

Avant toute chose, il faut commencer par installer le plug-in Widget.

Ce plug-in va permettre de personnaliser plus simplement l’affichage des widgets de Jeedom. Une fois le plug-in installé, rendez-vous dans plugins / programmation / Widget sous Jeedom.

Rendre un widget Jeedom beau, la procédure

À présent, nous avons la base technique pour mettre en forme nos widgets Jeedom. Toutefois, il faut à présent les ressources nécessaires pour permettre d’arriver à nos fins.

• Des couleurs de fond matérielles design. Voici une sélection des couleurs que j’ai utilisé dans ma configuration ainsi que les codes hexadécimaux qui correspondent.

• Des icônes pour donner vie à nos widgets

Pour cela, il existe plusieurs banques d’icônes disponibles sur le web par exemple icon archives ou encore the noun project

Comment modifier la couleur de fond d’un widget Jeedom ?

1 Pour commencer, nous allons changer la couleur du fond de la tuile. Pour cela, rendez-vous dans la configuration avancée de votre périphérique.

2 Allez ensuite dans l’onglet Affichage

3 Décochez la case Defaut

4 Puis cliquez sur le rectangle de couleur afin d’ouvrir la fenêtre de sélection. Ici plusieurs options disponibles pour choisir vos couleurs, ma préférence va vers la saisie du code Hex. Vous pourrez alors y saisir un des codes de couleurs donnés plus haut dans l’article.

5 Tant que vous y êtes, faites de même pour tous les autres aspects de votre widget puis sauvegardez.

Maintenant que nous avons changé la couleur de fond du widget Jeedom, attaquons-nous au gros du travail, à savoir la modification des icônes.

Comment créer un widget Jeedom custom ?

1 Pour cela, rendez-vous dans le plug-in Widget

2 Choisissez le mode de création facile

3 Ajoutez vos images d’icônes qui constitueront le design de votre widget.

Configuration d’un Widget Jeedom Numerique

1 Nous allons définir le design pour un widget de température. Pour cela, choisissez un Widget Numerique.

2 Donnez un nom au widget, choisissez l’interface dashboard, puis la bibliothèque images et ajoutez deux lignes.

Pour la première, définissez votre icône qui sera affiché pour les températures froides. Définissez alors le seuil des températures dites froides, puis répétez l’opération pour les températures dites chaudes.

3 Vous pouvez prévisualiser le résultat en dessus en bougeant le curseur pour définir la valeur de la température.

Configuration d’un Widget Jeedom simple état

Pour notre exemple, vous avez vu que nous sommes en train de configurer le design d’un widget de détecteur de fumée Fibaro. Ce dernier comporte la température ainsi que son état. Nous venons de définir la représentation de la température. Passons à présent à la représentation de l’état.

1 Dans la liste des widgets à créer, choisissez Widget Simple État

2 Déposez les images de vos états

3 Puis, définissez les images désirées selon l’état depuis la liste des images de votre bibliothèque personnelle.

La configuration du design du widget jeedom

Nous venons de définir le design des états de notre périphérique, il nous reste à présent à appliquer ces design sur notre périphérique.1 Pour cela rendez-vous dans la configuration de votre périphérique (ici un détecteur de fumée Fibaro) puis rendez-vous dans l’onglet commandes.

2 Editez la commande via l’icône en forme d’engrenage au bout à droite de la ligne de la commande.

3 Rendez-vous maintenant dans l’onglet Affichage

4 Pour l’état du détecteur, choisissez le widget précédemment créé dans la liste déroulante.

5 Faites de même pour la commande de température puis enregistrez.

C’est terminé, si vous allez dans la pièce d’affectation de votre périphérique, vous constatez le nouveau design.

Un design qui change grandement du design de base? Vous vous rappelez le truc tout moche en début d’article? Il ne vous reste plus qu’à appliquer cette procédure pour tous vos périphériques et votre dashboard Jeedom aura enfin la grande classe. Bien sûr, ce travail est long et fastidieux, mais au final, votre domotique n’en sera que plus claire et visuelle.

À vous de jouer les amis

Télécharger les icônes