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

Explications sur le nouveau codage des widgets

Réservé à l'utilisation et la création de widgets dans JEEDOM
Répondre
Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3665
Inscription : 23 mai 2015, 08:14

Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 18 mars 2019, 10:42

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 ?
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Avatar de l’utilisateur
Claude69
Actif
Messages : 2063
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 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.
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.29 ULTIMATE

Mon matériel ici

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

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 18 mars 2019, 11:33

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>
Dernière édition par Antoinekl1 le 18 mars 2019, 11:47, é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
Claude69
Actif
Messages : 2063
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 18 mars 2019, 11:45

Je ne suis pas sur, j'y vais par tâtonnement, mais essaye :
_options.display_value
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.29 ULTIMATE

Mon matériel ici

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

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 18 mars 2019, 12:24

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 -->
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Avatar de l’utilisateur
Claude69
Actif
Messages : 2063
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 18 mars 2019, 12:46

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
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.29 ULTIMATE

Mon matériel ici

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

Re: Explications sur le nouveau codage des widgets

Message par cadavor » 18 mars 2019, 14:46

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#'});
Dernière édition par cadavor le 18 mars 2019, 15:07, édité 1 fois.
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 : 3665
Inscription : 23 mai 2015, 08:14

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 18 mars 2019, 14:58

Merci pour vos réponses, c'est plus claire
je regarde pour l'application à mon code
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

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

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 18 mars 2019, 15:14

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
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

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

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 19 mars 2019, 07:40

Qqun sait me dire à quoi sert cette ligne ?
Dans quel cas elle est utilisée ?

<script class="createWidgetInfo"....
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

snow51
Timide
Messages : 77
Inscription : 09 juin 2015, 08:57

Re: Explications sur le nouveau codage des widgets

Message par snow51 » 19 mars 2019, 10:30

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.
RPI3 avec disque dur
MySensors : téléinfo, Température-humidité-ouverture
ESPEasy : Relais contact sec garage, Relais VMC
DIY Wifi : Capteur de consommation avec pinces ampèremétriques
Xiaomi : Roborock S50
BLEA : Mi Flora

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

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 19 mars 2019, 14:08

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

JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

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

Re: Explications sur le nouveau codage des widgets

Message par bartounet » 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
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
Antoinekl1
Actif
Messages : 3665
Inscription : 23 mai 2015, 08:14

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 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){ ?
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

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

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 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>
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

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

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 19 mars 2019, 16:14

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...
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

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

Re: Explications sur le nouveau codage des widgets

Message par bartounet » 19 mars 2019, 16:17

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
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
Antoinekl1
Actif
Messages : 3665
Inscription : 23 mai 2015, 08:14

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 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 ?
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 : 1216
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Explications sur le nouveau codage des widgets

Message par cadavor » 19 mars 2019, 16:40

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( ...
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 : 1216
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Explications sur le nouveau codage des widgets

Message par cadavor » 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>
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

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Franck54550 et 2 invités