[SALVIALF] 3State_Switch

Hello
Voila J ai voulu installer ce widget pour avoir une commande d un ECS
J ai besoin
AUTO
STOP
FORCE
J utilise une API pour faire partie l info sur un web serveur arduino
voila comment j ai fait
1
2


3
4
5
6
7
Question
1 Pourquoi J ai 3 séries de 3 boutons ? moi je veux une seul séries : auto , stop , force
2 pourquoi quand je clique je le bouton rien ne change ?
PS J ai vu une maj de code que j ai fait
A savoir :

<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>

Je ne suis pas contre un peux d aide
merci a vous

Bonjour,

Probablement parce que vous n’avez pas configuré la commande info lié au 3 commandes actions:
image

et donc le widget ne connait pas l’état actuel et donc ne peut pas le représenter.

edit: il faut mettre le code dans un Texte préformaté, j’ai corrigé votre post

Merci pour la correction je le serai :wink:
je suppose que le configuration de la commande ce fait depuis la ?


Et comme 3 actions je suppose 3 commandes ?
Question reste a savoir ce que je note dans action ?
Merci

1 « J'aime »

Salut,

Une seule commande action/curseur suffit largement, pas besoin de 3. Dans l’absolu il est toujours préférable de se documenter en amont et tester les possibilités avant de se jeter sur un sujet et solliciter de l’aide immédiatement…

bonjour Salvialf
C est bien ce que je veux faire une seul commande a 3 positions J ai lus pas mal de chose c est comme ca que j ai vu la maj du nouveau code De tout ce que j ai lus je n ais pas va de commande par requête et je ne voir pas ou les placer

2 « J'aime »

Bonsoir,

Comme expliqué, il faut créer une seul commande slider, pour le widget…
Vu que tu veut faire 3 Requêtes différentes (texte) , le plus simple pour toi est de passer par un scénario et virtuel.

  • Met ces 3 requêtes en Action/défaut, et masque l’équipement.
  • Ensuite créer un nouveau virtuel avec 1 Action/Curseur, sur lequel tu applique le widget 3State_Switch.
  • Puis créer scénario :
    Déclencheur : le virtuel
    Scenario :

1 « J'aime »

Ok pour résumer
1 crée un scenario
2 crée un virtuel
Désolé jamais fait ça Je vais faire un tour sur les tuto
je vous tiens au jus

Bon
1Cree un script


2 Les 3 requetes

3 Le virtuel

4 C est la ou je bloque : il me demande le nom de la commande

Je ne suis pas contre un peux d aide merci

Bonjour,

Il te faut créer une commande info (normalement c’est crée automatiquement mais parfois non) pour la lier ensuite à ta commande action. Ta commande action en elle-même ne prend aucune valeur (regarde la doc du plugin virtuel c’est important de bien comprendre ce concept).

C’est cette commande info qui va servir de déclencheur à ton scénario car elle va changer de valeur (avec le widget 3State_Switch : 1 2 ou 3). Dans son exemple phpvarious l’avait appelée 3state_switch.

Hello
bon ca avance le tout c est de savoir si c est dans le bon sens :slight_smile:
le scenario Des erreurs ? je pence qu il me manque le déclencheur


La partie virtuel commandes J ai un pb J ai mis par erreur une commande type info je peux pas supprimé
je la supprime , ok ,je sauvegarde ok ,je par sur équipement puis je repasse sur commandes et je la revois .


La partie virtuel équipement

Pour la suite si bien compris je dois modifier le fichier HTLM : cmd.action.slider.3State_Switch.html
pour les textes et couleurs ?

Merci a vous

Hello,

Pour le Virtuel supprime tout et sauvegarde :


Ensuite ajoute une action virtuel :
image


  1. donne un nom a ta commande action/Curseur.
  2. passe la commande en sous-type Curseur.
  3. Donne un nom a la commande Info.
  4. Sauvegarde

Une fois la sauvegarde faite, tu remarquera qu’une nouvelle commande Info/Numérique a été créée automatiquement.

  1. décoche « Afficher » car inutile de l’afficher sur le dashboard. (C’est cette info qui sera utile dans les scénario)
  2. il faut ensuite lié ta commande action/curseur a ta commande info/numérique.
  3. Sauvegarde

Pour la partie Scénario :

Met en déclencheur la commande info/numérique du virtuel :


Dans mon exemple j’avait mis des nom de commande au hasard, pour que tu comprenne le fonctionnement !

  1. va chercher la commande info/numérique du virtuel ( le même que le déclencheur)
  2. va chercher les commandes du plugin script.
  3. aide toi de cette fonction pour ne pas a taper a la main les nom de commandes
    (commance le 1er par == 0 puis le suivant == 1…)


Pour le widget :

Applique le widget sur la commande Action/slider du virtuel.

Surtout pas ! il existe les paramètres optionnels pour ça :

ces paramètres sont détaillés dans le code du widget :

<!--
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

-->

Voila a quoi devrait ressembler les paramètres pour ton cas (il te faudra changer les couleurs a ta convenance) :

image

Hello
Un grand merci Phpvarious pour ta réponse et explications détaillées je vois ça ce soir et te tiens au jus

:sob: :sob:
Hello bon Actuellement J ai ca

Pour le virtuel
Équipement


Commande

Affichage La j ai un doute dashbord : Je laisse par défaut ou customtemp/3State_Switch ?

Partie Scénario je pence que c est bon


voila pour le moment J attends un retour vois Si j ai bon pour continuer pour le windget
Merci

Bonjour,

Lis bien tout le message de phpvarious !
Il te manque le paramètres widget obligatoire « textes ».

Eh bah non :rofl:

tu as un mélange dans les noms de tes commandes ! tu devrait avoir :
#[chambre Lili][ECS][Etat]# == 0
#[chambre Lili][ECS][Etat]# == 1

Tu peut aussi enlever l’auto-actualisation, car elle n’est pas nécessaire dans ton cas (seulement si tu fait des calculs/fonctions dans tes virtuels).


image

Comme déja indiqué, et reprécisé par @Madcow, tu as oublié l’étape des paramètres optionnels.

Hello
Oui je sais bien qu il me manque le paramétrage du widget
Je voulais savoir si deja ce que j ai fait va ?
1 Affichage dans la commande La j ai un doute dashbord : Je laisse par défaut ou customtemp/3State_Switch ?
Au sujet du widget
A l heure actuel J en ai pas Pour le moment j utilise un Script qui marche
et un autre que j ai dupliquer et mis en non visible


en bat a cote su sèche linge ECS Script qui marche
Et celui du haut ESC il a bien les bon noms il est actionnable mais n a pas d action sur mon ECS
Donc question : je dois crée un widget ou le Script

PS : @ Phpvarious avant de modifier les commandes je veux que tu vois les derniers trucs


Commandes modifier ca va marcher beaucoup mieux forcement :slight_smile:
et ça change bien physiquement sur mon ESC Donc fonctionnel Un grand merci pour votre patience ,en particulier a Phpvarious :wink:
J ai 2 questions pour finir


1 Pourquoi la ou est noter ECS c est gris ? les autres sont bleu ou vert ( EX photovoltaïque )
2 Vu la doc Je peux ajouter des couleurs aux boutons auto , stop , force Si je prends la couleur verte pour les 3 boutons
je clique sur le bouton auto il passe en vert Les 2 autres en gris Puis je clique sur stop il passe en vert et les 2 autres en gris
Serait t il possible de modifier le gris par le rouge ( boutons a 0 ) et en vert le bouton actif Si je reprends mon exemple ca donne Je clique sur le bouton auto il passe en vert Les 2 autres en rouge je clique sur stop il passe en vert et les 2 autres en rouge
Pour résumer est t il possible de modifier le gris des boutons a 0 par le rouge ?
Je n y connais rien, c est peux etre une usine a gaz a faire c est juste pour savoir si faisable facilement ou pas de mon point de vu visuellement ce serai top
Merci a vous

Cette couleur est en fonction de la catégorie que tu a attribué a l’équipement, et pour celui-ci tu as du cocher « Automatisme »

image

Si tu change puis sauvegarde, et que tu retourne sur le dashboard, tu verra que sa aura changé de couleur.


Oui c’est possible, mais il va falloir modifier dans le code du widget :
recherche la ligne.

et remplace par

image

oublie pas d’enregistrer.

  • ensuite il te faudra retourner dans l’équipement pour repasser le widget en auto, puis sauvegarde.
  • tu rechoisi le widget 3State_Switch, puis sauvegarde.

oublie pas de mettre le paramètre optionnel pour la couleur du bouton (selectionné) :

image

2 « J'aime »


Top tu as mis des paillettes dans ma vie Phpvarious
Demain je m occupe du sèche linge

1 « J'aime »

Bonjour
@fraggy33 content que ton projet avance pour ta customisaton personnelle de ton jeedom

1 « J'aime »