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
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
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>