Widgets

Un widget est la représentation graphique d’une commande. Chaque widget est spécifique au type et au sous-type de la commande sur laquelle il doit être appliqué ainsi qu’à la version à partir de laquelle on accède à Jeedom (desktop ou mobile).

Widgets par défaut

Avant de nous intéresser à la personnalisation des widgets, découvrons les possibilités offertes par certains widgets présents par défaut dans le Core Jeedom.

Équipements

Les équipements (ou tuiles) possèdent certains paramètres de configuration accessibles via la configuration avancée de l’équipement, onglet “Affichage” → “Paramètres optionnels sur la tuile”.

Paramètre(s) optionnel(s)

HygroThermographe

Ce widget est un peu particulier car c’est un widget multi-commandes, c’est à dire qu’il assemble la valeur de plusieurs commandes. Ici il prend les commandes de type température et humidité. Pour le configurer il faut affecter le widget aux commandes température et humidité de votre équipement.

Widget HygroThermographe

Paramètre(s) optionnel(s)

IMPORTANT
Il faut ABSOLUMENT que les types génériques soient renseignés; Température sur la commande de température et Humidité sur la commande humidité (cela se configure dans la configuration avancée de la commande, onglet configuration).

NOTE
Attention sur un design il ne faut surtout pas mettre une commande seule avec ce widget cela ne marchera pas vu que c’est un widget utilisant la valeur de plusieurs commandes, il faut absolument mettre le widget complet

Multiline

Ce widget permet d’afficher le contenu d’une commande info/autre sur plusieurs lignes.

Paramètre(s) optionnel(s)

Slider Button

Widget pour commande action/curseur dôté d’un bouton “+” et d’un bouton “-” permettant d’agir avec précision sur une valeur.

Paramètre(s) optionnel(s)

Rain

Widget permettant l’affichage de niveaux d’eau.

Widget Rain

Paramètre(s) optionnel(s)

Toggle d’icône ON/OFF

Concernant les widgets pour interrupteurs (on/off, allumer/éteindre, ouvrir/fermer, etc…), il peut-être considéré comme plus agréable visuellement de n’afficher qu’une icône reflétant l’état de l’appareil à contrôler.

Cette possibilité est utilisable aussi bien avec les widgets par défaut qu’avec les widgets personnalisés.

Pour se faire, il est nécessaire de prendre en compte 2 pré-requis :

Exemple
Widget ToggleLink

Conseil
Décocher la case “Afficher” de la commande info/binaire qui n’aura pas besoin d’être affichée.

Astuce
Tant que le nom normalisé reste lisible il est possible d’adapter le nommage, par exemple ouvrir_volet ou volet_fermer, marche_2 et arret_2, etc.

Widgets personnalisés

La page Widgets, accessible par le menu Outils → Widgets, vous permet d’ajouter des widgets personnalisés en complément de ceux disponibles par défaut dans Jeedom.

Il existe deux types de widgets personnalisés :

Gestion

Widgets

Quatre options s’offrent à vous :

Mes widgets

Dans cette partie vous retrouverez l’ensemble des widgets que vous avez créés classés par type.

Mes Widgets

Astuce
Vous pouvez ouvrir un widget en faisant :

  • Clic sur l’un d’entre eux.
  • Ctrl+Clic ou Clic+Centre pour l’ouvrir dans un nouvel onglet du navigateur.

Le moteur de recherche vous permet de filtrer l’affichage des widgets selon différents critères (nom, type, sous-type, etc…). La touche Echap annule la recherche.

Recherche Widgets

A droite du champ de recherche, trois boutons que l’on retrouve à plusieurs endroits dans Jeedom:

Une fois sur la page de configuration d’un widget, un menu contextuel est accessible au Clic Droit sur les onglets du widget. Vous pouvez également utiliser un Ctrl+Clic ou Clic+Centre pour ouvrir directement un autre widget dans un nouvel onglet du navigateur.

Création d’un widget

Une fois sur la page Outils → Widgets il vous faut cliquer sur le bouton “Ajouter” et donner un nom à votre nouveau widget.

Ensuite :

Les templates

Définition d’un template

Pour faire simple, c’est du code (HTML/JS), intégré au Core, dont certaines parties sont configurables par l’utilisateur via l’interface graphique du menu Widgets. A partir de la même base et en prenant en compte les éléments que vous allez renseigner dans le template, le Core va générer des widgets uniques correspondant à l’affichage que vous souhaitez obtenir.

Suivant le type de widget, vous pouvez généralement personnaliser les icônes, mettre les images de votre choix et/ou intégrer du code HTML.

Il existe deux types de template :

Remplacement

C’est ce que l’on appelle un template simple, ici vous avez juste à dire que le “ON” correspond à telle icône/image (à l’aide du bouton choisir), le “OFF” à telle autre icône/image, etc…

La case Time widget, si disponible, permet d’afficher la durée depuis le dernier changement d’état sous le widget.

Pour les template utilisant des images, il vous est proposé de paramétrer la largeur du widget en pixel en fonction du support (Largeur desktop & Largeur mobile). Des images différentes peuvent également être sélectionnées selon le thème actif de Jeedom (light ou dark).

Astuce
Pour les utilisateurs avancés il est possible de mettre des tags dans les valeurs de remplacement et de spécifier leur valeur dans la configuration avancée de la commande.
Si, par exemple, dans Largeur desktop vous mettez comme valeur #largeur_desktop# (attention à bien mettre les # autour) puis dans la configuration avancée d’une commande, onglet affichage → “Paramètres optionnels widget” vous ajoutez le paramètre largeur_desktop (sans les #) et lui donnez la valeur “90”, ce widget personnalisé sur cette commande aura une largeur de 90 pixels. Cela permet d’adapter la taille du widget à chaque commande sans avoir à faire un widget spécifique à chaque fois.

Test

C’est ce que l’on appelle les templates multistates (plusieurs états). Au lieu de mettre une image pour le “ON et/ou pour le “OFF comme dans le cas précèdent, vous allez affecter une icône en fonction de la validation d’une condition (test). Si celle-ci est vraie alors le widget affichera l’icône/l’image en question.

Comme précédemment, différentes images peuvent être sélectionnées en fonction du thème actif sur Jeedom et la case Time widget permet d’afficher la durée depuis le dernier changement d’état.

Les tests sont sous la forme : #value# == 1, #value# sera automatiquement remplacé par la valeur actuelle de la commande. Vous pouvez aussi faire par exemple :

Note
Il est indispensable de faire apparaitre les apostrophes (‘) autour du texte à comparer si la valeur est un texte (info/autre).

Note
Pour les utilisateurs avancés, il est possible d’utiliser aussi des fonctions javascript telle que #value#.match("^plop"), ici on teste si le texte commence par plop.

Note
Il est possible d’afficher la valeur de la commande dans le widget en précisant #value# dans le code HTML du test. Pour afficher l’unité ajoutez #unite#.

Widget code

Les tags

En mode code vous avez accès à différents tags pour les commandes, en voici une liste (pas forcément exhaustive) :

Mise à jour des valeurs

Lors d’une nouvelle valeur Jeedom va chercher dans la page si la commande est là et dans jeedom.cmd.update si il y a une fonction d’update. Si oui il l’appelle avec un unique argument qui est un objet sous la forme :

{display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#'}

Voila un exemple simple de code javascript à mettre dans votre widget :

<script>
    jeedom.cmd.addUpdateFunction('#id#', function(_options) {
      if (is_object(cmd = document.querySelector('.cmd[data-cmd_id="#id#"]'))) {
        cmd.setAttribute('title', ': ' + _options.valueDate + '<br>: ' + _options.collectDate)
        cmd.querySelector('.value').innerHTML = _options.display_value
        cmd.querySelector('.unit').innerHTML = _options.unit
      }
    }
    jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])
</script>

Ici deux choses importantes :

jeedom.cmd.addUpdateFunction('#id#', function(_options) {
  if (is_object(cmd = document.querySelector('.cmd[data-cmd_id="#id#"]'))) {
    cmd.setAttribute('title', ': ' + _options.valueDate + '<br>: ' + _options.collectDate)
    cmd.querySelector('.value').innerHTML = _options.display_value
    cmd.querySelector('.unit').innerHTML = _options.unit
  }
}

La fonction est appelée lors d’une mise à jour du widget. Elle met alors à jour le code html du widget_template.

jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])

L’appel à cette fonction pour l’initialisation du widget.

Exemples

Vous trouverez ici des exemples de widgets (dans les dossiers dashboard et mobile)

Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site web. Si vous continuez à utiliser ce site, nous supposerons que vous en êtes satisfait.