Page 4 sur 10

Re: Explications sur le nouveau codage des widgets

Publié : 26 mars 2019, 20:01
par Salvialf
bartounet a écrit :
26 mars 2019, 19:46
Peut t'on jouer sur la taille de la police ?
Bien sûr ! Sur la ligne <span> qui gère l'affichage du displayDuration tu peux appliquer tous les styles que tu veux:

Code : Tout sélectionner

<span class="timeCmd#id# timeCmd label label-default" style="background-color:#cmdColor#!important;"></span>
Là le seul style appliqué est la couleur d'arrière plan de la commande dans la catégorie (#cmdColor#)

Si tu ajoutes:

Code : Tout sélectionner

font-size:14px;
Tu auras une police de 14 pixels.

Ce qui donne:

Code : Tout sélectionner

<span class="timeCmd#id# timeCmd label label-default" style="font-size:14px;background-color:#cmdColor#!important;"></span>
Attention par contre car selon la durée ça peut prendre de la place au bout d'un moment car il va comptabiliser d'abord les minutes, puis les heures, puis les jours, etc.....

Re: Explications sur le nouveau codage des widgets

Publié : 26 mars 2019, 20:05
par bartounet
Salvialf a écrit :
26 mars 2019, 20:01
bartounet a écrit :
26 mars 2019, 19:46
Peut t'on jouer sur la taille de la police ?
Bien sûr ! Sur la ligne <span> qui gère l'affichage du displayDuration tu peux appliquer tous les styles que tu veux:

Code : Tout sélectionner

<span class="timeCmd#id# timeCmd label label-default" style="background-color:#cmdColor#!important;"></span>
Là le seul style appliqué est la couleur d'arrière plan de la commande dans la catégorie (#cmdColor#)

Si tu ajoutes:

Code : Tout sélectionner

font-size:14px;
Tu auras une police de 14 pixels.

Ce qui donne:

Code : Tout sélectionner

<span class="timeCmd#id# timeCmd label label-default" style="font-size:14px;background-color:#cmdColor#!important;"></span>
Attention par contre car selon la durée ça peut prendre de la place au bout d'un moment car il va comptabiliser d'abord les minutes, puis les heures, puis les jours, etc.....
C'est parfait !

Image
Je garde à au chaud

Re: Explications sur le nouveau codage des widgets

Publié : 27 mars 2019, 19:52
par unterix
unterix a écrit :
25 mars 2019, 16:11
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 !
Bonjour à tous,
y'aurait-il une âme charitable pour convertir les widgets Door2IMG et ouvertureIMG ?
Je n'y parviens pas après des heures de prise de tête...
Merci :(

Re: Explications sur le nouveau codage des widgets

Publié : 27 mars 2019, 19:57
par Claude69
Hello
Voilà pour Door2IMG

Code : Tout sélectionner

<div style="padding:0;width:100px;min-height:100px;" 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; font-size : 12px; #hideCmdName#;">#name_display#</div>
        <div class="center-block col-xs-12 iconCmd#uid#"></div>
        <span class="timeCmd#id# timeCmd label label-default" style="background-color:#cmdColor#!important;"></span>
  </div>
<!-- Ne Pas Supprimer -->
    <script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"DoorOpen.png","image2":"DoorClose.png"}]]></script>
<!-- Ne Pas Supprimer -->
    <script>
        jeedom.cmd.update['#id#'] = function(_options){
            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.Door2IMG/DoorClose.png'>");
            } else {
                $(".iconCmd#uid#").append("<img src='plugins/widget/core/template/dashboard/cmd.info.binary.Door2IMG/DoorOpen.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é : 27 mars 2019, 20:02
par Salvialf
Le premier est une info binaire donc peut être remplacé par IconInfo avec l'ajout de 2 images.

Le second peut être remplacé par MultiOuvrants ou un des widgets de @JAG

Re: Explications sur le nouveau codage des widgets

Publié : 29 mars 2019, 17:55
par unterix
Merci pour votre aide à tous les deux !

Re: Explications sur le nouveau codage des widgets

Publié : 31 mars 2019, 18:24
par Theduck38
Bonjour,

Je plussoie sur une demande de @unterix un peu plus haut... il s'agit du widget kontrol, qui a disparu du market entre temps. Celui-là je n'arrive pas à l'adapter...
Si un pro pouvait avoir la gentillesse de se pencher dessus, il aurait mon éternelle gratitude !

Le code :

Code : Tout sélectionner

<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" style="width : 100px;height : 100px;display : block;">
    <div style="margin-top : 5px;">
        <input type="text" class="dial" data-role="none" value="#state#" data-min="#minValue#" data-max="#maxValue#" data-width="100" data-height="100" />
    </div>
    <div style="position: relative; top: -30px; left : 49px;">
        #unite#
    </div>
    <script>
        $.include(['plugins/widget/core/template/mobile/cmd.action.slider.kontrol/jquery.kontrol.js'], function() {
            $(".cmd[data-cmd_uid=#uid#] .dial").dial({
                fgColor: "#FFFFFF",
                bgColor: '#cmdColor#',
                noScroll: true,
                change: function(v) {
                    jeedom.cmd.execute({id: '#id#', value: {slider: v}});
                }
            });
        });
    </script>
</div>
Je suppose que tout se passe au niveau de la ligne jeedom.cmd.execute({id: '#id#', value: {slider: v}}) mais je n'ai pas trouvé comment modifier ça.

Re: Explications sur le nouveau codage des widgets

Publié : 31 mars 2019, 18:40
par Salvialf
Theduck38 a écrit :
31 mars 2019, 18:24
Bonjour,
Je plussoie sur une demande de @unterix un peu plus haut... il s'agit du widget kontrol, qui a disparu du market entre temps. Celui-là je n'arrive pas à l'adapter...
Si un pro pouvait avoir la gentillesse de se pencher dessus, il aurait mon éternelle gratitude !
Salut,

Je ne suis pas un pro mais ça m'intéresse d'y jeter un coup d'oeil. Je veux bien le fichier *.js (jquery.kontrol.js) qui est utilisé par le widget. Si tu peux le transférer en pièce jointe stp ?!

Merci

Re: Explications sur le nouveau codage des widgets

Publié : 31 mars 2019, 23:58
par Theduck38
Cool, merci !
Le voilà...
jquery.kontrol.js.7z
(5.86 Kio) Téléchargé 14 fois

Re: Explications sur le nouveau codage des widgets

Publié : 01 avr. 2019, 14:39
par Salvialf
Theduck38 a écrit :
31 mars 2019, 18:24
Bonjour,
Je plussoie sur une demande de @unterix un peu plus haut... il s'agit du widget kontrol, qui a disparu du market entre temps. Celui-là je n'arrive pas à l'adapter...
Si un pro pouvait avoir la gentillesse de se pencher dessus, il aurait mon éternelle gratitude !
unterix a écrit :
25 mars 2019, 16:11
Bonjour à tous,
je vous soumet à mon tour un widget 'obsolète' qui ne se rafraichit plus, il s'agit du slider pour Thermostat.
Salut,

Très Très sympa ce petit widget, je me le garde de côté celui-là !

Normalement ça devrait être bon, je veux bien que tu ('vous' vu que vous êtes 2 à avoir fait la demande) testes ce code stp :

Code : Tout sélectionner

<div style="width:100px;height:100px;display:block;" class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
    <div style="margin-top : 5px;">
    <input type="text" class="dial" data-role="none" value="#state#" data-min="#minValue#" data-max="#maxValue#" data-width="100" data-height="100" />
    </div>
    <script>
        $.include(['plugins/widget/core/template/mobile/cmd.action.slider.kontrol/jquery.kontrol.js'], function() {
           $(".cmd[data-cmd_uid=#uid#] .dial").dial({
                fgColor: "#FFFFFF",
                bgColor: '#cmdColor#',
                noScroll: true,
                change: function(v) {
                    jeedom.cmd.execute({id: '#id#', value: {slider: v}});
                }
            });
        });
      jeedom.cmd.update['#id#'] = function(_options){
      $('.cmd[data-cmd_uid=#uid#] .dial').val(_options.display_value+'#unite#');
    }
    jeedom.cmd.update['#id#']({display_value:'#state#'});
    </script>
</div>
Le code fait référence à la version mobile mais il fonctionne bien en dashboard (pas testé sur mobile).

EDIT: J'ai modifié pour inclure l'unité (%) au centre. Je pourrais la remettre en bas à droite si vous préférez.
EDIT2: Je viens de m'apercevoir que l'état se met bien à jour mais pas le slider :( il me semblait que ça fonctionnait pourtant j'espère que j'ai pas cassé un truc en continuant de le modifier... Je reste sur le coup.

Re: Explications sur le nouveau codage des widgets

Publié : 01 avr. 2019, 18:26
par Claude69
Hello
Je m'attaque à mes widgets action, et je souhaite utiliser le widget OnOff du market qui vient d’être mis à jour pour la V3.
Annotation 2019-04-01 181551.jpg
Annotation 2019-04-01 181551.jpg (3.54 Kio) Consulté 844 fois
Je voudrais par contre une légère modification du code pour l'afficher sans la marge haute.
Que dois je modifier dans le code suivant pour y parvenir ? J'ai tenter plein de truc sans aucun résultat.

Code : Tout sélectionner

<div style="width:70px; height:70px;" class="cmd tooltips cmd-widget cursor container-fluid" data-type="action" data-subtype="other" data-cmd_id="#id#">
	<div class="row">
		<center><span class="cmdName" style="font-weight: bold;font-size : 12px;display: none;">#valueName#</span></center>
		<h5 class="action center-block iconCmd#id#" style="vertical-align: middle;"></h5>
	</div>

Re: Explications sur le nouveau codage des widgets

Publié : 01 avr. 2019, 18:35
par Salvialf
Claude69 a écrit :
01 avr. 2019, 18:26
Hello
Je m'attaque à mes widgets action, et je souhaite utiliser le widget OnOff du market qui vient d’être mis à jour pour la V3.
Annotation 2019-04-01 181551.jpg
Je voudrais par contre une légère modification du code pour l'afficher sans la marge haute.
Que dois je modifier dans le code suivant pour y parvenir ? J'ai tenter plein de truc sans aucun résultat.

Code : Tout sélectionner

<div style="width:70px; height:70px;" class="cmd tooltips cmd-widget cursor container-fluid" data-type="action" data-subtype="other" data-cmd_id="#id#">
	<div class="row">
		<center><span class="cmdName" style="font-weight: bold;font-size : 12px;display: none;">#valueName#</span></center>
		<h5 class="action center-block iconCmd#id#" style="vertical-align: middle;"></h5>
	</div>
Bonjour,

Ce serait plus simple avec l'ensemble du code... Tu as la possibilité d'utiliser IconAction, qui est un widget universel pour les commandes action/autre, simplement en ajoutant et renommant les 2 images issues de ce widget.

Re: Explications sur le nouveau codage des widgets

Publié : 01 avr. 2019, 19:16
par Claude69
Salvialf a écrit :
01 avr. 2019, 18:35
Claude69 a écrit :
01 avr. 2019, 18:26
Hello
Je m'attaque à mes widgets action, et je souhaite utiliser le widget OnOff du market qui vient d’être mis à jour pour la V3.
Annotation 2019-04-01 181551.jpg
Je voudrais par contre une légère modification du code pour l'afficher sans la marge haute.
Que dois je modifier dans le code suivant pour y parvenir ? J'ai tenter plein de truc sans aucun résultat.

Code : Tout sélectionner

<div style="width:70px; height:70px;" class="cmd tooltips cmd-widget cursor container-fluid" data-type="action" data-subtype="other" data-cmd_id="#id#">
	<div class="row">
		<center><span class="cmdName" style="font-weight: bold;font-size : 12px;display: none;">#valueName#</span></center>
		<h5 class="action center-block iconCmd#id#" style="vertical-align: middle;"></h5>
	</div>
Bonjour,

Ce serait plus simple avec l'ensemble du code... Tu as la possibilité d'utiliser IconAction, qui est un widget universel pour les commandes action/autre, simplement en ajoutant et renommant les 2 images issues de ce widget.
Merci
Oui, j'utilise iconaction. C'est surtout pour ma culture personnelle :D
Du coup voila le code en entier

Code : Tout sélectionner

<div style="width:70px; height:70px;" class="cmd tooltips cmd-widget cursor container-fluid" data-type="action" data-subtype="other" data-cmd_id="#id#">
	<div class="row">
		<center><span class="cmdName" style="font-weight: bold;font-size : 12px;display: none;">#valueName#</span></center>
		<h5 class="action center-block iconCmd#id#" style="vertical-align: middle;"></h5>
	</div>

<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","image1":"off.png","image2":"on.png"}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
		if ("#displayName#" == "1") {
			$(".cmd[data-cmd_id=#id#] .cmdName").show();
			$(".cmd[data-cmd_id=#id#]").css("min-height", "88px");
		} else {
			$(".cmd[data-cmd_id=#id#] .cmdName").hide();
			$(".cmd[data-cmd_id=#id#]").css("min-height", "68px");
		}
		$(".iconCmd#id#").empty();
		if ("#state#" == "1") {
			$(".iconCmd#id#").append("<img src='plugins/widget/core/images/On.png' height=70 width=70>");
			if (jeedom.cmd.normalizeName("#name#") == "on") {
				$(".cmd[data-cmd_id=#id#]").hide();
			}
		} else {
			$(".iconCmd#id#").append("<img src='plugins/widget/core/images/Off.png' height=70 width=70>");
			if (jeedom.cmd.normalizeName("#name#") == "off") {
				$(".cmd[data-cmd_id=#id#]").hide();
			}
		}
		$(".cmd[data-cmd_id=#id#] .action").off();
		$(".cmd[data-cmd_id=#id#] .action").on("click", function() {
			jeedom.cmd.execute({id: "#id#"});
		});
	</script>
</div>

Re: Explications sur le nouveau codage des widgets

Publié : 01 avr. 2019, 19:45
par Salvialf
Claude69 a écrit :
01 avr. 2019, 19:16
Merci
Oui, j'utilise iconaction. C'est surtout pour ma culture personnelle :D
Je ne vais pas t'être d'une grande aide car il ne fonctionne pas chez moi :( Je ne m'acharne pas car le code ne me plait pas trop (surtout le <h5> à la place d'une <div>...)

A ta place Je m'intéresserais soit à la modification du css dans les 1ères lignes du script qui est un coup à 88px et l'autre à 68px. Si tu mets 68 aux 2 ça donne quoi ? Sinon l'enlèverai 'vertical-align: middle;' au début du code...
En dernier recours tu peux ajouter une bordure pour visualiser la position de la <div> et régler le positionnement de l'icône.

Re: Explications sur le nouveau codage des widgets

Publié : 01 avr. 2019, 20:07
par mortyre
bonjour à tous, voici le dernier widget qui ne fonctionne plus chez moi et que j'ai essayé de modifier mais sans réussite, il s'agit d'un widget pour le plugin MODE
voici d'origine

Code : Tout sélectionner

<div style="min-width:90px;min-height : 20px;" class="cmd #history# tooltips " data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<span class="label label-default" style="font-size: 1em;">#state# </span>
<script>
if ("#state#" == 'Présent') {
$('.cmd[data-cmd_id=#id#] span.label').removeClass('label-default').addClass('label-success').append('<i class="icon maison-house112"></i>');
}
if ("#state#" == 'Absent') {
$('.cmd[data-cmd_id=#id#] span.label').removeClass('label-default').addClass('label-danger').append('<i class="icon jeedom-mouvement"></i>');
}
if ("#state#" == 'Nuit') {
$('.cmd[data-cmd_id=#id#] span.label').removeClass('label-default').addClass('label-warning').append('<i class="icon nature-night2"></i>');
}
if ("#state#" == 'Vacances') {
$('.cmd[data-cmd_id=#id#] span.label').removeClass('label-default').addClass('label-primary').append('<i class="icon loisir-beach4"></i>');
}
if ("#state#" == 'Travail') {
$('.cmd[data-cmd_id=#id#] span.label').removeClass('label-default').addClass('label-primary').append('<i class="fa fa-suitcase"></i>');
}
if ("#state#" == 'Cinéma') {
$('.cmd[data-cmd_id=#id#] span.label').removeClass('label-default').addClass('label-primary').append('<i class="icon maison-cinema1"></i>');
}
if ("#state#" == 'Alarme') {
$('.cmd[data-cmd_id=#id#] span.label').removeClass('label-default').addClass('label-primary').append('<i class="icon jeedom-alerte2"></i>');
}
  </script>
  <br/><br/>
</div>
et j'ai essayé ce code mais ne fonctionne pas

Code : Tout sélectionner

<div style="min-width:120px;min-height:80px;" class="cmd tooltips cmd-widget cursor container-fluid" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#">
	<center>
      <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-size: 1.5em;" class="iconCmd"></span>
		<div style="display:inline-block;">
		</div>
	</center>
		
<!-- Ne Pas Supprimer -->
<script class="createWidgetString" type="text/javascript">//<![CDATA[{"type":"0","version":"1","size":"2.5","icon1":"<i class='en_charge.png'></i>","icon2":"<i class='zone.png'></i>","icon3":"<i class='clignote-orange.png'></i>","icon4":"<i class='clignote-erreur.png'></i>","icon5":"<i class='clignote-orange.png'></i>","icon6":"<i class='repos.png'></i>",}]]></script>
<!-- Ne Pas Supprimer -->
<script>   
	var iconUpdate_#uid# = function (state){
    $('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
		if (state == "présent") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon brands-nextdoor"></i>');
		}else if (state == "Absent") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon jeedom-mouvement"></i>');
        }else if (state == "Nuit") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon nature-night2"></i>');
		}else if (state == "Vacances") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon loisir-beach4""></i>');
		}else if (state == "Travail") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="fa fa-suitcase"></i>');
		}else if (state == "Cinéma") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon maison-cinema1"></i>');
        }else if (state == "Alarme") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon jeedom-alerte2"></i>');
        }else if (state == "Disco") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon font-awesome-music"></i>');
        }
	};
	jeedom.cmd.update['#id#'] = function(_options){
		iconUpdate_#uid#(_options.display_value);
	}
	jeedom.cmd.update['#id#']({display_value:'#state#'});
	</script>
</div>

Re: Explications sur le nouveau codage des widgets

Publié : 01 avr. 2019, 20:23
par breizh22
+1 pour le code du widget du plugin MODE, je suis preneur si quelqu'un à la solution, merci ;)

Re: Explications sur le nouveau codage des widgets

Publié : 01 avr. 2019, 20:36
par Antoinekl1
Voici un cas identique, je vous laisse le transposer

Code : Tout sélectionner

<div style="width:90px; min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
	<div class="row"><center>
		<span class="cmdName" style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span><br />
		<span class='label label-info' style="font-size: 11px;">#state#</span><br>
		<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
      </center></div>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"0","version":"1","size":"2.5","icon1":"<i class='icon maison-house112'></i>","icon2":"<i class='icon transport-car95'></i>","icon3":"<i class='icon loisir-beach4'></i>","icon4":"<i class='icon nature-night2'></i>","icon5":"<i class='icon maison-vacuum6'></i>","icon6":"<i class='icon jeedom-porte-ouverte'></i>","icon7":"<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 == "Présent") {
             $('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon maison-house112"></i>');
		} 
		if (_options.display_value == "Absent") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon transport-car95"></i>');
		} 
		if (_options.display_value == "Vacances") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon loisir-beach4"></i>');
		} 
		if (_options.display_value == "Nuit") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon nature-night2"></i>');
		} 
		if (_options.display_value == "Ménage") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon maison-vacuum6"></i>');
		} 
		if (_options.display_value == "Visite") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon jeedom-porte-ouverte"></i>');
		} 
		if (_options.display_value == "Nuit-Couchage") {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="icon maison-bed2"></i>');
		} 
        $('.cmd[data-cmd_uid=#uid#] .label-info').html(_options.display_value);      
		$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
	}
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Re: Explications sur le nouveau codage des widgets

Publié : 01 avr. 2019, 21:07
par breizh22
Merci pour cet exemple, je vais m'en inspirer.

Re: Explications sur le nouveau codage des widgets

Publié : 01 avr. 2019, 21:54
par mortyre
merci c'est top

Re: Explications sur le nouveau codage des widgets

Publié : 01 avr. 2019, 22:50
par Theduck38
Salvialf a écrit :
01 avr. 2019, 14:39
Salut,

Très Très sympa ce petit widget, je me le garde de côté celui-là !

Normalement ça devrait être bon, je veux bien que tu ('vous' vu que vous êtes 2 à avoir fait la demande) testes ce code stp :
<...>

Le code fait référence à la version mobile mais il fonctionne bien en dashboard (pas testé sur mobile).

EDIT: J'ai modifié pour inclure l'unité (%) au centre. Je pourrais la remettre en bas à droite si vous préférez.
EDIT2: Je viens de m'apercevoir que l'état se met bien à jour mais pas le slider :( il me semblait que ça fonctionnait pourtant j'espère que j'ai pas cassé un truc en continuant de le modifier... Je reste sur le coup.
Merci pour ton aide... effectivement seul le nombre au centre se met à jour.
Si ça peut aider, j'ai retrouvé le github de l'auteur... mais je n'y comprends pas grand chose.
https://github.com/aterrien/jQuery-Kontrol
Je suppose qu'il doit y avoir moyen de forcer le dessin lorsque c'est Jeedom qui met à jour.