virtuel menu déroulant

[rootard]

Hello

Qui peut me dire comment créer une action sous forme de liste déroulante, je n'ai pas trouvé dans la doc?
Par exemple Mode qui vaut P3, P4 ou P8
D'après ce que je vois dans l'éditeur il faut séparer les valeurs par des ;
Je ne dois pas mettre les bons paramètres parce que ma liste déroulante est vide...



Merci

[Mips2648]

la syntaxe est "valeur|texte" et chaque options séparées par des ;

Code : Tout sélectionner

1|Mode 1;2|Mode 2;3|Mode 3

si tu ne mets pas les | comme dans ton exemple, les options seront listée mais pas de texte affiché
donc en fait ta liste n'est pas vide, elle contient bien tes 3 options

[winhex]

cette méthode t'oblige ensuite à lancer un scénario

sinon
1 en valeur tes actions
2 l'info sera l'id
3 et en modifiant le widget

1

Code : Tout sélectionner

#[liste][virtuel][eco]#|eco;#[liste][virtuel][Confort]#|Confort;#[liste][virtuel][Nuit]#|Nuit;#[liste][virtuel][Manu]#|Manu

2

Screenshot_20190310-104752_Chrome.jpg (30.54 Kio) Consulté 3003 fois

3 brut de décoffrage

Code : Tout sélectionner

<div class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="select" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="width: 146px;height: 44px;">
    <span class="cmdName" style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</span><br/>
    <select class="selectCmd#id#" style="color:#cmdColor#;background-color:#background-color#;border-radius: 5px;width: 146px;">#listValue#</select>
    <script>
      
      $(".cmd[data-cmd_uid=#uid#] .selectCmd#id#").on('change', function () {
        jeedom.cmd.execute({id: '#id#', value: {select: $(this).value()}});
//        alert($('.selectCmd#id# option:selected').val());
var test1 = $(this).value();
test1=test1.replace(/#/g,'');
      alert(test1);
//alert($('.selectCmd#id# option:selected').text());
     jeedom.cmd.execute({id: (test1)} );

      //     jeedom.cmd.execute({id: ($(this).value()) } )
 //   jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("#unite#", "").replace(" ", "") }});
 //   jeedom.cmd.update({id: 2532 , value:  }) ;
//    jeedom.cmd.execute[2532]({display_value:24} );
 //      jeedom.cmd.execute({id: 2532 , display_value: {slider:(24) } }) ;

//    jeedom.cmd.execute({id: 2533 , value: {slider:(24) } }) ;

      //    jeedom.cmd.toHtml({id: 2550 , value: { (23) } }) ;
    });
</script>
</div>

[rootard]

merci @winhex

[weado]

Tant que nous sommes dans le sujet, comment peut-on configurer soit une valeur par défaut qui serait dans mon cas "Aucun" ?
Car j'utilise une liste pour mon choix de chauffage (Eco, confort ...) et depuis peu (1 mois environ, alors que je n'ai apporté aucune modification), la valeur par défaut est aléatoire, alors que je voudrais que la valeur par défaut soit "Aucun".

Capture.PNG (2.84 Kio) Consulté 2955 fois

Capture1.PNG (4.53 Kio) Consulté 2955 fois

[rootard]

Hello

Je déterre le sujet
J'ai testé la solution de @Mips2648 avec un scénario
La valeur de Mode ne bouge pas, le scénario ne se déclenche pas ce qui est normal car SetMode correspond à une action donc on ne peut pas l'utiliser comme déclencheur



La solution de @winhex me parait beaucoup plus compliquée à mettre en oeuvre et il y a des IDs en dur dans le code. Dans mon cas j'ai 3x7 commandes à réaliser donc pas top...

Les menus déroulants dans Jeedom me paraissent bien compliqués... @weado comment as tu fait?

Hello

Qui peut me dire comment créer une action sous forme de liste déroulante, je n'ai pas trouvé dans la doc?
Par exemple Mode qui vaut P3, P4 ou P8
D'après ce que je vois dans l'éditeur il faut séparer les valeurs par des ;
Je ne dois pas mettre les bons paramètres parce que ma liste déroulante est vide...



Merci

[rootard]

Up! Qui sait comment utiliser les menus déroulants?
Je n'ai trouvé aucun tuto

Merci

[winhex]

sous afficher a droite
voir le screen juste au dessus de @weado

ma bidouille du widget est dans le 1
donc pas en dur
cmd_action1|choix_afficher1;....

une autre personnalisation, couleurs et dans un tableau

[rootard]

merci @winhex

Je n'avais pas vu que tes lignes avec des valeurs en dur sont commentées
Je testerai ce WE si j'ai le temps

[rootard]

Salut @winhex

Très beau tes widgets liste!

Je galère toujours avec mon menu déroulant.
J'ai suivi ta méthode mais la valeur de Mode s'affiche brièvement puis passe à blanc?

voila mon virtuel


et le résultat pendant 1/2s

ensuite j'ai ca et Mode est vide


Idem sans le widget donc je suspecte un pb de refresh.
Qu'est ce qui ne va pas dans ce code?
Merci

[winhex]

ligne 620
colonne paramètre
change mode par aucun comme le screen de @weado

[rootard]

@winhex c'était ca, dire que j'ai cherché pendant des heures!

Ton widget menu est superbe! Tu pourrais partager le code ou le CSS?
Merki

[winhex]

voici le widget et le fonctionnement via scénario

le widget s'utilise avec une info donc à toi l'adaptation
donc la liste aura

Code : Tout sélectionner

Oui|Oui;Non|Non;Auto|Auto

le widget comprend des restes de test

(passage de couleur jquery vers css,.. )
le résultat de l'info "oui,non,auto" pour prise en compte de la couleur
.select-style#id# select option[value="Oui"] pour l'utilisation sur pc (choix coloré) qui n'est pas en mobile

Code : Tout sélectionner

<div class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="select" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="display: table; width: 56px;height: 20px;">
    <span class="cmdName" style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</span>

      <div class="select-style#id#">
      <select class="select-style#id# selectCmd" >#listValue#</select>
 </div>
     <style>
           :root{
--color: white;
--background: black;
--border-color:#cmdColor#;
--radius:25px;  
} 

.select-style#id# {
   border: 1px solid var(--border-color);
border-radius: var(--radius);
  background: var(--background);
width: 66px;
height: 25px;
}

.select-style#id# select {
  color: var(--color)!important;
   padding: 0px 5px;
    border: none;
    box-shadow: none;
   background: transparent!important;
    background-image: none;
}

.select-style#id# select:focus {
    outline: none;
}

.select-style#id# select option[value="Oui"] {
  color: green; 
}
.select-style#id# select option[value="Non"] {
  color: red;
}
.select-style#id# select option[value="Auto"] {
    background: orange;
  color: white;
}
      </style>
      <script>
                jeedom.cmd.update['#id#'] = function(_options){
                            if (_options.display_value == "Oui"  ) {
 $(".cmd[data-cmd_uid=#uid#] .selectCmd").css('--color', 'white');
$(".cmd[data-cmd_uid=#uid#] .select-style#id#").css('--background', 'green');
 $(".cmd[data-cmd_uid=#uid#] .select-style#id#").css('--border-color', 'white'); 
} 
         else if (_options.display_value == "Non" ) {
            $(".cmd[data-cmd_uid=#uid#] .selectCmd").css('--color', 'white');
           $(".cmd[data-cmd_uid=#uid#] .select-style#id#").css('--background', 'red');
 $(".cmd[data-cmd_uid=#uid#] .select-style#id#").css('--border-color', 'white'); 
            }else  {
           $(".cmd[data-cmd_uid=#uid#] .select-style#id#").css('--background', 'white');
       $(".cmd[data-cmd_uid=#uid#] .selectCmd").css('--color', '#ff9900');
            $(".cmd[data-cmd_uid=#uid#] .select-style#id#").css('--border-color', 'lightgray'); 
              }
                     }
                   jeedom.cmd.update['#id#']({display_value: '#state#'});
      $(".cmd[data-cmd_uid=#uid#] .selectCmd").on('change', function () {
        jeedom.cmd.execute({id: '#id#', value: {select: $(this).value()}});
    });
</script>
</div>

pour le fonctionnement un scénario
si info "non" variable sur absent
si info "oui" variable sur présent
si info auto c'est le Nut qui dit présent ou absent (incrémentation de variable)

déclencheur :
les info des listes ;
les variables des Nut

pour moi
#[Recapitulatif][Présence][Presence_Christophe]#"
#variable(present_christophe_nut)#



donc 9 déclencheurs là
"colonne nut et présence"

voici le scénario pour une personne "donc 5 fois ça"
variable / present_christophe étant le oui ou non mis en forme pour un retour text
via widget "afin de gardé un historique lisible"

> si trigger info liste == 1 ou trigger variable du nut

Code : Tout sélectionner

trigger(#[Recapitulatif][Présence][Presence_Christophe]#) == 1 OU trigger() matches "/(present_christophe_nut)/"

>> si

#[Recapitulatif][Présence][Presence_Christophe]# == "Non"
action : variable / present_christophe / 0
stop

>> si

#[Recapitulatif][Présence][Presence_Christophe]# == "Oui"
action : variable / present_christophe / 1
stop

>> si

#[Recapitulatif][Présence][Presence_Christophe]# == "Auto"
action : variable / present_christophe / la valeur de variable(present_christophe_nut)
stop

choix liste.jpg (70.23 Kio) Consulté 2430 fois

le premier si "trigger"
reproduit 5 fois / personnes
dont un sans avoir la fonction auto puisque il n'y as pas de Nut "chambre ami"
c'est pour le chauffage !

hs : il est conseillé d'utiliser Event au lieu de variable.