[SALVIALF] Widget 3_State_Switch (action/curseur)

[Salvialf]

Bonjour @ tous,

Un de mes widgets préférés… Je dois le retravailler mais j’avais quand même envie de le partager sur le nouveau forum sans attendre.

C’est un switch 3 positions (ON/AUTO/OFF par défaut) à appliquer sur une commande de type action/Curseur:

Il est possible de personnaliser le libellé des cases via 3 paramètres optionnels ayant pour valeur le texte voulu et pour nom:

• texte0: correspond au texte pour la valeur « 0 » (« OFF » par défaut).
• texte1: correspond au texte pour la valeur « 1 » (« ON » par défaut).
• texte2: correspond au texte pour la valeur « 2 » (« AUTO » par défaut).

Il est possible de personnaliser la couleur des cases via 3 paramètres optionnels ayant pour valeur là couleur voulue et pour nom:

• color0: couleur de la case pour la valeur « 0 » (« red » par défaut).
• color1: couleur de la case pour la valeur « 1 » (« green » par défaut).
• color2: couleur de la case pour la valeur « 2 » (« #418d92 » par défaut).

Pour passer en vue switch vertical, il faut mettre le paramètre vertical à 1.

En V4 il est également possible d’afficher la date, l’heure ou la durée depuis le dernier changement d’état par l’utilisation du paramètre time ayant pour valeur date ou heure ou duree.

En cas de valeur autre que 0 ou 1 ou 2, le widget affiche une image d’erreur:

Il reste alors possible de cliquer sur la droite ou la gauche du bouton orange pour renvoyer une valeur de 0 ou 1.

---

Exemple:

• vertical=1
• texte0=ÉTEINT
• texte1=ALLUMÉ
• texte2=STROBE
• color0=tomato
• color1=lime
• color2=orange

[Salvialf]

Installation:

• En V4: Le fichier 3State_Switch en V4 est téléchargeable ici: 3-State-Switch

Le fichier cmd.action.slider.3State_Switch.html est à copier dans le répertoire data/customTemplates/dashboard à l’aide du plugin Jeexplorer.

Le code peut aussi être directement copié dans un widget 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 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>

Le widget peut être sélectionné à partir de l’onglet Affichage de la configuration de la commande, en choisissant Customtemp/3State_Switch dans le menu déroulant.

• En V3: Le widget est disponible sur le market sous le nom 3_State_Switch

---

Voici un exemple des commandes à utiliser:

Et un exemple d’usage au quotidien:

[Bison]

Je l’utilise depuis peu pour gérer, en V3, la gestion « automatique », « éteinte » et « marche forcée » d’un système de chauffage par PAC.

C’est top merci beaucoup !

[snoopyfb]

Bonjour

C’est effectivement un très bon widget
Dommage qu’il ne fonctionne pas en version mobile (pb d’affichage)

[MarcF]

Super plugin
Est-ce qu’il existe aussi avec 4 commandes ou plus

Eh oui quand c’est bien on en veut toujours plus

[MarcF]

Oserai-je reposer la question de savoir si ce plugin peut évoluer vers plus de commandes 4-5 ou +
j’ai essayé de modifier le code mais malheureusement mes connaissances sont trop faibles voire proche de zéro pour être franc.

[Salvialf]

Salut,

Promis avant la fin de l’année j’y jette un œil Blague à part je suis sur d’autres choses en ce moment mais je fais au plus vite pour remettre le nez dans mes widgets (J’ai presque plus que des widgets core depuis que je suis passé en V4 )

[MarcF]

@Salvialf Super, toujours au taquet
y’a pas d’urgence mais ça serait top
Merci

[MarcF]

Whaouh
j’ai réussi a modifier le code en passant de 3 a 6 positions

je le mets a dispo si vous souhaitez le modifier ou l’adapter pour le rendre flexible entre 3 et 6 ça serait super, soyez indulgent
merci
cmd.action.slider.6State_Switch.txt (7,9 Ko)

[MarcF]

Bonjour
un petit help sur le formatage d’un widget
dans mon exemple voir code TXT ci-dessus je n’arrive pas a élargir les colonnes de mon tableau dynamiquementen fonction du texte

[jerome6994]

Je viens de tester le widget en V4, avant je n’en avais pas l’usage.
Mon usage est sur la programmation des volets.

Quand je suis sur

• ON j’applique un horaire de levée, de montée renseigné jour par jour
• OFF la programmation est arrêtée
• AUTO je descends les volets en fonction de l’heure du coucher du soleil +/- un temps défini par un curseur

J’ai copié aussi le fichier dans la partie Mobile et cela fonctionne pas si mal sur mon téléphone.
Il y a que le OFF (désactivé) qui est en dehors de la barre, le OFF activé est bien dans la barre.
Je ne suis pas codeur pour 2 sous par contre et je ne peux pas vous aider, ou bien il va falloir des mois

[ersatz]

Bonjour,
Je suis un grand débutant, pardonne moi si ma question est un peu stupide.
J’aimerais utilisé ce widget pour passer mes thermostats en mode « Eco », « Confort » ou « Off ». Un peu dans l’esprit de ce que tu as fais dans ton exemple d’usage au quotidien.
J’ai bien installer le widget comme expliqué. J’ai bien compris comment le personnaliser (texte, couleur).
Mais je ne parviens pas a savoir comment l’appliquer sur mes thermostats. Si je comprend bien, le problème vient du fait que les boutons de base du thermostat ne sont pas des commandes action/curseur. Mais a partir de là, je ne sais pas comment avancer. J’ai beau chercher, je patauge.

[Salvialf]

Salut @ersatz,

En fait une fois le widget mis en place je gère les actions via un scénario en fonction de la valeur du curseur (0, 1 ou 2).

C’est vrai que j’aurai pu expliquer plus en détail cette partie car la question revient régulièrement

Y’a quelques exemples de scénarios sur le forum si ça peut t’aider, par exemple:

Pour SALVIALF 3 state switch

bjr @debutant, j’utilise ce widget et je te propose de suivre mes indications si tu veux. [Capture d’écran 2020-03-25 à 10.06.02] on prend par exemple la commande pompe,. A chaque fois que tu changes la position du curseur, tu affectes directement une valeur 0,1,2 à « Etat » ce qui donne dans ton équipement: [Capture d’écran 2020-03-25 à 10.13.27] [Capture d’écran 2020-03-25 à 10.13.40] maintenant tu créer un scénario qui lorsque la valeur « Etat » sera = 0, 1, 2 tu feras une actio…

[ersatz]

Quelle réactivité!
Je n’ai pas encore exploré la partie scénario de Jeedom. Je vais donc m’y mettre!
Merci pour ton aide.

[Pascal_Mauclere]

Bonjour,
Je ne comprends pas, je n’arrive pas à afficher les 3 états, ni même d’ailleurs l’interrupteur.
Je crée un widget de test juste pour afficher l’interrupteur à 3 états, mais rien n’y fait.
Je suis en V4.
Merci d’avance pour ton retour.

[Bison]

Pour voir les erreurs il faut à minima faire des captures d’écran du virtuel et du résultat obtenu c’est plus simple pour aider

[Pascal_Mauclere]

C’est pas faux
Copie des commandes créées:

Copie de l’équipement créé:

Merci

[Pascal_Mauclere]

le résultat:

[Bison]

Oui en effet, c’est pas comme ça qu’il faut faire.

Il te faut une action de type curseur et non 3 actions défaut.
En valeur minimum : 0
En valeur maximum : 2

Le widget s’applique ensuite sur la commande de type curseur