12 messages ont été scindés en un nouveau sujet : États ne fonctionnent plus
Une chance de l’avoir dans ton plugin pimp un jour ?
Si je trouve un moyen d’arrêter le temps oui 
Oui il faudrait que je fasse une grosse passe sur Pimp, je vais devoir poser une semaine de vacances !
1 « J'aime »
Cette adaptation en 2 state switch du widget de Salvialf marchais jusqu’à récemment 
@pifou j’ai regardé ta solution pour le 3 state switch mais cette adaptation 2 state switch a un code complètement différent. Je n’ai pas trouver comment placer ton :
remplacer
value: ('1')parvalue: {slider: 1}
Si c’est pas possible, tempi
Merciii
Salut,
Pour info, j’ai fait également la modif sur ma 4.1.28. Et ça marche. Du coup, joli combo 4.1-4.2 
Bonsoir,
Voici la version corrigée :
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#">
<!--
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="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: 100ms ease-out;
-moz-transition: 100ms ease-out;
transition: 100ms ease-out;
padding: 0 1em;
}
.selector#uid#{
text-align:center;
position:absolute;
width:0;
box-sizing:border-box;
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
transition: 100ms 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>
var separateur#id# = ('#Separateur#'!='#'+'Separateur#') ? "#Separateur#" : ' ';
var tempoVar = ('#Textes#'!='#'+'Textes#') ? "#Textes#" : 'Erreur ajouter option Texte';
var lesTxts#id# = tempoVar.split(separateur#id#);
tempoVar = ('#Couleurs#'!='#'+'Couleurs#') ? "#Couleurs#" : '#838383';
var lesCouleurs#id# = tempoVar.split(separateur#id#);
tempoVar = ('#CmdIds#'!='#'+'CmdIds#') ? "#CmdIds#" : '#id#';
var lesCmdIDs#id# = tempoVar.split(separateur#id#);
var maCmdId#id#;
$('.cmd[data-cmd_id=#id#]').find('.switch_X_ways#uid#').empty();
for (i=0 ; i < lesTxts#id#.length; i++){
$('.cmd[data-cmd_id=#id#]').find('.switch_X_ways#uid#').append(
'<div id="val'+i+'#uid#" class="switchX#uid# choix'+i+'#uid#">'+lesTxts#id#[i]+'</div>');
maCmdId#id#= (i < lesCmdIDs#id#.length) ? lesCmdIDs#id#[i] : lesCmdIDs#id#[0];
$('.choix'+i+'#uid#').on('click',
{numCmd:maCmdId#id#, valeur:i },
function(event) {jeedom.cmd.execute({id: event.data.numCmd, value: {slider :event.data.valeur}});
});
}
$('.cmd[data-cmd_id=#id#]').find('.switch_X_ways#uid#').append('<div id="selector#uid#" class="selector#uid#"></div>');
if ('#Vertical#' != "1"){
$('.switch_X_ways#uid#').css('height','2em');
$('.switchX#uid#').css('float','left');
}
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var decalage = 0;
var pos;
var selector = document.getElementById("selector#uid#");
for (i=0 ; i < lesTxts#id#.length ; i++){
pos = document.getElementById("val" + i + "#uid#");
if (_options.display_value == i){
if ('#Vertical#' == "1"){
selector.style.top = decalage + "px";
}else{
selector.style.left = decalage + "px";
}
selector.style.width = pos.clientWidth + "px";
selector.style.backgroundColor = (i < lesCouleurs#id#.length) ? lesCouleurs#id#[i] : lesCouleurs#id#[0];
selector.innerHTML = lesTxts#id#[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>
Bonne soirée.
5 « J'aime »
super merci ça fonctionne
Merciii !!
Merci, ca marche 
Je vais essayer d’adapter les modif sur les miens a 4,5 et 6 positions
Tu n’as pas besoin de l’adapter pour faire en plusieurs positions avec cette nouvelle version, le script est fait pour s’adapter en fonction du nombre de séparateur en paramètres.
Regarde ce qui est en commentaire au début du script pour savoir comment l’utiliser.
2 « J'aime »
Bonjour,
Depuis que j’ai mis à jour jeedom recemment, le widget modifé basé sur le code de @Salvialf ne marche plus, lorsque je clique sur une icone, l’etat ne change plus
Si quelqu’un aurait une idée car je ne trouve pas depuis un petit moment…
un grand merci d’avance
voici mon 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>
.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;{slider: 1}
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>
Il me semble que 6 posts au dessus c,est traité
Bonjour a tous.
Je m’arrache les cheveux.
J’ai installé le widget d’origine de SALVIALF (en haut du post),
mais rien a faire, le curseur reste bloqué a droite. je n’arrive pas a le bouger.
pourriez vous m’aider SVP
merci d’avance
Version Jeedom : 4.2.14
As tu essayé de mettre les min/max?
Salut,
je n’ai pas eu l’occasion de regarder encore mais il me semble que le code du widget d’origine n’est plus compatible 4.2.
Des membres du forum ont proposé des versions corrigées quelques messages plus haut si tu veux le temps que je corrige de mon côté
Merci . je m’y remet demain.
Bonne soirée
Du coup une question.
On parle de CSs la. Comment se fait-il que maj de jeedom aussi importante soit elle qu’elle puisse impacter les widget qui utilisent du code HTML / CSS ?
Bonjour,
Effectivement j’ai réussi avec le code corrigé ( post 200)
Bonne journée
Bonsoir à tous,
Salut @salvialf,
Suite aux soucis avec 4.2, j’ai appliqué le nouveau code de Phpvarious.
Malheureusement cela ne fonctionne pas, je reste bloqué sur « Choix 2 ». Par contre la valeur état à gauche change.
J’ai du louper un truc mais je ne vois pas où.
Ci-dessous mes paramètres, pourriez-vous m’aider à fixer svp ?
Merci.
