[TUTORIEL] Design interactif sous Jeedom

Nous allons aujourd’hui parler de la fonctionnalité design interactif sur notre Jeedom et comment le mettre en place.

Mais d’abord commençons par le début, qu’est ce qu’un design interactif ? Pour faire simple il s’agit d’un assemble de commande et de widget avec une image statique ou provenant d’une caméras en guise de fond.

Cela nous permettra d’avoir par exemple une photo ou une image caméra de notre salon et d’y placer des trigger ou des widgets pour déclencher des actions et voir en direct le résultat.

Sympa non, alors sans plus attendre mettons en place notre premier design interactif.

Le design interactif, une évolution du dashboard

Bien pour une fois, il n’est pas nécessaire de télécharger un plugin sur le market, nous avons déjà tout le nécessaire.

Pour commencer, on se rend dans « Accueil » puis « Design ». Jeedom nous invite à créer notre premier design, on clique donc sur le lien proposé et on renseigne un nom.

On se retrouve maintenant avec une page vide, dans notre exemple nous allons charger une image de fond qui représentera le salon. Pour cela on clique droit n’importe ou, puis « Édition » et enfin sur « Ajouter une image/caméra ».

Maintenant on renseigne notre image, pour cela on clique droit sur le logo image puis « Paramètres d’affichage ». Il ne reste plus qu’a sélectionner l’image ou la caméra souhaitée.

Très bien, la suite n’est pas plus compliqué. Nous allons ajouter une « Zone », cela vas créer une zone interactive à partir de laquelle on déclenchera des événements. Cela peut être la lumière, les volets ou même déclencher le chauffage, on donne libre cour à son imagination.

Dans cette exemple la zone est sur l’éclairage, mais je vais la déplacer sur le volet en arrière plan.

On paramètre ensuite la zone, pour cela on clique droit puis « Paramètres d’affichage », on accède ensuite à trois possibilités.

Il s’agit des macros, chacune avec sa spécificité :

• Macro simple : elle permet simplement d’ajouter une ou plusieurs actions.
• Macro binaire : elle permet d’ajouter uniquement des actions on et off avec un retour d’état (par exemple pour une lumière ou volet)
• Widget au survol : elle permet d’afficher un widget sur la zone concernée.

Dans l’exemple si dessous comme cela concerne un volet, je choisi une macro binaire.

Conclusion

Et voila maintenant quand je clique sur la zone volet, cela déclenche la fermeture et l’ouverture du volet. Et si j’utilise la caméra comme image de fond, je vais pouvoir vérifier en temps réel que l’action est correctement exécutée.

Bref que du bonheur, c’est simple et rapide à mettre en place. On peut ainsi concevoir une interface pour tablette par exemple très facilement et l’ensemble est compréhensible même pour les plus inexpérimentés avec la technologie.

A bientôt pour un nouveau tutoriel.