Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

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 : 1324
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 04 avr. 2019, 12:57

Ricardo a écrit :
04 avr. 2019, 12:50
Depuis 8 heures ce matin, c'est bon tout est en place.
Je viens de refaire l'essai tous les widgets en defaut(core) c'est pareil. Et de plus comme tu l'as mentionné dans d'autres poste le code n'apparaît plus dans les paramètres avancés puis code, tout es vide même avec les widgets du core.
Tu utilises bien Chrome à jour comme navigateur ? Des messages en rouge en appuyant sur la touche F12 ?
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)

Ricardo
Timide
Messages : 227
Inscription : 14 mars 2015, 15:26

Re: Explications sur le nouveau codage des widgets

Message par Ricardo » 04 avr. 2019, 13:30

Que ce soit sur Chrome ou Firefox c'est pareil, et pas de messages d'erreur lorsque je suis en mode Dev (F12)

Merci pour ton aide en tout cas.
HP T610 - Jeedom
56 modules Zwave - 32 modules Enocean - 3 modules Edisio - 7 modules Rfxcom - 40 modules Zigbee
Cam : 2 Dafang - 3 Foscam - 3 Wanscam
3 Broadlink - 7 Nuts
5 Amazon Echo - 4 Amazon Echo Dot
5 SqueezeBox - 4 Xiaomi Speaker

leon-99
Timide
Messages : 236
Inscription : 09 févr. 2016, 18:34
Localisation : Limoges (ou presque)

Re: Explications sur le nouveau codage des widgets

Message par leon-99 » 04 avr. 2019, 13:52

Grand merci a Salvialf pour ta modif ... je l'ai mise en place et je vais tester, mais a premiere vue ca a l'air OK
Oui tu as raison je mettrai le code entre balises la prochaine fois ,ca sera plus facile a lire..
Merci encore

Avatar de l’utilisateur
JAG
Actif
Messages : 591
Inscription : 21 mai 2016, 11:10

Re: Explications sur le nouveau codage des widgets

Message par JAG » 04 avr. 2019, 19:57

@mortyre et @breizh22
Salut,
JAG a écrit :
02 avr. 2019, 18:53
@mortyre et @breizh22
mortyre a écrit :
01 avr. 2019, 21:54
merci c'est top
Pour votre widget Mode, j'ai réussi à faire qq chose, voici mon code
J'ai un soucis avec la couleur de fond si @Salvialf ou @Winhex passe par là et vois l'erreur.
Je suis preneur de l'aide car cela me servira sur un autre de mes widgets
Bonne soirée
J'ai réussi à faire changer les couleurs de votre widgets pour votre mode,
J'ai créer des variables par mode
  • Mode1 => valeur par défaut "Présent"
  • Mode2 => valeur par défaut "Absent"
  • Mode3 => valeur par défaut "Nuit"
  • Mode4 => valeur par défaut "Vacances"
  • Mode5 => valeur par défaut "Cinéma"
  • Mode6 => valeur par défaut "Alarme"
Voici mon code

Code : Tout sélectionner

<div style="min-width:90px;min-height : 20px;" 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#">
	<!-- Info Widget
		Mise à jour				: JAG 20190404: Compatibilité V3.2 et ajout couleur texte
	-->
  <div style="font-weight: bold;font-size : 12px;#hideCmdName#" class='cmdName'>#name_display#</div>
  <center>
    <div>
    	<span class="label label-default" style="font-size: 1em;"></span>
    	<span style="font-size: 1em; font-weight: bold; margin-top: 5px;" class="iconCmd label-info"></span>
    </div>
    </center>
    <script>
      jeedom.cmd.update['#id#'] = function(_options){
        	//Paramétrage des modes
        		var Mode1		= ('#Mode1#'!='#'+'Mode1#') ? "#Mode1#" : "Présent";
        		var Mode2		= ('#Mode2#'!='#'+'Mode2#') ? "#Mode2#" : "Absent";
        		var Mode3		= ('#Mode3#'!='#'+'Mode3#') ? "#Mode3#" : "Nuit";
        		var Mode4		= ('#Mode4#'!='#'+'Mode4#') ? "#Mode4#" : "Vacances";
        		var Mode5		= ('#Mode5#'!='#'+'Mode5#') ? "#Mode5#" : "Cinéma";
        		var Mode6		= ('#Mode6#'!='#'+'Mode6#') ? "#Mode6#" : "Alarme";
        
        	$('.cmd[data-cmd_id=#id#] .label-info').empty(); 
          	// Update
			var State = _options.display_value;	
                    if (State == Mode1) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon maison-house112">'+State).css('background-color', 'green');    
                    } else if (State == Mode2) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon jeedom-mouvement">' +'  '+State).css('background-color', 'orange'); 
                    } else if (State == Mode3) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon nature-night2">' +'  '+State).css('background-color', 'green'); 
                    } else if (State == Mode4) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon loisir-beach4">' +'  '+State).css('background-color', 'blue'); 
                    } else if (State == Mode5) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="fa fa-suitcase">' +'  '+State).css('background-color', 'grey');
                    } else if (State == Mode6) {
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon jeedom-alerte2">' +'  ' +State).css('background-color', 'red');
                    } else {
                      	$('.cmd[data-cmd_id=#id#] .label-info').html('<i class="icon jeedom-alerte2">' +'  ' +State).css('background-color', 'red');
                    }          
			// Update IMG     
        $('.cmd[data-cmd_id=#id#]').attr('title','Mode : '+_options.display_value+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});  
    </script>
</div>
Pour info à tous, j'ai trouvé de l'aide sur ce sujet viewtopic.php?f=176&t=42405

Bonne soirée
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

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 » 04 avr. 2019, 21:20

Merci à toi pour ce code très clair et le lien, je vais essayer cela ce week end :D
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
Salvialf
Helper
Messages : 1324
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 05 avr. 2019, 14:11

Theduck38 a écrit :
02 avr. 2019, 23:32
Nickel !!! C'est parfait.
J'ai effectivement posé l'unité en absolu... ça suffit largement pour mon utilisation.
Plus qu'à rendre la couleur configurable via paramètre, et l'unité de la même couleur, mais ça je devrais arriver à le faire...
Salut Theduck,

ça se confirme j'ai adoré ce widget, je le trouve presque indispensable ;) : viewtopic.php?f=29&t=44302&p=717535#p717535
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 : 2705
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Theduck38 » 05 avr. 2019, 18:07

Et tu as vu les possibilités avec la bibliothèque 'knob' ?
http://anthonyterrien.com/demo/knob/

Ceci dit, pour moi dans kontrol certaines fonctionnalités ne marchent pas (comme le contrôle avec le bouton rotatif de la souris ou l'arrondi du curseur).
-- 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 : 1324
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 05 avr. 2019, 18:17

Theduck38 a écrit :Et tu as vu les possibilités avec la bibliothèque 'knob' ?
http://anthonyterrien.com/demo/knob/
Oui je voulais absolument l'utiliser surtout qu'elle à l'air plus récente. J'ai codé la même chose en plus poussé avec knob car il y a plus de paramètres inclus cependant je suis confronté à un lot de bug donc impossible de le partager en l'état: valeur à 12 décimales dès que tu modifies l'aspect de la jauge, jauge qui saute d'avant en arrière sans interruption par moment, paramètres qui ne tiennent pas et nécessitent un refresh, et j'en oublies plein là. J'ai testé les 2 fichiers *.js (normal et min), le min fonctionnait un peu mieux mais C'est pas ça quand même.

C'est pourquoi je suis revenu sur kontrol qui fonctionne sans bug.

J'y reviendrais a l'avenir voir si j'arrive à quelque chose avec knob mais il faut lire les 170 issues. Surtout que le fichier 'min' n'est pas mis en page et 10000 lignes c'est dur à remettre en forme. Je pense essayer d'intégrer certaines fonctions de knob plus tard
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
breizh22
Actif
Messages : 1318
Inscription : 10 oct. 2015, 17:35

Re: Explications sur le nouveau codage des widgets

Message par breizh22 » 05 avr. 2019, 19:14

@JAG: Petit retour sur le code que tu as partagé. J'ai fait une petite correction sur l'espace manquant "+' '+State" concernant le mode Jour.

Par contre, pour la couleur de fond du widget, rien à faire, c'est toujours en bleu, quel que soir le mode, je ne comprend pas pourquoi. Je cherche ....
Pièces jointes
2019-04-05_191343.jpg
2019-04-05_191343.jpg (32.03 Kio) Consulté 459 fois
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
JAG
Actif
Messages : 591
Inscription : 21 mai 2016, 11:10

Re: Explications sur le nouveau codage des widgets

Message par JAG » 05 avr. 2019, 19:26

Salut
Merci de ton retour,

je ne comprend pas j'ai fait l'essai sur 2 navigateurs et pas de soucis. J'ai fait une mini modif du code à tester

Code : Tout sélectionner

<div style="min-width:90px;min-height : 20px;" 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#">
	<!-- Info Widget
		Mise à jour				: JAG 20190405: Compatibilité V3.2 et ajout couleur texte
	-->
  <div style="font-weight: bold;font-size : 12px;#hideCmdName#" class='cmdName'>#name_display#</div>
  <center>
    <div>
    	<span class="label label-default" style="font-size: 1em;"></span>
    	<span style="font-size: 1em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
    </div>
    </center>
    <script>
      jeedom.cmd.update['#id#'] = function(_options){
        	//Paramétrage des modes
        		var Mode1		= ('#Mode1#'!='#'+'Mode1#') ? "#Mode1#" : "Présent";
        		var Mode2		= ('#Mode2#'!='#'+'Mode2#') ? "#Mode2#" : "Absent";
        		var Mode3		= ('#Mode3#'!='#'+'Mode3#') ? "#Mode3#" : "Nuit";
        		var Mode4		= ('#Mode4#'!='#'+'Mode4#') ? "#Mode4#" : "Vacances";
        		var Mode5		= ('#Mode5#'!='#'+'Mode5#') ? "#Mode5#" : "Cinéma";
        		var Mode6		= ('#Mode6#'!='#'+'Mode6#') ? "#Mode6#" : "Alarme";
        		var Mode7		= ('#Mode7#'!='#'+'Mode7#') ? "#Mode7#" : "Jour";
        
        	$('.cmd[data-cmd_id=#id#] .iconCmd').empty(); 
          	// Update
			var State = _options.display_value;	
                    if (State == Mode1) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon maison-house112">'+State).css('background-color', 'green');    
                    } else if (State == Mode2) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon jeedom-mouvement">' +State).css('background-color', 'orange'); 
                    } else if (State == Mode3) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon nature-night2">' +State).css('background-color', 'green'); 
                    } else if (State == Mode4) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon loisir-beach4">' +State).css('background-color', 'blue'); 
                    } else if (State == Mode5) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="fa fa-suitcase">' +State).css('background-color', 'grey');
                    } else if (State == Mode6) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon jeedom-alerte2">' +State).css('background-color', 'red');
                    } else if (State == Mode7) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon meteo-soleil">' +State).css('background-color', 'grey');
                    } else {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon jeedom-alerte2">' +State).css('background-color', 'red');
                    }          
			// Update IMG     
        $('.cmd[data-cmd_id=#id#]').attr('title','Mode : '+_options.display_value+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});  
    </script>
</div>
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

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 » 05 avr. 2019, 21:07

Merci pour la petite modif du code, donc pour moi, cela fonctionne avec ce code (perso j'ai remis l'espace entre l'icone et le nom du mode et j'ai changé quelques couleurs)

Code : Tout sélectionner

<div style="min-width:90px;min-height : 20px;" 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#">
	<!-- Info Widget
		Mise à jour				: JAG 20190405: Compatibilité V3.2 et ajout couleur texte
	-->
  <div style="font-weight: bold;font-size : 12px;#hideCmdName#" class='cmdName'>#name_display#</div>
  <center>
    <div>
    	<span class="label label-default" style="font-size: 1em;"></span>
    	<span style="font-size: 1em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
    </div>
    </center>
    <script>
      jeedom.cmd.update['#id#'] = function(_options){
        	//Paramétrage des modes
        		var Mode1		= ('#Mode1#'!='#'+'Mode1#') ? "#Mode1#" : "Présent";
        		var Mode2		= ('#Mode2#'!='#'+'Mode2#') ? "#Mode2#" : "Absent";
        		var Mode3		= ('#Mode3#'!='#'+'Mode3#') ? "#Mode3#" : "Nuit";
        		var Mode4		= ('#Mode4#'!='#'+'Mode4#') ? "#Mode4#" : "Vacances";
        		var Mode5		= ('#Mode5#'!='#'+'Mode5#') ? "#Mode5#" : "Cinéma";
        		var Mode6		= ('#Mode6#'!='#'+'Mode6#') ? "#Mode6#" : "Alarme";
        		var Mode7		= ('#Mode7#'!='#'+'Mode7#') ? "#Mode7#" : "Jour";
        
        	$('.cmd[data-cmd_id=#id#] .iconCmd').empty(); 
          	// Update
			var State = _options.display_value;	
                    if (State == Mode1) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon maison-house112">'+' '+State).css('background-color', 'green');    
                    } else if (State == Mode2) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon jeedom-mouvement">'+' '+State).css('background-color', 'lightcoral'); 
                    } else if (State == Mode3) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon nature-night2">'+' '+State).css('background-color', 'navy'); 
                    } else if (State == Mode4) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon loisir-beach4">'+' '+State).css('background-color', 'blue'); 
                    } else if (State == Mode5) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="fa fa-suitcase">'+' '+State).css('background-color', 'grey');
                    } else if (State == Mode6) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon jeedom-alerte2">'+' '+State).css('background-color', 'red');
                    } else if (State == Mode7) {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon meteo-soleil">'+' '+State).css('background-color', 'green');
                    } else {
                      	$('.cmd[data-cmd_id=#id#] .iconCmd').html('<i class="icon jeedom-alerte2">'+' '+State).css('background-color', 'red');
                    }          
			// Update IMG     
        $('.cmd[data-cmd_id=#id#]').attr('title','Mode : '+_options.display_value+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});  
    </script>
</div>
Lien ici pour le nom des couleurs.

Grand merci @JAG d'avoir pris du temps pour nous aider :D
Pièces jointes
2019-04-05_210655.jpg
2019-04-05_210655.jpg (118.69 Kio) Consulté 438 fois
Dernière édition par breizh22 le 05 avr. 2019, 21:09, édité 2 fois.
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
JAG
Actif
Messages : 591
Inscription : 21 mai 2016, 11:10

Re: Explications sur le nouveau codage des widgets

Message par JAG » 05 avr. 2019, 21:08

Ah cool que cela marche


Envoyé de mon iPhone en utilisant Tapatalk
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

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 » 07 avr. 2019, 15:45

Salvialf a écrit :
04 avr. 2019, 10:20
leon-99 a écrit :
04 avr. 2019, 09:06
Bonjour a tous
J'utilise beaucoup un widget "Conso IMG" représentant l'affichage d'une info consommation avec le sigle EDF .
Je n'ai vu personne en parler sur le forum, (ou j'ai mal cherché !!) .
C'est un widget Dashboard de type info ,sous type numerique dont voici le code,
Si un expert programmation pouvez jeter un œil, !!!

Code : Tout sélectionner

<div style="width:140px;min-height : 140px;" class="cmd #history# tooltips cmd-widget conso#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
    <span class='cmdName' style="font-weight: bold;font-size : 12px;">#name#</span>
	<div class= "conso_position#id#">
		<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/Meter2.png" class="IMGmeter#id#" alt="Meter" >
    	<span class="stateint_conso#id#" id="intNumConso#id#"></span> 
    	<span class="statedec_conso#id#" id="decNumConso#id#"></span> 
    	<span class="unite_conso#id#" id="unite#id#">#unite#</span>
	</div>
	<div id="gauge#id#" class=" indicator"></div>

<style>
@font-face {
    font-family: "Digital-7";
  	src:	url("plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.eot?") format("eot"),
      		url("plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.woff") format("woff"),
      		url("plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.ttf") format("truetype"),
      		url("plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.svg#Digital-7") format("svg");
  	font-weight:normal;
  	font-style:normal;
}
 
span.stateint_conso#id# {
    font-family: "Digital-7"; 
    font-size:30px;
  	letter-spacing: 6px;
  	color: WhiteSmoke;
  	position: absolute;
  	top: 42px;
  	right: 29px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }

span.statedec_conso#id# {
    font-family: "Digital-7"; 
    font-size:30px;
  	color: LawnGreen;
  	position: absolute;
  	top: 42px;
  	right: 16px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }

  
span.unite_conso#id# {
    font-size:12px;
  	font-weight: bold;
  	color: #000;
  	position: absolute;
  	top: 84px;
  	right: 50px;
  }

img.IMGmeter#id# {
  	width: 120px;
  	height: 120px;
}
  
div.conso#id# {
  	width:140px;
  	min-height : 140px;
}
  
div.conso_position#id# {
  	float: center; 
  	position: absolute;
  	left: 10px;
  	top: 20px;
}

</style>
      
<script>
	var valeur=#state#;
	var intNum = Math.floor(valeur);
	var decNum = Math.round((valeur - intNum) * 10);
  	
  	$('#intNumConso#id#').text(intNum);
  	$('#decNumConso#id#').text(decNum);
  
  	if ('#petit#' == 1) {
    	$('div.conso#id#').css('width','90px');
      	$('div.conso#id#').css('min-height','80px');
      	$('div.conso_position#id#').css('left','5px');
      	$('span.statedec_conso#id#').css('font-size','20px');
      	$('span.statedec_conso#id#').css('top','28px');
      	$('span.statedec_conso#id#').css('right','10px');
      	$('span.stateint_conso#id#').css('font-size','20px');
      	$('span.stateint_conso#id#').css('top','28px');
      	$('span.stateint_conso#id#').css('right','17px');
      	$('span.unite_conso#id#').css('font-size','8px');
      	$('span.unite_conso#id#').css('top','57px');
      	$('span.unite_conso#id#').css('right','30px');
      	$('img.IMGmeter#id#').css('width','80px');
      	$('img.IMGmeter#id#').css('height','80px');
    }
  
</script>
</div>
Bonjour,

Fais attention à mettre ton code entre balises stp la prochaine fois car ça pique les yeux dès le matin... Tu peux même éditer ton post pour mettre les balises éventuellement.

Tu peux remplacer par ce code qui devrait faire la blague dans un 1er temps:

Code : Tout sélectionner

<div style="width:140px;min-height : 140px;" class="cmd #history# tooltips cmd-widget conso#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">
    <span class='cmdName' style="font-weight: bold;font-size : 12px;">#name#</span>
	<div class= "conso_position#id#">
		<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/Meter2.png" class="IMGmeter#id#" alt="Meter" >
    	<span class="stateint_conso#id#" id="intNumConso#id#"></span> 
    	<span class="statedec_conso#id#" id="decNumConso#id#"></span> 
    	<span class="unite_conso#id#" id="unite#id#">#unite#</span>
	</div>
	<div id="gauge#id#" class=" indicator"></div>
<script>
  jeedom.cmd.update['#id#'] = function(_options){
	var valeur= (_options.display_value);
	var intNum = Math.floor(valeur);
	var decNum = Math.round((valeur - intNum) * 10);

      
  	$('#intNumConso#id#').text(intNum);
  	$('#decNumConso#id#').text(decNum);
  
  	if ('#petit#' == 1) {
    	$('div.conso#id#').css('width','90px');
      	$('div.conso#id#').css('min-height','80px');
      	$('div.conso_position#id#').css('left','5px');
      	$('span.statedec_conso#id#').css('font-size','20px');
      	$('span.statedec_conso#id#').css('top','28px');
      	$('span.statedec_conso#id#').css('right','10px');
      	$('span.stateint_conso#id#').css('font-size','20px');
      	$('span.stateint_conso#id#').css('top','28px');
      	$('span.stateint_conso#id#').css('right','17px');
      	$('span.unite_conso#id#').css('font-size','8px');
      	$('span.unite_conso#id#').css('top','57px');
      	$('span.unite_conso#id#').css('right','30px');
      	$('img.IMGmeter#id#').css('width','80px');
      	$('img.IMGmeter#id#').css('height','80px');
    }
}
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'}); 
</script>
<style>
@font-face {
    font-family: "Digital-7";
  	src:	url("plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.ttf") format("truetype");
  	font-weight:normal;
  	font-style:normal;
}
 
span.stateint_conso#id# {
    font-family: "Digital-7"; 
    font-size:30px;
  	letter-spacing: 6px;
  	color: WhiteSmoke;
  	position: absolute;
  	top: 42px;
  	right: 29px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }

span.statedec_conso#id# {
    font-family: "Digital-7"; 
    font-size:30px;
  	color: LawnGreen;
  	position: absolute;
  	top: 42px;
  	right: 16px;
  	transform : scale(0.7,1);
	-webkit-transform:scale(0.7,1); /* Safari and Chrome */
	-moz-transform:scale(0.7,1); /* Firefox */
    -ms-transform:scale(0.7,1); /* IE 9+ */
	-o-transform:scale(0.7,1); /* Opera */
  }

  
span.unite_conso#id# {
    font-size:12px;
  	font-weight: bold;
  	color: #000;
  	position: absolute;
  	top: 84px;
  	right: 50px;
  }

img.IMGmeter#id# {
  	width: 120px;
  	height: 120px;
}
  
div.conso#id# {
  	width:140px;
  	min-height : 140px;
}
  
div.conso_position#id# {
  	float: center; 
  	position: absolute;
  	left: 10px;
  	top: 20px;
}

</style>
</div>
Je dis ça car ce widget m'embête il génère tout un tas de 'warnings' dans le navigateur. J'y reviendrais donc sûrement très bientôt pour remettre à plat.

EDIT: OK code modifié - il n'y a plus de warnings en gardant juste le font en *.ttf
Avec le code modifié, j'ai toujours les warnings sous chrome 73. Et vous ?
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
Salvialf
Helper
Messages : 1324
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 07 avr. 2019, 15:56

breizh22 a écrit :
07 avr. 2019, 15:45
Avec le code modifié, j'ai toujours les warnings sous chrome 73. Et vous ?
Bonjour,

Même en rechargeant la page ? car les warnings restent tant que la session est ouverte. Essayes de recharger au besoin et vérifies que les warnings réapparaissent.

Tu as bien qu'une seule ligne comme ça dans le code:

Code : Tout sélectionner

src:	url("plugins/widget/core/template/dashboard/cmd.info.numeric.ConsoIMG/font/digital-7.ttf") format("truetype");
Je penses que oui c'est juste pour être sûr.

Par contre il y a plusieurs widgets qui utilisent cette police avec les mêmes fichiers, ça vient peut-être d'un autre widget ?

Pour vérifier tu peux enlever le widget ConsoIMG sur toutes les commandes (tu le remettras après) et revenir sur ton dashboard en rafraichissant la page. Si les warnings réapparaissent c'est qu'ils proviennent d'un autre widget.

Après ce n'est pas très méchant - j'ai un côté très perfectionniste (ma femme dirait maniaque ;) !
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
breizh22
Actif
Messages : 1318
Inscription : 10 oct. 2015, 17:35

Re: Explications sur le nouveau codage des widgets

Message par breizh22 » 07 avr. 2019, 16:58

Merci pour ta réponse.

Alors oui, j'avais bien cette unique ligne dans le code.

Par contre, je n'avais pas pensé à désactiver les commandes du widget.

J'ai donc fait cela et plus de warnings, donc je réactive les commandes et comme par magie, plus de warnings, même en fermant chrome et en le ré-ouvrant. Cette astuce m'a permis de résoudre le soucis. Moi aussi, j'aime les choses propres :)
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.

cyval
Timide
Messages : 38
Inscription : 09 mars 2017, 21:30

Re: Explications sur le nouveau codage des widgets

Message par cyval » 07 avr. 2019, 19:29

Bonsoir,
précédemment j'utilisais un widget qui me permettait visualiser le choix de fonctionnement entre "AUTO/OFF/MANU".
son fonctionnement était assez simple, il coloriait l'action validée.
par exemple qd le mode MANU était sélectionné, le BP MANU apparaissait en violet et les BP AUTO+OFF sans couleur (voir pièce jointe).

Image

depuis la MAJ de jeedom, ce widget ne fonctionne plus.

connaissez-vous un WIDGET remplissant cette fonction et fonctionnant avec la nouvelle version de JEEDOM ?

ci-dessous le code de mon Widget qui ne fonctionne plus au cas ou il serait facile de le modifier.
me concernant je ne sais pas faire

Code : Tout sélectionner

<span class="cmd" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#">
    <a id="cmdButton#id#" class="btn btn-sm btn-default action cmdName tooltips" title="#other_tooltips#" style="background-color:#cmdColor# !important;border-color : transparent !important;">#name_display#</a>
    <script>
        $('.cmd[data-cmd_uid=#uid#]:last .action').off('click').on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
        if ($('.cmd[data-cmd_uid=#uid#]:last').prev().data('subtype') != undefined && $('.cmd[data-cmd_id=#id#]:last').prev().data('subtype') != 'other'
                && $('.cmd[data-cmd_uid=#uid#]:last').prev().css('display') != 'block') {
            $('.cmd[data-cmd_uid=#uid#]:last').prepend('<br/>');
        }

      if ('#state#' == '#name_display#') {
         $('#cmdButton#id#').removeClass("btn-default");
          $('#cmdButton#id#').addClass("btn-danger");
            if ('#name_display#' == 'MANU') {
              $('#cmdButton#id#').css('background-color', 'rgba(250,50,230,1)!important');
            }
            if ('#name_display#' == 'AUTO') {
              $('#cmdButton#id#').css('background-color', 'rgba(0,255,0,1)!important');
            }
            if ('#name_display#' == 'OFF') {
              $('#cmdButton#id#').css('background-color', 'rgba(255,0,0,1)!important');
            }
        }
    </script>
</span>
merci d'avance pour votre aide.
Pièces jointes
Capture.JPG
Capture.JPG (26.1 Kio) Consulté 366 fois

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

Re: Explications sur le nouveau codage des widgets

Message par Theduck38 » 08 avr. 2019, 17:14

Bonjour,

Je bute sans succès sur le widget 'Eedomus Gauges'... l'écriture n'est pas habituelle par rapport aux autres widgets déjà abordés ici et je n'arrive pas à m'en sortir.
Si quelqu'un a un peu de temps à perdre...

Voilà le code :

Code : Tout sélectionner

<div item="#id#" style="text-align:center;margin-top:-2px; width:110px; height:118px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
	<div class="custom-theme" style="float:left; margin-top:0px; width:110px; height:118px;position:absolute;"></div>
    <div class="custom-content" style="width:110px; height:118px; position:absolute;">
        <div class="custom-title" style="margin-top:0px; width:110px; height:26px;"></div>
        <div class="custom-cursor" style="margin-left:2px; margin-top:0px; width:110px; height:66px;"></div>
        <div class="custom-sensor" style="margin: -66px auto auto; width:66px; height:66px;"></div>
        <div class="custom-separe" style="margin-top:0px; width:110px; height:7px;"></div>	
        <div class="custom-history" style="#displayHistory#; font-size:8.5px; margin-top:0px;">
            <span title='Min' class='tooltips'>#minHistoryValue#</span>&nbsp;|&nbsp;<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>&nbsp;|&nbsp;<span title='Max' class='tooltips'>#maxHistoryValue#</span>&nbsp;&nbsp;<i class="#tendance#"></i>
        </div>
        <div class="custom-bottom" style="text-align:center; margin-top:0px; width:110px; height:18px; font-weight:bold; font-size:14px;"></div>
    </div>
    <script>
      	// get params
      	var param_type    = "#type#";    // hot/cold
      	var param_theme   = "#theme#";   // eedomus/clear/light
      	var param_sensor  = "#sensor#";  // energy/memory/sdcard/temperature/humidity/cpu/light/euro/dollar/battery
      	var param_cursor  = "#cursor#";  // dark/red
      	var param_reverse = "#reverse#"; // false/true, true reverse jauge and colors
        
      	// define default folder path
      	var value_path = "plugins/widget/core/template/dashboard/cmd.info.numeric.EeDomus_jauges/";
        
        //define title
        var value_title   = "#id#";
        if ( "#name#".replace("name") != "#undefined#" ) { value_title = "#name#"; }
        $("div[item=#id#]").find(".custom-title").html(value_title);
        
        // define reverse
        var value_reverse = false;
      	if ( param_reverse == "true" ) { value_reverse = true; }
      
      	// define theme and type style
        var value_type = "hot";
      	if ( param_type == "cold" ) { value_type = param_type; }
        var value_theme = "eedomus";
      	if ( param_theme == "clear" ) { value_theme = param_theme; }
      	else if ( param_theme == "light" ) { value_theme = param_theme; }
      	var jauge_theme = value_type + "_" + value_theme;
      	$("div[item=#id#]").find(".custom-theme").css("background", "url('" + value_path + "jauge_" + jauge_theme + ".png') no-repeat");
		$("div[item=#id#]").find(".custom-theme").css("background-position", "center top");
        if ( value_reverse == true ) { $("div[item=#id#]").find(".custom-theme").css("transform", "scaleX(-1)"); }
      
      	// define cursor style
        var value_cursor = "dark";
      	if ( param_cursor == "red" ) { value_cursor = param_cursor; }
      	$("div[item=#id#]").find(".custom-cursor").css("background", "url('" + value_path + "arrow_" + value_cursor + ".png') no-repeat");
      	$("div[item=#id#]").find(".custom-cursor").css("background-position", "center top");
      
      	// define jauge position
      	var value    = ($.isNumeric('#state#'))    ? parseFloat('#state#') : 0.0;
        var minValue = ($.isNumeric('#minValue#')) ? parseFloat('#minValue#') : 0.0;
      	var maxValue = ($.isNumeric('#maxValue#')) ? parseFloat('#maxValue#') : 0.0;
        var maxJauge = 280.0;
        var rotation = (value-minValue) / (maxValue - minValue) * maxJauge;
      	rotation = ( rotation > maxJauge ) ? maxJauge : rotation;
		$("div[item=#id#]").find(".custom-cursor").css("transform", "rotate(" + rotation + "deg)");
      
      	// define real state
      	var state = ($.isNumeric('#state#')) ? '#state# #unite#' : 'Error';
      	$("div[item=#id#]").find(".custom-bottom").html(state);
      
      	// define sensor style
        var value_sensor  = "";
      	if ( param_sensor == "energy" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "memory" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "sdcard" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "cpu" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "temperature" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "humidity" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "light" && value == 0.0 ) { value_sensor = 'light'; }
      	else if ( param_sensor == "light" ) { value_sensor = 'light_on'; }
      	else if ( param_sensor == "euro" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "dollar" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "battery" ) { value_sensor = param_sensor; }
      	$("div[item=#id#]").find(".custom-sensor").css("background", "url('" + value_path + "type_" + value_sensor + ".png') no-repeat");
      	$("div[item=#id#]").find(".custom-sensor").css("background-position", "center top");
      
      	// define history background
      	$("div[item=#id#]").find(".custom-history").css("background", "url('" + value_path + "bg_history.png') repeat-y");
      	$("div[item=#id#]").find(".custom-history").css("background-position", "center top");
      
      	// define bottom state color
      	var bottom_bg = "error";
      	var pourcent = (value-minValue) / (maxValue - minValue) * 100;
      	pourcent = ( pourcent > 100 ) ? 100 : pourcent;
      	pourcent = ( pourcent < 0 ) ? 0 : pourcent;
      	if ( state != 'Error' && value_type == "hot" ) {
            if 	    ( pourcent < 20 ) { bottom_bg = value_reverse == true ? value_type + "_80" : value_type + "_00" }
            else if ( pourcent < 40 ) { bottom_bg = value_reverse == true ? value_type + "_60" : value_type + "_20"; }
            else if ( pourcent < 60 ) { bottom_bg = value_type + "_40"; }
            else if ( pourcent < 80 ) { bottom_bg = value_reverse == true ? value_type + "_20" : value_type + "_60"; }
            else { bottom_bg = value_reverse == true ? value_type + "_00" : value_type + "_80"; }
        }
      	else if ( state != 'Error' && value_type == "cold" ) {
            if 	    ( pourcent < 33 ) { bottom_bg = value_reverse == true ? value_type + "_66" : value_type + "_00"; }
            else if ( pourcent < 66 ) { bottom_bg = value_type + "_33"; }
            else { bottom_bg = value_reverse == true ? value_type + "_00" : value_type + "_66"; }
        }
      	$("div[item=#id#]").find(".custom-bottom").css("background", "url('" + value_path + "bottom_" + bottom_bg + ".png') no-repeat");
        $("div[item=#id#]").find(".custom-bottom").css("background-position", "center top");
	</script>
</div>
-- 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
JAG
Actif
Messages : 591
Inscription : 21 mai 2016, 11:10

Re: Explications sur le nouveau codage des widgets

Message par JAG » 08 avr. 2019, 17:17

Salut
Il me semble que j’ai fait un widget pour justement reprendre ce widget pour les batteries

Regarde sur le Market

Bonne soirée


Envoyé de mon iPhone en utilisant Tapatalk
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

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

Re: Explications sur le nouveau codage des widgets

Message par Salvialf » 08 avr. 2019, 17:22

Theduck38 a écrit :
08 avr. 2019, 17:14
Bonjour,

Je bute sans succès sur le widget 'Eedomus Gauges'... l'écriture n'est pas habituelle par rapport aux autres widgets déjà abordés ici et je n'arrive pas à m'en sortir.
Si quelqu'un a un peu de temps à perdre...
Salut,

Je l'ai déjà fait celui-là je l'avais écrit sur mon post [DEV-WIDGETS]:

Code : Tout sélectionner

<div item="#id#" style="text-align:center;margin-top:2px; width:110px; height:130px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
	<div class="custom-theme" style="float:left; margin-top:0px; width:110px; height:118px;position:absolute;"></div>
    <div class="custom-content" style="width:110px; height:118px; position:absolute;">
        <div class="custom-title" style="margin-top:0px; width:110px; height:26px;"></div>
        <div class="custom-cursor" style="margin-left:2px; margin-top:0px; width:110px; height:66px;"></div>
        <div class="custom-sensor" style="margin: -66px auto auto; width:66px; height:66px;"></div>
        <div class="custom-separe" style="margin-top:0px; width:110px; height:7px;"></div>	
        <div class="custom-history" style="#displayHistory#; font-size:8.5px; margin-top:0px;">
            <span title='Min' class='tooltips'>#minHistoryValue#</span>&nbsp;|&nbsp;<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>&nbsp;|&nbsp;<span title='Max' class='tooltips'>#maxHistoryValue#</span>&nbsp;&nbsp;<i class="#tendance#"></i>
        </div>
        <div class="custom-bottom" style="text-align:center; margin-top:0px; width:110px; height:18px; font-weight:bold; font-size:14px;"></div>
    </div>
    <script>
      jeedom.cmd.update['#id#'] = function(_options){
      	// get params
      	var param_type    = "#type#";    // hot/cold
      	var param_theme   = "#theme#";   // eedomus/clear/light
      	var param_sensor  = "#sensor#";  // energy/memory/sdcard/temperature/humidity/cpu/light/euro/dollar/battery
      	var param_cursor  = "#cursor#";  // dark/red
      	var param_reverse = "#reverse#"; // false/true, true reverse jauge and colors
        
      	// define default folder path
      	var value_path = "plugins/widget/core/template/dashboard/cmd.info.numeric.EeDomus_jauges/";
        
        //define title
        var value_title   = "#id#";
        if ( "#name#".replace("name") != "#undefined#" ) { value_title = "#name#"; }
        $("div[item=#id#]").find(".custom-title").html(value_title);
        
        // define reverse
        var value_reverse = false;
      	if ( param_reverse == "true" ) { value_reverse = true; }
      
      	// define theme and type style
        var value_type = "hot";
      	if ( param_type == "cold" ) { value_type = param_type; }
        var value_theme = "eedomus";
      	if ( param_theme == "clear" ) { value_theme = param_theme; }
      	else if ( param_theme == "light" ) { value_theme = param_theme; }
      	var jauge_theme = value_type + "_" + value_theme;
      	$("div[item=#id#]").find(".custom-theme").css("background", "url('" + value_path + "jauge_" + jauge_theme + ".png') no-repeat");
		$("div[item=#id#]").find(".custom-theme").css("background-position", "center top");
        if ( value_reverse == true ) { $("div[item=#id#]").find(".custom-theme").css("transform", "scaleX(-1)"); }
      
      	// define cursor style
        var value_cursor = "dark";
      	if ( param_cursor == "red" ) { value_cursor = param_cursor; }
      	$("div[item=#id#]").find(".custom-cursor").css("background", "url('" + value_path + "arrow_" + value_cursor + ".png') no-repeat");
      	$("div[item=#id#]").find(".custom-cursor").css("background-position", "center top");
      
      	// define jauge position
      	var value    = ($.isNumeric(_options.display_value)) ? parseFloat(_options.display_value) : 0.0;
        var minValue = ($.isNumeric('#minValue#')) ? parseFloat('#minValue#') : 0.0;
      	var maxValue = ($.isNumeric('#maxValue#')) ? parseFloat('#maxValue#') : 0.0;
        var maxJauge = 280.0;
        var rotation = (value-minValue) / (maxValue - minValue) * maxJauge;
      	rotation = ( rotation > maxJauge ) ? maxJauge : rotation;
		$("div[item=#id#]").find(".custom-cursor").css("transform", "rotate(" + rotation + "deg)");
      
      	// define real state
      	var state = ($.isNumeric(_options.display_value)) ? _options.display_value+'#unite#' : 'Error';
      	$("div[item=#id#]").find(".custom-bottom").html(state);
      
      	// define sensor style
        var value_sensor  = "";
      	if ( param_sensor == "energy" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "memory" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "sdcard" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "cpu" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "temperature" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "humidity" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "light" && value == 0.0 ) { value_sensor = 'light'; }
      	else if ( param_sensor == "light" ) { value_sensor = 'light_on'; }
      	else if ( param_sensor == "euro" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "dollar" ) { value_sensor = param_sensor; }
      	else if ( param_sensor == "battery" ) { value_sensor = param_sensor; }
      	$("div[item=#id#]").find(".custom-sensor").css("background", "url('" + value_path + "type_" + value_sensor + ".png') no-repeat");
      	$("div[item=#id#]").find(".custom-sensor").css("background-position", "center top");
      
      	// define history background
      	$("div[item=#id#]").find(".custom-history").css("background", "url('" + value_path + "bg_history.png') repeat-y");
      	$("div[item=#id#]").find(".custom-history").css("background-position", "center top");
      
      	// define bottom state color
      	var bottom_bg = "error";
      	var pourcent = (value-minValue) / (maxValue - minValue) * 100;
      	pourcent = ( pourcent > 100 ) ? 100 : pourcent;
      	pourcent = ( pourcent < 0 ) ? 0 : pourcent;
      	if ( state != 'Error' && value_type == "hot" ) {
            if 	    ( pourcent < 20 ) { bottom_bg = value_reverse == true ? value_type + "_80" : value_type + "_00" }
            else if ( pourcent < 40 ) { bottom_bg = value_reverse == true ? value_type + "_60" : value_type + "_20"; }
            else if ( pourcent < 60 ) { bottom_bg = value_type + "_40"; }
            else if ( pourcent < 80 ) { bottom_bg = value_reverse == true ? value_type + "_20" : value_type + "_60"; }
            else { bottom_bg = value_reverse == true ? value_type + "_00" : value_type + "_80"; }
        }
      	else if ( state != 'Error' && value_type == "cold" ) {
            if 	    ( pourcent < 33 ) { bottom_bg = value_reverse == true ? value_type + "_66" : value_type + "_00"; }
            else if ( pourcent < 66 ) { bottom_bg = value_type + "_33"; }
            else { bottom_bg = value_reverse == true ? value_type + "_00" : value_type + "_66"; }
        }
      	$("div[item=#id#]").find(".custom-bottom").css("background", "url('" + value_path + "bottom_" + bottom_bg + ".png') no-repeat");
        $("div[item=#id#]").find(".custom-bottom").css("background-position", "center top");
        }
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>
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
JAG
Actif
Messages : 591
Inscription : 21 mai 2016, 11:10

Re: Explications sur le nouveau codage des widgets

Message par JAG » 08 avr. 2019, 17:30

Salut

Je viens de regarder, je l'avais publier sur le market
Capture d’écran 2019-04-08 à 17.29.09.png
Capture d’écran 2019-04-08 à 17.29.09.png (51.53 Kio) Consulté 318 fois
Bonne soirée
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

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