Bon, j’ai essayé en supprimant les boutons. Meme bug.
Y’a peut-être eu des changements sur le core, promis je le reprend dès lundi. Je ne pense pas que j’aurai le temps ce week-end
Édit: il faut lier tes commandes via le menu déroulant sous le nom des commandes action
Chez moi ça fonctionne encore.
Demain quand je passe sur mon PC je vous donne le code que j’ai
BOnjour
Alors moi j’utilise pour gérer mes volets ON, OFF et AUTO pour que ce se ferme avec le coucher du soleil. et voici le code que j’ai et qui n’est pas de moi du tout mais du créateur et qui marche en V4 sur navigateur et mobile :
<!-- ** Forked from https://codepen.io/yaseeno/pen/YMMmrO ** -->
<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_3_ways_v2#uid#">
<div id="monthly2#uid#" class="switch2#uid# monthly#uid#"></div>
<div id="semester2#uid#" class="switch2#uid# semester#uid#"></div>
<div id="annual2#uid#" class="switch2#uid# annual#uid#"></div>
<div id="selector#uid#" class="selector#uid#"></div>
</div>
<span class="timeCmd#uid# timeCmd label label-default"></span>
<style>
.switch_3_ways_v2#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);
}
.switch2#uid#.monthly#uid#,
.switch2#uid#.semester#uid#,
.switch2#uid#.annual#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 value0 = ('#texte0#' !='#'+'texte0#') ? "#texte0#":"OFF";
var value1 = ('#texte1#' !='#'+'texte1#') ? "#texte1#":"ON";
var value2 = ('#texte2#' !='#'+'texte2#') ? "#texte2#":"AUTO";
var color0 = ('#color0#' !='#'+'color0#') ? "#color0#":"red";
var color1 = ('#color1#' !='#'+'color1#') ? "#color1#":"green";
var color2 = ('#color2#' !='#'+'color2#') ? "#color2#":"#418d92";
var monthly = document.getElementById("monthly2#uid#");
var semester = document.getElementById("semester2#uid#");
var annual = document.getElementById("annual2#uid#");
var selector = document.getElementById("selector#uid#");
annual.innerHTML = value0;
monthly.innerHTML = value1;
semester.innerHTML = value2;
if ('#vertical#' == "1"){
if (_options.display_value == 1){
selector.style.top = 0;
selector.style.width = monthly.clientWidth + "px";
selector.style.backgroundColor = color1;
selector.innerHTML = value1;
}else if (_options.display_value == 2){
selector.style.top = monthly.clientHeight + "px";
selector.style.width = semester.clientWidth + "px";
selector.innerHTML = value2;
selector.style.backgroundColor = color2;
}else if (_options.display_value == 0){
selector.style.top = monthly.clientHeight + semester.clientHeight + 1 + "px";
selector.style.width = annual.clientWidth + "px";
selector.innerHTML = value0;
selector.style.backgroundColor = color0;
}else {
monthly.innerHTML = "*";
annual.innerHTML = "*";
selector.style.top = monthly.clientHeight + "px";
selector.style.width = semester.clientWidth + "px";
selector.innerHTML = "ERROR";
selector.style.backgroundColor = "orange";
}}
else {
$('.switch_3_ways_v2#uid#').css('height','2em');
$('.switch2#uid#').css('float','left');
if (_options.display_value == 1){
selector.style.left = 0;
selector.style.width = monthly.clientWidth + "px";
selector.style.backgroundColor = color1;
selector.innerHTML = value1;
}else if (_options.display_value == 2){
selector.style.left = monthly.clientWidth + "px";
selector.style.width = semester.clientWidth + "px";
selector.innerHTML = value2;
selector.style.backgroundColor = color2;
}else if (_options.display_value == 0){
selector.style.left = monthly.clientWidth + semester.clientWidth + 1 + "px";
selector.style.width = annual.clientWidth + "px";
selector.innerHTML = value0;
selector.style.backgroundColor = color0;
}else {
monthly.innerHTML = "*";
annual.innerHTML = "*";
selector.style.left = monthly.clientWidth + "px";
selector.style.width = semester.clientWidth + "px";
selector.innerHTML = "ERROR";
selector.style.backgroundColor = "orange";
}}
$('.monthly#uid#').on('click', function() {
jeedom.cmd.execute({id: '#id#', value: ('1')});});
$('.semester#uid#').on('click', function() {
jeedom.cmd.execute({id: '#id#', value: ('2')});});
$('.annual#uid#').on('click', function() {
jeedom.cmd.execute({id: '#id#', value: ('0')});});
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>
Salut,
Merci de me redonner le code que j’ai écrit… pour info ça fonctionne c’était juste que les commandes n’étaient pas liées
c’est avec plaisir Bonjour,
Merci pour ce widget mais je cherche à faire la même chose avec 3 images, j’ai une image par état.
Une idée de comment faire ?
Merci pour le widget. Parfait pour gérer la VMC (GV, PV, Off).
j’avoue que pour le mode auto / manu (j’ai crée un mode pour mes volets roulants) j’ai une preference pour le coté industriel 
mais ce widget bouton est plutot canon aussi…
je vais voir si je vais pas l’implémenter pour voir 
hello,
tu peux le faire via le widget « multistate » (template que tu choisis quand tu crée ton widget)
avec les tests (ne pas oublier #value# == xxx, pour chacun de tes états
Non, ça c’est bon pour une info, moi je veux le faire pour une commande. Mais j’ai réussi à le faire, il faut créer 3 commandes et une info et se coder un widget qui masque les 2 commandes inutiles en fonction de l’état d’une info.
Je suis partie du code source de ce widget et je l’ai modifié pour mon usage. Je passe le chemin des images en paramètre pour ne pas multiplier les widgets.
salut @Salvialf
Pas mal ton 3 state, je l’ai adapté pour en faire un 4 state 
sur ton widget sais tu si on peut envisager en fonction de certains cas de mettre une valeur interdite afin qu’il soit générique ?
Par exemple le auto si dans certains cas on veut qu’il ne soit pas accessible… comment pourrait on faire ?
Il faudrait que dynamiquement on puisse pour chaque cas du bouton rendre la case enable ou disable
pas facile hein ?
Hello,
Quelqu’un s’est-il amusé à détourner ce widget pour faire un widget volet somfy ?
En gros le curseur vertical connait 3 valeurs 0/50/100 et les 3 zones ‹ d’appui › au haut/milieu/bas d’un visuel de volet ?
J’aimerai bien ‹ fusionner › ça chez moi
Hello @naboleo,
Un widget pour commandes de volets roulants est dans les tuyaux.
Par contre en beta (dans Pimp my Jeedom) je viens de mettre un nouveau widget sur lequel je n’ai aps eu de retour et qui pourrait faire la blague peut-être : ButtonIcon
3 « J'aime »
Hello
Excellente nouvelle ! J’ai presque hâte de ce fait !
Oui, vu et dispo chez moi. Pour l’instant je l’ai pas utilisé mais j’exploite déjà l’iconAction qui semble très similaire.
Si tu peux indiquer un peu les différences, je veux bien basculer et te donner quelques retours.
Dans le cadre de ma question ci-dessus, je vois pas bien l’astuce que ça pourrait donner mais je suis ouvert à plus de détails
EDIT : il faut comprendre dans ta capture qu’il s’agit d’un curseur à N positions ?
Ce widget est dans plimp aussi ?
Je parlais de celui du premier post, désolé…
IconAction fait la bascule entre 2 états alors que ce widget affiche toutes les commandes d’actions et met en surbrillance celle qui est en cours.
Effectivement j’étais sur les boutons sur le côté 
pas sur un curseur… Je vais y réfléchir pourquoi pas ça peut être intéressant