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

Widget dédoublé en 3.2.3

Réservé à l'utilisation et la création de widgets dans JEEDOM
Avatar de l’utilisateur
JAG
Actif
Messages : 590
Inscription : 21 mai 2016, 11:10

Re: Widget dédoublé en 3.2.3

Message par JAG » 11 sept. 2018, 16:52

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
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

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

Re: Widget dédoublé en 3.2.3

Message par JAG » 11 sept. 2018, 19:26

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

Code pour INFO: Luminosité_Mini - Dashboard
luminosite.png
luminosite.png (18.79 Kio) Consulté 721 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>
Dernière édition par JAG le 13 sept. 2018, 19:55, édité 4 fois.
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

fishes
Timide
Messages : 67
Inscription : 10 nov. 2017, 09:45
Localisation : Brumath (67)

Re: Widget dédoublé en 3.2.3

Message par fishes » 12 sept. 2018, 11:23

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
Timide
Messages : 67
Inscription : 10 nov. 2017, 09:45
Localisation : Brumath (67)

Re: Widget dédoublé en 3.2.3

Message par fishes » 12 sept. 2018, 13:20

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

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

Re: Widget dédoublé en 3.2.3

Message par JAG » 12 sept. 2018, 22:03

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>
Dernière édition par JAG le 13 sept. 2018, 19:54, édité 2 fois.
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

fishes
Timide
Messages : 67
Inscription : 10 nov. 2017, 09:45
Localisation : Brumath (67)

Re: Widget dédoublé en 3.2.3

Message par fishes » 13 sept. 2018, 12:10

salut,

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

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

Re: Widget dédoublé en 3.2.3

Message par JAG » 13 sept. 2018, 12:42

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

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

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

Re: Widget dédoublé en 3.2.3

Message par JAG » 16 sept. 2018, 12:17

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 :oops: ,
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 :D

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>
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

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

Re: Widget dédoublé en 3.2.3

Message par JAG » 18 nov. 2018, 18:07

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
Pièces jointes
Update-Widget_JAG-Partie 2-20181118.zip
(2.92 Kio) Téléchargé 19 fois
Update-Widget_JAG-Partie 1-20181118.zip
(32.41 Kio) Téléchargé 27 fois
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

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

Re: Widget dédoublé en 3.2.3

Message par bartounet » 10 déc. 2018, 22:38

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

Image

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>
Jeedom à jour Debian 9
VM VMWARE ESXi 6.7 ( SSD)
Stick ZWave / FIBARO / Ikea Light / Yeelight / Google Home
Wifi Unifi / PFSENSE / Reverse Proxy DMZ SSL

Passionné de bidouillage informatique en tout genre
Mon blog : http://blog.info16.fr

Roland2794
Timide
Messages : 119
Inscription : 19 août 2014, 13:33

Re: Widget dédoublé en 3.2.3

Message par Roland2794 » 10 déc. 2018, 23:38

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

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

Re: Widget dédoublé en 3.2.3

Message par JAG » 11 déc. 2018, 12:40

Roland2794 a écrit :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
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

Avatar de l’utilisateur
cadavor
Actif
Messages : 1261
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget dédoublé en 3.2.3

Message par cadavor » 11 déc. 2018, 12:59

bartounet a écrit :
10 déc. 2018, 22:38
Bonsoir.
J'ai le même problème sur le widget sapin.
Je suis étonné que les widget n'aient pas été mis à jour.

Image

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>
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

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

Re: Widget dédoublé en 3.2.3

Message par bartounet » 11 déc. 2018, 13:57

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
Jeedom à jour Debian 9
VM VMWARE ESXi 6.7 ( SSD)
Stick ZWave / FIBARO / Ikea Light / Yeelight / Google Home
Wifi Unifi / PFSENSE / Reverse Proxy DMZ SSL

Passionné de bidouillage informatique en tout genre
Mon blog : http://blog.info16.fr

Avatar de l’utilisateur
cadavor
Actif
Messages : 1261
Inscription : 21 juin 2015, 22:00
Localisation : 34

Re: Widget dédoublé en 3.2.3

Message par cadavor » 11 déc. 2018, 14:55

bartounet a écrit :
11 déc. 2018, 13:57
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...
Jeedom Stable 3.3
NUC Z83 + Aeotec Z-Stick Gen5
Z-Wave FGR + FGMS + FGDS + FGFS + FGK + FGWPE + ZW062 + ZW080
GH Mini + Orvibo AllOne + Playbulb + Miband2

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

Re: Widget dédoublé en 3.2.3

Message par JAG » 11 déc. 2018, 18:28

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
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

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

Re: Widget dédoublé en 3.2.3

Message par bartounet » 11 déc. 2018, 18:52

cadavor a écrit :
11 déc. 2018, 12:59
bartounet a écrit :
10 déc. 2018, 22:38
Bonsoir.
J'ai le même problème sur le widget sapin.
Je suis étonné que les widget n'aient pas été mis à jour.

Image

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

Image

Le widget faut l'appliquer sur ON et OFF et Rafraichir ?
Jeedom à jour Debian 9
VM VMWARE ESXi 6.7 ( SSD)
Stick ZWave / FIBARO / Ikea Light / Yeelight / Google Home
Wifi Unifi / PFSENSE / Reverse Proxy DMZ SSL

Passionné de bidouillage informatique en tout genre
Mon blog : http://blog.info16.fr

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

Re: Widget dédoublé en 3.2.3

Message par JAG » 11 déc. 2018, 19:03

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
bartounet a écrit :
11 déc. 2018, 18:52
cadavor a écrit :
11 déc. 2018, 12:59
bartounet a écrit :
10 déc. 2018, 22:38
Bonsoir.
J'ai le même problème sur le widget sapin.
Je suis étonné que les widget n'aient pas été mis à jour.

Image

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

Image

Le widget faut l'appliquer sur ON et OFF et Rafraichir ?
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

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

Re: Widget dédoublé en 3.2.3

Message par bartounet » 11 déc. 2018, 19:16

JAG a écrit :
11 déc. 2018, 19:03
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
bartounet a écrit :
11 déc. 2018, 18:52
cadavor a écrit :
11 déc. 2018, 12:59


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

Image

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>
Jeedom à jour Debian 9
VM VMWARE ESXi 6.7 ( SSD)
Stick ZWave / FIBARO / Ikea Light / Yeelight / Google Home
Wifi Unifi / PFSENSE / Reverse Proxy DMZ SSL

Passionné de bidouillage informatique en tout genre
Mon blog : http://blog.info16.fr

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

Re: Widget dédoublé en 3.2.3

Message par JAG » 24 déc. 2018, 20:26

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 ;)
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

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