Widget dédoublé en 3.2.3

[JAG]

Salut
Tu peux partager le code de ton widget ainsi que les images s il y en a

Je peux peut être essayer de regarder
Bonne soirée


Envoyé de mon JAGiPhone en utilisant Tapatalk

[JAG]

Salut,
Je viens de faire la correction mais il faut tester.
Merci de me faire test retours

Édit du 13/09/2018 : maj code Luminosité_Mini
Édit du 13/09/2018 : encore une erreur sur le Code pour INFO: LuminositéIMG - Dashboard, je vais le corriger rapidement

Code pour INFO: Luminosité_Mini - Dashboard

luminosite.png (18.79 Kio) Consulté 1850 fois

Code : Tout sélectionner

<div style="width:140px;height:60px;" class="cmd tooltips cmd-widget cursor container-fluid #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
  <!-- refait par JAG 20180913 19:50 --> 
  	<span style="font-weight: bold;font-size : 12px;#hideCmdName#;">#name_display#</span>
  	<center>
    	<span class="iconCmd"></span>
      	<span class="pull-right">#unite#</span>
      	<span class="pull-right state"></span> 	
    </center>   
  
	<script>
            // Paramètre "sizeh" : à déclarer en pixels - 30 maxi
                var LUXheight = (is_numeric('#sizeh#')) ? parseFloat('#sizeh#') : 30;
            // Paramétrage des images
                var srcImg = 'plugins/widget/core/template/dashboard/cmd.info.numeric.Luminosité_Mini/';
              	var LUXmsrcImg_moon = 'moon.png';
        		var LUXmsrcImg_cloud = 'cloud.png';
    			var LUXmsrcImg_sun = 'sun.png';
      
                var iconUpdate = function (state){

            $('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
            if (state < 20) {
                $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="'+srcImg+'moon.png" style="height:' + LUXheight +'px;">');
            }
            if (state >= 20 && state < 100) {
                $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="'+srcImg+'cloud.png" style="height:' + LUXheight +'px;">');
            }
            if (state >= 100) {
                $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="'+srcImg+'sun.png" style="height:' + LUXheight +'px;">');
            }
            $('.cmd[data-cmd_uid=#uid#] .state').text(state);
        };
        jeedom.cmd.update['#id#'] = function(_options){
            $('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
            iconUpdate(_options.display_value);
        }
        jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Code pour INFO: LuminositéIMG - Dashboard

Code : Tout sélectionner

<div style="width:130px;height:115px;" class="#history# tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#" >
  <!-- refait par JAG 20180911 19:30 --> 
    <span class='cmdName' style="font-weight: bold;font-size : 12px;#hideCmdName#;">#name#</span>
    <div style="position:relative; height:100px">
   		<div style="position:absolute;width: 100%;text-align: center;z-index:1"; id="iconCmd#id#"></div>
    	<center>
			<div style="position:relative; z-index:2;">
        		<span style="font-size: 2em;font-weight: bold;margin-top: 5px;">#state#</span> 
        		<span style="font-size: 1em;font-weight: bold;margin-top: 5px;">#unite#</span>
    		</div>
    	</center>
  	</div>
<script>
         // Paramètre "sizeh" : à déclarer en pixels - 100 maxi
      		var LUXheight = (is_numeric('#sizeh#')) ? parseFloat('#sizeh#') : 100;
    	// Paramétrage des images
        	var LUXsrcImgCHE = 'plugins/widget/core/template/dashboard/cmd.info.numeric.luminositeIMG/';
        	var LUXsrcImg_moon = 'moon.png';
        	var LUXsrcImg_cloud = 'cloud.png';
    		var LUXsrcImg_sun = 'sun.png';
    
        jeedom.cmd.update['#id#'] = function(_options){
        $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
        // affiche la valeur
         $('.cmd[data-cmd_id=#id#] .state#id#').empty().append(_options.display_value);

        // les evaluations pour changer l'icone et la couleur  
          	if (_options.display_value < 20 ) {
          		$("#iconCmd#id#") .empty().append('<img src="'+LUXsrcImgCHE +LUXsrcImg_moon +'" style="height:' + LUXheight +'px;">');
        	}else if (_options.display_value >= 20 && _options.display_value < 100) { 
        		$("#iconCmd#id#") .empty().append('<img src="'+LUXsrcImgCHE +LUXsrcImg_cloud +'" style="height:' + LUXheight +'px;">');
        	}else{
          	//$("#iconCmd#id#") .empty().append('<img width="30" src="plugins/widget/core/template/dashboard/cmd.info.numeric.Luminosité_Mini/sun.png">');
          		$("#iconCmd#id#") .empty().append('<img src="'+LUXsrcImgCHE +LUXsrcImg_sun +'" style="height:' + LUXheight +'px;">');
         }; 
        }
        jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

[fishes]

salut,

voici mon code

Code : Tout sélectionner

<div style="width:110px;height:115px;" class="#history# tooltips cmd cmd-widget" 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 style="position:relative; height:100px">
     	 <div style="position:absolute;width: 100%;text-align: center;z-index:1" id="iconCmd#id#"></div>
   		<center>
      		<div style="position:relative; z-index:2;">
                <span class="state#id#" style="font-size: 1.5em;font-weight: bold;margin-top: 5px;"></span>
   				<span style="font-size: 0.8em;font-weight: bold;margin-top: 5px;">#unite#</span>
  			</div>
   		</center>
  	</div>
</div>   
  <script>
jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
// affiche la valeur
 $('.cmd[data-cmd_id=#id#] .state#id#').empty().append(_options.display_value);

// les evaluations pour changer l'icone et la couleur  
  if (_options.display_value <= 20 ) {
  	$("#iconCmd#id#") .empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.LuminositeIMG_V3/moon.png">');
    
}else if (_options.display_value > 20 && _options.display_value <= 200) { 
    $("#iconCmd#id#") .empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.LuminositeIMG_V3/cloud.png">');
}else{
    $("#iconCmd#id#") .empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.LuminositeIMG_V3/sun.png">');
 }; 
  //

}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

il marche en terme d'affichage, les icones restent bien apparentes, par contre j'ai un retour à la ligne direct sur ma tuile après celui-ci et je ne trouve pas d'où il provient.
en gros tout widget que je place après celui-ci se retrouve une ligne plus bas sur la tuile...

je teste à midi ton code et te dis si cela fonctionne
merci

[fishes]

re,

j'ai trouvé l'erreur dans mon code grâce au tiens. il y avait un /div de trop...
par contre avec ton code, comme avec le mien, la valeur #state# ne se met pas à jour.
L'image change bien par contre

je vais regarder cela...
merci

[JAG]

Salut

Je viens d'essayer de faire qq chose, test et dis moi

Code : Tout sélectionner

<div style="width:140px;height:60px;" class="cmd tooltips cmd-widget cursor container-fluid #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
  <!-- refait par JAG 20180913 19:50 --> 
  	<span style="font-weight: bold;font-size : 12px;#hideCmdName#;">#name_display#</span>
  	<center>
    	<span class="iconCmd"></span>
      	<span class="pull-right">#unite#</span>
      	<span class="pull-right state"></span> 	
    </center>   
  
	<script>
            // Paramètre "sizeh" : à déclarer en pixels - 30 maxi
                var LUXheight = (is_numeric('#sizeh#')) ? parseFloat('#sizeh#') : 30;
            // Paramétrage des images
                var srcImg = 'plugins/widget/core/template/dashboard/cmd.info.numeric.Luminosité_Mini/';
              	var LUXmsrcImg_moon = 'moon.png';
        		var LUXmsrcImg_cloud = 'cloud.png';
    			var LUXmsrcImg_sun = 'sun.png';
      
                var iconUpdate = function (state){

            $('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
            if (state < 20) {
                $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="'+srcImg+'moon.png" style="height:' + LUXheight +'px;">');
            }
            if (state >= 20 && state < 100) {
                $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="'+srcImg+'cloud.png" style="height:' + LUXheight +'px;">');
            }
            if (state >= 100) {
                $('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img src="'+srcImg+'sun.png" style="height:' + LUXheight +'px;">');
            }
            $('.cmd[data-cmd_uid=#uid#] .state').text(state);
        };
        jeedom.cmd.update['#id#'] = function(_options){
            $('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
            iconUpdate(_options.display_value);
        }
        jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

[fishes]

salut,

ta solution marche
j'ai réussi également à avoir un retour plus fluide sur la mienne
merci bcp

[JAG]

Salut

Cool,
Il faut que je modifie encore un peu car j’ai un pb avec la dimension de l’image
Je mettrai à jour le code après

Par contre, il serait bien que tu partages ton code

Bonne journée

Édit du 13/09/2018 : maj code Luminosité_Mini
Édit du 13/09/2018 : encore une erreur sur le Code pour INFO: LuminositéIMG - Dashboard, je vais le corriger rapidement

Envoyé de mon JAGiPhone en utilisant Tapatalk

[JAG]

Salut à tous,

je n'ai pas fini de mettre à jour les widgets, je les mettrais a dispo qd je les aurais fini.
Mais là j'ai besoin de votre aide ,
je suis en train d'essayer de mettre à jour le widget "Sélecteur Multiple paramétrable Développé par drastef",
si qq passe par la peut m'aider cela serait super

Code : Tout sélectionner

<div id="fond#id#" class="cmd tooltips cmd-widget cursor" style="width : 200px ;height : 180px; border : 0px solid white;  border-radius: 25px; margin:5px"
	data-type="action" data-subtype="liste" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<div class="cmdName" style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
	<div id="objets#id#"></div> 
	<script>
		function AffLabel(index, textlab, ang, Selection, com){
        // fonction d'affichage d'un label et du tiret correspondant
        // index = numéro du label de 0 à N-1
        // textlab = texte du label
        // ang = angle de position du label par rapport à la verticale
        // Selection = index en cours de sélection
			var Offx = CenterX + 63*Math.sin(ang/180*3.14159);	// calcul du centre du label
			var Offy = CenterY - 63*Math.cos(ang/180*3.14159);
			var labelind = "label#id#"+index;					// Id affecté au label
        
         // ⬇︎Comment JAG : A reprendre une fois automatise 
			if (index == Selection){
              // Si on traite le label sélectionné, on affiche le label de la bonne classe
              	var comaction = "Actionclick(#id#,"+ang+",'"+com+"');";
				//$("#objets#id#").append($('<div id="'+labelind+'" class="btn-sm mylabelselect#id#">'+textlab+'</div>'));
              	$("#objets#id#").append($('<div id="'+labelind+'" title="'+textlab+'" class="btn btn-sm btn-default action cmdName tooltips mylabel#id#" onclick="'+comaction+'">'+textlab+'</div>'));
			} else {
              // si c'est un label non sélectionné,on affiche un bouton d'action
              	var comaction = "Actionclick(#id#,"+ang+",'"+com+"');";
				$("#objets#id#").append($('<div id="'+labelind+'" title="'+textlab+'" class="btn btn-sm btn-default action cmdName tooltips mylabel#id#" onclick="'+comaction+'">'+textlab+'</div>')); 
            }
         // ⬆︎ FIN Comment JAG : A reprendre une fois automatise
	        // On ajuste le X et le Y du label en fonction de l'angle  
			if (ang < 0){
				var decalex = (document.getElementById(labelind).offsetWidth);
			}else if (ang == 0){
				var decalex = (document.getElementById(labelind).offsetWidth)/2;
			} else {
				var decalex = 0;
			}
			var decaley = ((document.getElementById(labelind).offsetHeight)/2)*(1+Math.cos(ang/180*3.14159));
			// On ajuste la position du label
          	//$("#"+labelind).css({"transform" : "translate("+(Offx-decalex)+"px, "+(Offy-decaley)+"px)"});			
          	$("#"+labelind).css({"left" : (Offx-decalex)+"px", "top" : (Offy-decaley+16)+"px"});			
			
          	// calcul de la position du tiret
          	Offx = CenterX + 47*Math.sin(ang/180*3.14159);
			Offy = CenterY - 47*Math.cos(ang/180*3.14159);
			var gradind = "gradu#id#"+index;	//Id du tiret
			// On affiche le tiret
          	$("#objets#id#").append($('<img id="'+gradind+'" class="grad" src="plugins/widget/core/template/dashboard/cmd.action.select.selecteur/graduation.png">'));
			// On ajuste le X et le Y du tiret en fonction de l'angle
          	if (ang < 0){
				decalex = (document.getElementById(gradind).offsetWidth);
			} else if (ang == 0){
				decalex = (document.getElementById(gradind).offsetWidth)/2;
			} else {
				decalex = 0;
			}
			decaley = (document.getElementById(gradind).offsetHeight)/2;
          	// On ajuste la position et l'orientation du tiret
			//$("#"+gradind).css({"transform" : "translate("+(Offx-decalex)+"px, "+(Offy-decaley)+"px) rotate("+ang+"deg)"});
          	$("#"+gradind).css({"left" : (Offx-decalex)+"px", "top" : (Offy-decaley+16)+"px","transform" : "rotate("+ang+"deg)"});
		}

		function Actionclick(id, angle, valeur){
        // Lorsqu'on clique un bouton label : id = id du widget, angle = angle du label de destination, valeur de la commande
        	$("#Idcomut"+(id)).css({"transform" : "rotate("+angle+"deg)"});
			jeedom.cmd.execute({id: id, value: {select: valeur}});
		}
      
		var cmd = '#listValue#';	//on récupère la listde des label sous forme ...<option value="label" [selected]>label</option>...
		//cmd = cmd.substring(cmd.indexOf('>'), cmd.length);	// on supprime le 1er qui est vide
		var ListOfCmd = [];
      	var ListOfLabel = [];
		var Selection = 0;
		var i = 0;
		var extractcmd = "";
		while (cmd.indexOf('value=') != -1){
          // on extrait un par un les différents label en les comptant
			cmd = cmd.substring(cmd.indexOf('=')+2, cmd.length);
			extractcmd = cmd.substring(0, cmd.indexOf('"'));
			ListOfCmd.push(extractcmd);
			extractcmd = cmd.substring(cmd.indexOf('"'), cmd.indexOf('>'));
			if (extractcmd.indexOf('selected') != -1) {
              // si c'est le label sélectionné, on le mémorise
				Selection = i;
			}
          	cmd = cmd.substring(cmd.indexOf('>')+1, cmd.length);
          	extractcmd = cmd.substring(0, cmd.indexOf('<'));
          	ListOfLabel.push(extractcmd);
			i++;
		}
		
        var NbCmd = ListOfLabel.length;	// Nombre total de labels			
		var CenterX = document.getElementById("fond#id#").offsetWidth / 2;	//On centre les objets au milieu du widget
		var CenterY = 100;
		var AngMinMax;
		switch (NbCmd) {
            // répartition des labels en fonction de leur nombre
			case 1:
				AngMinMax = 0;
			case 2:
			case 3:
				AngMinMax = 45;
				break;
			case 4:
			case 5:
				AngMinMax = 90;
				break;
			default:
				AngMinMax = 120;
				break;
		};
		// on affiche le sélecteur au milieu et on l'oriente selon le label sélectionné
      	$("#objets#id#").empty();
		$("#objets#id#").append($('<img id="Idcomut#id#" class="comut" src="plugins/widget/core/template/dashboard/cmd.action.select.selecteur/commut.png">'));
		$("#Idcomut#id#").css({"top" : (CenterY-41+16)+"px", "left" : (CenterX-39)+"px"});
		$("#Idcomut#id#").css({"transform" : "rotate("+(-AngMinMax+(AngMinMax*2)/(NbCmd-1)*(Selection))+"deg)"});
		for (var i=0; i<NbCmd; i++)
		{
          // On affiche les N labels et tirets
			var ang = -AngMinMax+(AngMinMax*2)/(NbCmd-1)*(i);
			AffLabel(i, ListOfLabel[i], ang, Selection, ListOfCmd[i]);
		};

      //⬇︎TEST fonction Update
      	jeedom.cmd.update['#id#']({display_value:'#state#'});
        $('.cmd[data-cmd_id=#id#] .action').on('change', function() {
          	jeedom.cmd.execute({id: '#id#', value: {select:$(this).val()}});
        });
	</script>
</div>
	<style>
	.comut{
		position:absolute;
		width: 78px; height: 82px;
		transition: transform 0.5s;
		}  
	.mylabelselect#id#{
		position:absolute;
		background-color:#cmdColor#;
		border : white solid 2px;
		border-radius: 3px;
		vertical-align: middle;
		text-align: center;
		line-height: 17px;
		font-weight: bold;
		}
	.mylabel#id#{
		position:absolute;
		background-color:#cmdColor# !important;
		border-color : transparent !important;
		}
	.grad{
		position:absolute;
		width: 4px; height: 10px;
		}
	</style>

[JAG]

Salut à tous,
Je viens de résoudre des petits problèmes sur l'affichage, ci-joint mes corrections pour les widgets suivant :

Sur tous les widgets pour le Dashboard, j'ai ajouté la variable "sizehw" qui permet de définir la hauteur et la largeur. J'ai considérer que toutes les images étaient sous forme de carré

=> Alarme diverse
//Info

• AlarmCarreStatus + Mobile
• AlerteIncendie + Mobile
• AlerteInnondation + Mobile
• DetectionMouvement
• FibaroFloodSensor + Mobile
• TempAlertIMG + Mobile

//Action

• AlarmCarreLock

=> Énergie
//Info

• LegrandPriseCeliane

//Action

• PriseDeCourant + Mobile

=> Température
//Info

• SecureSSR03 + Mobile

=> Lumière
//Action

• LampeMural + Mobile
• LampePosee + Mobile
• LumiereJardinMobile (uniquement mobile)
• LumiereJardin (uniquement Dashboard)

//Info

• LumiereJardin + Mobile

=> Ouverture
//Info

• PorteFenetre2Vantaux(uniquement Mobile )

Merci de vos retours si vous voyez encore des erreurs

[bartounet]

Bonsoir.
J'ai le même problème sur le widget sapin.
Je suis étonné que les widget n'aient pas été mis à jour.

Code : Tout sélectionner

<div id="sapin#id#" style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#">
   <center>
         <span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="action" id="iconSapinCmd#id#"></span>
  </center>
   <script>
      var animeSapinInt;
         var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
       var cmdNom = '#name#'.toLowerCase();
      
         if('#state#' == '1' || '#state#' == 1){
             $('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png" couleurImg="rouge" width="54" height="75"/>');   
             if (cmdNom.indexOf('on') == 0 || cmdNom.indexOf('marche') == 0 ) {
                $('#sapin#id#').hide();  
            }
          
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                 VitesseAnime = parseFloat(VitesseAnime)*1000;
                animeSapinInt = setInterval(animeSapin, VitesseAnime);
            }
        }else{
             $('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" couleurImg="OFF" width="54" height="75"/>');      
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                $('#sapin#id#').hide();
                 
            }
        }

          $('#sapin#id#').on('click', function(){
              clearInterval(animeSapinInt);
              jeedom.cmd.execute({id: '#id#'});
         });
      
        function animeSapin(){
         var couleurImg = $('#iconSapinCmd#id# img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png',
                                               'couleurImg': 'bleu'
                                              });
            }else if(couleurImg == 'bleu'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png',
                                               'couleurImg': 'violet'
                                              });
            }else{
            $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png',
                                               'couleurImg': 'rouge'
                                              });
            }
          
        }
      
   </script>
</div>

[Roland2794]

Oui et il y en a encore pas mal d'autres. Ex alarme on off
Comme je n'y connais rien en programmation je me suis fait une raison et je rafraîchis le dashboard.
Depuis le temps que la nouvelle version est sortie on aurait pu s'attendre à ce qu'une passe soit faite sur les widget pour les corriger. Visiblement pour quelqu'un qui sait le faire ça prend que qques minutes. Dommage

[JAG]

Oui et il y en a encore pas mal d'autres. Ex alarme on off
Comme je n'y connais rien en programmation je me suis fait une raison et je rafraîchis le dashboard.
Depuis le temps que la nouvelle version est sortie on aurait pu s'attendre à ce qu'une passe soit faite sur les widget pour les corriger. Visiblement pour quelqu'un qui sait le faire ça prend que qques minutes. Dommage

Salut
Regarde sur le Market j’ai mis des widgets pour les alarmes

Si tu as le nom exact du widget je peux regarder
Bonne journée


Envoyé de mon JAGiPhone en utilisant Tapatalk

[cadavor]

Bonsoir.
J'ai le même problème sur le widget sapin.
Je suis étonné que les widget n'aient pas été mis à jour.

Code : Tout sélectionner

<div id="sapin#id#" style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#">
   <center>
         <span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="action" id="iconSapinCmd#id#"></span>
  </center>
   <script>
      var animeSapinInt;
         var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
       var cmdNom = '#name#'.toLowerCase();
      
         if('#state#' == '1' || '#state#' == 1){
             $('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png" couleurImg="rouge" width="54" height="75"/>');   
             if (cmdNom.indexOf('on') == 0 || cmdNom.indexOf('marche') == 0 ) {
                $('#sapin#id#').hide();  
            }
          
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                 VitesseAnime = parseFloat(VitesseAnime)*1000;
                animeSapinInt = setInterval(animeSapin, VitesseAnime);
            }
        }else{
             $('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" couleurImg="OFF" width="54" height="75"/>');      
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                $('#sapin#id#').hide();
                 
            }
        }

          $('#sapin#id#').on('click', function(){
              clearInterval(animeSapinInt);
              jeedom.cmd.execute({id: '#id#'});
         });
      
        function animeSapin(){
         var couleurImg = $('#iconSapinCmd#id# img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png',
                                               'couleurImg': 'bleu'
                                              });
            }else if(couleurImg == 'bleu'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png',
                                               'couleurImg': 'violet'
                                              });
            }else{
            $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png',
                                               'couleurImg': 'rouge'
                                              });
            }
          
        }
      
   </script>
</div>

Pour tous les widgets qui ont ce comportement de dédoublage.
Modifiez le code en ajoutant simplement

Code : Tout sélectionner

.empty()

avant chaque

Code : Tout sélectionner

.append(

présent dans le code.
(ou alors vous remplacez les "append" par "html")

Pour ton exemple

Code : Tout sélectionner

<div id="sapin#id#" style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#">
   <center>
         <span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="action" id="iconSapinCmd#id#"></span>
  </center>
   <script>
      var animeSapinInt;
         var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
       var cmdNom = '#name#'.toLowerCase();
      
         if('#state#' == '1' || '#state#' == 1){
             $('#iconSapinCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png" couleurImg="rouge" width="54" height="75"/>');   
             if (cmdNom.indexOf('on') == 0 || cmdNom.indexOf('marche') == 0 ) {
                $('#sapin#id#').hide();  
            }
          
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                 VitesseAnime = parseFloat(VitesseAnime)*1000;
                animeSapinInt = setInterval(animeSapin, VitesseAnime);
            }
        }else{
             $('#iconSapinCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" couleurImg="OFF" width="54" height="75"/>');      
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                $('#sapin#id#').hide();
                 
            }
        }

          $('#sapin#id#').on('click', function(){
              clearInterval(animeSapinInt);
              jeedom.cmd.execute({id: '#id#'});
         });
      
        function animeSapin(){
         var couleurImg = $('#iconSapinCmd#id# img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png',
                                               'couleurImg': 'bleu'
                                              });
            }else if(couleurImg == 'bleu'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png',
                                               'couleurImg': 'violet'
                                              });
            }else{
            $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png',
                                               'couleurImg': 'rouge'
                                              });
            }
          
        }
      
   </script>
</div>

[bartounet]

Merci de ta réponse.
J'ai bien essayé ton code, mais il se dédouble toujours au changement d'état
il revient si je fais F5

[cadavor]

Merci de ta réponse.
J'ai bien essayé ton code, mais il se dédouble toujours au changement d'état
il revient si je fais F5

Attention de bien re-sauvegarder l'équipement sur lequel tu as appliqué le widget car sinon c'est la version en cache qui est utilisé.

Vérifie en inspectant le code avec le navigateur que c'est bien le nouveau code qui est appliqué et pas l'ancien...

[JAG]

Salut
je viens d'essayer d'ajouter .empty() mais cela ne fonctionne pas dans le widget "selecteur"
https://www.jeedom.com/market/index.php ... =selecteur
Je sais aussi qu'il faut ajouter jeedom.cmd.update['#id#'] = function(_options){ dans le widget mais je ne vois pas ou. Le code de ce widget est trop compliqué pour moi

Peut-tu m'aider ?

Code : Tout sélectionner

<div id="fond#id#" class="cmd tooltips cmd-widget cursor #history#" style="width : 295px ;height : 190px;"
	data-type="action" data-subtype="liste" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<div class="cmdName" style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
	<div id="objets#id#"></div> 
	<script>
		function AffLabel(index, textlab, ang, Selection, com){
        // fonction d'affichage d'un label et du tiret correspondant
        // index = numéro du label de 0 à N-1
        // textlab = texte du label
        // ang = angle de position du label par rapport à la verticale
        // Selection = index en cours de sélection
			var Offx = CenterX + 63*Math.sin(ang/180*Math.PI);	// calcul du centre du label
			var Offy = CenterY - 63*Math.cos(ang/180*Math.PI);
			var labelind = "label#id#"+index;					// Id affecté au label
          	//Sélection
                 // if (index == Selection){
                    // Si on traite le label sélectionné, on affiche le label de la bonne classe
                      //$("#objets#id#").append($('<div id="'+labelind+'" class="btn-sm mylabelselect#id#">'+textlab+'</div>'));
                 // } else {
                    // si c'est un label non sélectionné,on affiche un bouton d'action
                      var comaction = "Actionclick(#id#,"+ang+",'"+com+"');";
                      $("#objets#id#").append($('<div id="'+labelind+'" title="'+textlab+'" class="btn btn-sm btn-default action cmdName tooltips mylabel#id#" onclick="'+comaction+'">'+textlab+'</div>')); 
                 // }
	        // On ajuste le X et le Y du label en fonction de l'angle  
                  if (ang < 0){
                      var decalex = (document.getElementById(labelind).offsetWidth);
                  }else if (ang == 0){
                      var decalex = (document.getElementById(labelind).offsetWidth)/2;
                  } else {
                      var decalex = 0;
                  }
                  var decaley = ((document.getElementById(labelind).offsetHeight)/2)*(1+Math.cos(ang/180*Math.PI));
			// On ajuste la position du label		
          		$("#"+labelind).css({"left" : (Offx-decalex)+"px", "top" : (Offy-decaley+16)+"px"});			
			
          	// calcul de la position du tiret
                Offx = CenterX + 47*Math.sin(ang/180*Math.PI);
                Offy = CenterY - 47*Math.cos(ang/180*Math.PI);
          	//Id du tiret
                var gradind = "gradu#id#"+index;	
			// On affiche le tiret
          		$("#objets#id#").append($('<img id="'+gradind+'" class="grad" src="plugins/widget/core/template/dashboard/cmd.action.select.selecteur/graduation.png">'));
			// On ajuste le X et le Y du tiret en fonction de l'angle
                if (ang < 0){
                    decalex = (document.getElementById(gradind).offsetWidth);
                } else if (ang == 0){
                    decalex = (document.getElementById(gradind).offsetWidth)/2;
                } else {
                    decalex = 0;
                }
                decaley = (document.getElementById(gradind).offsetHeight)/2;
          	// On ajuste la position et l'orientation du tiret
          		$("#"+gradind).css({"left" : (Offx-decalex)+"px", "top" : (Offy-decaley+16)+"px","transform" : "rotate("+ang+"deg)"});
		}

		function Actionclick(id, angle, valeur){
        	// Lorsqu'on clique un bouton label : id = id du widget, angle = angle du label de destination, valeur de la commande
        		$("#Idcomut"+(id)).css({"transform" : "rotate("+angle+"deg)"});
				jeedom.cmd.execute({id: id, value: {select: valeur}});
			}
      
		var cmd = '#listValue#';	//on récupère la listde des label sous forme ...<option value="label" [selected]>label</option>...
		//cmd = cmd.substring(cmd.indexOf('>'), cmd.length);	// on supprime le 1er qui est vide
		var ListOfCmd = [];
      	var ListOfLabel = [];
		var Selection = 0;
		var i = 0;
		var extractcmd = "";
		while (cmd.indexOf('value=') != -1){
          // on extrait un par un les différents label en les comptant
			cmd = cmd.substring(cmd.indexOf('=')+2, cmd.length);
			extractcmd = cmd.substring(0, cmd.indexOf('"'));
			ListOfCmd.push(extractcmd);
			extractcmd = cmd.substring(cmd.indexOf('"'), cmd.indexOf('>'));
			if (extractcmd.indexOf('selected') != -1) {
              // si c'est le label sélectionné, on le mémorise
				Selection = i;
			}
          	cmd = cmd.substring(cmd.indexOf('>')+1, cmd.length);
          	extractcmd = cmd.substring(0, cmd.indexOf('<'));
          	ListOfLabel.push(extractcmd);
			i++;
		}
		
        var NbCmd = ListOfLabel.length;	// Nombre total de labels			
		var CenterX = document.getElementById("fond#id#").offsetWidth / 2;	//On centre les objets au milieu du widget
		var CenterY = 100;
		var AngMinMax;
		switch (NbCmd) {
            // répartition des labels en fonction de leur nombre
			case 1:
				AngMinMax = 0;
			case 2:
			case 3:
				AngMinMax = 45;
				break;
			case 4:
			case 5:
				AngMinMax = 90;
				break;
			default:
				AngMinMax = 120;
				break;
		};
		// on affiche le sélecteur au milieu et on l'oriente selon le label sélectionné
      	$("#objets#id#").empty();
		$("#objets#id#").append($('<img id="Idcomut#id#" class="comut" src="plugins/widget/core/template/dashboard/cmd.action.select.selecteur/commut.png">'));
		$("#Idcomut#id#").css({"top" : (CenterY-41+16)+"px", "left" : (CenterX-39)+"px"});
		$("#Idcomut#id#").css({"transform" : "rotate("+(-AngMinMax+(AngMinMax*2)/(NbCmd-1)*(Selection))+"deg)"});
      
      	// Aficchage des labels et des tirets
		for (var i=0; i<NbCmd; i++) {
			var ang = -AngMinMax+(AngMinMax*2)/(NbCmd-1)*(i);
			AffLabel(i, ListOfLabel[i], ang, Selection, ListOfCmd[i]);
			};
      
       jeedom.cmd.update['#id#']({display_value:'#state#'});
        $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
	</script>
</div>
	<style>
	.comut{
		position:absolute;
		width: 78px; height: 82px;
		transition: transform 0.5s;
		}
		  
	.mylabelselect#id#{
		position:absolute;
		background-color:#cmdColor#;
		border : white solid 2px;
		border-radius: 3px;
		vertical-align: middle;
		text-align: center;
		line-height: 17px;
		font-weight: bold;
		}

	.mylabel#id#{
		position:absolute;
		background-color:#cmdColor# !important;
		border-color : transparent !important;
		}
      
	.grad{
		position:absolute;
		width: 4px; height: 10px;
		}
</style>

Merci par avance
Bonne soirée

[bartounet]

Bonsoir.
J'ai le même problème sur le widget sapin.
Je suis étonné que les widget n'aient pas été mis à jour.

Code : Tout sélectionner

<div id="sapin#id#" style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#">
   <center>
         <span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="action" id="iconSapinCmd#id#"></span>
  </center>
   <script>
      var animeSapinInt;
         var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
       var cmdNom = '#name#'.toLowerCase();
      
         if('#state#' == '1' || '#state#' == 1){
             $('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png" couleurImg="rouge" width="54" height="75"/>');   
             if (cmdNom.indexOf('on') == 0 || cmdNom.indexOf('marche') == 0 ) {
                $('#sapin#id#').hide();  
            }
          
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                 VitesseAnime = parseFloat(VitesseAnime)*1000;
                animeSapinInt = setInterval(animeSapin, VitesseAnime);
            }
        }else{
             $('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" couleurImg="OFF" width="54" height="75"/>');      
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                $('#sapin#id#').hide();
                 
            }
        }

          $('#sapin#id#').on('click', function(){
              clearInterval(animeSapinInt);
              jeedom.cmd.execute({id: '#id#'});
         });
      
        function animeSapin(){
         var couleurImg = $('#iconSapinCmd#id# img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png',
                                               'couleurImg': 'bleu'
                                              });
            }else if(couleurImg == 'bleu'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png',
                                               'couleurImg': 'violet'
                                              });
            }else{
            $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png',
                                               'couleurImg': 'rouge'
                                              });
            }
          
        }
      
   </script>
</div>

Pour tous les widgets qui ont ce comportement de dédoublage.
Modifiez le code en ajoutant simplement

Code : Tout sélectionner

.empty()

avant chaque

Code : Tout sélectionner

.append(

présent dans le code.
(ou alors vous remplacez les "append" par "html")

Pour ton exemple

Code : Tout sélectionner

<div id="sapin#id#" style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#">
   <center>
         <span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="action" id="iconSapinCmd#id#"></span>
  </center>
   <script>
      var animeSapinInt;
         var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
       var cmdNom = '#name#'.toLowerCase();
      
         if('#state#' == '1' || '#state#' == 1){
             $('#iconSapinCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png" couleurImg="rouge" width="54" height="75"/>');   
             if (cmdNom.indexOf('on') == 0 || cmdNom.indexOf('marche') == 0 ) {
                $('#sapin#id#').hide();  
            }
          
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                 VitesseAnime = parseFloat(VitesseAnime)*1000;
                animeSapinInt = setInterval(animeSapin, VitesseAnime);
            }
        }else{
             $('#iconSapinCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" couleurImg="OFF" width="54" height="75"/>');      
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                $('#sapin#id#').hide();
                 
            }
        }

          $('#sapin#id#').on('click', function(){
              clearInterval(animeSapinInt);
              jeedom.cmd.execute({id: '#id#'});
         });
      
        function animeSapin(){
         var couleurImg = $('#iconSapinCmd#id# img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png',
                                               'couleurImg': 'bleu'
                                              });
            }else if(couleurImg == 'bleu'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png',
                                               'couleurImg': 'violet'
                                              });
            }else{
            $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png',
                                               'couleurImg': 'rouge'
                                              });
            }
          
        }
      
   </script>
</div>

J'ai bien enregistrer le widget et réappliquer.
Le code semble être celui utilisé.



Le widget faut l'appliquer sur ON et OFF et Rafraichir ?

[JAG]

Salut
tu as vu qu'il y avait un topic ouvert pour ce widget, il me semble qu'ils ont trouvé une solution
viewtopic.php?f=29&t=3070&start=120#p665529

Bonsoir.
J'ai le même problème sur le widget sapin.
Je suis étonné que les widget n'aient pas été mis à jour.

Code : Tout sélectionner

<div id="sapin#id#" style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#">
   <center>
         <span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="action" id="iconSapinCmd#id#"></span>
  </center>
   <script>
      var animeSapinInt;
         var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
       var cmdNom = '#name#'.toLowerCase();
      
         if('#state#' == '1' || '#state#' == 1){
             $('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png" couleurImg="rouge" width="54" height="75"/>');   
             if (cmdNom.indexOf('on') == 0 || cmdNom.indexOf('marche') == 0 ) {
                $('#sapin#id#').hide();  
            }
          
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                 VitesseAnime = parseFloat(VitesseAnime)*1000;
                animeSapinInt = setInterval(animeSapin, VitesseAnime);
            }
        }else{
             $('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" couleurImg="OFF" width="54" height="75"/>');      
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                $('#sapin#id#').hide();
                 
            }
        }

          $('#sapin#id#').on('click', function(){
              clearInterval(animeSapinInt);
              jeedom.cmd.execute({id: '#id#'});
         });
      
        function animeSapin(){
         var couleurImg = $('#iconSapinCmd#id# img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png',
                                               'couleurImg': 'bleu'
                                              });
            }else if(couleurImg == 'bleu'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png',
                                               'couleurImg': 'violet'
                                              });
            }else{
            $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png',
                                               'couleurImg': 'rouge'
                                              });
            }
          
        }
      
   </script>
</div>

Pour tous les widgets qui ont ce comportement de dédoublage.
Modifiez le code en ajoutant simplement

Code : Tout sélectionner

.empty()

avant chaque

Code : Tout sélectionner

.append(

présent dans le code.
(ou alors vous remplacez les "append" par "html")

Pour ton exemple

Code : Tout sélectionner

<div id="sapin#id#" style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#">
   <center>
         <span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="action" id="iconSapinCmd#id#"></span>
  </center>
   <script>
      var animeSapinInt;
         var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
       var cmdNom = '#name#'.toLowerCase();
      
         if('#state#' == '1' || '#state#' == 1){
             $('#iconSapinCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png" couleurImg="rouge" width="54" height="75"/>');   
             if (cmdNom.indexOf('on') == 0 || cmdNom.indexOf('marche') == 0 ) {
                $('#sapin#id#').hide();  
            }
          
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                 VitesseAnime = parseFloat(VitesseAnime)*1000;
                animeSapinInt = setInterval(animeSapin, VitesseAnime);
            }
        }else{
             $('#iconSapinCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" couleurImg="OFF" width="54" height="75"/>');      
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                $('#sapin#id#').hide();
                 
            }
        }

          $('#sapin#id#').on('click', function(){
              clearInterval(animeSapinInt);
              jeedom.cmd.execute({id: '#id#'});
         });
      
        function animeSapin(){
         var couleurImg = $('#iconSapinCmd#id# img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png',
                                               'couleurImg': 'bleu'
                                              });
            }else if(couleurImg == 'bleu'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png',
                                               'couleurImg': 'violet'
                                              });
            }else{
            $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png',
                                               'couleurImg': 'rouge'
                                              });
            }
          
        }
      
   </script>
</div>

J'ai bien enregistrer le widget et réappliquer.
Le code semble être celui utilisé.



Le widget faut l'appliquer sur ON et OFF et Rafraichir ?

[bartounet]

Salut
tu as vu qu'il y avait un topic ouvert pour ce widget, il me semble qu'ils ont trouvé une solution
viewtopic.php?f=29&t=3070&start=120#p665529

Pour tous les widgets qui ont ce comportement de dédoublage.
Modifiez le code en ajoutant simplement

Code : Tout sélectionner

.empty()

avant chaque

Code : Tout sélectionner

.append(

présent dans le code.
(ou alors vous remplacez les "append" par "html")

Pour ton exemple

Code : Tout sélectionner

<div id="sapin#id#" style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#">
   <center>
         <span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="action" id="iconSapinCmd#id#"></span>
  </center>
   <script>
      var animeSapinInt;
         var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
       var cmdNom = '#name#'.toLowerCase();
      
         if('#state#' == '1' || '#state#' == 1){
             $('#iconSapinCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png" couleurImg="rouge" width="54" height="75"/>');   
             if (cmdNom.indexOf('on') == 0 || cmdNom.indexOf('marche') == 0 ) {
                $('#sapin#id#').hide();  
            }
          
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                 VitesseAnime = parseFloat(VitesseAnime)*1000;
                animeSapinInt = setInterval(animeSapin, VitesseAnime);
            }
        }else{
             $('#iconSapinCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" couleurImg="OFF" width="54" height="75"/>');      
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                $('#sapin#id#').hide();
                 
            }
        }

          $('#sapin#id#').on('click', function(){
              clearInterval(animeSapinInt);
              jeedom.cmd.execute({id: '#id#'});
         });
      
        function animeSapin(){
         var couleurImg = $('#iconSapinCmd#id# img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png',
                                               'couleurImg': 'bleu'
                                              });
            }else if(couleurImg == 'bleu'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png',
                                               'couleurImg': 'violet'
                                              });
            }else{
            $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png',
                                               'couleurImg': 'rouge'
                                              });
            }
          
        }
      
   </script>
</div>

J'ai bien enregistrer le widget et réappliquer.
Le code semble être celui utilisé.



Le widget faut l'appliquer sur ON et OFF et Rafraichir ?

Ho merci.

En effet ce code marche parfaitement a priori

Code : Tout sélectionner

<div style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <center>
        <!--     <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#valueName#</div>     -->
        <span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="iconCmd"></span>
    </center>
    <script>
		var animeSapinInt;
        var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
		
        jeedom.cmd.update['#id#'] = function(_options){
        	if (_options.display_value == '1' || _options.display_value >= 1 || _options.display_value == 'on') {
            if (jeedom.cmd.normalizeName('#name#') == 'on') {
                    $('.cmd[data-cmd_id=#id#]').hide();
					VitesseAnime = parseFloat(VitesseAnime)*1000;
                    animeSapinInt = setInterval(animeSapin, VitesseAnime);
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png" couleurImg="rouge" width="54" height="75"/>');
            }
        } else {
            if (jeedom.cmd.normalizeName('#name#') == 'off') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" couleurImg="OFF" width="54" height="75"/>');
                }
            }
        }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
        $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
			clearInterval(animeSapinInt);
            jeedom.cmd.execute({id: '#id#'});
        });
		
		function animeSapin(){
         var couleurImg = $('.cmd[data-cmd_id=#id#] img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('.cmd[data-cmd_id=#id#] img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png',
                                               'couleurImg': 'bleu'
                                              });
            }else if(couleurImg == 'bleu'){
             $('.cmd[data-cmd_id=#id#] img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('.cmd[data-cmd_id=#id#] img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png',
                                               'couleurImg': 'violet'
                                              });
            }else{
            $('.cmd[data-cmd_id=#id#] img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png',
                                               'couleurImg': 'rouge'
                                              });
            }
          
        }
    </script>
</div>

[JAG]

bonsoir à tous
Je relance mon problème sur mon bouton selecteur

viewtopic.php?f=29&t=35941&p=674690#p674690

si qq peut m'aider
merci par avance
Bonne soirée