Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

Explications sur le nouveau codage des widgets

Réservé à l'utilisation et la création de widgets dans JEEDOM
Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 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.....
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

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

Re: Explications sur le nouveau codage des widgets

Message par bartounet » 26 mars 2019, 20:05

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

unterix
Timide
Messages : 12
Inscription : 03 mai 2017, 21:48

Re: Explications sur le nouveau codage des widgets

Message par unterix » 27 mars 2019, 19:52

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

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

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 27 mars 2019, 19:57

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

Mon matériel ici

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 27 mars 2019, 20:02

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
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

unterix
Timide
Messages : 12
Inscription : 03 mai 2017, 21:48

Re: Explications sur le nouveau codage des widgets

Message par unterix » 29 mars 2019, 17:55

Merci pour votre aide à tous les deux !

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2714
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Theduck38 » 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 !

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.
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 31 mars 2019, 18:40

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
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2714
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Theduck38 » 31 mars 2019, 23:58

Cool, merci !
Le voilà...
jquery.kontrol.js.7z
(5.86 Kio) Téléchargé 56 fois
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 01 avr. 2019, 14:39

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.
Dernière édition par Salvialf le 02 avr. 2019, 14:23, édité 4 fois.
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

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

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 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
Annotation 2019-04-01 181551.jpg (3.54 Kio) Consulté 3257 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>
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.3.33 ULTIMATE

Mon matériel ici

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 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.
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

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

Re: Explications sur le nouveau codage des widgets

Message par Claude69 » 01 avr. 2019, 19:16

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

Mon matériel ici

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 01 avr. 2019, 19:45

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.
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

mortyre
Actif
Messages : 1247
Inscription : 17 mai 2016, 16:51

Re: Explications sur le nouveau codage des widgets

Message par mortyre » 01 avr. 2019, 20:07

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>
PROD: NAS1815+ VMM Buster 10.2 / Jeedom 4.0.31 / MariaDB 10.3.18 / PHP 7.3.9
DEV: DIY Odroid C2 16gb Strech 9.11 / Jeedom 4.x Alpha / MariaDB 10.1.41 / PHP 7.0.33

Avatar de l’utilisateur
breizh22
Actif
Messages : 1318
Inscription : 10 oct. 2015, 17:35

Re: Explications sur le nouveau codage des widgets

Message par breizh22 » 01 avr. 2019, 20:23

+1 pour le code du widget du plugin MODE, je suis preneur si quelqu'un à la solution, merci ;)
HP Gen 8 / OMV4 sur SSD / Jeedom 3.3.37 VM Debian 9
RFLink - Sondes Oregon THN 132 N / THGR 122 NX / THGR 810 / THC238 - Prises DIO/Dedra/IDK.
Orvibo AllOne et S20 - Onduleur APC Back-UPS ES 700VA
Écosystème xiaomi - Dash buttons - GHome et mini.

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

Re: Explications sur le nouveau codage des widgets

Message par Antoinekl1 » 01 avr. 2019, 20:36

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

Avatar de l’utilisateur
breizh22
Actif
Messages : 1318
Inscription : 10 oct. 2015, 17:35

Re: Explications sur le nouveau codage des widgets

Message par breizh22 » 01 avr. 2019, 21:07

Merci pour cet exemple, je vais m'en inspirer.
HP Gen 8 / OMV4 sur SSD / Jeedom 3.3.37 VM Debian 9
RFLink - Sondes Oregon THN 132 N / THGR 122 NX / THGR 810 / THC238 - Prises DIO/Dedra/IDK.
Orvibo AllOne et S20 - Onduleur APC Back-UPS ES 700VA
Écosystème xiaomi - Dash buttons - GHome et mini.

mortyre
Actif
Messages : 1247
Inscription : 17 mai 2016, 16:51

Re: Explications sur le nouveau codage des widgets

Message par mortyre » 01 avr. 2019, 21:54

merci c'est top
PROD: NAS1815+ VMM Buster 10.2 / Jeedom 4.0.31 / MariaDB 10.3.18 / PHP 7.3.9
DEV: DIY Odroid C2 16gb Strech 9.11 / Jeedom 4.x Alpha / MariaDB 10.1.41 / PHP 7.0.33

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2714
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Theduck38 » 01 avr. 2019, 22:50

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.
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités