Hello
Oui preneur de ton code 
Sinon Peux tu nous décrire brièvement ta capture d’écran ?
Le thermostat est custom maison ? ou tu as réutilisé un widget thermo ?
A quoi servent tes autres icones ?
<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>
.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#.block0#uid#,
.switch2#uid#.block1#uid#,
.switch2#uid#.block2#uid#,
.switch2#uid#.block3#uid#,
.switch2#uid#.block4#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');
}
function setTitleBackGroundColor(myTitleSelector,texte,color,textFont)
{
var myColor = color;
if(myColor == '#FFFFFF' || myColor == '#ffffff')
{
myColor = '#1fe0';
myTitleSelector.innerHTML ="";
myTitleSelector.style.boxShadow ="none";
}
else
{
myTitleSelector.innerHTML = texte;
myTitleSelector.style.boxShadow ="0px 0px 1px 1px " + hexToRgbA(myColor,0.3);
}
myTitleSelector.style.backgroundColor =myColor;
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# block"+numBlock+"#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 = is_numeric('#taille#') ? parseFloat('#taille#'):60;
var borderSize = is_numeric('#taille_bordure#') ? parseFloat('#taille_bordure#'):3;
var iconSize = is_numeric('#taille_icone#') ? parseFloat('#taille_icone#'):30;
var arrondi = is_numeric('#arrondi#') ? parseFloat('#arrondi#'):1;
var textBoxSize = ('#textBoxSize#' !='#'+'textBoxSize#') ? "#textBoxSize#":50;
var textFont = ('#textFont#' !='#'+'textFont#') ? "#textFont#":12;
var textBoxHeight = ('#textBoxHeight#' !='#'+'textBoxHeight#') ? "#textBoxHeight#":20;
var value0 = ('#icone0#' !='#'+'icone0#') ? "#icone0#":"fas fa-lock";
var value1 = ('#icone1#' !='#'+'icone1#') ? "#icone1#":"fas fa-lock";
var value2 = ('#icone2#' !='#'+'icone2#') ? "#icone2#":"fas fa-lock";
var value3 = ('#icone3#' !='#'+'icone3#') ? "#icone3#":"fas fa-lock";
var value4 = ('#icone4#' !='#'+'icone4#') ? "#icone4#":"fas fa-lock";
var texte0 = ('#texte0#' !='#'+'texte0#') ? "#texte0#":"texte";
var texte1 = ('#texte1#' !='#'+'texte1#') ? "#texte1#":"texte";
var texte2 = ('#texte2#' !='#'+'texte2#') ? "#texte2#":"texte";
var texte3 = ('#texte3#' !='#'+'texte3#') ? "#texte3#":"texte";
var texte4 = ('#texte4#' !='#'+'texte4#') ? "#texte4#":"texte";
var color0 = ('#color0#' !='#'+'color0#') ? "#color0#":"#FFFFFF";
var color1 = ('#color1#' !='#'+'color1#') ? "#color1#":"#FFFFFF";
var color2 = ('#color2#' !='#'+'color2#') ? "#color2#":"#FFFFFF";
var color3 = ('#color3#' !='#'+'color3#') ? "#color3#":"#FFFFFF";
var color4 = ('#color4#' !='#'+'color4#') ? "#color4#":"#FFFFFF";
var enable0 = ('#enable0#' !='#'+'enable0#') ? "#enable0#":1;
var enable1 = ('#enable1#' !='#'+'enable1#') ? "#enable1#":1;
var enable2 = ('#enable2#' !='#'+'enable2#') ? "#enable2#":1;
var enable3 = ('#enable3#' !='#'+'enable3#') ? "#enable3#":1;
var enable4 = ('#enable4#' !='#'+'enable4#') ? "#enable4#":1;
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 arrayTexte =[texte0,texte1,texte2,texte3,texte4];
var arrayValue =[value0,value1,value2,value3,value4];
var arrayColor =[color0,color1,color2,color3,color4];
var arrayEnable =[enable0,enable1,enable2,enable3,enable4];
var selectedValue = _options.display_value;
for (let i = 0; i < nbBlock; i++) {
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');
selector.style.top = (parseInt(buttonSize)+parseInt(textBoxHeight)+parseInt(distanceBlock))*selectedValue +"px" ;
selector.style.width = blockSize+'px';
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));
setTitleBackGroundColor(titleSelector,arrayTexte[selectedValue],arrayColor[selectedValue],textFont);
}
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';
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));
setTitleBackGroundColor(titleSelector,arrayTexte[selectedValue],arrayColor[selectedValue],textFont);
}
for (let i = 0; i < nbBlock; i++)
{
if(arrayEnable[i]==1){
$('.block'+i+'#uid#').on('click', function(){jeedom.cmd.execute({id: '#id#', value:(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>
Voilà, vous trouverez des paramètres à déclarer dans le code :).
J’ai déclaré dans le code jusqu’à 5 blocs, mais vous pouvez en ajouter plus :), c’est dynamique.
@Salvialf, je n’ai pas trouvé comment on récupère dynamiquement les paramètres (en fonction du nombre de blocs…)
Sinon, pour le rendu ci-dessous :
- Un virtuel avec le slider et son état + les scénarios pour synchroniser avec le thermostat (plugin thermostat). Les couleurs doivent être en hexa
- La commande thermostat de l’équipement thermostat (merci @Salvialf)
- Le statut du thermostat (en mode icon)
- La température du thermostat (ou sonde)
En bonus, le slider dans un autre style :
Je m’en sers aussi pour basculer entre les états de mon alarme :
8 « J'aime »
Un seul mot Magnifique
1 « J'aime »
C’est effectivement très esthétique et plus simplement magnifique
J’ai constaté un élément que je trouve peux être bizarre et difficile à expliquer
Lorsque nous sélectionnons le 1er icône la valeur de la variable n’est pas « 0 » mais « », à savoir vide
on se rend compte de cela pour la gestion des scénarios
Sur le dashboard il affiche bien « 0 » mais si on clique sur le bouton « Tester », le résultat est vide
Je n’ai pas ce problème 
Il faudrait peut etre définir les bornes (min et max)
Voila le paramétrage de mes virtuels.
+
Oui avec une valeur à 1
Mais sur l’icone 0 tu as quelle valeur
pas de valeur pour ione0
J’ai bien les valeurs 1 et 2 mais pas le 0 (sur la variable en cliquant sur tester)
Sur le dashboard, la valeur « vide / null » affiche 0 mais en fait ce n’est pas réellement la valeur à 0
Si je réaffecte le widget standard, dans ce cas la valeur 0 aparrait. C’est donc bien lié au widget
Le fonctionnement est le même avec les bornes max et min
Peux tu essayer en cliquant sur le 1er icone ?
Quelle valeur as tu ?
Bonjour
Merci pour ce partage.
Du coup j’ai fait une modification pour
- avoir un nombre de positions variables
=> définit par l’option Textes : une liste avec autan de noms que de positions/boutons souhaités. - une option activable pouvoir actionner d’autres commandes (slider qui regroupe déclenches plusieurs boutons) (*)
(*)Pour ce dernier point cela peut sembler étrange, mais en fait j’ai une liste de commandes d’actions dans un équipement jMQTT que je ne sais pas remplacer en slider. Donc dans mon virtuel qui pilote et enrichie cet équipe j’ai fais un slider avec ce widget et qui a besoin de déclencher commandes actions. C’est une option optionnel donc pas de souci pour l’utiliser en mode normal 
<!--
Basé sur le travail de SALVIALF : Widget 3_State_Switch
https://community.jeedom.com/t/salvialf-widget-3-state-switch-action-curseur/7065
Separateur (optionel, defaut = ' ') :
- caratère de séparation dans les listes ci dessous.
- Par défaut c'estun espace
- Exemple : |
Textes (OBLIGATOIRE)
- Liste des noms des boutons
- Les noms sont séparés par un espace (défaut) ou par le caratère définit dans l'option Separateur
- Exemple 1 : Printempt Ete Automne Hiver
- Exemple 2 (Avec Separateur = |) : Choix 1|Choix 2|Choix 3
Couleurs (optionel, defaut = '#838383')
- Couleur ou liste des couleurs du curseur
- Soit une seule couleur est renseignée et utiliser quelque soit le choix selection
- Soit une liste couleur pour une personalisation de chaque choix selection
- Exemple 1 : #B52026
- Exemple 2 (Avec Separateur = |) :#198044|#1D59FE|#B52026
CmdIds (optionel, defaut = '#id')
- id ou liste des id de bouton de commandes
- par défaut c'est l'Id du slider
- Peut être utiliser pour regrouper dans le slider d'un vituel différentes commandes
- Exemple (Avec Separateur = |) :3805|3806|3810
Vertical (optionel, par defaut inactif)
1 : pour un affichage vertical
time (optionel, par defaut inactif)
duree : depuis le dernier changement
date : du dernier changement
heure : du dernier changement
-->
<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 class="switch_X_ways#uid#">
</div>
<span class="timeCmd#uid# timeCmd"></span>
<style>
.switch_X_ways#uid#{
margin:5px 10px 10px 10px;
color:#D0D0D0;
border:solid 1px #5B5B5B;
font-size:1em;
font-weight:bold;
line-height:2em;
border-radius:0.3em;
background:grey;
position:relative;
display:block;
box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.75) inset,0px 2px 2px 0px rgba(255, 255, 255, 0.5);
}
.switchX#uid# {
cursor:pointer;
position:relative;
display:block;
-webkit-transition: 300ms ease-out;
-moz-transition: 300ms ease-out;
transition: 300ms ease-out;
padding: 0 1em;
}
.selector#uid#{
text-align:center;
position:absolute;
width:0;
box-sizing:border-box;
-webkit-transition: 300ms ease-out;
-moz-transition: 300ms ease-out;
transition: 300ms ease-out;
border-radius:0.3em;
border:solid 0.5px white;
color:white;
text-shadow: 1px 1px 3px #000;
box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.75),0px 2px 13px 0px #9b9b9b,0px 2px 2px 0px rgba(255, 255, 255, 0.5) inset;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var separateur = ('#Separateur#'!='#'+'Separateur#') ? "#Separateur#" : ' ';
var tempoVar = ('#Textes#'!='#'+'Textes#') ? "#Textes#" : 'Erreur ajouter otpion Texte';
var lesTxts = tempoVar.split(separateur);
var nb = lesTxts.length;
tempoVar = ('#Couleurs#'!='#'+'Couleurs#') ? "#Couleurs#" : '#838383';
var lesCouleurs = tempoVar.split(separateur);
tempoVar = ('#CmdIds#'!='#'+'CmdIds#') ? "#CmdIds#" : '#id';
var lesCmdIDs = tempoVar.split(separateur);
var maCmdId;
cmd.find('.switch_X_ways#uid#').empty();
for (i=0 ; i<nb ; i++){
cmd.find('.switch_X_ways#uid#').append('<div id="val'+i+'#uid#" class="switchX#uid# choix'+i+'#uid#"></div>');
maCmdId= (i < lesCmdIDs.length) ? lesCmdIDs[i] : lesCmdIDs[0];
$('.choix'+i+'#uid#').on('click',
{numCmd:maCmdId, valeur:i },
function(event) {jeedom.cmd.execute({id: event.data.numCmd, value: (event.data.valeur)});
});
}
cmd.find('.switch_X_ways#uid#').append('<div id="selector#uid#" class="selector#uid#"></div>');
var selector = document.getElementById("selector#uid#");
if ('#Vertical#' != "1"){
$('.switch_X_ways#uid#').css('height','2em');
$('.switchX#uid#').css('float','left');
}
var decalage = 0;
var pos;
for (i=0 ; i<nb ; i++){
pos = document.getElementById("val" + i + "#uid#");
pos.innerHTML = lesTxts[i];
if (_options.display_value == i){
if ('#Vertical#' == "1"){
selector.style.top = decalage + "px";
selector.style.width = pos.clientWidth + "px";
selector.style.backgroundColor = (i < lesCouleurs.length) ? lesCouleurs[i] : lesCouleurs[0];
selector.innerHTML = lesTxts[i];
}else{
selector.style.left = decalage + "px";
selector.style.width = pos.clientWidth + "px";
selector.style.backgroundColor = (i < lesCouleurs.length) ? lesCouleurs[i] : lesCouleurs[0];
selector.innerHTML = lesTxts[i];
}
}
decalage = decalage + (('#Vertical#' == "1") ? pos.clientHeight : pos.clientWidth);
}
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>
J’ai les bonnes valeurs… :), si tu supprimes tous les paramètres du widget, ça donne quoi ?
Pas bete ton idée avec des pipe … j’avais pas pensé…
Exactement la même chose
Jeedom V4
Sur le dashboard la valeur 0, s’affiche bien
Mais sur la variable, pas de valeur
Méa culpa : bug trouvé, le js interprète 0 comme vide…
Si tu mets ça,
for (let i = 0; i < nbBlock; i++)
{
if(arrayEnable[i]==1){
$('.block'+i+'#uid#').on('click', function(){jeedom.cmd.execute({id: '#id#', value:(i.toString())});});
}
}
a la place de
for (let i = 0; i < nbBlock; i++)
{
if(arrayEnable[i]==1){
$('.block'+i+'#uid#').on('click', function(){jeedom.cmd.execute({id: '#id#', value:(i)});});
}
}
Ca devrait marcher, merci pour ton feedback
C’est Nickel 
Vraiment très sympa ce widget
1 « J'aime »
Du coup tu as fait la modif directement sur le widget de @Salvialf ou plutôt sur le widget modifié par @theone_811 ?
Effectivement je trouve plus sympa et pratique d’avoir un seul paramètre texte avec tous les textes dedans séparés par un séparateur, idem pour les coueurs et icones,…
Grace à l’astuce de @F_yann , j’ai modifié le 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 setTitleBackGroundColor(myTitleSelector,texte,color,textFont)
{
var myColor = color;
if(myColor == '#FFFFFF' || myColor == '#ffffff')
{
myColor = '#1fe0';
myTitleSelector.innerHTML ="";
myTitleSelector.style.boxShadow ="none";
}
else
{
myTitleSelector.innerHTML = texte;
myTitleSelector.style.boxShadow ="0px 0px 1px 1px " + hexToRgbA(myColor,0.3);
}
myTitleSelector.style.backgroundColor =myColor;
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 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 arrayValue =icones.split(separateur);
var arrayTexte =textes.split(separateur);
var arrayColor =colors.split(separateur);
var arrayEnable =enables.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 (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');
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));
setTitleBackGroundColor(titleSelector,arrayTexte[selectedValue],arrayColor[selectedValue],textFont);
}
}
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);
$("#button-#uid# .button_thp").css("box-shadow","0px 0px 2px 2px "+ hexToRgbA(arrayColor[selectedValue],0.7));
setTitleBackGroundColor(titleSelector,arrayTexte[selectedValue],arrayColor[selectedValue],textFont);
}
}
for (let i = 0; i < nbBlock; i++)
{
if(arrayEnable[i]==1){
//$('.block'+i+'#uid#').on('click', function(){jeedom.cmd.execute({id: '#id#', value:(i.toString())});});
document.getElementById('block'+i+"#uid#").onclick = function(){jeedom.cmd.execute({id: '#id#', value:(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>
On peut laisser les paramètres vide entre les séparateurs :).
N’hésitez pas à remonter des bugs si vous en trouvez
2 « J'aime »
De mon coté cela ne fonctionne pas
Re, pourrais tu me détailler le " ça ne fonctionne pas" stp ?
Tu t’es trompé dans le nom des paramètres :
Textes
Couleurs
Enables
Icones
…
Ne pas oubliezr les autres paramètres aussi
