Explications sur le nouveau codage des widgets

[Salvialf]

Salut

Je viens de regarder, je l'avais publier sur le market
Capture d’écran 2019-04-08 à 17.29.09.png
Bonne soirée

Je crois pas que c'est le même ! Pour moi il parle de celui-là (en tout cas c'est celui dont je viens de balancer le code):

[Theduck38]

Yess, merci à tous les deux.
J'ai cherché un peu trop vite : pas de mention "eedomus" dans les posts

Je vais maintenant essayer de comprendre pourquoi j'ai pas réussi à l'adapter...

[Salvialf]

Yess, merci à tous les deux.
J'ai cherché un peu trop vite : pas de mention "eedomus" dans les posts

Je vais maintenant essayer de comprendre pourquoi j'ai pas réussi à l'adapter...

'_option.display.value' au lieu de #state#

[Theduck38]

ch'ui dégoutté... j'avais fait les bonnes modifs la première fois... et j'ai oublié de fermer l'accolade de la fonction jeedom.cmd.update

[Theduck38]

C'est le premier truc que j'ai essayé avant de partir dans des modifs débiles...

[Salvialf]

Lol ah oui l'accolade c'est fatal ! Ce qui est bien c'est que tu ne te feras plus avoir maintenant! Pendant que t'es la le widget Kontrol2 est fini j'ai attaqué la doc... dispo sous peu!

[Theduck38]

Cool, merci !

[Salvialf]

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

OK Kontrol2 est dans la place (heu sur le market) avec toutes les fonctionnalités et paramètres personnalisables !!

Je suis revenu sur Knob par à-coups je vais sûrement pouvoir en faire quelque chose faut juste que je teste quelques pull-requests présents sur le GitHub

[Claude69]

Hello, c'est encore moi
Toujours dans l'optique de faire mes propres widgets, je bute sur un bout de code.
Je souhaite centraliser mes images et j'ajoute dans mon widget (Code tiré de thermometreIMG2):
var srcImg = 'plugins/widget/core/images/';
Dans le code suivant :
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.thermometreIMG2/TempRouge.png' class='thermometre_img' id='thermometre#id#'/>");
Je cherche à remplacer le chemin de l'image par ma variable srcImg
Pas de souci sur un cas simple :
$(".iconCmd#uid#").append('<img src="'+srcImg +'Poubelle_jaune.png" height=100 width=100/>');
Par contre impossible d'avoir l'image dans le cas du thermomètre

[Theduck38]

Hello,

$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src=" + srcImg + "dashboard/cmd.info.numeric.thermometreIMG2/TempRouge.png' class='thermometre_img' id='thermometre#id#'/>");

Ça marche pas ça ?

[Claude69]

Hello,

$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src=" + srcImg + "dashboard/cmd.info.numeric.thermometreIMG2/TempRouge.png' class='thermometre_img' id='thermometre#id#'/>");

Ça marche pas ça ?

Hello
J'ai essayé en modifiant car le chemin du dossier est dans scrImg
J'ai dans le code une ligne var srcImg = 'plugins/widget/core/images/';
Voila ce que je mets, mais je n'ai pas l'image.
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src=" + srcImg + "TempRouge.png' class='thermometre_img' id='thermometre#id#'/>");

[Salvialf]

Bonjour,

Sans conviction mais je crois que c'est normal. Il n'y a que les widgets créés avec l'assistant de création qui permettent de stocker les images ailleurs que dans le répertoire du widget selon moi.

D'où les lignes estampillées <NE PAS SUPPRIMER> sur les widgets créées soi-même qui renvoie vers le dossier "images".

[Theduck38]

Chez moi ça marche.
Testé en créant un widget info binaire 'test' et en balançant deux images (powericonON.png et powericonOFF.png) dans /plugins/widget/core/images/:

Code : Tout sélectionner

<div style="width:90px;min-height:100px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
    <center>
        <span class='cmdName' style="font-weight: bold;font-size : 14px;">#name#</span>
        <span style="font-size: 3em;font-weight: bold;margin-top: 5px;" class="iconCmd"></span>
    </center>
    <script>

      	// rouge, vert, bleu, jaune
        jeedom.cmd.update['#id#'] =function(_options){
        var srcImg = 'plugins/widget/core/images/';
      	var taille = (is_numeric('#size#')) ? parseFloat('#size#') : 60;  
 
			if (_options.display_value == '1') {
				$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="' + srcImg + 'powericonON.png" style="height:' + taille + 'px;width:' + taille + 'px; "/>');
			}else {
				$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="' + srcImg + 'powericonOFF.png" style="height:' + taille + 'px;width:' + taille + 'px; "/>');
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    </script>

</div>

La seule différence est que j'ai inversé les " et les ' dans mon code.

[Salvialf]

Bon bah je retire heureusement que j'avais mis les formes ça ne m'aurait pas étonné qu'il y ait un problème de droits pour accéder à un autre répertoire mais j'aurais pu tester pour confirmer.

@theduck38 a les choses en main

ah oui j'avais pas vu qu'il manquait les apostrophes sur l'appel de la variable

[Theduck38]

Après, il y a peut-être des problèmes de droits sur certaines install.
J'ai vérifié avant de tester que les droits étaient OK sur mon dossier 'Images'.

[JAG]

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

@breizh22
Salut, j'ai fait une petite modif esthétique et ajouter marge a droite à gauche pour le cadre du texte, voici le résultat
J'ai aussi autorisé le paramétrage des couleurs dans le widget, cela permettra a tous de changer la couleur

Capture d’écran 2019-04-14 à 16.49.46.png (212.34 Kio) Consulté 1683 fois

Voila le résultat, à tester et me dire si c'est ok

Capture d’écran 2019-04-14 à 16.47.00.png (31.63 Kio) Consulté 1683 fois

[HerveL]

Bonjour,

J'essaie de mettre à jour un de mes widgets info qui permet d'afficher l'état d'un volet roulant "home made"
Je me suis inspiré du store à banne de JAG pour adapter l'ancienne version de mon code et le rendre compatible
A priori c'est simple, mais ça ne marche pas - rien ne s'affiche - et je ne trouve pas ce qui cloche.
Une bonne âme pourrait elle m'aider svp ?

Code : Tout sélectionner

<div style="min-width:100px; min-height:100px;" class="cmd tooltips cmd-widget #history# #displayHistory#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
		<span style="font-weight: bold;font-size:12px;#hideCmdName#">#name_display#</span>
		<div class="iconCmd#id#"></div>
	</center>
  
	<script>  
      jeedom.cmd.update['#id#'] = function(_options){
      	var State = parseFloat(_options.display_value);

            $('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
          	var niveau 	= 0;
      
			if(state == 0) {
              niveau = 0;
            } else if(state > 0 && state <= 35 ) { 
              niveau = 10; 
            } else if(state > 35 && state <= 45 ) { 
              niveau = 20; 
            } else if(state > 45 && state <= 55 ) {
              niveau = 30; 
            } else if(state > 55 && state <= 63 ) { 
              niveau = 40;
            } else if(state > 63 && state <= 73 ) { 
              niveau = 50;  
            } else if(state > 73 && state <= 84 ) { 
              niveau = 60;  
            } else if(state > 84 && state <= 92 ) { 
              niveau = 70;  
            } else if(state > 92 && state <= 95 ) { 
              niveau = 80;  
            } else if(state > 95) { 
              niveau = 99; 
            }
    		$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Rv_Design_Store_CuisineGB/M3D-Cuis_Store-'+niveau+'.png" />');
 
      }
      jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});   

	</script>

</div>

[cadavor]

Bonjour,

J'essaie de mettre à jour un de mes widgets info qui permet d'afficher l'état d'un volet roulant "home made"
Je me suis inspiré du store à banne de JAG pour adapter l'ancienne version de mon code et le rendre compatible
A priori c'est simple, mais ça ne marche pas - rien ne s'affiche - et je ne trouve pas ce qui cloche.
Une bonne âme pourrait elle m'aider svp ?

Code : Tout sélectionner

<div style="min-width:100px; min-height:100px;" class="cmd tooltips cmd-widget #history# #displayHistory#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
		<span style="font-weight: bold;font-size:12px;#hideCmdName#">#name_display#</span>
		<div class="iconCmd#id#"></div>
	</center>
  
	<script>  
      jeedom.cmd.update['#id#'] = function(_options){
      	var State = parseFloat(_options.display_value);

            $('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
          	var niveau 	= 0;
      
			if(state == 0) {
              niveau = 0;
            } else if(state > 0 && state <= 35 ) { 
              niveau = 10; 
            } else if(state > 35 && state <= 45 ) { 
              niveau = 20; 
            } else if(state > 45 && state <= 55 ) {
              niveau = 30; 
            } else if(state > 55 && state <= 63 ) { 
              niveau = 40;
            } else if(state > 63 && state <= 73 ) { 
              niveau = 50;  
            } else if(state > 73 && state <= 84 ) { 
              niveau = 60;  
            } else if(state > 84 && state <= 92 ) { 
              niveau = 70;  
            } else if(state > 92 && state <= 95 ) { 
              niveau = 80;  
            } else if(state > 95) { 
              niveau = 99; 
            }
    		$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Rv_Design_Store_CuisineGB/M3D-Cuis_Store-'+niveau+'.png" />');
 
      }
      jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});   

	</script>

</div>

Le nom des variables est sensible à la casse donc la variable State n'est pas la variable state

Code : Tout sélectionner

<div style="min-width:100px; min-height:100px;" class="cmd tooltips cmd-widget #history# #displayHistory#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
		<span style="font-weight: bold;font-size:12px;#hideCmdName#">#name_display#</span>
		<div class="iconCmd#id#"></div>
	</center>
  
	<script>  
      jeedom.cmd.update['#id#'] = function(_options){
      	var state = parseFloat(_options.display_value);

          	var niveau 	= 0;
      
	if(state == 0) {
              niveau = 0;
            } else if(state > 0 && state <= 35 ) { 
              niveau = 10; 
            } else if(state > 35 && state <= 45 ) { 
              niveau = 20; 
            } else if(state > 45 && state <= 55 ) {
              niveau = 30; 
            } else if(state > 55 && state <= 63 ) { 
              niveau = 40;
            } else if(state > 63 && state <= 73 ) { 
              niveau = 50;  
            } else if(state > 73 && state <= 84 ) { 
              niveau = 60;  
            } else if(state > 84 && state <= 92 ) { 
              niveau = 70;  
            } else if(state > 92 && state <= 95 ) { 
              niveau = 80;  
            } else if(state > 95) { 
              niveau = 99; 
            }
    		$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Rv_Design_Store_CuisineGB/M3D-Cuis_Store-'+niveau+'.png" />');
 
      }
      jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});   

	</script>

</div>

[HerveL]

Bonjour,

J'essaie de mettre à jour un de mes widgets info qui permet d'afficher l'état d'un volet roulant "home made"
Je me suis inspiré du store à banne de JAG pour adapter l'ancienne version de mon code et le rendre compatible
A priori c'est simple, mais ça ne marche pas - rien ne s'affiche - et je ne trouve pas ce qui cloche.
Une bonne âme pourrait elle m'aider svp ?

Code : Tout sélectionner

<div style="min-width:100px; min-height:100px;" class="cmd tooltips cmd-widget #history# #displayHistory#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
		<span style="font-weight: bold;font-size:12px;#hideCmdName#">#name_display#</span>
		<div class="iconCmd#id#"></div>
	</center>
  
	<script>  
      jeedom.cmd.update['#id#'] = function(_options){
      	var State = parseFloat(_options.display_value);

            $('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
          	var niveau 	= 0;
      
			if(state == 0) {
              niveau = 0;
            } else if(state > 0 && state <= 35 ) { 
              niveau = 10; 
            } else if(state > 35 && state <= 45 ) { 
              niveau = 20; 
            } else if(state > 45 && state <= 55 ) {
              niveau = 30; 
            } else if(state > 55 && state <= 63 ) { 
              niveau = 40;
            } else if(state > 63 && state <= 73 ) { 
              niveau = 50;  
            } else if(state > 73 && state <= 84 ) { 
              niveau = 60;  
            } else if(state > 84 && state <= 92 ) { 
              niveau = 70;  
            } else if(state > 92 && state <= 95 ) { 
              niveau = 80;  
            } else if(state > 95) { 
              niveau = 99; 
            }
    		$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Rv_Design_Store_CuisineGB/M3D-Cuis_Store-'+niveau+'.png" />');
 
      }
      jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});   

	</script>

</div>

Le nom des variables est sensible à la casse donc la variable State n'est pas la variable state

Code : Tout sélectionner

<div style="min-width:100px; min-height:100px;" class="cmd tooltips cmd-widget #history# #displayHistory#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
		<span style="font-weight: bold;font-size:12px;#hideCmdName#">#name_display#</span>
		<div class="iconCmd#id#"></div>
	</center>
  
	<script>  
      jeedom.cmd.update['#id#'] = function(_options){
      	var state = parseFloat(_options.display_value);

          	var niveau 	= 0;
      
	if(state == 0) {
              niveau = 0;
            } else if(state > 0 && state <= 35 ) { 
              niveau = 10; 
            } else if(state > 35 && state <= 45 ) { 
              niveau = 20; 
            } else if(state > 45 && state <= 55 ) {
              niveau = 30; 
            } else if(state > 55 && state <= 63 ) { 
              niveau = 40;
            } else if(state > 63 && state <= 73 ) { 
              niveau = 50;  
            } else if(state > 73 && state <= 84 ) { 
              niveau = 60;  
            } else if(state > 84 && state <= 92 ) { 
              niveau = 70;  
            } else if(state > 92 && state <= 95 ) { 
              niveau = 80;  
            } else if(state > 95) { 
              niveau = 99; 
            }
    		$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Rv_Design_Store_CuisineGB/M3D-Cuis_Store-'+niveau+'.png" />');
 
      }
      jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});   

	</script>

</div>

Bonjour,
Merci, effectivement tu as raison, avec la police de caractère de l'interface ça ne se voyait que difficilement.
Mais il doit y avoir encore autre chose car cela ne fonctionne toujours pas

[Salvialf]

Salut,

il manque le #id# à la fin de "iconCmd".