Hello,

C’est Pierre-Yves, aujourd’hui nous allons parler de la création d’un widget dans Jeedom via le Mode de création facile. Ce mode est ni plus moins qu’un assistant vous évitant de reprendre la base du code d’un widget sur un autre widget. ça peut éviter certains copier coller hasardeux dont je suis un maître en la matière :).
Nous allons nous lancer dans une série d’articles sur les widgets donc on commence gentillement, puis on attaquera du plus rude au fur et à mesure. Nous ferons le maximum pour que ça soit compréhensible, mais à un moment donné, il faudra se documenter si vous souhaitez pousser plus loin l’expérience.

Prérequis

Voici la liste des prérequis à mon sens pour ne pas trop s’y perdre :

  • Quelques connaissances en développement (logique des IF ELSE (=équivalent au scénario jeedom SI ALORS SINON)
    • Donc normalement, on l’a à peu près tous cette logique
  • Un objectif de widget à réaliser (oui c’est mieux quand même :), mais vous pouvez reproduire ce tuto pour comprendre la mécanique, appliquer c’est toujours mieux que de se dire que l’on a compris 🙂
  • Avoir le plugin widget d’installé, si ça n’est pas le cas, passer par le market des plugin et installer ce plugin (plugin officiel Jeedom).
  • Trouver des icônes, voici quelques liens (Merci à Popix pour les deux derniers 😉 ) :

But de l’article

Ce tuto va avoir pour but de créer un widget qui permette d’afficher trois images différentes en fonction de la témpérature d’un capteur. Voici le look des icones :

Présentation des icones utilisées

Notez ici que les noms sont importants pour la suite :

  • cold.png
  • warm.png
  • hot.png

L’idée étant de dire :

  • Moins de 18 alors on affiche cold.png
  • Entre 18 et 23 alors on affiche warm.png
  • Au dessus de 23 alorson affiche hot.png

Création

Une fois dans le plugin widget, sur le menu de gauche, il suffit de cliquer sur le bouton :

Bouton creation facile widget

Nous obtenons la page suivante :

Page d'accueil création widget facile

 

  1. Ajoutons nos 3 images en utilisant le bouton Ajouter ses images …
  2. Cliquons sur le troisième bouton orange : Widget Numérique (comme vous le voyez il est selectionné sur la copie d’écran ci-dessus
  3. Choisissons un nom pour notre widget dans le bandeau supérieur
  4. Décidons si ce widget est pour le dashboard ou pour un affichage sur mobile (dashboard dans notre cas
  5. Choisissons notre bibliothèque d’image (Il faut passer sur Images, par défaut on tombe sur le choix icons) Icons permet d’accéder aux icônes proposées par défaut par Jeedom
  6. Le bouton ajouter, permet d’ajouter des conditions, cliquer 2 fois dessus afin d’ajouter 2 conditions pour que l’on puisse obtenir donc 3 conditions et pouvoir avancer dans notre widget.

 

Modifions les seuils pour obtenir ceci :

réglage des seuils

La vous devez vous dire, si vous avez suivi, il se moque de nous, il a dit que les seuils c’était moins de 18, entre 18 et 23, puis au dessus de 23.
Pourquoi il a mis 0 à 17 au lieu de à à 18 ?
La réponse est simple, ici par défaut l’assistant va configuré les conditions en disant ceci :
Supérieur ou égale à 0 ET inférieur ou EGALE à 17 (donc jusqu’à 17.99)
Supérieur ou EGALE à 18 ET inférieur ou EGALE à 22 (donc jusqu’à 22,99)
Supérieur ou EGALE à 23 ET inférieur ou EGALE à 50 (donc jusqu’à 50.99) Cette valeur de 50, vous comprendrez que vous pouvez mettre ce que vous souhaitez, mais 50° chez vous, ça commence à faire chaud :).

 

On affecte maintenant nos images à nos différents seuils

Association des images aux conditions

On utilise donc les images que nous avons chargé au tout au début de la création, à l’étape 1, via le menu déroulant Image qui actuellement affiche Aucune à coté de chaque condition.
Comme vous pouvez le constater, ça nous affiche donc les images, ainsi on sait si on ne s’est pas trompé d’image et ça nous informe de la dimension de l’image également.
Vous pouvez voir que l’on dispose du bouton supprimer (si on a mis une condition de trop par exemple, mais la première condition est un prérequis, donc on la conserve obligatoirement.

Maintenant que nous avons effectuer ces étapes, on peut valider le bon fonctionnement du widget  à l’aide de l’équipement qui est situé sous le tableau des conditions que nous venons de remplir et voici ce que ça donne :

image froid image température agréable

image température chaude

Vous pouvez constater que les seuils sont bien respectés 😉 par rapport à notre cahier des charges.

Nous obtenons également à droite de l’équipement qui nous a servit à tester le widget tout le code de ce fameux Widget (attention, il y a toujours ce défaut des guillemets qui remplace les doubles quotes :

<div style= »min-width:120px; min-height:80px; » class= »cmd tooltips cmd-widget cursor container-fluid » data-type= »info » data-subtype= »numeric » data-cmd_id= »#id# » data-cmd_uid= »#uid# »>
<center>
<div style= »font-weight: bold;font-size : 12px;#hideCmdName# »>#name_display#</div>
<span style= »font-size: 2.5em; » class= »iconCmd »></span>
<div style= »display:inline-block; »>
<span style= »font-weight: bold; » class= »pull-right »>#unite#</span>
<span style= »font-size: 2em;font-weight: bold; » class= »pull-right state »></span>
</div>
<div style= »#displayHistory# font-size: 0.8em; » class= »col-xs-12 center-block »>
<span title= »Min » class= »tooltips »>#minHistoryValue#</span>|<span title= »Moyenne » class= »tooltips » >#averageHistoryValue#</span> | <span title= »Max » class= »tooltips »>#maxHistoryValue#</span> <i class= »#tendance# »></i>
</div>
</center>
<!– Ne Pas Supprimer –>
<script class= »createWidgetInfo » type= »text/javascript »>//<![CDATA[{« type »: »1″, »version »: »1″, »size »: »2.5″, »min »:[« 0″, »18″, »23″], »max »:[« 17″, »22″, »50″], »images »:[« cold.png », »warm.png », »hot.png »]}]]></script>
<!– Ne Pas Supprimer –>
<script>
var srcImg = ‘plugins/widget/core/template/dashboard/cmd.info.numeric.Tuto_Blog/’;
var iconUpdate = function (state){
$(‘.cmd[data-cmd_uid=#uid#] .iconCmd’).empty();
if (state >= 0 && state <= 17) {
$(‘.cmd[data-cmd_uid=#uid#] .iconCmd’).html(‘<img style= »display: inline-block; » src= »‘+srcImg+’cold.png »>’);
}
if (state >= 18 && state <= 22) {
$(‘.cmd[data-cmd_uid=#uid#] .iconCmd’).html(‘<img style= »display: inline-block; » src= »‘+srcImg+’warm.png »>’);
}
if (state >= 23 && state <= 50) {
$(‘.cmd[data-cmd_uid=#uid#] .iconCmd’).html(‘<img style= »display: inline-block; » src= »‘+srcImg+’hot.png »>’);
}
$(‘.cmd[data-cmd_uid=#uid#] .state’).text(state);
};
jeedom.cmd.update[‘#id#’] = function(_options){
$(‘.cmd[data-cmd_uid=#uid#]’).attr(‘title’,’Valeur du ‘+_options.valueDate+’, collectée le ‘+_options.collectDate)
iconUpdate(_options.display_value);
}
jeedom.cmd.update[‘#id#’]({display_value:’#state#’,valueDate:’#valueDate#’,collectDate:’#collectDate#’,alertLevel:’#alertLevel#’});
</script>
</div>

Oui, c’est surement du charabia pour certains d’entre vous. On est d’accord la dessus, ça l’était également pour moi, mais à force de lecture et de pratique, j’ai pu comprendre le fonctionnement d’un widget, je vais vous détailler rapidement le code du widget plus bas.

Il ne vous reste plus qu’à cliquer sur Valider et votre widget est disponible pour être appliquer à une commande.

Si comme moi, vos images ne sont pas ajoutées dans le dossier du widget que vous venez de créer, il vous suffira de faire ceci :

Ajout d'image à un widget

  1. Sélectionner votre widget
  2. Cliquer sur Fichiers
  3. Ajouter vos images, une par une

Il y a le bouton sauvegarder qui est tout en bas de la page, ça peut être un peu déroutant au début, mais on s’y fait vite.

Application / Validation

Nous avons maintenant notre widget, on est très content, mais on en fait quoi ?
Et bien, vous pouvez aller sur un capteur de température que vous possédez et faire ceci :

Application d'un widget à une commande

Puis, ensuite faire ceci :

Application widget 2

Il ne reste plus qu’à enregistrer votre modification et aller voir sur le dashboard votre widget personnalisé.

Si vous avez beaucoup de capteurs de température chez vous (pour rester sur le sujet de ce tuto) vous pouvez également utiliser le bouton situé en haut à droite : Appliquer sur des commandes

Bouton Appliquer sur des commandes

Vous obtiendrez donc cette page sur laquelle vous pourrez filtrer sur le nom de la commande et ainsi coché les cases correspondantes aux commandes que vous souhaitez modifier. Le gain de temps est considérables si vous avez beaucoup de capteurs :

Appliquer widget à de multiples commandes

Modification

Si vous souhaitez modifier les seuils car ils ne vous conviennent plus, il vous suffit d’utiliser le bouton Editer situé tout en haut de la page d’édition de votre widget :

Editer le widget après sa création

Vous vous retrouvez de nouveau sur la page de création sur laquelle vous pourrez modifier vos seuils.
De mon coté, le code du widget n’est pas remis à jour, mais un clic sur le bouton sauvegarder vous met bien à jour le code du widget

 

Survol du code du widget

Pour ne pas trop surcharger l’article, je vous laisse reprendre le code plus haut dans le tuto, ou sur votre Jeedom si vous avez appliqué le tuto.
Les lignes de 1 à 12 ne concernent que la partie rendu visuel du widget.
C’est du code au format HTML, un peu d’information ICI

Les lignes 13 à 15 sont purement interne au widget en création facile et ça permet d’afficher le bouton Editer dont nous avons déjà discuté plus haut

Les lignes 16 à 36 sont la partie permettant de gérer l’affichage de telle ou telle image en fonction des seuils que nous avons définit et de la valeur de la commande température de votre widget.
Prenons juste rapidement les lignes 20, 23 et 26, vous pouvez constater que ce sont nos conditions évoquées un peu plus haut dans l’article. && signifiant ET tout simplement.
C’est du code Javascript, un peu d’information ICI

Cela n’est qu’une explication rapide du code, très rapide même, mais je ne vais pas m’étendre sur cette partie pour l’instant. Je ne le fais pas pour plusieurs raisons à l’heure actuelle ;

  1. Je ne compte pas vous perdre, ça ne sert à rien
  2. J’y viendrais dans d’autres articles sur les widgets
  3. Je ne suis pas forcément hyper légitime pour tout expliquer car ça n’est pas mon métier :), simplement un loisir, même si je m’y risquerai dans les prochains articles.

 

Conclusion

J’espère que cet article vous sera utile. Qu’il peut également vous servir à créer vos propos widget pour des besoins spécifiques. Je vous laisse tenter de modifier une chose ou deux peut-être pour voir l’impact sur le widget ? Un autre article sera dédié à expliquer deux trois choses pour s’éviter un laborieux travail d’application sur le code du widget puis une actualisation jeedom afin de gagner du temps.

 



Partager sur :

Infos de l'auteur

Je m'appelle Pierre-Yves, Je suis dans l'informatique de profession, dans la domotique par hasard pour voir un peu si je pouvais relever le défis de piloter deux trois trucs chez moi. Je crois maintenant que j'ai réussi à me faire attraper par la domotique vu tout ce que j'ai à la maison. Je fais également un peu de VTT, de moto quand le temps le permet.

15 commentaires

  1. Merci pour l’article !
    Content que tu partes de Zéro parce que sur ce sujet je suis nul !

    Mais une petite question :
    Pour un meme équipement puis je avoir et utiliser 2 widgets ?
    L’un pour le Dashboard, l’autre pour le Design ?

    Bonne journée

  2. Hello Hervé,

    Non tu es coincé, il faut passer un virtuel si tu veux deux rendus différents.
    Car ta commande associe un widget pour le rendu sur :
    Dashboard
    Design
    Vue

  3. Merci de ta réponse … lol je vais donc arrêter de chercher, … et passer par des virtuels .
    Mais je vais attendre la suite de tes articles pour approfondir mes connaissances en la matière.

  4. Bonjour
    Ou trouvez vous les
    icones svp? J’ai fait une copie d’ecran des thermometres du dessus et quand je les ajoute dans les images les valeurs de la ligne taille devient rouge. Y a t’il des tailles minimum?
    Merci pour tes conseils

  5. salut,
    Merci pour on article. Dans l’onglet « code » d’une commande , celui après « widget » , il me semble qu’il est possible en cochant widget personnalisé , de faire un widget pour chaque rendu.
    cela reste plus avancé et il faut mettre les mains dans le code (ou faire du copier/coller) mais je pense que ça permet de faire ce que l’on veut.

    • Oui on peut passer par là, mais il faut s’en souvenir et savoir le faire.

      Je préfère le virtuel car beaucoup plus simple à expliquer pour le coup.

  6. Bonjour,

    J’ai suivi le tuto, mais je me retrouve avec des icônes géants sur mon bureau
    Une idée pour réduire la taille ?
    Merci de votre aide

    MB

    • Bonjour MagicBird,

      Si on souhaite obtenir des icônes plus petit, il faut modifier la taille de l’image avant de la télécharger.
      De base, ils font effectivement : 300*300 de mémoire

  7. Bonjour,Merci pour le tuto,
    J’ai fait comme indiquer dans ton tuto et j’ai bien réussi jusqu’à l’étape du test des températures.
    Les images que j’ai ajoutées, je les ai faites avec « paint » après avoir fait un copier/coller. Elles font 30px / 90 px . Mais quand je rentre dans le widget pour ajouter las commande, je ne vois pas les images dans l’aperçu (et j’ai en commentaire : « charge système 1 mn …. alors que je n’ai pas encore ajouté de commande)
    et je ne les ai pas non plus sur le dashboard, mais j’ai un petit carré « image ». Je perds également la visu de l’historique de température quand je clique sur cette image (mais c’est surement normal !!).
    J’ai refait le tuto à 2 reprises et j’ai toujours le même résultat.
    Je ne vois pas de où ça peut venir….. C’est mon premier widget…. Je débute !!
    As-tu la solution stp
    Merci

    • Bonjour,

      ça sera plus simple si tu passe par télégram (page contact pour les liens) car il faut voir un peu plus avec des copies d’écrans, j’ai un peu de mal à situer ton soucis

  8. Bonjour TAG_P_Y,

    J’ai enfin résolu le problème d’affichage des images…. en les intégrant au widget avec le bouton « Fichiers » (près de l’aperçu), et maintenant c’est bon sur le dashboard.
    Peut être qu’il y a un souci sur le chemin de répertoire des images utilisées sur mon jeedom, mais je ne vois pas comment solutionner !!!

    J’ai toujours le même souci, lorsque je clique sur cette image qui remplace le « default (core) »… je ne parviens pas à afficher l’historique. C’est peut être normal ou, il y a peut être besoin de code supplémentaire.

    Ça avance, en tous les cas , merci

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.