Widgets Jeedom avec le coreTemps de lecture : 6 minutes

Bonjour à tous, aujourd’hui un petit article très rapide concernant les Widgets Jeedom. En effet j’ai pu constater que depuis que les widgets ont été intégrés le core, beaucoup de personnes voient cela comme compliqué et passent à côté de cette fonctionnalité. En effet depuis quelques versions de Jeedom les widgets ne sont plus gérés par un plugin mais directement par le core. Aujourd’hui l’idée de ce mini article est de permettre de lever le doute sur cette possibilité et de permettre a ceux d’entre vous qui se sentaient perdu de pouvoir éventuellement en profiter.

Widgets Jeedom : c’est quoi

Vous ne savez pas ce que c’est un widget…. Alors c’est simple :

Vous le savez l’organisation dans Jeedom est simple, on a :

• des objets
• qui contiennent des équipements
• et ceux-ci contiennent des commandes (de type info ou action)

Les objets seront généralement vos pièces, les équipements eux sont représentés par des tuiles et les commandes sont tout ce que vous allez retrouver au sein de la tuile.

Les widgets comme le montre mes captures au dessus sont simplement une représentation visuelle de ces commandes. Que ce soit une représentation ultra simpliste ou une représentation 3d cela reste « UN WIDGET ».

Widgets Jeedom : les différentes types et sous-types

Alors avant de se lancer dans l’aventure des widgets Jeedom, il est important de bien comprendre la notion de type et de sous type. En effet comme vu au dessus un widget s’applique donc à une commande. Et celles-ci peuvent être de différents types et sous types.

Tout d’abord les types

C’est simple il n’existe que deux types de commandes :

• les commandes de type info : ce sont celles qui vont vous donner une information. Cela peut être une température, l’état d’une porte, la puissance d’une prise, le nom d’un artiste musical. Bref tout ce qui vous apporte une information.
• les commandes de type action : ce sont celles qui vont vous permettre d’exécuter une action. Allumer une lampe, changer la couleur d’un bandeau led, envoyer une notification, passer à la chanson suivante etc….

Voilà c’est simple. Il n’existe que deux types. Cependant on peut aller plus loin car chaque type possède des sous types.

Les sous-types infos

Les commandes de types infos peuvent être de différents sous types :

• Numérique : pour toutes les informations  numériques à savoir par exemple : une température, un volume, une intensité lumineuse, une consommation, une puissance etc…
• Binaire : pour toutes les informations qui n’ont que deux états : une ouverture de porte (ouverte/fermée), une lumière classique (allumée/éteinte), un mouvement (oui/non). Tout cela est de sous type binaire car en effet ils prendront les valeurs 0 ou 1 (non/oui)
• Autre (string) : ce sont toutes les informations qui contiennent du texte : un artiste musical, un statut textuel, etcccc

Les sous-types actions

Les commandes de types actions peuvent aussi être de différents sous types :

• Défaut : ce sont toutes les actions  « actions simples » / « boutons ».  Un on ou un off d’une lumière par exemple, un haut/bas d’un volet par exemple.
• Curseur : ici on retrouvera toutes les actions qui permettent de faire varier une valeur : un volume, une luminosité (pour une lumière variable), la consigne d’un thermostat etc…
• Message : ce sous type particulier sert notamment pour tout ce qui est envoie de mail, envoie de notification, synthèse vocale etcc…
• Couleur : comme son nom l’indique ce sous type est utilisé par tout ce qui est susceptible de recevoir une couleur. On le retrouvera notamment sur la commande couleur des ampoules/bandeaux RGB.
• Liste : ce sous type permet d’avoir une liste. Il est assez peu courant, mais on le retrouve pour les actions qui permettent de changer un mode par exemple

Mais pourquoi diable nous parle-t-il de tout ça ?

Ben oui ! Pourquoi je vous parle de tout ça au lieu de parler de widgets. Tout simplement car les widgets sont intrinsèquement liés aux types et sous-types des commandes. C’est un point PRIMORDIAL. Un widget est forcément créé pour un type/sous-type et ce widget ne pourra être qu’exclusivement appliqué à des commandes de ce type et sous type.

Widgets Jeedom : découverte

Alors c’est simple nous allons découvrir sur un exemple simple comment je vais transformer une tuile.

Voilà par exemple mon portier vidéo que j’utilise avec un plugin perso pour deux trois petites choses. Essayons de le rendre un peu mieux. Alors dans mon cas je reste dans la philosophie flat design de Jeedom mais vous pouvez très bien vous faire des widgets réels ou autres.

Tout d’abord il faut savoir que vous avez deux solutions :

• utiliser les widgets et fonctionnalités fournies par défaut dans Jeedom
• faire votre propre widget

On verra dans cet exemple l’utilisation des deux.

La commande info mouvement :

Ici je vais utiliser un widget fourni par Jeedom, je me rends donc sur la page de l’équipement et dans le tableau de commandes et je clique sur l’engrenage pour avoir les configurations avancées de cette commande

Ensuite on va cliquer sur l’onglet affichage

Et ensuite on va pouvoir appliquer un widget que ce soit pour la vue dashboard ou la vue mobile (web app).

Ici on retrouve la liste des widgets compatibles avec le type et sous-type de notre commande.

Vous pouvez remarquer que pour présence (et d’autres) on a :

• Presence
• TimePresence

Le premier est le widget simple, le second c’est la même chose avec en dessous le temps depuis le dernier changement. Je vais choisir celui-ci.

Voilà j’ai bien un widget mouvement, avec la durée depuis le dernier changement en dessous.

La commande info sonnerie

Alors je veux faire la même chose pour la sonnerie. Mais avec quelque chose qui représente une cloche ou un truc du genre. Jeedom ne propose rien qui correspond. Ce n’est pas grave on va le faire nous même.

On se rend sur le menu Outils/Widgets de Jeedom.

On arrive sur cette page. Un simple clic sur le bouton ajouter nous permet de créer notre widget.

 Ici on retrouve plusieurs choses :

• le nom du widget
• le type auquel il se rapporte (très important)
• le sous type auquel il se rapporte (très important aussi)
• le type de template (Icon : pour utiliser des icônes de la bibliothèque Jeedom, Iconline : pour faire un widget en ligne, Img : pour choisir vous mêmes vos images)
• Icône : attention ce n’est pas ce que votre widget va afficher, c’est juste une représentation de votre widget dans le menu Outils /Widgets
• La partie remplacement contient des infos à remplir en fonction du type/ sous type et du template
• Time Widget : permet de choisir si votre widget affichera le temps ou pas en dessous

Dans mon cas j’ai trouvé mon bonheur dans la bibliothèque d’icône (mais vous pouvez très bien mettre vous même vos images).

J’ai choisi une  icône verte pour on et rouge pour off (cela peut être l’inverse selon si votre commande binaire est inversée ou non). Si c’est pas le bon sens vous pourrez changer après. Pour choisir ce que vous voulez mettre il vous suffit de cliquer sur le bouton choisir (il n’est pas visible sur mon screen mais il est disponible au bout de chaque ligne).

Une fois sauvé on retourne sur l’onglet affichage de la configuration avancée de notre commande et :

On retrouve une section Custom avec tous nos widgets persos.

Et hop ! une commande de plus.

Alors je vais pas toutes les passer mais on va regarder rapidement la commande portail et un bouton action.

La commande info portail

La commande info portail dans mon cas est particulière car c’est un numérique qui me donne 3 valeurs différentes :

• ouvert
• fermé
• ouvert partiellement

L’idée reste la même cependant

En effet avec le sous-type numérique il existe un template multistate. Celui-ci permet de choisir différentes images/icônes en fonction de certaines conditions. On doit donc en plus de tout à l’heure renseigner une condition en plus des images/icônes.

Mon exemple montre que j’ai trois conditions :

• #value# == 0  (pour fermé)
• #value# == 1 (pour ouvert)
• et enfin #value# == 2 (pour semi ouvert)

Pour chacune j’ai choisi un icône et une couleur (alors en double car ici on va préciser ce que l’on veut dans le cas du thème light ou dark de jeedom)

Et on obtient ceci :

Respectivement on retrouve :

• fermé
• partiel
• ouvert

Les commandes actions boutons

Pour les commandes actions boutons. On peut aussi utiliser l’éditeur de widget. Mais si on veut simplement ne pas avoir le texte mais une icône on peut se rendre sur la configuration avancée de la commande et sur le premier onglet :

On peut choisir directement un icône à afficher à la place du texte. C’est donc ce que je vais faire.

Et voilà comment on passe de

A

Conclusion

Voilà j’espère avoir réussi à démystifier tout cela. Et que vous allez tous vous amuser à améliorer le rendu de vos tuiles. Alors dans mon cas je suis resté en mode flat design pour deux raisons :

• rester cohérent
• vous montrer qu’avec le natif Jeedom on peut déjà considérablement faire des choses

Mais bien évidemment ce principe s’applique aussi avec des png des images ou autres donc clairement il n’y a aucune limite. Si vous voulez une photo de votre lampe de chevet réel. Vous pouvez. Vous pouvez aussi jeter un œil à l’excellent plugin PimpMyJeedom. On verra dans d’autres articles comment aller plus loin.