Mise à jour des widgets du core pour la V3

[kerdale]

@bcaro
bonjour,
Le widget "NON" core sont dans /var/www/html/plugins/widget/core/template/dashboard et /var/www/html/plugins/widget/core/template/mobile.
Ceux "core" sont ailleurs donc pas de risque de les supprimer

[noodom]

Pour l'erreur 500, il faut voir du côté du fichier http.error pour la piste.

Merci pour la réponse hors piste

viewtopic.php?f=30&t=44084&p=710497&hil ... or#p710497

[SeaWood]

Bonjour,

J'ai tente de recréer mon widget fil pilote, j'ai utilisé le mode création facile mais je voudrais me séparer de la valeur (30 dans l'exemple) :

2019-03-20_13h36_04.png (36.9 Kio) Consulté 1470 fois

Quelqu'un pourrait-il me dire comment modifier le code ?:

Code : Tout sélectionner

<div style="min-width:120px; min-height:80px;" class="cmd tooltips cmd-widget cursor container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-size: 2.5em;" class="iconCmd"></span>
		<div style="display:inline-block;">
			<span style="font-weight: bold;" class="pull-right">#unite#</span>
			<span style="font-size: 2em;font-weight: bold;" class="pull-right state"></span>
		</div>
		<div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block">
			<span title="Min" class="tooltips">#minHistoryValue#</span>|<span title="Moyenne" class="tooltips" >#averageHistoryValue#</span> | <span title="Max" class="tooltips">#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
	</center>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","size":"2.5","min":["0","11","21","31","41","51"],"max":["10","20","30","40","50","100"],"images":["radiateur arret.png","radiateur hg.png","radiateur eco.png","radiateur confort-2.png","radiateur confort-1.png","radiateur confort.png"]}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
   var srcImg = 'plugins/widget/core/template/dashboard/cmd.info.numeric.Radiateur test/';
	var iconUpdate = function (state){
		$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
		if (state >= 0 && state <= 10) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'radiateur arret.png">');
		}
		if (state >= 11 && state <= 20) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'radiateur hg.png">');
		}
		if (state >= 21 && state <= 30) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'radiateur eco.png">');
		}
		if (state >= 31 && state <= 40) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'radiateur confort-2.png">');
		}
		if (state >= 41 && state <= 50) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'radiateur confort-1.png">');
		}
		if (state >= 51 && state <= 100) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'radiateur confort.png">');
		}
		$('.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>

Merci de votre aide !

[Salvialf]

Bonjour,

J'ai tente de recréer mon widget fil pilote, j'ai utilisé le mode création facile mais je voudrais me séparer de la valeur (30 dans l'exemple) :

2019-03-20_13h36_04.png


Quelqu'un pourrait-il me dire comment modifier le code ?:

Salut,

Essayes avec ça:

Code : Tout sélectionner

<div style="min-width:120px; min-height:80px;" class="cmd tooltips cmd-widget cursor container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-size: 2.5em;" class="iconCmd"></span>
		<div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 center-block">
			<span title="Min" class="tooltips">#minHistoryValue#</span>|<span title="Moyenne" class="tooltips" >#averageHistoryValue#</span> | <span title="Max" class="tooltips">#maxHistoryValue#</span> <i class="#tendance#"></i>
		</div>
	</center>
<!-- Ne Pas Supprimer -->
	<script class="createWidgetInfo" type="text/javascript">//<![CDATA[{"type":"1","version":"1","size":"2.5","min":["0","11","21","31","41","51"],"max":["10","20","30","40","50","100"],"images":["radiateur arret.png","radiateur hg.png","radiateur eco.png","radiateur confort-2.png","radiateur confort-1.png","radiateur confort.png"]}]]></script>
<!-- Ne Pas Supprimer -->
	<script>
   var srcImg = 'plugins/widget/core/template/dashboard/cmd.info.numeric.Radiateur test/';
	var iconUpdate#uid# = function (state){
		$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
		if (state >= 0 && state <= 10) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'radiateur arret.png">');
		}
		if (state >= 11 && state <= 20) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'radiateur hg.png">');
		}
		if (state >= 21 && state <= 30) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'radiateur eco.png">');
		}
		if (state >= 31 && state <= 40) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'radiateur confort-2.png">');
		}
		if (state >= 41 && state <= 50) {
			$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'radiateur confort-1.png">');
		}
		if (state >= 51 && state <= 100) {
		$('.cmd[data-cmd_uid=#uid#] .iconCmd').html('<img style="display: inline-block;" src="'+srcImg+'radiateur confort.png">');
		}
	};
	jeedom.cmd.update['#id#'] = function(_options){
		$('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
		iconUpdate#uid#(_options.display_value);
	}
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Je te promets rien je suis sur mon tel si c'est pas bon je vérifierai sur le pc

[i-magin]

@SeaWood

Supprimer

$('.cmd[data-cmd_uid=#uid#] .state').text(state);

Voir mon post ICI

[i-magin]

@SeaWood
Et regarde bien à la fin de mes messages, concernant l'interférence lorsque l'on a plusieurs modules/virtuels qui utilisent le même widget (ajouter #uid# à deux endroits)

[Salvialf]

@SeaWood
Et regarde bien à la fin de mes messages, concernant l'interférence lorsque l'on a plusieurs modules/virtuels qui utilisent le même widget (ajouter #uid# à deux endroits)

Bien vu je l'ai ajouté au code au dessus. J'ai viré la div qui gère l'affichage en plus de la ligne qui affiche l'état.

[SeaWood]

Merci i-magin !

[guims78]

Excusez mon ignorance, mais ils sont visibles où les widget core ???
J'ai installé le plugin "Widget" Officiel, qui me permet d'accéder à un market de widget.
est-ce que ce sont ceux là les widget core ???

[guims78]

J'en profite également pour demander un petit coup de main pour mon code :

<div style="width:204px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
<center>
<span style="font-size: 1em;font-weight: bold;" id="iconCmd#id#"></span>
</center>
<script>
if ('#state#' == 'Absent' ) {
$('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.string.Etat Mode@Tablette2/@absent-onv5.png"> </i>');
}
if ('#state#' == 'Normal' ) {
$('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.string.Etat Mode@Tablette2/@work-onv5.png"> </i>');
}
if ('#state#' == 'Present') {
$('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.string.Etat Mode@Tablette2/@home-onv5.png"> </i>');
}
if ('#state#' == 'OFF') {
$('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.string.Etat Mode@Tablette2/@Off-onv5.png"> </i>');
}
</script>
</div>

Car malgré la lecture des différents post, je ne sais pas quoi faire , ni par ou commencer.
J'avais réussi à adapter un peu, précédemment, par analogie, mais là, je ne sais plus.

[cadavor]

Excusez mon ignorance, mais ils sont visibles où les widget core ???
J'ai installé le plugin "Widget" Officiel, qui me permet d'accéder à un market de widget.
est-ce que ce sont ceux là les widget core ???

Les widget core (c'est à dire ceux proposé par défaut par Jeedom) ne sont pas visible.
Ils ne sont pas listés dans le plugin Widget

[guims78]

Excusez mon ignorance, mais ils sont visibles où les widget core ???
J'ai installé le plugin "Widget" Officiel, qui me permet d'accéder à un market de widget.
est-ce que ce sont ceux là les widget core ???

Les widget core (c'est à dire ceux proposé par défaut par Jeedom) ne sont pas visible.
Ils ne sont pas listés dans le plugin Widget

Alors comment on les trouve pour les installer ?

[domoggvad]

Bonjour les gars,
si vous avez un widget qui fonctionne en v3.3.x, vous pouvez mettre le lien ici avec un visuel ça serait bien
merci
viewtopic.php?f=29&t=44183

[cadavor]

Excusez mon ignorance, mais ils sont visibles où les widget core ???
J'ai installé le plugin "Widget" Officiel, qui me permet d'accéder à un market de widget.
est-ce que ce sont ceux là les widget core ???

Les widget core (c'est à dire ceux proposé par défaut par Jeedom) ne sont pas visible.
Ils ne sont pas listés dans le plugin Widget

Alors comment on les trouve pour les installer ?

Ils sont déjà intégré à Jeedom d'ou leur appelation "core" (faisant partie du coeur de Jeedom)
Dans les listes déroulantes de sélection c'est précisé "core" ou "widget" en fonction de leur provenance.

[guims78]

Ok, j'ai compris le principe, mais je ne visualise pas du tout.
Une petite copie d'écran pourrait peut-etre m'aider.

[JAG]

Bonjour les gars,
si vous avez un widget qui fonctionne en v3.3.x, vous pouvez mettre le lien ici avec un visuel ça serait bien
merci
viewtopic.php?f=29&t=44183

Salut,
bonne idée, je mettrai le lien vers les miens quand j'aurais fini les maj (il m'en reste 3 a mettre à jour)
Bonne journée

[JAG]

Bonjour,

J'ai encore un de mes widgets qui ne fonctionne pas mais la cela dépasse mes compétences, voici le code

Ensemble des images

Capture d’écran 2019-03-22 à 06.45.41.png (50.92 Kio) Consulté 1311 fois

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 de votre aide
Bonne journée

[cadavor]

Bonjour,

J'ai encore un de mes widgets qui ne fonctionne pas mais la cela dépasse mes compétences, voici le code
Capture d’écran 2019-03-22 à 06.45.41.png

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 de votre aide
Bonne journée

Celui la va être un peu plus chaud à rendre compatible car c'est un widget d'action.
J'essaierai d'y jeter un oeil mais je promet rien...

[guims78]

si qqun peut m'aider egalement :

Code : Tout sélectionner

<div style="width:204px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="string" data-cmd_id="#id#" title="#collectDate#">
    <center>
        <span style="font-size: 1em;font-weight: bold;" id="iconCmd#id#"></span>
    </center>
    <script>
        if ('#state#' == 'Absent' ) {
            $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.string.Etat Mode@Tablette2/@absent-onv5.png"> </i>');
        }
        if ('#state#' == 'Normal' ) {
            $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.string.Etat Mode@Tablette2/@work-onv5.png"> </i>');
        }
        if ('#state#' == 'Present') {
            $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.string.Etat Mode@Tablette2/@home-onv5.png"> </i>');
        } 
		if ('#state#' == 'OFF') {
            $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.string.Etat Mode@Tablette2/@Off-onv5.png"> </i>');
        }     
    </script>
</div>

il s'agit de mon widget d'affichage d'icone perso pour le plugin "mode".

[JAG]

Celui la va être un peu plus chaud à rendre compatible car c'est un widget d'action.
J'essaierai d'y jeter un oeil mais je promet rien...

Oui je sais je me bat avec le code depuis un moment, merci par avance