Explications sur le nouveau codage des widgets

[Salvialf]

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 ?

[Ricardo]

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.

[leon-99]

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

[JAG]

@mortyre et @breizh22
Salut,

@mortyre et @breizh22

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

[breizh22]

Merci à toi pour ce code très clair et le lien, je vais essayer cela ce week end

[Salvialf]

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

[Theduck38]

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

[Salvialf]

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

[breizh22]

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

[JAG]

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>

[breizh22]

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

[JAG]

Ah cool que cela marche


Envoyé de mon iPhone en utilisant Tapatalk

[breizh22]

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 ?

[Salvialf]

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 !

[breizh22]

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

[cyval]

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



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.

[Theduck38]

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>

[JAG]

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

[Salvialf]

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>

[JAG]

Salut

Je viens de regarder, je l'avais publier sur le market

Capture d’écran 2019-04-08 à 17.29.09.png (51.53 Kio) Consulté 1510 fois

Bonne soirée