Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Le groupe des Helpers est present pour vous aidez, n'hésitez pas à poser des questions ;)

Toute la communauté vous remercie

/!\ L’ancien forum passera en lecture seule en janvier 2020 (Si community a bien pris le relais) puis nous le fermerons définitivement en janvier 2021./!\
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

Explications sur le nouveau codage des widgets

Réservé à l'utilisation et la création de widgets dans JEEDOM
Avatar de l’utilisateur
bartounet
Actif
Messages : 2538
Inscription : 14 juil. 2016, 10:09

Re: Explications sur le nouveau codage des widgets

Message par bartounet » 19 mars 2019, 16:49

cadavor a écrit :
19 mars 2019, 16:44
bartounet a écrit :
19 mars 2019, 16:17
Par contre la valeur de % du volet lui ne se rafraichit pas sans faire F5
Essaye avec ça :

Code : Tout sélectionner

<div style="width:98px; min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
	<div class="row"><center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span><br />
		<span class='label label-info' style="font-size: 11px;">#state#</span><br>
		<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
      </center></div>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			var PictureID;     
			var State = parseFloat(_options.display_value);	
			if (State < 15){
		        	PictureID = "0";
		      } else if (State < 40){
		        	PictureID = "25";
		      } else if (State < 65){
	        		PictureID = "50";
		      } else if (State < 90){
		        	PictureID = "75";
		      } else if (State < 100){
			       	PictureID = "99";
		      } else if (State < 115){
		        	PictureID = "100";
		      } else if (State < 140){
		        	PictureID = "125";
		      } else if (State < 165){
		        	PictureID = "150";
		      } else if (State < 190){
		        	PictureID = "175";
		      } else if (State < 200){
		        	PictureID = "199";
		      } else {
		        	PictureID = "XXX";
		      }

            	     $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Store_and_Window/Store_and_Window-'+PictureID+'.png" width="85%" height="85px" />');
            	     $('.cmd[data-cmd_uid=#uid#] .label-info').html(State + '%');
		     $('.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>
Merci ca marche impec.

si je ne veux pas affiche le % il me suffit de commenter quoi ?
Autre question pourquoi le widget élargi l'image par rapport à l'origine ?
Jeedom à jour Debian 9
VM VMWARE ESXi 6.7 ( SSD)
Stick ZWave / FIBARO / Ikea Light / Yeelight / Google Home
Wifi Unifi / PFSENSE / Reverse Proxy DMZ SSL

Passionné de bidouillage informatique en tout genre
Mon blog : http://blog.info16.fr

drs
Actif
Messages : 1526
Inscription : 04 nov. 2016, 10:44

Re: Explications sur le nouveau codage des widgets

Message par drs » 19 mars 2019, 16:51

Bonjour

J'ai une petite question concernant cette version 3.3.18 et ses widgets. Lors du passage en 3.0, j'ai rencontré le même type de problème et j'ai remis à jour tous mes widgets. Est ce qu'ils vont fonctionner en 3.3.18 ou bien y'a-t-il du nouveau?

Avatar de l’utilisateur
bartounet
Actif
Messages : 2538
Inscription : 14 juil. 2016, 10:09

Re: Explications sur le nouveau codage des widgets

Message par bartounet » 19 mars 2019, 16:55

drs a écrit :
19 mars 2019, 16:51
Bonjour

J'ai une petite question concernant cette version 3.3.18 et ses widgets. Lors du passage en 3.0, j'ai rencontré le même type de problème et j'ai remis à jour tous mes widgets. Est ce qu'ils vont fonctionner en 3.3.18 ou bien y'a-t-il du nouveau?
Par forcément.
Beaucoup de widget fonctionnaient pour ma part en 3.2
Mais cela avait été annoncé.

par contre comment savoir quand il s'agit ou non d'un widget core officiel j'ai du mal
Jeedom à jour Debian 9
VM VMWARE ESXi 6.7 ( SSD)
Stick ZWave / FIBARO / Ikea Light / Yeelight / Google Home
Wifi Unifi / PFSENSE / Reverse Proxy DMZ SSL

Passionné de bidouillage informatique en tout genre
Mon blog : http://blog.info16.fr

Avatar de l’utilisateur
cadavor
Actif
Messages : 1257
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Explications sur le nouveau codage des widgets

Message par cadavor » 19 mars 2019, 17:03

bartounet a écrit :
19 mars 2019, 16:55
drs a écrit :
19 mars 2019, 16:51
Bonjour

J'ai une petite question concernant cette version 3.3.18 et ses widgets. Lors du passage en 3.0, j'ai rencontré le même type de problème et j'ai remis à jour tous mes widgets. Est ce qu'ils vont fonctionner en 3.3.18 ou bien y'a-t-il du nouveau?
Par forcément.
Beaucoup de widget fonctionnaient pour ma part en 3.2
Mais cela avait été annoncé.

par contre comment savoir quand il s'agit ou non d'un widget core officiel j'ai du mal
Normalement les widgets core ne sont pas listés dans le plugin Widget...
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3907
Inscription : 23 mai 2015, 08:14

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 19 mars 2019, 17:04

cadavor a écrit :
19 mars 2019, 16:40

Rien à voir. Il ne faut pas utiliser la fonction append sinon il "ajoute" à chaque mise à jour.
Donc soit ajouter .empty() devant soit $('.cmd[data-cmd_uid=#uid#] .iconCmd').empty().append( ...
soit remplacer append par html soit $('.cmd[data-cmd_uid=#uid#] .iconCmd').html( ...


je suis perdu :-)

le configurateur de widget donne ce code avec le append, j'ai donc mis ca partout

mais je comprends mieux avec l'exemple que tu as donnée ensuite

ca donnerait ca :

Code : Tout sélectionner

<div style="width:90px; min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
	<div class="row"><center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span><br />
		<span class='label label-info' style="font-size: 11px;">#state#</span><br>
		<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
      </center></div>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"0","version":"1","size":"2.5","icon1":"<i class='icon transport-car95'></i>","icon2":"<i class='icon maison-house112'></i>","icon3":"<i class='icon nature-night2'></i>","icon4":"<i class='icon maison-bed2'></i>"}]]></script>
<!-- Ne Pas Supprimer -->
		<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
		   	if (_options.display_value == "Absent") {
           			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html("<i class='icon transport-car95'></i>");
		   	} 
		   	if (_options.display_value == "Présent") {
				$$('.cmd[data-cmd_uid=#uid#] .iconCmd').html("<i class='icon maison-house112'></i>");
		   	} 
		   	if (_options.display_value == "Nuit") {
				$('.cmd[data-cmd_uid=#uid#] .iconCmd').html("<i class='icon nature-night2'></i>");
		   	} 
		   	if (_options.display_value == "Nuit - Couchage") {
				$$('.cmd[data-cmd_uid=#uid#] .iconCmd').html("<i class='icon maison-bed2'></i>");
		   	} 
		   	$('.cmd[data-cmd_uid=#uid#] .label-info').html(State);
		   	$('.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>
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Avatar de l’utilisateur
cadavor
Actif
Messages : 1257
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Explications sur le nouveau codage des widgets

Message par cadavor » 19 mars 2019, 17:11

bartounet a écrit :
19 mars 2019, 16:49
cadavor a écrit :
19 mars 2019, 16:44
bartounet a écrit :
19 mars 2019, 16:17
Par contre la valeur de % du volet lui ne se rafraichit pas sans faire F5
Essaye avec ça :

Code : Tout sélectionner

<div style="width:98px; min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
	<div class="row"><center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span><br />
		<span class='label label-info' style="font-size: 11px;">#state#</span><br>
		<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
      </center></div>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			var PictureID;     
			var State = parseFloat(_options.display_value);	
			if (State < 15){
		        	PictureID = "0";
		      } else if (State < 40){
		        	PictureID = "25";
		      } else if (State < 65){
	        		PictureID = "50";
		      } else if (State < 90){
		        	PictureID = "75";
		      } else if (State < 100){
			       	PictureID = "99";
		      } else if (State < 115){
		        	PictureID = "100";
		      } else if (State < 140){
		        	PictureID = "125";
		      } else if (State < 165){
		        	PictureID = "150";
		      } else if (State < 190){
		        	PictureID = "175";
		      } else if (State < 200){
		        	PictureID = "199";
		      } else {
		        	PictureID = "XXX";
		      }

            	     $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Store_and_Window/Store_and_Window-'+PictureID+'.png" width="85%" height="85px" />');
            	     $('.cmd[data-cmd_uid=#uid#] .label-info').html(State + '%');
		     $('.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>
Merci ca marche impec.

si je ne veux pas affiche le % il me suffit de commenter quoi ?
Autre question pourquoi le widget élargi l'image par rapport à l'origine ?
Je pourrais pas répondre pour la taille, peut être une classe qui vient en conflit...
Tu peux jouer avec la taille de la div principale (width:98px).
Fais des essais directement sur le dashboard, clic droit sur l'image de la fenêtre "Examiner l’élément" ou "Inspecter l’élément", ça ouvre la console développeur du navigateur, tu peux alors modifier à la volée les valeurs de style de tous les éléments.
Une fois la valeur trouvée, va dans le widget faire la modification et sauvegarder.

Pour cacher le pourcentage :

Code : Tout sélectionner

<div style="width:98px; min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
	<div class="row"><center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span><br />
		<span class='label label-info' style="font-size: 11px;">#state#</span><br>
		<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
      </center></div>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			var PictureID;     
			var State = parseFloat(_options.display_value);	
			if (State < 15){
		        	PictureID = "0";
		      } else if (State < 40){
		        	PictureID = "25";
		      } else if (State < 65){
	        		PictureID = "50";
		      } else if (State < 90){
		        	PictureID = "75";
		      } else if (State < 100){
			       	PictureID = "99";
		      } else if (State < 115){
		        	PictureID = "100";
		      } else if (State < 140){
		        	PictureID = "125";
		      } else if (State < 165){
		        	PictureID = "150";
		      } else if (State < 190){
		        	PictureID = "175";
		      } else if (State < 200){
		        	PictureID = "199";
		      } else {
		        	PictureID = "XXX";
		      }

            	     $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Store_and_Window/Store_and_Window-'+PictureID+'.png" width="85%" height="85px" />');
            	     $('.cmd[data-cmd_uid=#uid#] .label-info').hide().html(State + '%');
		     $('.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>
Sur la ligne

Code : Tout sélectionner

$('.cmd[data-cmd_uid=#uid#] .label-info').html(State + '%');
j'ai simplement ajouté la fonction hide()
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
bartounet
Actif
Messages : 2538
Inscription : 14 juil. 2016, 10:09

Re: Explications sur le nouveau codage des widgets

Message par bartounet » 19 mars 2019, 17:14

cadavor a écrit :
19 mars 2019, 17:11
bartounet a écrit :
19 mars 2019, 16:49
cadavor a écrit :
19 mars 2019, 16:44

Essaye avec ça :

Code : Tout sélectionner

<div style="width:98px; min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
	<div class="row"><center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span><br />
		<span class='label label-info' style="font-size: 11px;">#state#</span><br>
		<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
      </center></div>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			var PictureID;     
			var State = parseFloat(_options.display_value);	
			if (State < 15){
		        	PictureID = "0";
		      } else if (State < 40){
		        	PictureID = "25";
		      } else if (State < 65){
	        		PictureID = "50";
		      } else if (State < 90){
		        	PictureID = "75";
		      } else if (State < 100){
			       	PictureID = "99";
		      } else if (State < 115){
		        	PictureID = "100";
		      } else if (State < 140){
		        	PictureID = "125";
		      } else if (State < 165){
		        	PictureID = "150";
		      } else if (State < 190){
		        	PictureID = "175";
		      } else if (State < 200){
		        	PictureID = "199";
		      } else {
		        	PictureID = "XXX";
		      }

            	     $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Store_and_Window/Store_and_Window-'+PictureID+'.png" width="85%" height="85px" />');
            	     $('.cmd[data-cmd_uid=#uid#] .label-info').html(State + '%');
		     $('.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>
Merci ca marche impec.

si je ne veux pas affiche le % il me suffit de commenter quoi ?
Autre question pourquoi le widget élargi l'image par rapport à l'origine ?
Je pourrais pas répondre pour la taille, peut être une classe qui vient en conflit...
Tu peux jouer avec la taille de la div principale (width:98px).
Fais des essais directement sur le dashboard, clic droit sur l'image de la fenêtre "Examiner l’élément" ou "Inspecter l’élément", ça ouvre la console développeur du navigateur, tu peux alors modifier à la volée les valeurs de style de tous les éléments.
Une fois la valeur trouvée, va dans le widget faire la modification et sauvegarder.

Pour cacher le pourcentage :

Code : Tout sélectionner

<div style="width:98px; min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
	<div class="row"><center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span><br />
		<span class='label label-info' style="font-size: 11px;">#state#</span><br>
		<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
      </center></div>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			var PictureID;     
			var State = parseFloat(_options.display_value);	
			if (State < 15){
		        	PictureID = "0";
		      } else if (State < 40){
		        	PictureID = "25";
		      } else if (State < 65){
	        		PictureID = "50";
		      } else if (State < 90){
		        	PictureID = "75";
		      } else if (State < 100){
			       	PictureID = "99";
		      } else if (State < 115){
		        	PictureID = "100";
		      } else if (State < 140){
		        	PictureID = "125";
		      } else if (State < 165){
		        	PictureID = "150";
		      } else if (State < 190){
		        	PictureID = "175";
		      } else if (State < 200){
		        	PictureID = "199";
		      } else {
		        	PictureID = "XXX";
		      }

            	     $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Store_and_Window/Store_and_Window-'+PictureID+'.png" width="85%" height="85px" />');
            	     $('.cmd[data-cmd_uid=#uid#] .label-info').hide().html(State + '%');
		     $('.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>
Sur la ligne

Code : Tout sélectionner

$('.cmd[data-cmd_uid=#uid#] .label-info').html(State + '%');
j'ai simplement ajouté la fonction hide()
Merci.
Pour cacher j'avais fait ceci :

<!-- <span class='label label-info' style="font-size: 11px;">#state#</span><br> -->

mais ca revient peut etre au meme et je te fais plus confiance :)

Edit:

en fait ma modification me convenait mieux car en meme temps elle supprimait l'espace qui était alloué au %
La avec le hide, elle garde l'espace vide :)
Jeedom à jour Debian 9
VM VMWARE ESXi 6.7 ( SSD)
Stick ZWave / FIBARO / Ikea Light / Yeelight / Google Home
Wifi Unifi / PFSENSE / Reverse Proxy DMZ SSL

Passionné de bidouillage informatique en tout genre
Mon blog : http://blog.info16.fr

Avatar de l’utilisateur
cadavor
Actif
Messages : 1257
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Explications sur le nouveau codage des widgets

Message par cadavor » 19 mars 2019, 17:29

bartounet a écrit :
19 mars 2019, 17:14
cadavor a écrit :
19 mars 2019, 17:11
bartounet a écrit :
19 mars 2019, 16:49


Merci ca marche impec.

si je ne veux pas affiche le % il me suffit de commenter quoi ?
Autre question pourquoi le widget élargi l'image par rapport à l'origine ?
Je pourrais pas répondre pour la taille, peut être une classe qui vient en conflit...
Tu peux jouer avec la taille de la div principale (width:98px).
Fais des essais directement sur le dashboard, clic droit sur l'image de la fenêtre "Examiner l’élément" ou "Inspecter l’élément", ça ouvre la console développeur du navigateur, tu peux alors modifier à la volée les valeurs de style de tous les éléments.
Une fois la valeur trouvée, va dans le widget faire la modification et sauvegarder.

Pour cacher le pourcentage :

Code : Tout sélectionner

<div style="width:98px; min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
	<div class="row"><center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span><br />
		<span class='label label-info' style="font-size: 11px;">#state#</span><br>
		<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
      </center></div>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			var PictureID;     
			var State = parseFloat(_options.display_value);	
			if (State < 15){
		        	PictureID = "0";
		      } else if (State < 40){
		        	PictureID = "25";
		      } else if (State < 65){
	        		PictureID = "50";
		      } else if (State < 90){
		        	PictureID = "75";
		      } else if (State < 100){
			       	PictureID = "99";
		      } else if (State < 115){
		        	PictureID = "100";
		      } else if (State < 140){
		        	PictureID = "125";
		      } else if (State < 165){
		        	PictureID = "150";
		      } else if (State < 190){
		        	PictureID = "175";
		      } else if (State < 200){
		        	PictureID = "199";
		      } else {
		        	PictureID = "XXX";
		      }

            	     $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Store_and_Window/Store_and_Window-'+PictureID+'.png" width="85%" height="85px" />');
            	     $('.cmd[data-cmd_uid=#uid#] .label-info').hide().html(State + '%');
		     $('.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>
Sur la ligne

Code : Tout sélectionner

$('.cmd[data-cmd_uid=#uid#] .label-info').html(State + '%');
j'ai simplement ajouté la fonction hide()
Merci.
Pour cacher j'avais fait ceci :

<!-- <span class='label label-info' style="font-size: 11px;">#state#</span><br> -->

mais ca revient peut etre au meme et je te fais plus confiance :)

Edit:

en fait ma modification me convenait mieux car en meme temps elle supprimait l'espace qui était alloué au %
La avec le hide, elle garde l'espace vide :)
Tu as raison mais dans ce cas commentes la ligne

Code : Tout sélectionner

$('.cmd[data-cmd_uid=#uid#] .label-info').html(State + '%');
en ajoutant // devant car sinon il va y avoir des erreurs javascript dans la console.
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

drs
Actif
Messages : 1526
Inscription : 04 nov. 2016, 10:44

Re: Explications sur le nouveau codage des widgets

Message par drs » 19 mars 2019, 18:22

bartounet a écrit :
19 mars 2019, 16:55
drs a écrit :
19 mars 2019, 16:51
Bonjour

J'ai une petite question concernant cette version 3.3.18 et ses widgets. Lors du passage en 3.0, j'ai rencontré le même type de problème et j'ai remis à jour tous mes widgets. Est ce qu'ils vont fonctionner en 3.3.18 ou bien y'a-t-il du nouveau?
Par forcément.
Beaucoup de widget fonctionnaient pour ma part en 3.2
Mais cela avait été annoncé.

par contre comment savoir quand il s'agit ou non d'un widget core officiel j'ai du mal
Il va falloir donc les réécrire en 3.3?

Avatar de l’utilisateur
JAG
Actif
Messages : 585
Inscription : 21 mai 2016, 11:10

Re: Explications sur le nouveau codage des widgets

Message par JAG » 19 mars 2019, 19:50

Bonsoir à tous

Super ce mini tuto
Par contre, j'ai essayé de refaire un de mes widgets mais je bloque
voici le code

Code : Tout sélectionner

<div style="padding:0;width:110px;min-height:118px;" class="cmd #history# tooltips cmd-widget cursor container-fluid  " data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#"data-eqLogic_id="#eqLogic_id#" data-eqLogic_id="#eqLogic_id#">
	<center>
	<div class="row">
		<center>
		<div class="cmdName" id="cmdName#id#" style="font-weight: bold;font-size : 10px; #hideCmdName#;">#name_display# </div>
		<div style="font-size: 2.5em;margin-top:5px;" class="iconCmd"></div>
      		<div style="font-size: 2.5em;margin-top:-10px;" class="iconCmd_H"></div>
      		<div style="vertical-align: middle; text-align: center; margin-top: -32px; font-weight: bold; font-size: 14px; height: 18px;">#state##unite#</div>
      	<!-- Historique -->
      		<div style="#displayHistory# font-weight: bold;font-size : 10px;margin-top:0px;">
      			<span title="Min" class="tooltips">#minHistoryValue##unite#</span>|<span title="Moyenne" class="tooltips" >#averageHistoryValue##unite#</span>|<span title="Max" class="tooltips">#maxHistoryValue##unite#</span> <i class="#tendance#"></i>	
      		</div>
	</center>
	</div>
	</center>
 	<script>
 		jeedom.cmd.update['#id#'] = function(_options){
		// Options de personnalisation avec valeur par defaut
          // Paramètre "sizehw" : à déclarer en pixels - 80 maxi
              var srcImgHeight 	= (is_numeric('#sizeh#')) 	? parseFloat('#sizeh#') 	: 65;
              var srcImgWidth	= (is_numeric('#sizew#')) 	? parseFloat('#sizew#') 	: 30;
        // Paramétrage des images
              var srcImg 		= 'plugins/widget/core/template/dashboard/cmd.info.numeric.Batterie-EeDomus2/';

      // Update
			var PictureID;     
			var State = parseFloat(_options.display_value);	
			if (State = 0){
              PictureID = "0";
            } else if (State > 0 && State <=20){
              PictureID = "20";
            } else if (State > 20 && State <=40){
              PictureID = "40";
            } else if (State > 40 && State <=60){
              PictureID = "60";
            } else if (State > 60 && State <=80){
              PictureID = "80";
            } else if (State > 80 && State <=100){
              PictureID = "100";
            } else {
              PictureID = "error";
            }        
        
		// Update Value or img
          $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="	plugins/widget/core/template/dashboard/cmd.info.numeric.Batterie-EeDomus2/battery_'+PictureID+'.png" style="height:' + srcImgHeight +'px;width:' + srcImgWidth +'px;">'); 
          $('.cmd[data-cmd_uid=#uid#] .iconCmd_H').html('<img src="'+srcImg+'bottom_'+PictureID+'.png">'); 
          $('.cmd[data-cmd_uid=#uid#] .state').text(state);
          iconUpdate(_options.display_value);
          
		}     
   	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'}); 
	</script>
</div>
J'ai l'impression que l'image s'actualise mais j'ai toujours l'image "error"
J'ai peut être une erreur dans la fonction if

Code : Tout sélectionner

if (State = 0){
              PictureID = "0";
            } else if (State > 0 && State <=20){
              PictureID = "20";
            } else if (State > 20 && State <=40){
              PictureID = "40";
            } else if (State > 40 && State <=60){
              PictureID = "60";
            } else if (State > 60 && State <=80){
              PictureID = "80";
            } else if (State > 80 && State <=100){
              PictureID = "100";
            } else {
              PictureID = "error";
            }     
Je ne vois pas ou cela bloque
merci de votre aide
bonne soirée
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3907
Inscription : 23 mai 2015, 08:14

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 20 mars 2019, 12:21

bonjour à tous

ce code vous semble propre ?

Code : Tout sélectionner

<div style="width:180px; min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
    <center>
		<img class"iconCmd" border="2" width="180px" src="core/php/downloadFile.php?pathfile=/tmp/jeedom/ftpd/ftpd_records#state#" />
	</center>
<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();              
            		$('.cmd[data-cmd_uid=#uid#] .iconCmd').html(State);              
			$('.cmd[data-cmd_id=#id#]').attr('title','Image du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>  
</div>
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Avatar de l’utilisateur
cadavor
Actif
Messages : 1257
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Explications sur le nouveau codage des widgets

Message par cadavor » 21 mars 2019, 13:53

JAG a écrit :
19 mars 2019, 19:50
Bonsoir à tous

Super ce mini tuto
Par contre, j'ai essayé de refaire un de mes widgets mais je bloque
voici le code

Code : Tout sélectionner

<div style="padding:0;width:110px;min-height:118px;" class="cmd #history# tooltips cmd-widget cursor container-fluid  " data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#"data-eqLogic_id="#eqLogic_id#" data-eqLogic_id="#eqLogic_id#">
	<center>
	<div class="row">
		<center>
		<div class="cmdName" id="cmdName#id#" style="font-weight: bold;font-size : 10px; #hideCmdName#;">#name_display# </div>
		<div style="font-size: 2.5em;margin-top:5px;" class="iconCmd"></div>
      		<div style="font-size: 2.5em;margin-top:-10px;" class="iconCmd_H"></div>
      		<div style="vertical-align: middle; text-align: center; margin-top: -32px; font-weight: bold; font-size: 14px; height: 18px;">#state##unite#</div>
      	<!-- Historique -->
      		<div style="#displayHistory# font-weight: bold;font-size : 10px;margin-top:0px;">
      			<span title="Min" class="tooltips">#minHistoryValue##unite#</span>|<span title="Moyenne" class="tooltips" >#averageHistoryValue##unite#</span>|<span title="Max" class="tooltips">#maxHistoryValue##unite#</span> <i class="#tendance#"></i>	
      		</div>
	</center>
	</div>
	</center>
 	<script>
 		jeedom.cmd.update['#id#'] = function(_options){
		// Options de personnalisation avec valeur par defaut
          // Paramètre "sizehw" : à déclarer en pixels - 80 maxi
              var srcImgHeight 	= (is_numeric('#sizeh#')) 	? parseFloat('#sizeh#') 	: 65;
              var srcImgWidth	= (is_numeric('#sizew#')) 	? parseFloat('#sizew#') 	: 30;
        // Paramétrage des images
              var srcImg 		= 'plugins/widget/core/template/dashboard/cmd.info.numeric.Batterie-EeDomus2/';

      // Update
			var PictureID;     
			var State = parseFloat(_options.display_value);	
			if (State = 0){
              PictureID = "0";
            } else if (State > 0 && State <=20){
              PictureID = "20";
            } else if (State > 20 && State <=40){
              PictureID = "40";
            } else if (State > 40 && State <=60){
              PictureID = "60";
            } else if (State > 60 && State <=80){
              PictureID = "80";
            } else if (State > 80 && State <=100){
              PictureID = "100";
            } else {
              PictureID = "error";
            }        
        
		// Update Value or img
          $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="	plugins/widget/core/template/dashboard/cmd.info.numeric.Batterie-EeDomus2/battery_'+PictureID+'.png" style="height:' + srcImgHeight +'px;width:' + srcImgWidth +'px;">'); 
          $('.cmd[data-cmd_uid=#uid#] .iconCmd_H').html('<img src="'+srcImg+'bottom_'+PictureID+'.png">'); 
          $('.cmd[data-cmd_uid=#uid#] .state').text(state);
          iconUpdate(_options.display_value);
          
		}     
   	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'}); 
	</script>
</div>
J'ai l'impression que l'image s'actualise mais j'ai toujours l'image "error"
J'ai peut être une erreur dans la fonction if

Code : Tout sélectionner

if (State = 0){
              PictureID = "0";
            } else if (State > 0 && State <=20){
              PictureID = "20";
            } else if (State > 20 && State <=40){
              PictureID = "40";
            } else if (State > 40 && State <=60){
              PictureID = "60";
            } else if (State > 60 && State <=80){
              PictureID = "80";
            } else if (State > 80 && State <=100){
              PictureID = "100";
            } else {
              PictureID = "error";
            }     
Je ne vois pas ou cela bloque
merci de votre aide
bonne soirée
Je vois plusieurs probleme annexe que je te corrige ci-dessous et j'ai rajouté des console.log pour que tu puisse faire le diagnostique :
(il te manque la ligne pour mettre à jour le title du div principale pour avoir les date de collecte et de valeur)

Code : Tout sélectionner

<div style="padding:0;width:110px;min-height:118px;" class="cmd #history# tooltips cmd-widget cursor container-fluid  " data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-eqLogic_id="#eqLogic_id#">
	<center>
	<div class="row">
		<center>
		<div class="cmdName" id="cmdName#id#" style="font-weight: bold;font-size : 10px; #hideCmdName#;">#name_display# </div>
		<div style="font-size: 2.5em;margin-top:5px;" class="iconCmd"></div>
      		<div style="font-size: 2.5em;margin-top:-10px;" class="iconCmd_H"></div>
      		<div class='state' style="vertical-align: middle; text-align: center; margin-top: -32px; font-weight: bold; font-size: 14px; height: 18px;">#state##unite#</div>
      	<!-- Historique -->
      		<div style="#displayHistory# font-weight: bold;font-size : 10px;margin-top:0px;">
      			<span title="Min" class="tooltips">#minHistoryValue##unite#</span>|<span title="Moyenne" class="tooltips" >#averageHistoryValue##unite#</span>|<span title="Max" class="tooltips">#maxHistoryValue##unite#</span> <i class="#tendance#"></i>	
      		</div>
	</center>
	</div>
	</center>
 	<script>
 		jeedom.cmd.update['#id#'] = function(_options){
		// Options de personnalisation avec valeur par defaut
          // Paramètre "sizehw" : à déclarer en pixels - 80 maxi
              var srcImgHeight 	= (is_numeric('#sizeh#')) 	? parseFloat('#sizeh#') 	: 65;
              var srcImgWidth	= (is_numeric('#sizew#')) 	? parseFloat('#sizew#') 	: 30;
        // Paramétrage des images
              var srcImg 		= 'plugins/widget/core/template/dashboard/cmd.info.numeric.Batterie-EeDomus2/';

      // Update
			var PictureID;     
console.log("Debug #name# : value = ' + _options.display_value);
			var State = parseFloat(_options.display_value);	
console.log("Debug #name# : State= ' + State);
			if (State = 0){
              PictureID = "0";
            } else if (State > 0 && State <=20){
              PictureID = "20";
            } else if (State > 20 && State <=40){
              PictureID = "40";
            } else if (State > 40 && State <=60){
              PictureID = "60";
            } else if (State > 60 && State <=80){
              PictureID = "80";
            } else if (State > 80 && State <=100){
              PictureID = "100";
            } else {
              PictureID = "error";
            }        
console.log("Debug #name# : PictureID= ' + PictureID);
        
		// Update Value or img
          $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Batterie-EeDomus2/battery_'+PictureID+'.png" style="height:' + srcImgHeight +'px;width:' + srcImgWidth +'px;">'); 
          $('.cmd[data-cmd_uid=#uid#] .iconCmd_H').html('<img src="'+srcImg+'bottom_'+PictureID+'.png">'); 
          $('.cmd[data-cmd_uid=#uid#] .state').html(State + '#unite#');
		}     
   	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'}); 
	</script>
</div>
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
cadavor
Actif
Messages : 1257
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Explications sur le nouveau codage des widgets

Message par cadavor » 21 mars 2019, 14:06

Antoinekl1 a écrit :
20 mars 2019, 12:21
bonjour à tous

ce code vous semble propre ?

Code : Tout sélectionner

<div style="width:180px; min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
    <center>
		<img class"iconCmd" border="2" width="180px" src="core/php/downloadFile.php?pathfile=/tmp/jeedom/ftpd/ftpd_records#state#" />
	</center>
<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();              
            		$('.cmd[data-cmd_uid=#uid#] .iconCmd').html(State);
			$('.cmd[data-cmd_id=#id#]').attr('title','Image du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>  
</div>
Non :
La variable State n'existe pas.
Ton code ne met pas à jour l'image
La commande empty est inutile puisque tu exécutes la commande html ensuite (qui a pour effet de remplacer le contenu de l’élément)

Essayes ça :

Code : Tout sélectionner

<div style="width:180px; min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
    <center>
		<img class"iconCmd" border="2" width="180px" src="core/php/downloadFile.php?pathfile=/tmp/jeedom/ftpd/ftpd_records#state#" />
	</center>
<script>
		jeedom.cmd.update['#id#'] = function(_options){
            		$('.cmd[data-cmd_uid=#uid#] .iconCmd').attr('src', "core/php/downloadFile.php?pathfile=/tmp/jeedom/ftpd/ftpd_records" + _options.display_value);
			$('.cmd[data-cmd_id=#id#]').attr('title','Image du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>  
</div>
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3907
Inscription : 23 mai 2015, 08:14

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 21 mars 2019, 16:17

cadavor a écrit :
21 mars 2019, 14:06
Non :
La variable State n'existe pas.
Ton code ne met pas à jour l'image
La commande empty est inutile puisque tu exécutes la commande html ensuite (qui a pour effet de remplacer le contenu de l’élément)

Essayes ça :

Code : Tout sélectionner

<div style="width:180px; min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
    <center>
		<img class"iconCmd" border="2" width="180px" src="core/php/downloadFile.php?pathfile=/tmp/jeedom/ftpd/ftpd_records#state#" />
	</center>
<script>
		jeedom.cmd.update['#id#'] = function(_options){
            		$('.cmd[data-cmd_uid=#uid#] .iconCmd').attr('src', "core/php/downloadFile.php?pathfile=/tmp/jeedom/ftpd/ftpd_records" + _options.display_value);
			$('.cmd[data-cmd_id=#id#]').attr('title','Image du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>  
</div>
Merci pour ton aide et tes réponses Cadavor

ok, ton code marche bien

j'aimerais comprendre le fonctionnement

La balise HTML IMG se suffit à elle même pour afficher l'image

la fonction et la ligne qui change les attribues (.attr) en repoussant l'image, sert à quoi en fait ? à mettre à jour juste cette partie sans devoir rafraîchir tout le code ?
Dernière édition par Antoinekl1 le 21 mars 2019, 16:45, édité 1 fois.
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Avatar de l’utilisateur
cadavor
Actif
Messages : 1257
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Explications sur le nouveau codage des widgets

Message par cadavor » 21 mars 2019, 16:27

Antoinekl1 a écrit :
21 mars 2019, 16:17
cadavor a écrit :
21 mars 2019, 14:06
Non :
La variable State n'existe pas.
Ton code ne met pas à jour l'image
La commande empty est inutile puisque tu exécutes la commande html ensuite (qui a pour effet de remplacer le contenu de l’élément)

Essayes ça :

Code : Tout sélectionner

<div style="width:180px; min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
    <center>
		<img class"iconCmd" border="2" width="180px" src="core/php/downloadFile.php?pathfile=/tmp/jeedom/ftpd/ftpd_records#state#" />
	</center>
<script>
		jeedom.cmd.update['#id#'] = function(_options){
            		$('.cmd[data-cmd_uid=#uid#] .iconCmd').attr('src', "core/php/downloadFile.php?pathfile=/tmp/jeedom/ftpd/ftpd_records" + _options.display_value);
			$('.cmd[data-cmd_id=#id#]').attr('title','Image du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>  
</div>
Merci pour ton aide et tes réponses Cadavor

ok, ton code marche bien

j'aimerais comprendre le fonctionnement

La balise HTML IMG se suffit à elle même pour afficher l'image

la fonction et la ligne qui change les attribues (.attr) en repoussant l'image, sert à quoi en fait ? à mettre à jour juste cette partie sans devoir rafraîchir tout le code ?
Oui, ça met à jour le chemin de l'image à afficher.
Les autres méthodes comme html() ou append() servent a écrire du code html complet pour modifier le contenu d'un conteneur (div, span par exemple). La balise img n'est pas un conteneur (pas de fermeture de balise </img>)

Par contre j'ai pas fait attention mais l'attribut border n'existe plus, il faudrait remplacer par

Code : Tout sélectionner

<img class"iconCmd" style="border:2px solid black;width:180px" src="core/php/downloadFile.php?pathfile=/tmp/jeedom/ftpd/ftpd_records#state#" />
Si tu souhaites conserver la bordure autour de l'image affichée
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3907
Inscription : 23 mai 2015, 08:14

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 21 mars 2019, 16:52

cadavor a écrit :
21 mars 2019, 16:27
Oui, ça met à jour le chemin de l'image à afficher.
Les autres méthodes comme html() ou append() servent a écrire du code html complet pour modifier le contenu d'un conteneur (div, span par exemple). La balise img n'est pas un conteneur (pas de fermeture de balise </img>)
c'est plus claire merci

et la commande : $('.cmd[data-cmd_uid=#uid#] .iconCmd').empty(); ou parfois le .empty se trouve avant un .html ?

si je comprends bien le principe, avec ce code

Code : Tout sélectionner

<div style="width:90px; min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
	<div class="row"><center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span><br />
		<span class='label label-info' style="font-size: 11px;">#state#</span><br>
		<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
      </center></div>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"0","version":"1","size":"2.5","icon1":"<i class='icon jeedom-feu'></i>","icon2":"<i class='icon jeedom-off'></i>","icon3":"<i class='icon loisir-beach4'></i>","icon4":"<i class='icon transport-car95'></i>","icon5":"<i class='icon techno-fingerprint41'></i>","icon6":"<i class='icon divers-thermometer31',"icon7":"<i class='icon maison-toilet1'></i>"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
	jeedom.cmd.update['#id#'] = function(_options){
		$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();      
		if (_options.display_value == "On") {
              		$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='iicon jeedom-feu'></i>");
		} 
		if (_options.display_value == "Off") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon jeedom-off'></i>");
		} 
		if (_options.display_value == "Vacances") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon loisir-beach4'></i>");
		} 
		if (_options.display_value == "Absent") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon transport-car95'></i>");
		} 
		if (_options.display_value == "Manuel") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon techno-fingerprint41'></i>");
		} 
		if (_options.display_value == "Consigne-1") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon divers-thermometer31'></i>");
		} 
		if (_options.display_value == "PresenForce") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon maison-toilet1'></i>");
		} 
        $('.cmd[data-cmd_uid=#uid#] .label-info').html(State);      
		$('.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>

le "$('.cmd[data-cmd_uid=#uid#] .label-info').html(State);" va mettre à jour la valeur de la ligne "<span class='label label-info' style="font-size: 11px;">#state#</span>"

les append "$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon maison-toilet1'></i>");" vont mettre le bon code pour afficher l'icone dans la ligne "<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>"

et pour le #name_display#, pas la peine de le mettre à jour car il ne change pas

c'est bien ca ?
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Avatar de l’utilisateur
cadavor
Actif
Messages : 1257
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Explications sur le nouveau codage des widgets

Message par cadavor » 21 mars 2019, 17:09

Antoinekl1 a écrit :
21 mars 2019, 16:52
cadavor a écrit :
21 mars 2019, 16:27
Oui, ça met à jour le chemin de l'image à afficher.
Les autres méthodes comme html() ou append() servent a écrire du code html complet pour modifier le contenu d'un conteneur (div, span par exemple). La balise img n'est pas un conteneur (pas de fermeture de balise </img>)
c'est plus claire merci

et la commande : $('.cmd[data-cmd_uid=#uid#] .iconCmd').empty(); ou parfois le .empty se trouve avant un .html ?

si je comprends bien le principe, avec ce code

Code : Tout sélectionner

<div style="width:90px; min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
	<div class="row"><center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span><br />
		<span class='label label-info' style="font-size: 11px;">#state#</span><br>
		<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
      </center></div>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"0","version":"1","size":"2.5","icon1":"<i class='icon jeedom-feu'></i>","icon2":"<i class='icon jeedom-off'></i>","icon3":"<i class='icon loisir-beach4'></i>","icon4":"<i class='icon transport-car95'></i>","icon5":"<i class='icon techno-fingerprint41'></i>","icon6":"<i class='icon divers-thermometer31',"icon7":"<i class='icon maison-toilet1'></i>"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
	jeedom.cmd.update['#id#'] = function(_options){
		$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();      
		if (_options.display_value == "On") {
              		$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='iicon jeedom-feu'></i>");
		} 
		if (_options.display_value == "Off") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon jeedom-off'></i>");
		} 
		if (_options.display_value == "Vacances") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon loisir-beach4'></i>");
		} 
		if (_options.display_value == "Absent") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon transport-car95'></i>");
		} 
		if (_options.display_value == "Manuel") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon techno-fingerprint41'></i>");
		} 
		if (_options.display_value == "Consigne-1") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon divers-thermometer31'></i>");
		} 
		if (_options.display_value == "PresenForce") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon maison-toilet1'></i>");
		} 
        $('.cmd[data-cmd_uid=#uid#] .label-info').html(State);      
		$('.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>
le "$('.cmd[data-cmd_uid=#uid#] .label-info').html(State);" va mettre à jour la valeur de la ligne "<span class='label label-info' style="font-size: 11px;">#state#</span>"
Techniquement oui, ca va mettre à jour le contenu du conteneur span dont la classe est .label-info.
Sauf que la variable State n'existe pas! Il faut remplacer dans le code par "_options.display_value" si tu veux écrire la valeur reçue.
Antoinekl1 a écrit :
21 mars 2019, 16:52
les append "$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon maison-toilet1'></i>");" vont mettre le bon code pour afficher l'icone dans la ligne "<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>"
Pareil mise à jour du contenu du conteneur span dans la classe est .iconCmd.
On pourrait remplacer les append() par html() le résultat serait le même.
Antoinekl1 a écrit :
21 mars 2019, 16:52
et pour le #name_display#, pas la peine de le mettre à jour car il ne change pas
Tout à fait, tout comme #unite# utilisé dans certains widget.
Car lors d'un changement de nom ou d'unité, il faut sauvegarder la commande ce qui a pour effet de mettre à jour le widget automatiquement (comme un F5)

Par contre voici un code plus propre et corrigé :

Code : Tout sélectionner

<div style="width:90px; min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
	<div class="row"><center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span><br />
		<span class='label label-info' style="font-size: 11px;">#state#</span><br>
		<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
      </center></div>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"0","version":"1","size":"2.5","icon1":"<i class='icon jeedom-feu'></i>","icon2":"<i class='icon jeedom-off'></i>","icon3":"<i class='icon loisir-beach4'></i>","icon4":"<i class='icon transport-car95'></i>","icon5":"<i class='icon techno-fingerprint41'></i>","icon6":"<i class='icon divers-thermometer31',"icon7":"<i class='icon maison-toilet1'></i>"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
	jeedom.cmd.update['#id#'] = function(_options){
		$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();      
		if (_options.display_value == "On") {
              		$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon jeedom-feu'></i>");
		} 
		else if (_options.display_value == "Off") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon jeedom-off'></i>");
		} 
		else if (_options.display_value == "Vacances") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon loisir-beach4'></i>");
		} 
		else if (_options.display_value == "Absent") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon transport-car95'></i>");
		} 
		else if (_options.display_value == "Manuel") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon techno-fingerprint41'></i>");
		} 
		else if (_options.display_value == "Consigne-1") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon divers-thermometer31'></i>");
		} 
		else if (_options.display_value == "PresenForce") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon maison-toilet1'></i>");
		} 
        	$('.cmd[data-cmd_uid=#uid#] .label-info').html(_options.display_value);      
		$('.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>
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3907
Inscription : 23 mai 2015, 08:14

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 21 mars 2019, 17:37

Super merci @cadavor, je devrais pouvoir m'en sortir avec ça et si je suis motivé j'essaierai de faire une petit doc avec toutes ces infos car franchement cela manque , merci pour ton temps et tes explications
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Avatar de l’utilisateur
JAG
Actif
Messages : 585
Inscription : 21 mai 2016, 11:10

Re: Explications sur le nouveau codage des widgets

Message par JAG » 21 mars 2019, 20:50

Salut
Merci Cadavor pour ta correction, il manquait un signe "=" dans le if, j'ai mis mes widgets a jour sur le market

merci de ton aide
Bonne soirée
cadavor a écrit :
21 mars 2019, 13:53
JAG a écrit :
19 mars 2019, 19:50
Bonsoir à tous

Super ce mini tuto
Par contre, j'ai essayé de refaire un de mes widgets mais je bloque
voici le code

Code : Tout sélectionner

<div style="padding:0;width:110px;min-height:118px;" class="cmd #history# tooltips cmd-widget cursor container-fluid  " data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#"data-eqLogic_id="#eqLogic_id#" data-eqLogic_id="#eqLogic_id#">
	<center>
	<div class="row">
		<center>
		<div class="cmdName" id="cmdName#id#" style="font-weight: bold;font-size : 10px; #hideCmdName#;">#name_display# </div>
		<div style="font-size: 2.5em;margin-top:5px;" class="iconCmd"></div>
      		<div style="font-size: 2.5em;margin-top:-10px;" class="iconCmd_H"></div>
      		<div style="vertical-align: middle; text-align: center; margin-top: -32px; font-weight: bold; font-size: 14px; height: 18px;">#state##unite#</div>
      	<!-- Historique -->
      		<div style="#displayHistory# font-weight: bold;font-size : 10px;margin-top:0px;">
      			<span title="Min" class="tooltips">#minHistoryValue##unite#</span>|<span title="Moyenne" class="tooltips" >#averageHistoryValue##unite#</span>|<span title="Max" class="tooltips">#maxHistoryValue##unite#</span> <i class="#tendance#"></i>	
      		</div>
	</center>
	</div>
	</center>
 	<script>
 		jeedom.cmd.update['#id#'] = function(_options){
		// Options de personnalisation avec valeur par defaut
          // Paramètre "sizehw" : à déclarer en pixels - 80 maxi
              var srcImgHeight 	= (is_numeric('#sizeh#')) 	? parseFloat('#sizeh#') 	: 65;
              var srcImgWidth	= (is_numeric('#sizew#')) 	? parseFloat('#sizew#') 	: 30;
        // Paramétrage des images
              var srcImg 		= 'plugins/widget/core/template/dashboard/cmd.info.numeric.Batterie-EeDomus2/';

      // Update
			var PictureID;     
			var State = parseFloat(_options.display_value);	
			if (State = 0){
              PictureID = "0";
            } else if (State > 0 && State <=20){
              PictureID = "20";
            } else if (State > 20 && State <=40){
              PictureID = "40";
            } else if (State > 40 && State <=60){
              PictureID = "60";
            } else if (State > 60 && State <=80){
              PictureID = "80";
            } else if (State > 80 && State <=100){
              PictureID = "100";
            } else {
              PictureID = "error";
            }        
        
		// Update Value or img
          $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="	plugins/widget/core/template/dashboard/cmd.info.numeric.Batterie-EeDomus2/battery_'+PictureID+'.png" style="height:' + srcImgHeight +'px;width:' + srcImgWidth +'px;">'); 
          $('.cmd[data-cmd_uid=#uid#] .iconCmd_H').html('<img src="'+srcImg+'bottom_'+PictureID+'.png">'); 
          $('.cmd[data-cmd_uid=#uid#] .state').text(state);
          iconUpdate(_options.display_value);
          
		}     
   	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'}); 
	</script>
</div>
J'ai l'impression que l'image s'actualise mais j'ai toujours l'image "error"
J'ai peut être une erreur dans la fonction if

Code : Tout sélectionner

if (State = 0){
              PictureID = "0";
            } else if (State > 0 && State <=20){
              PictureID = "20";
            } else if (State > 20 && State <=40){
              PictureID = "40";
            } else if (State > 40 && State <=60){
              PictureID = "60";
            } else if (State > 60 && State <=80){
              PictureID = "80";
            } else if (State > 80 && State <=100){
              PictureID = "100";
            } else {
              PictureID = "error";
            }     
Je ne vois pas ou cela bloque
merci de votre aide
bonne soirée
Je vois plusieurs probleme annexe que je te corrige ci-dessous et j'ai rajouté des console.log pour que tu puisse faire le diagnostique :
(il te manque la ligne pour mettre à jour le title du div principale pour avoir les date de collecte et de valeur)

Code : Tout sélectionner

<div style="padding:0;width:110px;min-height:118px;" class="cmd #history# tooltips cmd-widget cursor container-fluid  " data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-eqLogic_id="#eqLogic_id#">
	<center>
	<div class="row">
		<center>
		<div class="cmdName" id="cmdName#id#" style="font-weight: bold;font-size : 10px; #hideCmdName#;">#name_display# </div>
		<div style="font-size: 2.5em;margin-top:5px;" class="iconCmd"></div>
      		<div style="font-size: 2.5em;margin-top:-10px;" class="iconCmd_H"></div>
      		<div class='state' style="vertical-align: middle; text-align: center; margin-top: -32px; font-weight: bold; font-size: 14px; height: 18px;">#state##unite#</div>
      	<!-- Historique -->
      		<div style="#displayHistory# font-weight: bold;font-size : 10px;margin-top:0px;">
      			<span title="Min" class="tooltips">#minHistoryValue##unite#</span>|<span title="Moyenne" class="tooltips" >#averageHistoryValue##unite#</span>|<span title="Max" class="tooltips">#maxHistoryValue##unite#</span> <i class="#tendance#"></i>	
      		</div>
	</center>
	</div>
	</center>
 	<script>
 		jeedom.cmd.update['#id#'] = function(_options){
		// Options de personnalisation avec valeur par defaut
          // Paramètre "sizehw" : à déclarer en pixels - 80 maxi
              var srcImgHeight 	= (is_numeric('#sizeh#')) 	? parseFloat('#sizeh#') 	: 65;
              var srcImgWidth	= (is_numeric('#sizew#')) 	? parseFloat('#sizew#') 	: 30;
        // Paramétrage des images
              var srcImg 		= 'plugins/widget/core/template/dashboard/cmd.info.numeric.Batterie-EeDomus2/';

      // Update
			var PictureID;     
console.log("Debug #name# : value = ' + _options.display_value);
			var State = parseFloat(_options.display_value);	
console.log("Debug #name# : State= ' + State);
			if (State = 0){
              PictureID = "0";
            } else if (State > 0 && State <=20){
              PictureID = "20";
            } else if (State > 20 && State <=40){
              PictureID = "40";
            } else if (State > 40 && State <=60){
              PictureID = "60";
            } else if (State > 60 && State <=80){
              PictureID = "80";
            } else if (State > 80 && State <=100){
              PictureID = "100";
            } else {
              PictureID = "error";
            }        
console.log("Debug #name# : PictureID= ' + PictureID);
        
		// Update Value or img
          $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Batterie-EeDomus2/battery_'+PictureID+'.png" style="height:' + srcImgHeight +'px;width:' + srcImgWidth +'px;">'); 
          $('.cmd[data-cmd_uid=#uid#] .iconCmd_H').html('<img src="'+srcImg+'bottom_'+PictureID+'.png">'); 
          $('.cmd[data-cmd_uid=#uid#] .state').html(State + '#unite#');
		}     
   	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'}); 
	</script>
</div>
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3907
Inscription : 23 mai 2015, 08:14

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 21 mars 2019, 22:16

J'ai un cas un peu bizarre
J'ai un widget qui fonctionne bien sur une commande info qui se met à jour par une commande action de type défaut, un simple on off qui envoi 1 ou 0

Ce même widget mis sur une commande info mis à jour par une commande action de type message via un scenario lancer par un bouton sur la vignette ne se met pas à jour lors de l'appui sur le bouton, je dois forcer le refresh pour que la commande affiche la nouvelle valeur.

Une idée ?

EDIT : prb corrigé avec la ligne ('.cmd[data-cmd_uid=#uid#] .label-info').html(_options.display_value);

merci @Cadavor
Dernière édition par Antoinekl1 le 22 mars 2019, 10:41, édité 1 fois.
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité