EDIT : je n’avais pas mis le bon code
Hello,
je galère depuis plusieurs jours à essayer a mettre à jour plusieurs widgets pour Jeedom 3.x, avec le peu de connaissance que j’ai.
Pour mettre à jour un widget à jour, je me sers en général d’un widget qui est déjà fait avec la nouvelle architecture
j’essaye de mettre à jour le widget " Sélecteur Multiple paramétrable Développé par drastef", Je ne vois pas ce que j’ai oublié.
SI qq peut m’aider à mettre à jour ce widget,
Merci par avance de votre aide
<div id="fond#id#" class="cmd cmd-widget" 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" id="cmdName#id#" 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
// calcul du centre du label
var Offx = CenterX + 63*Math.sin(ang/180*3.14159);
var Offy = CenterY - 63*Math.cos(ang/180*3.14159);
// Id affecté au label
var labelind = "label#id#"+index;
// Traitement du Label sélectionné ou pas
// ⬇︎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
// $("#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>'));
//}
// ⬆︎ 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;
}
// On ajuste la position du label
var decaley = ((document.getElementById(labelind).offsetHeight)/2)*(1+Math.cos(ang/180*3.14159));
//$("#"+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)"});
}
jeedom.cmd.update['#id#'] = function(_options){
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}});
}
// Label
var cmd = '#listValue#'; //on récupère la listde des label sous forme ...<option value="label" [selected]>label</option>...
// ⬇︎Comment JAG : Desactivation
//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 = "";
// Extraction des lables
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;
// répartition des labels en fonction de leur nombre
switch (NbCmd) {
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)"});
// On affiche les N labels et 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#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
$('.cmd[data-cmd_uid=#uid#]:last .action').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>
J’ai une autre petites questions concernant les variables.
J’ai vu que si je mettais une variables avec le même nom dans plusieurs widget, je me suis aperçu que la variables alors prenait la valeur du premier widget qu’elle rencontre dans le chargement des données.
Y-a-t-il un endroit bien précis pour mettre les variables entre les balises , Actuellement pour palier a ce pb, j’ajoute des initiales devant chacune de mes variables, comme l’exemple ci-dessous
var AL_srcImg = 'plugins/widget/core/template/dashboard/cmd.action.other.AlarmCarreLock/';
var AL_srcImg_lock = 'alarm-status-lock.png';
var AL_srcImg_unlock = 'alarm-status-unlock.png';`
Merci de votre aide par avance
Bonne journée à tous
