[SALVIALF] Widget 3_State_Switch (action/curseur)

Tags: #<Tag:0x00007f384de16b08>

J’ai déjà fait la demande qui est restée lettre morte :worried:

Ils se désintéressent des helpers.
:sob:

La team a sûrement ses raisons que ce soit la faisabilité déjà ou autre…

Je propose ils disposent :wink:

Hello
Mes enfants me tannent pour qu’ils puissent avoir la main sur le changement de couleur de leur ampoules yeelight dans leur chambres

L’idéal serait un bouton ou une tablette dans chaque chambre, mais je n’en suis pas là

J’avais bricolé des interactions avec ghome mais ça reconnaît pas toujours

Je suis tombé sur ce widget qui me paraît pas mal
Une page de design ou ils pourraient changer la couleur de leur chambre avec ce widget

Par contre j’aurai aimé avoir plus de choix , par exemple, 5 couleurs de différentes et quelques modes , mode disco, mode clignotant etc …

Hello bartounet,

En attendant que Salvialf l’intègre puisqu’il a dit qu’il devrait le faire avant la fin de l’année, tu as MarcF qui a tenté d’adapter et qui a publié un lien.

Une version plus complete avec 4.5 et 6 possibilités


Fonctionne en V4 (pas en mobile)

Attention c’est pas du code de spécialiste, j’ai adapté à ma sauce un code de SALVIALF

Bonsoir,
Tout d’abord un grand merci à @Salvialf pour tes widgets, c’est exactement ce que je cherchais ! Pour le moment j’en ai pris que 3 :wink:

J’ai une petite question pour celui-ci, je cherche a modifier la couleur du #texte0#.
Je suis totalement novice en code… J’ai bien trouvé où modifier la couleur des 3 textes en même temps mais pas uniquement celui que je veux.
Je ne sais même pas si c’est possible, ou non d’ailleurs… ?
Merci d’avance.

Dans les paramètres optionnels
Color0 correspond a la couleur du texte0
Etc

Pour modifier les couleurs, c’est là…
image

Bonjour Monsieur @Salvialf… j’avance, j’avance, mais Jeedom est un peu deroutant pour un novice et si il manque une info, ben, on bloque vite… surtout moi…
Nouveau problème mais cette fois ci, avec le Widget 3_State_Switch.
J’ai créé le plugin impeccable…
image
jusque là, tout va bien…
image

image

image

Ensuite, j’ai créé mes scenarios… et c’est là que ça coince !!!

image

image

Eh ben… ca ne fonctionne pas… quelqu’un peut m’expliquer avec des mots simples ou ça coince?
Voici ce que j’ai dans le LOG

image

Merci de votre aide et de votre patience

Salut @Msieurlolo,

J’ai survolé mais je dirais que tu n’étais pas loin :wink:

Selon la position du switch dans ton cas il va renvoyer les valeurs 0 pour arrêt, 1 pour Marche et 2 pour Partiel.

Le switch étant sur la position Arrêt sur tes copies d’écran il renvoie la valeur 0.

2 petites choses:

  • Le déclencheur du scénario doit être la commande action/curseur nommée Alarme afin que le scénario soit déclenché par le changement de position du switch.

  • A ta place j’imbriquerais les SI:
    SI [COMMANDE_ALARME] == 0 FAIRE XXXX
    SINON SI [COMMANDE_ALARME] == 1 FAIRE YYYYY
    SINON SI [COMMANDE_ALARME] == 2 FAIRE ZZZZZ

J’espère n’avoir rien oublié…

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.