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 3 sur 10

Re: Explications sur le nouveau codage des widgets

Publié : 21 mars 2019, 22:31
par domoggvad
Bonjour les gars,
si vous avez un widget qui fonctionne en v3.3.x, vous pouvez mettre le lien ici avec un visuel ça serait bien
merci
viewtopic.php?f=29&t=44183

Re: Explications sur le nouveau codage des widgets

Publié : 21 mars 2019, 23:14
par Theduck38
Antoinekl1 a écrit : ↑
21 mars 2019, 22:16
 J'ai un cas un peu bizarre
J'ai un widget qui fonctionne bien sur une commande info qui se met à jour par une commande action de type défaut, un simple on off qui envoi 1 ou 0

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

Une idée ?
Hello,

Je ne sais pas si c'est ton cas, mais pour les commandes d'action, il faut se méfier grandement de la fonction jeedom.cmd.normalizeName('#name#') == 'on' car si ta commande contient 'on' dans son nom (comme "balcon" ou "salon") ça met la grouille dans la logique.

Re: Explications sur le nouveau codage des widgets

Publié : 22 mars 2019, 07:46
par Antoinekl1
Theduck38 a écrit : ↑
21 mars 2019, 23:14
Hello,

Je ne sais pas si c'est ton cas, mais pour les commandes d'action, il faut se méfier grandement de la fonction jeedom.cmd.normalizeName('#name#') == 'on' car si ta commande contient 'on' dans son nom (comme "balcon" ou "salon") ça met la grouille dans la logique.
Merci, c'est bon savoir mais dans mon cas, pas de "on"

Re: Explications sur le nouveau codage des widgets

Publié : 22 mars 2019, 09:06
par Antoinekl1
Question subsidiaire

quelle différence entre

$('.cmd[data-cmd_id=#id#]

et

$('.cmd[data-cmd_uid=#uid#]

et que fait le empty() devant une commande .html(_options.display_value);

merci

Re: Explications sur le nouveau codage des widgets

Publié : 22 mars 2019, 11:11
par Salvialf
Salut,

Le "empty()" vide l'image quand tu utilises ".append". Sinon la nouvelle icône apparaît en dessous de la précédente.

#id# c'est l'id de ta commande. #uid# c'est l'id + une référence unique. Je suppose que c'est pour rendre la commande réellement unique sur la page sans certitude à ce sujet. J'ai récemment posé la question à @winhex qui n'en savait pas plus.

Re: Explications sur le nouveau codage des widgets

Publié : 22 mars 2019, 11:19
par Antoinekl1
Salvialf a écrit : ↑
22 mars 2019, 11:11
 Salut,

Le "empty()" vide l'image quand tu utilises ".append". Sinon la nouvelle icône apparaît en dessous de la précédente.

#id# c'est l'id de ta commande. #uid# c'est l'id + une référence unique. Je suppose que c'est pour rendre la commande réellement unique sur la page sans certitude à ce sujet. J'ai récemment posé la question à @winhex qui n'en savait pas plus.
merci pour ces réponses

donc pour toutes les commandes append ou html, il est conseillé de mettre un empty devant ?

Re: Explications sur le nouveau codage des widgets

Publié : 22 mars 2019, 11:22
par Salvialf
Obligatoire quand tu as .append mais je crois que tu peux t'en passer dans les autres cas. Si l'icône se dédouble c'est qu'il faut ajouter empty().

Re: Explications sur le nouveau codage des widgets

Publié : 25 mars 2019, 09:07
par db2p
bonjour
j'utilise le widget de masterfion pour les volets/fenetres combinés
malheureusement ca ne fonctionne plus depuis la maj 3.3.xxx
donc comme j'ai pu le lire il y aurait un nouveau codage des widgets
peut on le trouver pour celui-ci ?

sinon dans le virtuel créé pour cela avant dans la commande il y avait du code pour l'afficher sur le dashboard, design, mobile etc....
maintenant depuis cette maj je n'arrive pas a y mettre le code ca n'enregistre pas....
est-ce du a la maj ?

merci

Re: Explications sur le nouveau codage des widgets

Publié : 25 mars 2019, 16:11
par unterix
Bonjour à tous,
je vous soumet à mon tour un widget 'obsolète' qui ne se rafraichit plus, il s'agit du slider pour Thermostat.
J'ai passé une grosse heure à tenter d'insérer le nouveau code avec les fonctions update, mais cela se confirme : je n'y connais rien en code :(
Je viens donc vous demander directement. Voici le code :

Code : Tout sélectionner

<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" style="width : 130px;height : 100px;display : block;">
    <span id="iconCmd#id#" class="pull-left" style="position : relative;font-size: 5em;height:100px;"></span>
    <div>
        <div style="margin-top : 5px;">
            <input type="text" class="dial" data-role="none" value="#state#" data-min="#minValue#" data-max="#maxValue#" data-width="90" data-height="90" />
        </div>
        <div style="position: relative; top: -22px; left : 44px;">
            #unite#
        </div>
    </div>
    <script>
        $.include(['plugins/widget/core/template/mobile/cmd.action.slider.thermostat/jquery.kontrol.js'], function() {
            $(".cmd[data-cmd_id=#id#] .dial").dial({
                fgColor: "#FFFFFF",
                bgColor: '#cmdColor#',
                noScroll: true,
                change: function(v) {
                    jeedom.cmd.execute({id: '#id#', value: {slider: v}});
                }
            });
            
        });
    </script>
</div>
Merci pour votre aide !

Re: Explications sur le nouveau codage des widgets

Publié : 25 mars 2019, 17:30
par Antoinekl1
Plus d'info ici : viewtopic.php?f=59&t=44201

Re: Explications sur le nouveau codage des widgets

Publié : 25 mars 2019, 18:52
par mortyre
Je viens de créer un widget avec l'utilitaire pour du info binary ca fonctionne parfaitement. PAr contre quand j'ai voulu ajouter le dernier temps de détection la valeur ne se met pas à jour.
Voici mon code, une idée svp ?

Code : Tout sélectionner

<div style="padding:0;width:105px;min-height:93px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
	<div class="row">           
      <span class="timeCmd#uid#" style="background-color:#cmdColor# !important;padding : 3px;border-radius: 4px;font-weight:bold;font-size:0.8em;"></span>		
		<div class="center-block col-xs-12 iconCmd#uid#"></div>   
	</div>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"aeonmultisensor6_NOK.png","image2":"aeonmultisensor6_OK.png"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
        jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));
		jeedom.cmd.update['#id#'] = function(_options){
			$(".iconCmd#uid#").empty();
			if (parseInt(_options.display_value) == 1) {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.aeotec-motion-sensor-v3/aeonmultisensor6_OK.png'>");
			} else {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.aeotec-motion-sensor-v3/aeonmultisensor6_NOK.png'>");
			}
			$('.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é : 25 mars 2019, 18:58
par Salvialf
@mortyre

Ajoute ta ligne "displayduration" juste après "jeedom.cmd.update = function" et ça devrait se mettre à jour...

Re: Explications sur le nouveau codage des widgets

Publié : 25 mars 2019, 20:00
par mortyre
en faisant ça le comportement est très bizarre

Code : Tout sélectionner

<div style="padding:0;width:105px;min-height:93px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
	<div class="row">           
      <span class="timeCmd#uid#" style="background-color:#cmdColor# !important;padding : 3px;border-radius: 4px;font-weight:bold;font-size:0.8em;"></span>		
		<div class="center-block col-xs-12 iconCmd#uid#"></div>   
	</div>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"aeonmultisensor6_NOK.png","image2":"aeonmultisensor6_OK.png"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
        jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));
		jeedom.cmd.update['#id#'] = function(_options){
			$(".iconCmd#uid#").empty();
			if (parseInt(_options.display_value) == 1) {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.aeotec-motion-sensor-v3/aeonmultisensor6_OK.png'>");
			} else {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.aeotec-motion-sensor-v3/aeonmultisensor6_NOK.png'>");
			}
			$('.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é : 25 mars 2019, 20:05
par Salvialf
mortyre a écrit : ↑
25 mars 2019, 20:00
 en faisant ça le comportement est très bizarre
???? Pas compris mais je suis sur le pc maintenant donc je peux te proposer un code pour afficher le displayduration:

Code : Tout sélectionner

<div style="padding:0;width:105px;min-height:93px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
	<div class="row">           
      <span class="timeCmd#id# timeCmd label label-default" style="background-color:#cmdColor# !important;padding : 3px;border-radius: 4px;font-weight:bold;font-size:0.8em;"></span>		
		<div class="center-block col-xs-12 iconCmd#uid#"></div>   
	</div>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"aeonmultisensor6_NOK.png","image2":"aeonmultisensor6_OK.png"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
        jeedom.cmd.update['#id#'] = function(_options){
        $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
        jeedom.cmd.displayDuration(_options.valueDate, $('.cmd[data-cmd_id=#id#] .timeCmd#id#'));
			$(".iconCmd#uid#").empty();
			if (parseInt(_options.display_value) == 1) {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.aeotec-motion-sensor-v3/aeonmultisensor6_OK.png'>");
			} else {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.aeotec-motion-sensor-v3/aeonmultisensor6_NOK.png'>");
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

C'est good ?

Sinon plus simple, tu peux utiliser le widget "IconInfo" en ajoutant tes 2 images et tu auras tout ce que tu veux. L'idée étant de pouvoir centraliser toutes les info/binaire dans 1 seul widget.

Re: Explications sur le nouveau codage des widgets

Publié : 25 mars 2019, 20:12
par mortyre
ca marche parfaitement merci beaucoup !!!

ME reste à adapter OuvertureIMG ou passer à ton widget équivalent

Re: Explications sur le nouveau codage des widgets

Publié : 25 mars 2019, 20:20
par Salvialf
mortyre a écrit : ↑
25 mars 2019, 20:12
 ca marche parfaitement merci beaucoup !!!

ME reste à adapter OuvertureIMG ou passer à ton widget équivalent

Cool !! Penses au widget "IconInfo" quand même cela peut être plus pratique à l'usage et le résultat sera le même.

Bon courage pour adapter ton widget car y'a pas mal de modifs à apporter... Commences par tester les widgets équivalents et à jour comme te l'as suggéré @JAG, tu devrais trouver ton bonheur.

Re: Explications sur le nouveau codage des widgets

Publié : 26 mars 2019, 19:11
par bartounet
Bonsoir.
Je refais quelques widget, via tes icones et via le mode de création facile.
Par contre j’aimerai retrouver la durée du dernier mouvement dans mon widget.

Image

MAis je ne sais pas comment faire dans mon widget création facile..

Code : Tout sélectionner

<div style="padding:0;width:143px;min-height:143px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
	<div class="row">
		<div class="center-block col-xs-12 h5 cmdName" id="cmdName#id#" style="margin-top:0; #hideCmdName#;">#name_display#</div>
		<div class="center-block col-xs-12 iconCmd#uid#"></div>
	</div>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"window-closed.png","image2":"window-opened.png"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
      	
		jeedom.cmd.update['#id#'] = function(_options){
			$(".iconCmd#uid#").empty();
			if (parseInt(_options.display_value) == 1) {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.fenetre/window-closed.png'>");
			} else {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.fenetre/window-opened.png'>");
			}
			$('.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é : 26 mars 2019, 19:15
par Claude69
Hello
Comme le dit Salvialf juste au dessus. Inspire toi de iconinfo.
J’ai pris exemple et c’est nickel.

Re: Explications sur le nouveau codage des widgets

Publié : 26 mars 2019, 19:30
par Salvialf
bartounet a écrit : ↑
26 mars 2019, 19:11
 Bonsoir.
Je refais quelques widget, via tes icones et via le mode de création facile.
Par contre j’aimerai retrouver la durée du dernier mouvement dans mon widget.

MAis je ne sais pas comment faire dans mon widget création facile..
Je vais donner l'explication pour tout le monde étant donné que ça a l'air d'être une fonctionnalité très demandée:

Tout d'abord, il faut ajouter au début du code la ligne qui affichera la durée:

Code : Tout sélectionner

<span class="timeCmd#id# timeCmd label label-default" style="background-color:#cmdColor#!important;"></span>

Ensuite dans le <script> au sein de la fonction d'update, il faut ajouter:

Code : Tout sélectionner

jeedom.cmd.displayDuration(_options.valueDate, $('.cmd[data-cmd_id=#id#] .timeCmd#id#'));
Ce qui donne:

Code : Tout sélectionner

<div style="padding:0;width:143px;min-height:143px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
	<div class="row">
		<div class="center-block col-xs-12 h5 cmdName" id="cmdName#id#" style="margin-top:0; #hideCmdName#;">#name_display#</div>
		<div class="center-block col-xs-12 iconCmd#uid#"></div>
	</div>
	<span class="timeCmd#id# timeCmd label label-default" style="background-color:#cmdColor#!important;"></span>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"window-closed.png","image2":"window-opened.png"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
      	
		jeedom.cmd.update['#id#'] = function(_options){
			$(".iconCmd#uid#").empty();
			if (parseInt(_options.display_value) == 1) {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.fenetre/window-closed.png'>");
			} else {
				$(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.fenetre/window-opened.png'>");
			}
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
			jeedom.cmd.displayDuration(_options.valueDate, $('.cmd[data-cmd_id=#id#] .timeCmd#id#'));
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
        
      </script>
</div>
PS: j'aime bien mettre le 'displayDuration' après le calcul de l'info-bulle....
RE-PS: Tu aurais directement pu utiliser "IconInfo" en ajoutant tes images ;)

EDIT: J'ai oublié de préciser que ces 2 lignes de code pour afficher la durée depuis le dernier mouvement sont de bêtes copier/coller de bouts de code donnés par @winhex sur le forum.

Re: Explications sur le nouveau codage des widgets

Publié : 26 mars 2019, 19:46
par bartounet
t'es un chef merci.
Peut t'on jouer sur la taille de la police ?
Ma fenêtre a la bonne taille mais la durée est trop petite
Le fuseau horaire est réglé sur UTC+02:00
Page 3 sur 10
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/