Forum Communauté Jeedom

Forum sur Jeedom
https://www.jeedom.com/forum/

Explications sur le nouveau codage des widgets

https://www.jeedom.com/forum/viewtopic.php?f=29&t=44078

Page 1 sur 10

Explications sur le nouveau codage des widgets

Publié : 18 mars 2019, 10:42
par Antoinekl1
Bonjour à tous

Je recherche des infos sur le nouveau code pour les widgets de la 3.3

Le nouveau code contient :

Code : Tout sélectionner

		jeedom.cmd.update['#id#'] = function(_options){
			$(".iconCmd#uid#").empty();
			if (parseInt(_options.display_value) == 1) { ....
que contient le parseInt(_options.display_value) ?
est-ce l'équivalent du #state# ?

j'ai le widget suivant :

Code : Tout sélectionner

<div style="width:90px; min-height:80px;" class="cmd tooltips cmd-widget cursor container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#">
	<center>
        <span class='label label-info' style="font-size: 11px;">#state#</span><br>
        <span style="font-size: 2.5em" class="iconCmd#id#"></span>
	</center>
<!-- 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>
		$(".iconCmd#id#").empty();
		if ("#state#" == "Absent") {
			$('.iconCmd#id#').append('<i class="icon transport-car95"></i>');
		}
		if ("#state#" == "Présent") {
			$('.iconCmd#id#').append('<i class="icon maison-house112"></i>');
		}
		if ("#state#" == "Nuit") {
			$('.iconCmd#id#').append('<i class="icon nature-night2"></i>');
		}
     	if ("#state#" == "Nuit - Couchage") {
			$('.iconCmd#id#').append('<i class="icon maison-bed2"></i>');
		}
	</script>
</div>

je pensais le modifier comme cela :

Code : Tout sélectionner

<div style="width:90px; min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
	<center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span>
		<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>
<!-- 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){
			$(".iconCmd#uid#").empty();
			if (parseInt(_options.display_value) == "Absent") {
				$(".iconCmd#uid#").append("<i class='icon transport-car95'></i>");
			} 
			if (parseInt(_options.display_value) == "Présent") {
				$(".iconCmd#uid#").append("<i class='icon maison-house112'></i>");
			} 
			if (parseInt(_options.display_value) == "Nuit") {
				$(".iconCmd#uid#").append("<i class='icon nature-night2'></i>");
			} 
			if (parseInt(_options.display_value) == "Nuit - Couchage") {
				$(".iconCmd#uid#").append("<i class='icon maison-bed2'></i>");
			} 

			$('.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>
mais il n'affiche pas l'icone

si je remplace le parseInt(_options.display_value) par #state# ca ne fonctionne pas non plus

qqun à une idée ?

Re: Explications sur le nouveau codage des widgets

Publié : 18 mars 2019, 11:24
par Claude69
Hello
Tu es sur que le code que tu avais avant fonctionnait ?
C'est un widget binary, donc 0 ou 1 et tu test des valeurs "Absent", Présent" ...
Le ParseInt :
Convertit chaine en un nombre entier. Retourne le nombre si la conversion est possible et NaN si la conversion est impossible.
Attention, la fonction parseInt() ne contrôle pas l'ensemble de la chaîne mais utilise uniquement les premiers caractères valables pour la conversion.
Le paramètre optionnel base permet de définir la base de conversion. Par défaut, la base est 10, le système décimal.

Re: Explications sur le nouveau codage des widgets

Publié : 18 mars 2019, 11:33
par Antoinekl1
Claude69 a écrit : ↑
18 mars 2019, 11:24
 Hello
Tu es sur que le code que tu avais avant fonctionnait ?
C'est un widget binary, donc 0 ou 1 et tu test des valeurs "Absent", Présent" ...
Le ParseInt :
Convertit chaine en un nombre entier. Retourne le nombre si la conversion est possible et NaN si la conversion est impossible.
Attention, la fonction parseInt() ne contrôle pas l'ensemble de la chaîne mais utilise uniquement les premiers caractères valables pour la conversion.
Le paramètre optionnel base permet de définir la base de conversion. Par défaut, la base est 10, le système décimal.
Oui cela fonctionne, c'est vrais que le code est pas propre mais je suis pas sur cela est vraiment un incident

j'ai changé le data-subtype="binary" en data-subtype="other"

ok pour le parseInt(), mais c'est surtout le "_options.display_value" qui m'intrigue, il retourne la valeur de la commande ?

avec ce code, ca fonctionne, mais je sais pas si c'est propre comme codage

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#">
	<center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span>
		<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>
<!-- 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>
		if ("#state#" == "Absent") {
              $('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon transport-car95'></i>");
		} 
		if ("#state#" == "Présent") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon maison-house112'></i>");
		} 
		if ("#state#" == "Nuit") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon nature-night2'></i>");
		} 
		if ("#state#" == "Nuit - Couchage") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon maison-bed2'></i>");
		} 
		jeedom.cmd.update['#id#'] = function(_options){
			$(".iconCmd#uid#").empty();
			$('.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: Explications sur le nouveau codage des widgets

Publié : 18 mars 2019, 11:45
par Claude69
Je ne suis pas sur, j'y vais par tâtonnement, mais essaye :
_options.display_value

Re: Explications sur le nouveau codage des widgets

Publié : 18 mars 2019, 12:24
par Antoinekl1
j'ai essayé sans succès

et cette partie, elle sert à quoi ?

Code : Tout sélectionner

<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"0","version":"1","size":"2.5","icon1":"<i class='icon maison-house112'></i>","icon2":"<i class='icon jeedom-thermo-chaud'></i>","icon3":"<i class='icon loisir-beach4'>,"icon4":"<i class='icon maison-toilet1'></i>"}]]></script>
<!-- Ne Pas Supprimer -->

Re: Explications sur le nouveau codage des widgets

Publié : 18 mars 2019, 12:46
par Claude69
J'ai l'impression que dans ton dernier code, il manque des lignes. je ne vois pas

Code : Tout sélectionner

		jeedom.cmd.update['#id#'] = function(_options){
Je n'ai pas acces à mon Jeedom pour l'instant mais je verrais un truc comme 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#" data-eqLogic_id="#eqLogic_id#">
    <center>
        <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
        <span style="font-size: 3.5em;" class="iconCmd"></span>
    </center>
    <script>
      jeedom.cmd.update['#id#'] = function(_options){
        $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
        if (_options.display_value == 'Présent') {
            $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-pilote-eco"></i>');
        }else if (_options.display_value == 'Absent') {
           $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-pilote-off"></i>');
        }else if (_options.display_value == 'blabla') {
            $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-pilote-hg"></i>');
        }else if (_options.display_value == 'truc') {
            $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-pilote-conf"></i>');
        }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
En mettant évidemment tes images à toi

Pour info, j'ai refait paratiquement tous mes widgetes (Il me reste la température et l'humidité) en me basant sur :
https://github.com/jeedom/core/tree/bet ... /dashboard

Re: Explications sur le nouveau codage des widgets

Publié : 18 mars 2019, 14:46
par cadavor
Antoinekl1 a écrit : ↑
18 mars 2019, 11:33
 avec ce code, ca fonctionne, mais je sais pas si c'est propre comme codage

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#">
	<center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span>
		<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>
<!-- 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>
		if ("#state#" == "Absent") {
              $('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon transport-car95'></i>");
		} 
		if ("#state#" == "Présent") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon maison-house112'></i>");
		} 
		if ("#state#" == "Nuit") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon nature-night2'></i>");
		} 
		if ("#state#" == "Nuit - Couchage") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon maison-bed2'></i>");
		} 
		jeedom.cmd.update['#id#'] = function(_options){
			$(".iconCmd#uid#").empty();
			$('.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>
Cela doit fonctionner au chargement mais ensuite à la mise à jour de la valeur ton widget doit se retrouver bien vide...

Essaye plutot cela :

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#">
	<center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span>
		<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>
<!-- 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').append("<i class='icon transport-car95'></i>");
		   } 
		   else if (_options.display_value == "Présent") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon maison-house112'></i>");
		   } 
		   else if (_options.display_value == "Nuit") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon nature-night2'></i>");
		   } 
		   else if (_options.display_value == "Nuit - Couchage") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon maison-bed2'></i>");
		   } 
		   $('.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>
Pour l'explication, le core Jeedom appelle la fonction jeedom.cmd.update sur l'objet #id# à chaque mise à jour de la valeur associée.
On la déclare donc avec :
jeedom.cmd.update['#id#'] = function(_options){
La variable _options contient donc un objet comprenant les items "display_value", "valueDate", "collectDate", alertLevel" (entre autres)

Et elle est appelée à l'initialisation du widget par :
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

Re: Explications sur le nouveau codage des widgets

Publié : 18 mars 2019, 14:58
par Antoinekl1
Merci pour vos réponses, c'est plus claire
je regarde pour l'application à mon code

Re: Explications sur le nouveau codage des widgets

Publié : 18 mars 2019, 15:14
par Antoinekl1
cadavor a écrit : ↑
18 mars 2019, 14:46
Cela doit fonctionner au chargement mais ensuite à la mise à jour de la valeur ton widget doit se retrouver bien vide...

Essaye plutot cela :

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#">
	<center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span>
		<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>
<!-- 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').append("<i class='icon transport-car95'></i>");
		   } 
		   else if (_options.display_value == "Présent") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon maison-house112'></i>");
		   } 
		   else if (_options.display_value == "Nuit") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon nature-night2'></i>");
		   } 
		   else if (_options.display_value == "Nuit - Couchage") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append("<i class='icon maison-bed2'></i>");
		   } 
		   $('.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>
Pour l'explication, le core Jeedom appelle la fonction jeedom.cmd.update sur l'objet #id# à chaque mise à jour de la valeur associée.
On la déclare donc avec :
jeedom.cmd.update['#id#'] = function(_options){
La variable _options contient donc un objet comprenant les items "display_value", "valueDate", "collectDate", alertLevel" (entre autres)

Et elle est appelée à l'initialisation du widget par :
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
merci pour votre aide, ca marche

Re: Explications sur le nouveau codage des widgets

Publié : 19 mars 2019, 07:40
par Antoinekl1
Qqun sait me dire à quoi sert cette ligne ?
Dans quel cas elle est utilisée ?

<script class="createWidgetInfo"....

Re: Explications sur le nouveau codage des widgets

Publié : 19 mars 2019, 10:30
par snow51
Antoinekl1 a écrit : ↑
19 mars 2019, 07:40
 Qqun sait me dire à quoi sert cette ligne ?
Dans quel cas elle est utilisée ?

<script class="createWidgetInfo"....
Hello,

Cette ligne sert a l'utilitaire de création de widget donc elle n'est pas utile si tu as codé ton widget toi même sans passer par l'outil.

Re: Explications sur le nouveau codage des widgets

Publié : 19 mars 2019, 14:08
par Antoinekl1
snow51 a écrit :
Antoinekl1 a écrit : ↑
19 mars 2019, 07:40
 Qqun sait me dire à quoi sert cette ligne ?
Dans quel cas elle est utilisée ?

<script class="createWidgetInfo"....
Hello,

Cette ligne sert a l'utilitaire de création de widget donc elle n'est pas utile si tu as codé ton widget toi même sans passer par l'outil.
Ok merci

Donc ça peux se supprimer ?

Envoyé de mon CLT-L29 en utilisant Tapatalk

Re: Explications sur le nouveau codage des widgets

Publié : 19 mars 2019, 15:50
par bartounet
Bonjour.
Y aurait-il une bonne ame pour mettre à jour le widget de masterfion store_and_window qui combinait ouverture et % des volet

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#" title="#collectDate#">
    <center>
      <span style="font-size: 3.5em;" id="iconCmd#id#"></span>
    </center>
    <script>
      var PictureID;
      var State = parseFloat('#state#');
      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";
      }
      $('#iconCmd#id#').empty();
      $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Store_and_Window/Store_and_Window-'+PictureID+'.png" width="85%" height="85px" />');
    </script>
</div>
http://sarakha63-domotique.fr/combiner- ... et-jeedom/

Il ne se refresh plus depuis la 3.3.16

Re: Explications sur le nouveau codage des widgets

Publié : 19 mars 2019, 15:57
par Antoinekl1
le configuration de widget donne ce code

Code : Tout sélectionner


    	if(jeedom.cmd.normalizeName('#name#') == 'on'){
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.PriseDeCourant/PriseDeCourant_Circle_Off.png" height="80px" />');
		}else{
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.PriseDeCourant/PriseDeCourant_Circle_On.png" height="80px" />');
		}
		
	jeedom.cmd.update['#id#'] = function(_options){		
 		if(jeedom.cmd.normalizeName('#name#') == 'on'){	
		  if(parseInt(_options.display_value) >= 1 ) {
			  $('.cmd[data-cmd_uid=#uid#]').hide();
		  }else{
			  $('.cmd[data-cmd_uid=#uid#]').show();
		  }
		}else{
		  if(parseInt(_options.display_value) <= 0 ) {
				$('.cmd[data-cmd_uid=#uid#]').hide();
			}else{
				$('.cmd[data-cmd_uid=#uid#]').show();
			}
		}
	}
	jeedom.cmd.update['#id#']({display_value:'#state#'});
	
	$('.cmd[data-cmd_uid=#uid#] .iconCmd').on('click', function () {
		jeedom.cmd.execute({id: '#id#'});
	});
mais est-ce normal que la 1er partie ne soit pas dans le bloque jeedom.cmd.update['#id#'] = function(_options){ ?

Re: Explications sur le nouveau codage des widgets

Publié : 19 mars 2019, 16:04
par Antoinekl1
bartounet a écrit : ↑
19 mars 2019, 15:50
 Bonjour.
Y aurait-il une bonne ame pour mettre à jour le widget de masterfion store_and_window qui combinait ouverture et % des volet

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#" title="#collectDate#">
    <center>
      <span style="font-size: 3.5em;" id="iconCmd#id#"></span>
    </center>
    <script>
      var PictureID;
      var State = parseFloat('#state#');
      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";
      }
      $('#iconCmd#id#').empty();
      $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Store_and_Window/Store_and_Window-'+PictureID+'.png" width="85%" height="85px" />');
    </script>
</div>
http://sarakha63-domotique.fr/combiner- ... et-jeedom/

Il ne se refresh plus depuis la 3.3.16

a tester mais un truc du style

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){
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty(); 
			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').append('<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_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: Explications sur le nouveau codage des widgets

Publié : 19 mars 2019, 16:14
par Antoinekl1
Antoinekl1 a écrit : ↑
19 mars 2019, 15:57
 le configuration de widget donne ce code

Code : Tout sélectionner


    	if(jeedom.cmd.normalizeName('#name#') == 'on'){
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.PriseDeCourant/PriseDeCourant_Circle_Off.png" height="80px" />');
		}else{
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.PriseDeCourant/PriseDeCourant_Circle_On.png" height="80px" />');
		}
		
	jeedom.cmd.update['#id#'] = function(_options){		
 		if(jeedom.cmd.normalizeName('#name#') == 'on'){	
		  if(parseInt(_options.display_value) >= 1 ) {
			  $('.cmd[data-cmd_uid=#uid#]').hide();
		  }else{
			  $('.cmd[data-cmd_uid=#uid#]').show();
		  }
		}else{
		  if(parseInt(_options.display_value) <= 0 ) {
				$('.cmd[data-cmd_uid=#uid#]').hide();
			}else{
				$('.cmd[data-cmd_uid=#uid#]').show();
			}
		}
	}
	jeedom.cmd.update['#id#']({display_value:'#state#'});
	
	$('.cmd[data-cmd_uid=#uid#] .iconCmd').on('click', function () {
		jeedom.cmd.execute({id: '#id#'});
	});
mais est-ce normal que la 1er partie ne soit pas dans le bloque jeedom.cmd.update['#id#'] = function(_options){ ?

et dans la class, il faut mettre le #uid# ou pas ?

<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd#uid#"></span>
avec $('.iconCmd#uid#').append...

OU

<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd#"></span>
avec $('.cmd[data-cmd_uid=#uid#] .iconCmd').append...

Re: Explications sur le nouveau codage des widgets

Publié : 19 mars 2019, 16:17
par bartounet
Antoinekl1 a écrit : ↑
19 mars 2019, 16:04
bartounet a écrit : ↑
19 mars 2019, 15:50
 Bonjour.
Y aurait-il une bonne ame pour mettre à jour le widget de masterfion store_and_window qui combinait ouverture et % des volet

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#" title="#collectDate#">
    <center>
      <span style="font-size: 3.5em;" id="iconCmd#id#"></span>
    </center>
    <script>
      var PictureID;
      var State = parseFloat('#state#');
      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";
      }
      $('#iconCmd#id#').empty();
      $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Store_and_Window/Store_and_Window-'+PictureID+'.png" width="85%" height="85px" />');
    </script>
</div>
http://sarakha63-domotique.fr/combiner- ... et-jeedom/

Il ne se refresh plus depuis la 3.3.16

a tester mais un truc du style

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){
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty(); 
			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').append('<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_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 infiniment de te pencher sur mon problème

En effet ca marche beaucoup mieux.
Les volets descendent en se rafraichissement bien sans faire F5

Cela ma juste élargi les fenêtres, mais ce n'est pas trop grave

Par contre la valeur de % du volet lui ne se rafraichit pas sans faire F5

Mais c'est déjà beaucoup mieux

Image

Re: Explications sur le nouveau codage des widgets

Publié : 19 mars 2019, 16:27
par Antoinekl1
Antoinekl1 a écrit : ↑
19 mars 2019, 16:14
et dans la class, il faut mettre le #uid# ou pas ?

<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd#uid#"></span>
avec $('.iconCmd#uid#').append...

OU

<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd#"></span>
avec $('.cmd[data-cmd_uid=#uid#] .iconCmd').append...

Je constat qu'avec le 2eme code, je me retrouve avec des images multipliées lors du refresh et pas avec le 1er

donc j'aurais plutôt tendance à dire de privilégier le #uid# dans la class ?

Re: Explications sur le nouveau codage des widgets

Publié : 19 mars 2019, 16:40
par cadavor
Antoinekl1 a écrit : ↑
19 mars 2019, 16:27
Antoinekl1 a écrit : ↑
19 mars 2019, 16:14
et dans la class, il faut mettre le #uid# ou pas ?

<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd#uid#"></span>
avec $('.iconCmd#uid#').append...

OU

<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd#"></span>
avec $('.cmd[data-cmd_uid=#uid#] .iconCmd').append...

Je constat qu'avec le 2eme code, je me retrouve avec des images multipliées lors du refresh et pas avec le 1er

donc j'aurais plutôt tendance à dire de privilégier le #uid# dans la class ?
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( ...

Re: Explications sur le nouveau codage des widgets

Publié : 19 mars 2019, 16:44
par cadavor
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>
Le fuseau horaire est réglé sur UTC+02:00
Page 1 sur 10
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/