[SALVIALF] Widget 3_State_Switch (action/curseur)

Tags: #<Tag:0x00007f282dd46730>

Si je ne m’abuse, « color0 » sert à modifier la couleur de la case.
Ce que je souhaite, c’est modifier la couleur du texte0 lui-même qui est actuellement en blanc pour la passer en une autre couleur. Je souhaite modifier uniquement le « texte0 ».
Merci d’avance.

Salut,

Je suis sur le coup pour ta demande mais j’ai été pris par autre chose alors que j’avais commencé à te répondre !!

Je vais te faire un truc en speed, ta demande m’a obligé à remettre le nez dans le code et la doc il faut vraiment que je reprenne ce widget y’a pleins de choses qui vont pas.

J’essaye de te répondre ce soir ou demain :wink:

Merci beaucoup Salvialf !
Ce n’est pas urgent, c’est seulement le côté esthétique :slight_smile:

Tout le reste fonctionne à merveille ! :star_struck:

Dans l’attente de te lire.

Me revoilà :smiley:

J’ai adapté le code pour ta demande avec un nouveau paramètre optionnel nommé « coltxt0 » et la couleur que tu souhaites comme valeur:

<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>
/*.switch2#uid#.annual#uid#{
  color:yellow;
}*/
.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 coltxt0 = ('#coltxt0#' !='#'+'coltxt0#') ? "#coltxt0#":"white";

  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;
    selector.style.color = 'white';
    }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;
    selector.style.color = 'white';
    }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;
    selector.style.color = coltxt0;
  	}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;
    selector.style.color = 'white';
    }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;
    selector.style.color = 'white';
    }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;
    selector.style.color = coltxt0;
  	}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>

Je suis parti du principe que tu souhaitais modifier la couleur du texte0 lorsqu’il est sélectionné. Si tu veux modifier la couleur de texte0 lorsqu’il n’est pas sélectionné j’ai laissé un bout de code commenté au tout début de la balise <style></style>:

/*.switch2#uid#.annual#uid#{
  color: yellow;
}*/

Il suffira alors de supprimer les 2 slashs et astérisques et de mettre la couleur que tu veux à la place de yellow:

.switch2#uid#.annual#uid#{
  color: ******;
}

N’hésites pas si tu as besoin de plus de renseignements car les explications que je fournis sont plutôt succintes.

Je l’utilise celui là… il a survécu à la migration mais je dois le recréer en v4.
Prog Volets
On verra ça cette semaine je pense.

Encore merci pour ton travail.
A+

1 J'aime

Excelent ! Tout simplement parfait ! :wave:
Pour le moment, je n’ai effectivement pas besoin de l’option « permanente » mais c’est top de l’avoir en plus !

1 J'aime

Bonjour @Salvialf ,

Alors avant tout un grand bravo pour tes partages et particulièrement pour tes widgets.

J’utilise ce widget, mais une ancienne version bassé sur le widget en v3, que j’avais personnalisée et adaptée pour gérer à ma convenance avec 2, 3 ou 4 slides. Ça fonctionne tjs aussi bien, mais mais tes dernières modifs me font de l’œil. Je me dis que peux être, d’autre que moi, aimerais utiliser une commande type slide pour des commandes on/off mais egalemeny pour des commande de plus de 3 etats.

Donc ma question, est-ce qu’il te serait possible d’ajouter, sous forme de paramètre supplémentaire, la possibilité d’avoir x états dans le slide.

Salut,
L’imbrication permet une meilleur performance dans l’exécution du scénario ou c’est tout simplement une best practice ?
En te remerciant

Sinack,

En théorie il est plus performant de faire comme ça puisque dans le cas ou le 1er SI est FAUX, l’exécution s’arrête.

En plaçant les SI de façon non imbriqué il est nécessaire de faire des comparaisons supplémentaires ce qui est donc moins performant.

Bon dans la réalité et vu les puissances de calculs actuels et la taille des scénarios je doute que l’écart soit vraiment mesurable.

Salut,

C’est la bonne pratique à avoir :wink:

Pour compléter la réponse de @Bison, sur la copie d’écran quelques messages plus haut on voit bien que le scénario s’est arrêté à la première comparaison fausse:

En imbriquant les SI le scénario enchaîne sur les conditions suivantes

D’acc ! Merci à vous deux pour ces explications et votre réactivité :+1:t2:

Du coup je suis allé faire quelques modifications dans certains de mes scénarios. Je me suis aperçu que je ne pouvais faire q’un SINON par SI:
Ce qui donne :
SI [STATE] == 0 FAIRE XXXX
SINON SI [STATE] == 1 FAIRE YYYYY
SI [STATE] == 2 FAIRE ZZZZZ

Est-ce normal de ne pas pouvoir faire plusieurs SINON ?

Sur ton second SI tu peux faire le SINON

Oui j’ai vu ça mais comme il y avait 3 états je pensais faire :

SI [STATE] == 0 FAIRE XXXX
SINON SI [STATE] == 1 FAIRE YYYYY
SINON SI [STATE] == 2 FAIRE ZZZZZ

Mais peu d’importance, Je vais faire sans
Merci

C’est bien ça c’est juste que la mise en forme du forum ne permet de décaler les lignes mais l’idée est de vérifier la première condition, si elle est fausse on vérifie la seconde et si la seconde est fausse on vérifie la troisième.

Hello. Tout d’abord merci du partage. Grâce à ça, des novices en code comme moi arrivent à personnaliser leur Jeedom à peu près comme ils veulent.

Maintenant, mon pb.
J’ai suivi les instruction pour installer le plugin en V4.
Il s’affiche correctement, j’arrive à le configurer en vertical.
Mais il revient toujours sur la position OFF.

Voici la config de mon virtuel :
Capture d’écran 2020-05-20 à 17.45.28

Jeedom V4 en VM sous Proxmox

EDIT :
Quel boulet :
la commande INFO était en type AUTRE au lieu d’être en NUMERIQUE !
Et j’ai cherché un moment :wink:

Salut
suis je le seul a avoir des soucis avec ?
Le curseur reste bloqué à droite en rouge et quand on click sur un autre état, il ne se passe rien.ezgif-6-97b50f2e8907

Salut @axelpg,

Je ne l’utilise plus en ce moment mais je vais m’occuper de son cas très prochainement et essayer de le faire évoluer comme voulu.

Tu es bloqué sur la position OFF c’est ça ? T’as vu le message juste au-dessus pour le même cas ? il s’avérait que la commande n’était pas une info/numérique mais une info/autre, tu n’es pas dan le même cas par hasard ?

1ère chose que j’ai vérifié :slight_smile:Capture d’écran 2020-06-19 à 21.58.16

ezgif-6-8b5dbdc001c7
Je me demande si c’est pas les boutons qui foutent le dawa…
Quand je clique sur n’importe quoi, ca me donne ca…