Bonsoir, tu es sur de ton coup ?
Au fait, je ne fais que « colorer » les blocks dont l’index est inférieur au block sélectionné, cela ne doit pas changer le comportement du slider.
Je viens d’effectuer quelques tests, et rien à signaler pour le moment.
Attention aux « } » quand tu remplaces le code…
Mon problème est entre le clavier est la chaise de bureau, j’en suis convaincu 
Je pense qu’au final je ne remplace pas la bonne partie du code…
le morceau de code zoom out 
if ('#vertical#' == "1"){
$('.switch2#uid#').css('margin-bottom',distanceBlock+'px');
$('.switch2#uid#').css('width',blockSize+'px');
if(showText == 0 )
{
selector.style.top = (parseInt(buttonSize) + parseInt(distanceBlock))*selectedValue +"px" ;
}else {
selector.style.top = (parseInt(buttonSize)+parseInt(textBoxHeight)+parseInt(distanceBlock))*selectedValue +"px" ;
}
selector.style.width = blockSize+'px';
if(selectedValue<nbBlock)
{
setButton($("#button-#uid# .button_thp"),$("#button-#uid# .button_thp i"),arrayValue[selectedValue],arrayColor[selectedValue],buttonSize,borderSize,iconSize,arrondi);
$("#button-#uid# .button_thp").css("box-shadow","0px 0px 2px 2px "+ hexToRgbA(arrayColor[selectedValue],0.7));
setTitleBoxColor(titleSelector,arrayTexte[selectedValue],arrayColor[selectedValue],textFont,arrayTexteColor[selectedValue]);
}
}
else
{
$('.switch2#uid#').css('float','left');
$('.switch2#uid#').css('width',blockSize+'px');
$('.switch2#uid#').css('margin-right',distanceBlock+'px');
selector.style.left = (parseInt(blockSize)+parseInt(distanceBlock))*selectedValue +"px" ;
selector.style.width = blockSize+'px';
if(selectedValue<nbBlock)
{
for (let j = 0; j < nbBlock; j++) {
if(j < selectedValue)
{
setButton($("#button"+j+"-#uid# .button_thp"),$("#button"+j+"-#uid# .button_thp i"),arrayValue[j],arrayColor[j],buttonSize,borderSize,iconSize,arrondi);
if(borderSize >0)
{
$("#button"+j+"-#uid# .button_thp").css("box-shadow","0px 0px 2px 2px "+ hexToRgbA(arrayColor[j],0.7));
}
setTitleBoxColor(document.getElementById("titlebox"+j+"#uid#"),arrayTexte[j],arrayColor[j],textFont,arrayTexteColor[j]);
}
if(j > selectedValue)
{
setButton($("#button"+j+"-#uid# .button_thp"),$("#button"+j+"-#uid# .button_thp i"),arrayValue[j],'grey',buttonSize,borderSize,iconSize,arrondi);
setTitleBox(document.getElementById("titlebox"+j+"#uid#"),arrayTexte[j],'grey',textFont);
$("#button"+j+"-#uid# .button_thp").css("box-shadow","0px 0px 0px 0px ");
document.getElementById("titlebox"+j+"#uid#").style.backgroundColor = "transparent";
}
}
setButton($("#button-#uid# .button_thp"),$("#button-#uid# .button_thp i"),arrayValue[selectedValue],arrayColor[selectedValue],buttonSize,borderSize,iconSize,arrondi);
if(borderSize >0)
{
$("#button-#uid# .button_thp").css("box-shadow","0px 0px 2px 2px "+ hexToRgbA(arrayColor[selectedValue],0.7));
}
setTitleBoxColor(titleSelector,arrayTexte[selectedValue],arrayColor[selectedValue],textFont,arrayTexteColor[selectedValue]);
}
}
for (let i = 0; i < nbBlock; i++)
{
if(arrayEnable[i]==1){
if(commande==0 || arrayCmdId[i].toString() == '#id#')
document.getElementById('block'+i+"#uid#").onclick = function(){jeedom.cmd.execute({id: '#id#', value:(i.toString())}); };
else
document.getElementById('block'+i+"#uid#").onclick = function(){jeedom.cmd.execute({id: arrayCmdId[i].toString(), value:(i.toString())}); jeedom.cmd.execute({id: '#id#', value:(i.toString())}); };
}
}
if ('#time#' == 'duree') {
...
1 « J'aime »
Bon si avec ça j’y arrive pas ! (tu mets la pression )
Edit : bon bein je n’y arrive pas, j’ai retenté pas mal de fois sans succès…
La première case reste sélectionnée et impossible de cliquer sur les autres.
Un petit screen de ma config au cas où la question te tracasse, mais sinon te prends pas la tête c’est déjà sympa comme ça !
Je suis reparti avec le code que tu as mis dans le premier message et j’ai ajouté la partie de code pour la modif… Tu me confirmes que c’est censé fonctionner ?
Sinon est-ce qu’on peut intégrer d’autres icones qui sont dans le plugin éponyme ? J’ai tenté de mettre des icones de la collection MDI mais sans succès…
hello,
super adaptation je vais réfléchir pour l’intégrer chez moi 
1 « J'aime »
salut, tu n’as pas de souci d’utilisation après la update de jeedom ?
Slt @theone_811
Pour moi, ça ne marche plus après l’update, j’ai donc restauré l’ancienne version comme j’avais aussi des problèmes avec d’autres plugins.
Bonsoir a tous,
Pour info avec la nouvelle 4.2.8, la méthode pour la fonction slider est différente :
Par rapport au code de base proposé par @theone_811, il faut remplacer la ligne 310 par :
document.getElementById('block'+i+"#uid#").onclick = function(){jeedom.cmd.execute({id: '#id#', value:{slider: i.toString()}}); };
et la ligne 312 par :
document.getElementById('block'+i+"#uid#").onclick = function(){jeedom.cmd.execute({id: arrayCmdId[i].toString(), value:{slider: i.toString()}}); jeedom.cmd.execute({id: '#id#', value:{slider: i.toString()}}); };
Code modifié
<div class="tooltips cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div id="switch_3_ways_v2#uid#" class="switch_3_ways_v2#uid#">
</div>
<span class="timeCmd#uid# timeCmd label label-default"></span>
<style>
.mode_lib{
color: white;
border:none;
padding:6px 8px 8px 8px;
border-radius:4px;
box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.5);
font:bold 25px Arial;
vertical-align: middle;
width:110px;
}
.button_thp i.fa, .button i.fas, .button i.fab {
line-height:54px
color: grey;
}
.button_thp {
box-sizing: border-box;
border: 3px solid grey;
color: grey;
width: 60px;
height: 60px;
display: block;
text-align: center;
cursor: pointer;
font-size: 30px;
margin: 0;
font-weight:400;
}
.mode_lib_small{
color: white;
border:none;
padding:1px 1px 1px 1px;
border-radius:2px;
box-shadow: 0px 0px 2px 2px rgba(255,255,255,0.5);
font:bold 12px Arial;
vertical-align: middle;
}
.switch_3_ways_v2#uid#{
margin:5px 10px 10px 10px;
color:#D0D0D0;
font-size:1em;
font-weight:bold;
position:relative;
display:block;
vertical-align: middle;
}
.switch2#uid#.blockX#uid#{
text-align:center;
position:relative;
width:0;
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
transition: 100ms ease-out;
color:white;
vertical-align: middle;
margin-right: 20px;
}
.selector#uid#{
text-align:center;
position:absolute;
width:0;
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
transition: 100ms ease-out;
color:white;
}
</style>
<script>
function hexToRgbA(hex,opacite){
var c;
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
c= hex.substring(1).split('');
if(c.length== 3){
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c= '0x'+c.join('');
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+','+opacite+')';
}
throw new Error('Bad Hex '+hex);
}
function setTitleBoxColor(myTitleSelector,texte,bgColor,textFont,textColor)
{
myTitleSelector.innerHTML = texte;
myTitleSelector.style.boxShadow ="0px 0px 1px 1px " + hexToRgbA(bgColor,0.3);
myTitleSelector.style.backgroundColor =bgColor;
myTitleSelector.style.color =textColor;
myTitleSelector.style.font = "bold "+textFont+"px Arial";
}
function setTitleBox(myTitleBox,texte,color,textFont)
{
myTitleBox.innerHTML =texte;
myTitleBox.style.color = color;
myTitleBox.style.font = "bold "+textFont+"px Arial";
myTitleBox.style.boxShadow ="none";
}
function setButton(myButton,myIcone,iconName,color,buttonSize,borderSize,iconSize,arrondi)
{
myButton.css("border", borderSize+"px solid "+color);
if(arrondi==1)
{
myButton.css("border-radius", buttonSize+"px");
}
myButton.css("color", color);
myButton.css("width", buttonSize+"px");
myButton.css("height", buttonSize+"px");
myButton.css("font-size", iconSize +"px");
var lineheight = buttonSize - borderSize - borderSize;
myIcone.css("line-height",lineheight+"px");
myIcone.css("color",color);
myIcone.removeClass().addClass(iconName);
}
function addBlockButton(switch_3_ways_v2,numBlock,texte,textBoxSize,buttonSize,isSelector,textBoxHeight)
{
var divBlock = document.createElement('div');
var divTitle = document.createElement('div');
var divTitleBox = document.createElement('div');
var divButton = document.createElement('div');
var divButtonThp = document.createElement('div');
var divIcon = document.createElement('i');
//creation des tags
if(isSelector == 1)
{
divBlock.id = "selector#uid#";
divBlock.className = "selector#uid#";
}
else
{
divBlock.id = 'block'+numBlock+"#uid#";
divBlock.className = "switch2#uid# blockX#uid#";
}
divTitle.style.paddingLeft = (buttonSize-textBoxSize)/2 + "px";
divTitleBox.id = "titlebox"+numBlock+"#uid#";
divTitleBox.className ="mode_lib_small";
divTitleBox.style.width = textBoxSize +"px";
divTitle.id = 'title'+numBlock+"#uid#";
divTitle.style.height = textBoxHeight+"px";
divButton.id = 'button'+numBlock+"-#uid#";
divButtonThp.className = "button_thp";
divIcon.id = 'icon'+numBlock+"-#uid#";
divIcon.className = "fa fa-lock";
//append des tags
divButtonThp.appendChild(divIcon);
divButton.appendChild(divButtonThp);
divTitle.appendChild(divTitleBox);
divBlock.appendChild(divTitle);
divBlock.appendChild(divButton);
switch_3_ways_v2.appendChild(divBlock);
}
jeedom.cmd.update['#id#'] = function(_options){
var buttonSize = ('#taille#' !='#'+'taille#') ? "#taille#":60;
var borderSize = ('#taille_bordure#' !='#'+'taille_bordure#') ? "#taille_bordure#":3;
var iconSize = ('#taille_icone#' !='#'+'taille_icone#') ? "#taille_icone#":30;
var arrondi = ('#arrondi#' !='#'+'arrondi#') ? "#arrondi#":1;
var textBoxSize = ('#textBoxSize#' !='#'+'textBoxSize#') ? "#textBoxSize#":50;
var textFont = ('#textFont#' !='#'+'textFont#') ? "#textFont#":12;
var textBoxHeight = ('#textBoxHeight#' !='#'+'textBoxHeight#') ? "#textBoxHeight#":20;
var separateur = ('#Separateur#'!='#'+'Separateur#') ? "#Separateur#" : ' ';
var icones = ('#Icones#'!='#'+'Icones#') ? "#Icones#" : 'Erreur ajouter otpion Icones';
var textes = ('#Textes#'!='#'+'Textes#') ? "#Textes#" : 'Erreur ajouter otpion Textes';
var colors = ('#Couleurs#'!='#'+'Couleurs#') ? "#Couleurs#" : 'Erreur ajouter otpion Couleurs';
var enables = ('#Enables#'!='#'+'Enables#') ? "#Enables#" : 'Erreur ajouter otpion Enables';
var cmdIds = ('#CmdIds#'!='#'+'CmdIds#') ? "#CmdIds#" : '#id#';
var textColors = ('#texteCouleurs#'!='#'+'texteCouleurs#') ? "#texteCouleurs#" : '#FFFFFF';
var blockSize = ('#blockSize#' !='#'+'blockSize#') ? "#blockSize#":60;
var distanceBlock = ('#distanceBlock#' !='#'+'distanceBlock#') ? "#distanceBlock#":20;
var nbBlock = ('#nbBlock#' !='#'+'nbBlock#') ? "#nbBlock#":3;
var showText = ('#showText#' !='#'+'showText#') ? "#showText#":0;
var switch_3_ways_v2 = document.getElementById("switch_3_ways_v2#uid#");
var commande = ('#CommandeExt#' !='#'+'CommandeExt#') ? "#CommandeExt#":0;
var arrayValue =icones.split(separateur);
var arrayTexte =textes.split(separateur);
var arrayColor =colors.split(separateur);
var arrayEnable=enables.split(separateur);
var arrayCmdId =cmdIds.split(separateur);
var arrayTexteColor = textColors.split(separateur);
var selectedValue = _options.display_value;
for (let i = 0; i < nbBlock; i++) {
if(arrayValue[i] == null || arrayValue[i] == ""){
arrayValue[i] = "fas fa-lock";
}
if(arrayTexte[i] == null || arrayTexte[i] == ""){
arrayTexte[i] = "texte"+i;
}
if(arrayColor[i] == null || arrayColor[i] == ""){
arrayColor[i] = "#FFFFFF";
}
if(arrayEnable[i] == null || arrayEnable[i] == ""){
arrayEnable[i] = 1;
}
if(arrayTexteColor[i] == null || arrayTexteColor[i] == ""){
arrayTexteColor[i] = "#FFFFFF";
}
if(arrayCmdId[i] == null || arrayCmdId[i] == ""){
arrayCmdId[i] = '#id#';
}
if (document.getElementById('block'+i+"#uid#")==null)
{
addBlockButton(switch_3_ways_v2,i,arrayTexte[i],textBoxSize,buttonSize,0,textBoxHeight);
setButton($("#button"+i+"-#uid# .button_thp"),$("#button"+i+"-#uid# .button_thp i"),arrayValue[i],'grey',buttonSize,borderSize,iconSize,arrondi);
setTitleBox(document.getElementById("titlebox"+i+"#uid#"),arrayTexte[i],'grey',textFont);
}
}
if (document.getElementById("selector#uid#")==null)
{
addBlockButton(switch_3_ways_v2,'','',textBoxSize,buttonSize,1,textBoxHeight);
}
var selector = document.getElementById("selector#uid#");
var titleSelector = document.getElementById("titlebox#uid#");
if(selectedValue>=nbBlock)
{
selector.style.display ="none";
}
else
{
selector.style.display = "block";
}
if(showText == 0 )
{
for (let i = 0; i < nbBlock; i++) {
$("#title"+i+"#uid#").css('display','none');
}
$("#title#uid#").css('display','none');
}
if ('#vertical#' == "1"){
$('.switch2#uid#').css('margin-bottom',distanceBlock+'px');
$('.switch2#uid#').css('width',blockSize+'px');
if(showText == 0 )
{
selector.style.top = (parseInt(buttonSize) + parseInt(distanceBlock))*selectedValue +"px" ;
}else {
selector.style.top = (parseInt(buttonSize)+parseInt(textBoxHeight)+parseInt(distanceBlock))*selectedValue +"px" ;
}
selector.style.width = blockSize+'px';
if(selectedValue<nbBlock)
{
setButton($("#button-#uid# .button_thp"),$("#button-#uid# .button_thp i"),arrayValue[selectedValue],arrayColor[selectedValue],buttonSize,borderSize,iconSize,arrondi);
if(borderSize>0){
$("#button-#uid# .button_thp").css("box-shadow","0px 0px 2px 2px "+ hexToRgbA(arrayColor[selectedValue],0.7));
}
setTitleBoxColor(titleSelector,arrayTexte[selectedValue],arrayColor[selectedValue],textFont,arrayTexteColor[selectedValue]);
}
}
else
{
$('.switch2#uid#').css('float','left');
$('.switch2#uid#').css('width',blockSize+'px');
$('.switch2#uid#').css('margin-right',distanceBlock+'px');
selector.style.left = (parseInt(blockSize)+parseInt(distanceBlock))*selectedValue +"px" ;
selector.style.width = blockSize+'px';
if(selectedValue<nbBlock)
{
setButton($("#button-#uid# .button_thp"),$("#button-#uid# .button_thp i"),arrayValue[selectedValue],arrayColor[selectedValue],buttonSize,borderSize,iconSize,arrondi);
if(borderSize>0){
$("#button-#uid# .button_thp").css("box-shadow","0px 0px 2px 2px "+ hexToRgbA(arrayColor[selectedValue],0.7));
}
setTitleBoxColor(titleSelector,arrayTexte[selectedValue],arrayColor[selectedValue],textFont,arrayTexteColor[selectedValue] );
}
}
for (let i = 0; i < nbBlock; i++)
{
if(arrayEnable[i]==1){
if(commande==0 || arrayCmdId[i].toString() == '#id#')
document.getElementById('block'+i+"#uid#").onclick = function(){jeedom.cmd.execute({id: '#id#', value:{slider: i.toString()}}); };
else
document.getElementById('block'+i+"#uid#").onclick = function(){jeedom.cmd.execute({id: arrayCmdId[i].toString(), value:{slider: i.toString()}}); jeedom.cmd.execute({id: '#id#', value:{slider: i.toString()}}); };
}
}
if ('#time#' == 'duree') {
jeedom.cmd.displayDuration(_options.valueDate, $('.cmd[data-cmd_id=#id#] .timeCmd'));
}
else if ('#time#' == 'date') {
var date = new Date(_options.valueDate);
var format = $.datepicker.formatDate('D dd/mm', date);
var time = "à "+date.getHours()+":"+(date.getMinutes()<10?'0':'')+date.getMinutes();
$('.cmd[data-cmd_id=#id#] .timeCmd').html(format+'<br>'+time);
}
else if ('#time#' == 'heure') {
var date = new Date(_options.valueDate);
var time = "à "+date.getHours()+":"+(date.getMinutes()<10?'0':'')+date.getMinutes()+":"+(date.getSeconds()<10?'0':'')+date.getSeconds()+"";
$('.cmd[data-cmd_id=#id#] .timeCmd').html(time);
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
</script>
</div>
2 « J'aime »
Merci Phpvarious, ça fonctionne avec le nouveau code !
Hello,
ça ne fonctionne pas chez moi le curseur a un step de 0.5 comment ajouter l’option comme avec le widget curseur officiel ?
Bonne journée
j’ai une erreur aussi :
VM1879:12 Uncaught Error: Bad Hex undefined
at hexToRgbA (<anonymous>:12:11)
at Array.jeedom.cmd.update.<computed> (<anonymous>:214:93)
at <anonymous>:247:34
at b (jquery.min.js:2:866)
at He (jquery.min.js:2:48373)
at S.fn.init.append (jquery.min.js:2:49724)
at S.fn.init.<anonymous> (jquery.min.js:2:50816)
at $ (jquery.min.js:2:32425)
at S.fn.init.html (jquery.min.js:2:50494)
at Object.success (<anonymous>:582:23)
Échec du chargement de la carte source par les Outils de développement : Impossible de charger le contenu de http://192.168.0.55/3rdparty/moment/moment-with-locales.min.js.map : Erreur HTTP : code d'état 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
ça je suppose que c’est la fonction pour convertir l’hex en rgba qui est en erreur car le fichier est interdit d’accès depuis la maj en 2.4.7
+++
Bonsoir,
Je ne comprend pas, pourquoi tu utilise le paramètre « step » sur ce widget ? et comment tu arrives a valider une valeur avec des virgules avec celui-ci ? utilises tu un autre slider a coté ?
Le fichier n’est pas interdit d’accès, Je pencherait plutôt sur le fait que ta valeur n’est pas un entier
- remet le widget sur défaut
- met ton slider sur 0 (sur le dashboard)
- ré-applique le widget
oublie pas de refresh le dashboard.
Hello,
merci pour ton retour non je n’utilise pas step mais je me suis posé la question si ca pouvais poser un soucis.
J’ai fait ce que tu as dis maintenant j’ai l’exécution de la commande quand je clique dessus mais l’état reste à zero je ne comprends pas si je remets le slider par défaut ça fonctionne.
Bonne soirée
c’est bon j’ai trouvé ce qui fait planter c’est quand j’utilise :
CommandeExt = 1
CmdIds = 876|877|878|895|894|896
les commandes pointent vers des modes du plugin mode :
Une idée ? sinon je serais obligé de passer par un scénario.
+++ et encore merci
Hello, Oui c’est normal, tu utilise une commande « slider » pour activer une commande « other », ca ne peut pas fonctionner.
Voici un nouveau code avec 2 nouveaux paramètres optionnels :
- EffetSlider = 1
- EffetSlider = 0 ou pas indiqué
- subType : liste des sous-types des commandes extérieures : par exemple slider|other||slider
Ce paramètre permet de rendre le widget compatible sur des commandes exterieur de type other
exemple si le paramètre « CmdIds » pointes vers des id du plugin mode mettre other.
Code
<div class="tooltips cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div id="switch_3_ways_v2#uid#" class="switch_3_ways_v2#uid#"></div>
<span class="timeCmd#uid# timeCmd label label-default"></span>
<style>
.mode_lib{
color: white;
border:none;
padding:6px 8px 8px 8px;
border-radius:4px;
box-shadow: 0px 0px 1px 1px rgba(255,255,255,0.5);
font:bold 25px Arial;
vertical-align: middle;
width:110px;
}
.button_thp i.fa, .button i.fas, .button i.fab {
line-height:54px;
color: grey;
}
.button_thp {
box-sizing: border-box;
border: 3px solid grey;
color: grey;
width: 60px;
height: 60px;
display: block;
text-align: center;
cursor: pointer;
font-size: 30px;
margin: 0;
font-weight:400;
}
.mode_lib_small{
color: white;
border:none;
padding:1px 1px 1px 1px;
border-radius:2px;
box-shadow: 0px 0px 2px 2px rgba(255,255,255,0.5);
font:bold 12px Arial;
vertical-align: middle;
}
.switch_3_ways_v2#uid#{
margin:5px 10px 10px 10px;
color:#D0D0D0;
font-size:1em;
font-weight:bold;
position:relative;
display:block;
vertical-align: middle;
}
.switch2#uid#.blockX#uid#{
text-align:center;
position:relative;
width:0;
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
transition: 100ms ease-out;
color:white;
vertical-align: middle;
margin-right: 20px;
}
.selector#uid#{
text-align:center;
position:absolute;
width:0;
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
transition: 100ms ease-out;
color:white;
}
</style>
<script>
function hexToRgbA(hex,opacite){
var c;
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
c= hex.substring(1).split('');
if(c.length== 3){
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c= '0x'+c.join('');
return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+','+opacite+')';
}
throw new Error('Bad Hex '+hex);
}
function setTitleBoxColor(myTitleSelector,texte,bgColor,textFont,textColor)
{
myTitleSelector.innerHTML = texte;
myTitleSelector.style.boxShadow ="0px 0px 1px 1px " + hexToRgbA(bgColor,0.3);
myTitleSelector.style.backgroundColor =bgColor;
myTitleSelector.style.color =textColor;
myTitleSelector.style.font = "bold "+textFont+"px Arial";
}
function setTitleBox(myTitleBox,texte,color,textFont)
{
myTitleBox.innerHTML =texte;
myTitleBox.style.color = color;
myTitleBox.style.font = "bold "+textFont+"px Arial";
myTitleBox.style.boxShadow ="none";
}
function setButton(myButton,myIcone,iconName,color,buttonSize,borderSize,iconSize,arrondi)
{
myButton.css("border", borderSize+"px solid "+color);
if(arrondi==1)
{
myButton.css("border-radius", buttonSize+"px");
}
myButton.css("color", color);
myButton.css("width", buttonSize+"px");
myButton.css("height", buttonSize+"px");
myButton.css("font-size", iconSize +"px");
var lineheight = buttonSize - borderSize - borderSize;
myIcone.css("line-height",lineheight+"px");
myIcone.css("color",color);
myIcone.removeClass().addClass(iconName);
}
function addBlockButton(switch_3_ways_v2,numBlock,texte,textBoxSize,buttonSize,isSelector,textBoxHeight)
{
var divBlock = document.createElement('div');
var divTitle = document.createElement('div');
var divTitleBox = document.createElement('div');
var divButton = document.createElement('div');
var divButtonThp = document.createElement('div');
var divIcon = document.createElement('i');
//creation des tags
if(isSelector == 1)
{
divBlock.id = "selector#uid#";
divBlock.className = "selector#uid#";
}
else
{
divBlock.id = 'block'+numBlock+"#uid#";
divBlock.className = "switch2#uid# blockX#uid#";
}
divTitle.style.paddingLeft = (buttonSize-textBoxSize)/2 + "px";
divTitleBox.id = "titlebox"+numBlock+"#uid#";
divTitleBox.className ="mode_lib_small";
divTitleBox.style.width = textBoxSize +"px";
divTitle.id = 'title'+numBlock+"#uid#";
divTitle.style.height = textBoxHeight+"px";
divButton.id = 'button'+numBlock+"-#uid#";
divButtonThp.className = "button_thp";
divIcon.id = 'icon'+numBlock+"-#uid#";
divIcon.className = "fa fa-lock";
//append des tags
divButtonThp.appendChild(divIcon);
divButton.appendChild(divButtonThp);
divTitle.appendChild(divTitleBox);
divBlock.appendChild(divTitle);
divBlock.appendChild(divButton);
switch_3_ways_v2.appendChild(divBlock);
}
jeedom.cmd.update['#id#'] = function(_options){
var buttonSize = ('#taille#' !='#'+'taille#') ? "#taille#":60;
var borderSize = ('#taille_bordure#' !='#'+'taille_bordure#') ? "#taille_bordure#":3;
var iconSize = ('#taille_icone#' !='#'+'taille_icone#') ? "#taille_icone#":30;
var arrondi = ('#arrondi#' !='#'+'arrondi#') ? "#arrondi#":1;
var textBoxSize = ('#textBoxSize#' !='#'+'textBoxSize#') ? "#textBoxSize#":50;
var textFont = ('#textFont#' !='#'+'textFont#') ? "#textFont#":12;
var textBoxHeight = ('#textBoxHeight#' !='#'+'textBoxHeight#') ? "#textBoxHeight#":20;
var separateur = ('#Separateur#'!='#'+'Separateur#') ? "#Separateur#" : ' ';
var icones = ('#Icones#'!='#'+'Icones#') ? "#Icones#" : 'Erreur ajouter otpion Icones';
var textes = ('#Textes#'!='#'+'Textes#') ? "#Textes#" : 'Erreur ajouter otpion Textes';
var colors = ('#Couleurs#'!='#'+'Couleurs#') ? "#Couleurs#" : 'Erreur ajouter otpion Couleurs';
var enables = ('#Enables#'!='#'+'Enables#') ? "#Enables#" : 'Erreur ajouter otpion Enables';
var cmdIds = ('#CmdIds#'!='#'+'CmdIds#') ? "#CmdIds#" : '#id#';
var subType = ('#subType#'!='#'+'subType#') ? "#subType#" : '';
var textColors = ('#texteCouleurs#'!='#'+'texteCouleurs#') ? "#texteCouleurs#" : '#FFFFFF';
var blockSize = ('#blockSize#' !='#'+'blockSize#') ? "#blockSize#":60;
var distanceBlock = ('#distanceBlock#' !='#'+'distanceBlock#') ? "#distanceBlock#":20;
var nbBlock = ('#nbBlock#' !='#'+'nbBlock#') ? "#nbBlock#":3;
var showText = ('#showText#' !='#'+'showText#') ? "#showText#":0;
var switch_3_ways_v2 = document.getElementById("switch_3_ways_v2#uid#");
var commande = ('#CommandeExt#' !='#'+'CommandeExt#') ? "#CommandeExt#":0;
var slider = ('#EffetSlider#' !='#'+'EffetSlider#') ? "#EffetSlider#":0;
var arrayValue =icones.split(separateur);
var arrayTexte =textes.split(separateur);
var arrayColor =colors.split(separateur);
var arrayEnable=enables.split(separateur);
var arrayCmdId =cmdIds.split(separateur);
var arrayTexteColor = textColors.split(separateur);
var arraySubType = subType.split(separateur);
var selectedValue = Math.round(_options.display_value);
for (let i = 0; i < nbBlock; i++) {
if(arrayValue[i] == null || arrayValue[i] == ""){
arrayValue[i] = "fas fa-lock";
}
if(arrayTexte[i] == null || arrayTexte[i] == ""){
arrayTexte[i] = "texte"+i;
}
if(arrayColor[i] == null || arrayColor[i] == ""){
arrayColor[i] = "#FFFFFF";
}
if(arrayEnable[i] == null || arrayEnable[i] == ""){
arrayEnable[i] = 1;
}
if(arrayTexteColor[i] == null || arrayTexteColor[i] == ""){
arrayTexteColor[i] = "#FFFFFF";
}
if(arrayCmdId[i] == null || arrayCmdId[i] == ""){
arrayCmdId[i] = '#id#';
}
if(arraySubType[i] == null || arraySubType[i] == ""){
arraySubType[i] = "slider";
}
if (document.getElementById('block'+i+"#uid#")==null)
{
addBlockButton(switch_3_ways_v2,i,arrayTexte[i],textBoxSize,buttonSize,0,textBoxHeight);
setButton($("#button"+i+"-#uid# .button_thp"),$("#button"+i+"-#uid# .button_thp i"),arrayValue[i],'grey',buttonSize,borderSize,iconSize,arrondi);
setTitleBox(document.getElementById("titlebox"+i+"#uid#"),arrayTexte[i],'grey',textFont);
}
}
if (document.getElementById("selector#uid#")==null)
{
addBlockButton(switch_3_ways_v2,'','',textBoxSize,buttonSize,1,textBoxHeight);
}
var selector = document.getElementById("selector#uid#");
var titleSelector = document.getElementById("titlebox#uid#");
if(selectedValue>=nbBlock)
{
selector.style.display ="none";
}
else
{
selector.style.display = "block";
}
if(showText == 0 )
{
for (let i = 0; i < nbBlock; i++) {
$("#title"+i+"#uid#").css('display','none');
}
$("#title#uid#").css('display','none');
}
if ('#vertical#' == "1"){
$('.switch2#uid#').css('margin-bottom',distanceBlock+'px');
$('.switch2#uid#').css('width',blockSize+'px');
if (showText == 0 ) selector.style.top = (parseInt(buttonSize) + parseInt(distanceBlock))*selectedValue +"px" ;
else selector.style.top = (parseInt(buttonSize)+parseInt(textBoxHeight)+parseInt(distanceBlock))*selectedValue +"px" ;
selector.style.width = blockSize+'px';
}
else
{
$('.switch2#uid#').css('float','left');
$('.switch2#uid#').css('width',blockSize+'px');
$('.switch2#uid#').css('margin-right',distanceBlock+'px');
selector.style.left = (parseInt(blockSize)+parseInt(distanceBlock))*selectedValue +"px" ;
selector.style.width = blockSize+'px';
}
if(selectedValue<nbBlock)
{
if (slider == '1')
{
for (let j = 0; j < nbBlock; j++) {
if(j < selectedValue)
{
setButton($("#button"+j+"-#uid# .button_thp"),$("#button"+j+"-#uid# .button_thp i"),arrayValue[j],arrayColor[j],buttonSize,borderSize,iconSize,arrondi);
if(borderSize >0)
{
$("#button"+j+"-#uid# .button_thp").css("box-shadow","0px 0px 2px 2px "+ hexToRgbA(arrayColor[j],0.7));
}
setTitleBoxColor(document.getElementById("titlebox"+j+"#uid#"),arrayTexte[j],arrayColor[j],textFont,arrayTexteColor[j]);
}
if(j > selectedValue)
{
setButton($("#button"+j+"-#uid# .button_thp"),$("#button"+j+"-#uid# .button_thp i"),arrayValue[j],'grey',buttonSize,borderSize,iconSize,arrondi);
setTitleBox(document.getElementById("titlebox"+j+"#uid#"),arrayTexte[j],'grey',textFont);
$("#button"+j+"-#uid# .button_thp").css("box-shadow","0px 0px 0px 0px ");
document.getElementById("titlebox"+j+"#uid#").style.backgroundColor = "transparent";
}
}
setButton($("#button-#uid# .button_thp"),$("#button-#uid# .button_thp i"),arrayValue[selectedValue],arrayColor[selectedValue],buttonSize,borderSize,iconSize,arrondi);
if(borderSize >0)
{
$("#button-#uid# .button_thp").css("box-shadow","0px 0px 2px 2px "+ hexToRgbA(arrayColor[selectedValue],0.7));
}
setTitleBoxColor(titleSelector,arrayTexte[selectedValue],arrayColor[selectedValue],textFont,arrayTexteColor[selectedValue]);
}
else
{
setButton($("#button-#uid# .button_thp"),$("#button-#uid# .button_thp i"),arrayValue[selectedValue],arrayColor[selectedValue],buttonSize,borderSize,iconSize,arrondi);
if(borderSize>0){
$("#button-#uid# .button_thp").css("box-shadow","0px 0px 2px 2px "+ hexToRgbA(arrayColor[selectedValue],0.7));
}
setTitleBoxColor(titleSelector,arrayTexte[selectedValue],arrayColor[selectedValue],textFont,arrayTexteColor[selectedValue] );
}
}
for (let i = 0; i < nbBlock; i++)
{
if(arrayEnable[i]==1)
{
if(commande==0 || arrayCmdId[i].toString() == '#id#')
{
document.getElementById('block'+i+"#uid#").onclick = function(){
jeedom.cmd.execute({id: '#id#', value:{slider: i.toString()}});
};
}
else
{
document.getElementById('block'+i+"#uid#").onclick = function(){
if (arraySubType[i] == "other")
{
jeedom.cmd.execute({id: arrayCmdId[i].toString()});
}
else
{
jeedom.cmd.execute({id: arrayCmdId[i].toString(), value:{slider: i.toString()}});
}
jeedom.cmd.execute({id: '#id#', value:{slider: i.toString()}});
};
}
}
}
if ('#time#' == 'duree') {
jeedom.cmd.displayDuration(_options.valueDate, $('.cmd[data-cmd_id=#id#] .timeCmd'));
}
else if ('#time#' == 'date') {
var date = new Date(_options.valueDate);
var format = $.datepicker.formatDate('D dd/mm', date);
var time = "à "+date.getHours()+":"+(date.getMinutes()<10?'0':'')+date.getMinutes();
$('.cmd[data-cmd_id=#id#] .timeCmd').html(format+'<br>'+time);
}
else if ('#time#' == 'heure') {
var date = new Date(_options.valueDate);
var time = "à "+date.getHours()+":"+(date.getMinutes()<10?'0':'')+date.getMinutes()+":"+(date.getSeconds()<10?'0':'')+date.getSeconds()+"";
$('.cmd[data-cmd_id=#id#] .timeCmd').html(time);
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
</script>
</div>
2 « J'aime »
Super !!! merci ça fonctionne
Tu crois que c’est possible d’avoir un mouse over avec les couleurs en paramétrage ? 
Sinon j’ai un décalage à droite tu sais à quoi c’est du ?
en tout cas merci pour tout
Bonne soirée
Bonjour,
Y aurait il une banque de widget animés (dynamiques) ? Un widget
(pas un gif) comme celui ci serait super…
Merci d’avance