Page 1 sur 2

Information codage Widget 3.x

Publié : 22 mars 2019, 12:33
par Antoinekl1
Bonjour à tous

Je me lance dans une explication sur le codage des widgets en 3.x,
ces informations m'ont manquées pour la correction de mes widgets
Merci à ceux qui m'ont fournit ces infos (@Cadavor, @Claude69, @JAG, @domoggvad, ...)
Si il y a des erreurs, je m'en excuse par avance, n'hésitez pas à me corriger

PRINCIPE DE BASE :

Le bon codage des widgets, permet de rafraîchir une information (texte, image, icone, ...) dans une vignette sans que toute la page soit rafraîchir.
Les informations qui ne changent pas : le label d'une commande, l'unité d'une valeur, n'ont pas besoin d'être mise à jour. Elles le seront automatique si vous modifiez ces informations dans votre virtuel lors de la sauvegarde.

Donc pour tout ce qui change souvent, la température d'une sonde, l'image d'une prise, ... il faut que ce soit codé dans le widget.

CORPS DU WIDGET

Code : Tout sélectionner

		jeedom.cmd.update['#id#'] = function(_options){ 
			[...]
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
CODAGE DU WIDGET :

Pour l'affichage des informations, le widget est composé de balise html DIV ou SPAM entre autre.

Pour que l'information contenue dans ces balises soit mise à jour, il faut qu'elle est une CLASS

Cette CLASS sera utilisée comme référence pour lancer la mise à jour de la valeur

EXEMPLE avec l'information STATE :

Je veux afficher la valeur de ma commande et qu'elle soit mise à jour en automatique

J'ai donc ma balise SPAN :

Code : Tout sélectionner

<span class='label label-info' style="font-size: 10px;">#state#</span>
J'utilise le code suivant dans <script> pour lui dire de mettre à jour la valeur value

Code : Tout sélectionner

$('.cmd[data-cmd_uid=#uid#] .label-info').html(_options.display_value);
On retrouve le .label-info qui fait référence à cette même valeur dans la balise class du span

Si la valeur est suivi de l'unité, rien de plus à faire que d'ajouter #unite# après le #state# dans la balise SPAN, puisque cette information n"évolue pas et de l'ajouter dans la partie script sous la forme

Code : Tout sélectionner

$('.cmd[data-cmd_uid=#uid#] .label-info').html(_options.display_value+' #unite#');
Si vous voulez ajouter un texte après la valeur, par exemple un % qui ne serait pas dans l'unité, il suffit de faire ca

Code : Tout sélectionner

$('.cmd[data-cmd_uid=#uid#] .label-info').html(_options.display_value + '%');
NDA : Mais faut il aussi ajouter ce % dans la balise SPAN : <span class='label label-info' style="font-size: 10px;">#state# %</span> ?

VIDER LES INFORMATIONS PRECEDENTES :

Il est possible de vider l'info ou l'image présente, afin d'éviter l'effet double image.

Soit pour tout, il faut alors ajouter

Code : Tout sélectionner

$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
après l'appel de la fonction

Soit pour une commande, en ajout : .empty()

Exemple :

Code : Tout sélectionner

$('.cmd[data-cmd_uid=#uid#] .label-info') .empty() .html(_options.display_value + '%');
CACHER UNE INFORMATION :

En ajoutant .hide()

Exemple :

Code : Tout sélectionner

$('.cmd[data-cmd_uid=#uid#] .label-info').hide().html(State + '%');
NDA : dans ce cas, autant ne pas mettre le code ?

EXEMPLE AVEC UNE VALEUR DANS UNE BALISE IMAGE


Si vous voulez mettre à jour une image (par exemple provenant d'une caméra)

C'est une balise IMG qui faut utiliser

Code : Tout sélectionner

<img class"iconCmd" style="width:180px" width="180px" src="core/php/downloadFile.php?pathfile=/tmp/jeedom/ftpd/ftpd_records#state#" />
On retouve la balise CLASS et le #state# dans le nom de l'image qui sera utilisée

Pour la partie SCRIPT, on garde le même principe mais là c'est dans un attribut de l'image que l'on change la valeur, donc utilisation de .attr

Code : Tout sélectionner

 $('.cmd[data-cmd_uid=#uid#] .iconCmd').attr('src', "core/php/downloadFile.php?pathfile=/tmp/jeedom/ftpd/ftpd_records" + _options.display_value);
EXEMPLE AVEC DES ICONES OU IMAGES

Là c'est plusieurs icones possible pour une même zone, donc on à la balise DIV ou SPAN qui va recevoir l'icone

Code : Tout sélectionner

<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
et on code les test avec l'envoi de l'icone

Code : Tout sélectionner

if (_options.display_value == "Fermé") {  $('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="fa fa-eye-slash"></i>'); } 
if (_options.display_value == "Ouvert") {  $('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="fa fa-eye"></i>');}  
on retrouve toujours la référence .iconCmd qui fait le lien entre le SPAN et le code, mais le nom peut être changé

Après dans le contenu du append, qui peut être remplacé par html, on retrouve le code HTML, qui peut être l'affiche d'un icone comme ci-dessus ou d'une image avec une balise IMG
Exemple :

Code : Tout sélectionner

$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.ActifInactifSlide/ToggleSlide_ON.png"  />');

NDA : il doit surement y avoir une différence entre ces 2 attribues append et html ?

VALEURS COLLECTÉES :

Les 2 dernières lignes de la partie SCRIPT du Widget :

Pour afficher les informations de mise à jour au passage de la souris sur la vignette

Code : Tout sélectionner

$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);

jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
AJOUTER LA DUREE

Par exemple la durée d'ouverture ou de fermeture d'une fenêtre

Code : Tout sélectionner

        <span class="timeCmd#uid#" style="background-color:#cmdColor# !important;padding : 3px;border-radius: 4px"></span>
	jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#')); 

WIDGET ACTION

Là c'est un peu plus compliqué, je pige pas trop le système avec les show et le hide

Il faut dans un 1er temps, tester la valeur, qui peut être numérique et/ou alpha

Code : Tout sélectionner

   if (_options.display_value == 1 || _options.display_value == 'on') {
Puis, c'est là que je décroche, on teste le nom de la commande "name" avec une fonction normalizeName, s'il contient "on" ou "off"
NDA: mais est-ce que cela implique que les 2 commandes actions, doivent avoir ON et OFF dans le nom ?

Code : Tout sélectionner

               
                if (jeedom.cmd.normalizeName('#name#') == 'on') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('IMAGE QUAND ON');
                }
            } else {
                if (jeedom.cmd.normalizeName('#name#') == 'off') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('IMAGE QUAND OFF');
                }
ce que j'en comprends :

Si la valeur retournée par le clique sur l'image (résultat de la commandes action) me retour 1 ou on
alors si le nom de ma commande action contient on alors je la cache, sinon je l'affiche avec l'image indiquée, correspondant au ON

Si la valeur retournée est ni 1, ni on, donc par déduction 0 ou off
alors si le nom de ma commande action contient off alors je la cache, sinon je l'affiche avec l'image indiquée, correspondant au OFF

NDA : c'est là que je comprends pas, prenons l'exemple de la prise.

Sur ma vignette la prise est verte, sa valeur à 1 ou ON, la prise est allumée
Si j'appuis sur l'image de la prise, je passe à la valeur 0 ou OFF, je devrais donc cacher donc l'image de la prise verte (On) et afficher celle de la prise rouge (off)


Voici ce qui j'ai pu réunir, j'espère qu'il n'y a pas trop d'erreur,..

j'ai mis les questionnements qui persistes en NDA, si qqun peut les éclaircies, merci d'avance

Re: Information codage Widget 3.x

Publié : 22 mars 2019, 12:57
par Salvialf
En fait y'a que la fonction d'update qui est instaurée avec la version 3.x de jeedom, le reste est sensiblement identique et la doc est pas mal non plus: https://jeedom.github.io/plugin-widget/ ... chor-1-4-5

J'en profite pour rappeler: "Les modifications peuvent avoir un impact important sur l’affichage du widget et sur l’affichage d’autres widgets, voire bloquer l’affichage de tous les widgets."

Re: Information codage Widget 3.x

Publié : 25 mars 2019, 07:32
par Antoinekl1
Personne pour combler les trous ?

Re: Information codage Widget 3.x

Publié : 25 mars 2019, 10:35
par cadavor
Antoinekl1 a écrit :
25 mars 2019, 07:32
Personne pour combler les trous ?
Quels trous?

Re: Information codage Widget 3.x

Publié : 25 mars 2019, 12:00
par Claude69
Hello
Je suis en train de modifier mes widgets, et j'en ai un qui contient une petite spécificité (Masquage de la tuile complète).
Pouvez vous me dire si pour vous, la modification du code de ça:

Code : Tout sélectionner

<div style="min-width:100px;min-height:120px;padding:0px" class="cmd tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Poubelles">
<div style="font-weight: bold;font-size : 12px;#hideCmdName#" class='cmdName'>#name_display#</div>
      <center>
            <span id="iconCmd#id#"></span>
        </center>
    </div>
    <script>
      var tuile = $('div.cmd[data-cmd_id="#id#"]').closest('.eqLogic-widget');
      if ('#state#'==0) $(tuile).attr('style','display: none;');
      if ('#state#'==1) $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle_Perso/Poubelle_grise.png" height=100 width=100>');
      if ('#state#'==2)   $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle_Perso/Poubelle_jaune.png" height=100 width=100>');
    </script>
en ça :

Code : Tout sélectionner

<div style="padding:0;width:98px;min-height:90px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
	<div class="row">
		<div class="center-block col-xs-12 h5 cmdName" id="cmdName#id#" style="margin-top:0; font-size : 12px; #hideCmdName#;">#name_display#</div>
      <div class="center-block col-xs-12 iconCmd#uid#"></div>
	</div>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript"></script>
<!-- Ne Pas Supprimer -->
	<script>
		var srcImg = 'plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle_Perso/';
		var tuile = $('div.cmd[data-cmd_id="#id#"]').closest('.eqLogic-widget');
		jeedom.cmd.update['#id#'] = function(_options){
			$(".iconCmd#uid#").empty();
			if (_options.display_value == 0) {
				$(tuile).attr('style','display: none;');
			} else if (_options.display_value == 1) {
				$(".iconCmd#uid#").append('<img src="+srcImg +'Poubelle_grise.png" height=100 width=100/>');								
			} else if (_options.display_value == 2)  {
				$(".iconCmd#uid#").append('<img src="+srcImg +'Poubelle_jaune.png" height=100 width=100/>');
			}   
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>
vous parait OK.
J'ai testé sur ma béta, et cela me semblais bon, mais depuis, je n'arrive plus à faire ré-apparaître ma tuile même si mon virtuel passe > 0
J'ai l'impression (Peut etre fause) que ma commande :

Code : Tout sélectionner

$(tuile).attr('style','display: none;'); 
a masquée la tuile et qu'il me manque un commande pour la faire ré-apparaître.
EDITION:
A priori pas besoin de commande pour la ré-apparition (C'est mon virtuel qui à foiré :cry: ) Par contre le passage à 0 masque bien la tuile sans aucune action manuelle, alors que pour la faire revenir, je suis obligé d'actualiser la page.

Re: Information codage Widget 3.x

Publié : 25 mars 2019, 13:29
par Antoinekl1
cadavor a écrit :
25 mars 2019, 10:35
Antoinekl1 a écrit :
25 mars 2019, 07:32
Personne pour combler les trous ?
Quels trous?
les questions notés en NDA :-)

Re: Information codage Widget 3.x

Publié : 27 mars 2019, 20:32
par SBO
marktapage

Merci

Re: Information codage Widget 3.x

Publié : 29 mars 2019, 14:12
par cadavor
Claude69 a écrit :
25 mars 2019, 12:00
vous parait OK.
J'ai testé sur ma béta, et cela me semblais bon, mais depuis, je n'arrive plus à faire ré-apparaître ma tuile même si mon virtuel passe > 0
J'ai l'impression (Peut etre fause) que ma commande :

Code : Tout sélectionner

$(tuile).attr('style','display: none;'); 
a masquée la tuile et qu'il me manque un commande pour la faire ré-apparaître.
EDITION:
A priori pas besoin de commande pour la ré-apparition (C'est mon virtuel qui à foiré :cry: ) Par contre le passage à 0 masque bien la tuile sans aucune action manuelle, alors que pour la faire revenir, je suis obligé d'actualiser la page.
Essaye plutot ça :

Code : Tout sélectionner

<div style="padding:0;width:98px;min-height:90px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
	<div class="row">
		<div class="center-block col-xs-12 h5 cmdName" id="cmdName#id#" style="margin-top:0; font-size : 12px; #hideCmdName#;">#name_display#</div>
      <div class="center-block col-xs-12 iconCmd#uid#"></div>
	</div>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript"></script>
<!-- Ne Pas Supprimer -->
	<script>
		var srcImg = 'plugins/widget/core/template/dashboard/cmd.info.numeric.Poubelle_Perso/';
		jeedom.cmd.update['#id#'] = function(_options){
			$(".iconCmd#uid#").empty();
			if (_options.display_value == 0) {
				$('div.cmd[data-cmd_id="#id#"]').closest('.eqLogic-widget').hide();
			} else if (_options.display_value == 1) {
			        $('div.cmd[data-cmd_id="#id#"]').closest('.eqLogic-widget').show();
				$(".iconCmd#uid#").append('<img src="+srcImg +'Poubelle_grise.png" height=100 width=100/>');								
			} else if (_options.display_value == 2)  {
			        $('div.cmd[data-cmd_id="#id#"]').closest('.eqLogic-widget').show();
				$(".iconCmd#uid#").append('<img src="+srcImg +'Poubelle_jaune.png" height=100 width=100/>');
			}   
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Re: Information codage Widget 3.x

Publié : 29 mars 2019, 18:55
par Claude69
Merci Cavador. Je test ça au plus vite.

Re: Information codage Widget 3.x

Publié : 31 mars 2019, 00:51
par Theduck38
Merci pour le tuto, ça a vraiment éclairci le sujet !

Bon, je viens quand même de me prendre la tête pendant 4h sur un widget de type volet roulant... alors que la première modif était bonne ! C'est le Z-wave qui ne remontait plus les états "post mouvements" après la mise à jour en 3.3 :evil: :evil: :evil: Grrr!!!!!

Re: Information codage Widget 3.x

Publié : 04 mai 2019, 13:01
par lolo-95
Merci @Antoinekl1 pour les infos.
C'est beaucoup plus claire.
;)

Re: Information codage Widget 3.x

Publié : 13 juin 2019, 17:36
par Coben
Salut a tout les pros du code

J'eaaye desespérement d'obtenir quelque chose comme ca
Screenshot-2019-6-13 .png
Screenshot-2019-6-13 .png (195.25 Kio) Consulté 733 fois
J'ai essayé en partant du code d'un widget numerique, mais j'avoue que ca donne pas grand chose......
Il me faudrait juste un bout de code pour obtenir le cadre et l'effet d'ombre, apres je pense pouvoir me debrouiller pour les couleurs et le reste....

Merci d'avance!

Re: Information codage Widget 3.x

Publié : 13 juin 2019, 19:49
par winhex
pas sur :D

peut être 2,3 bricole à faire en plus
genre remplacer var valeur = "#state#";
enfin à voir si il s'actualise bien

viewtopic.php?f=24&t=41556#p676932

en param avancé color
entre chaque & le seuil et la couleur

Re: Information codage Widget 3.x

Publié : 14 juin 2019, 11:52
par Coben
Yes!
Nickel Merci winhex!

En ce qui concerne les paramètres avancés,
color = couleur du texte ou de la box? quel format?
le seuil ? c'est quoi?

Re: Information codage Widget 3.x

Publié : 14 juin 2019, 12:00
par Coben
ok j'avais pas regardé la capture d'ecran jusqu'au bout.....
par contre le paramètre color, c'est du chinois.......
je comprends mieux :
pas sur :D
!!!

y a t'il d'autre paramètres avancés?

Re: Information codage Widget 3.x

Publié : 14 juin 2019, 12:22
par Coben
Je pense avoir compris : (oui je sais il faut m'expliquer longtemps!)

la couleur change en fonction de la valeur numerique, code couleur en HEX

Top ton widget. Merci!

Re: Information codage Widget 3.x

Publié : 14 juin 2019, 13:26
par Antoinekl1
Bonjour

je le trouve pas le flatdesign dans les widget, il n'est pas en stable ?

Re: Information codage Widget 3.x

Publié : 14 juin 2019, 15:45
par winhex
il l'était mais à disparu avec la v3

Re: Information codage Widget 3.x

Publié : 14 juin 2019, 16:10
par Coben
J'abuse encore un peu :

J'ai modifié la taille de la box, mais pour l'ombre pas reussit...
Image

Serait-il possible d'implémenter dans les paramètres avancés la modification de la taille?

Re: Information codage Widget 3.x

Publié : 14 juin 2019, 16:30
par winhex
je suis resté +3ans avec donc jy touche plus
je suis passé à autre chose pour le numerique
mais tu peux modifier la taille en design
pour preuve (son petit frere info portail sans ombre)
ouvert =vert