Récupération de la valeur d'un curseur pour utilisation dans un widget

Tags: #<Tag:0x00007f2837a21cd0> #<Tag:0x00007f2837a21c08> #<Tag:0x00007f2837a21b40>

Hello

J’essaye de refaire un widget à plusieurs états que j’ai mis sur un virtuel.

C’est directement inspiré de celui-ci : [SALVIALF] Widget 3_State_Switch (action/curseur) by @Salvialf, bien entendu.

Je l’ai re-écrit pour que ca soit plus simple pour moi de rajouter des états possibles, en utilisant un peu plus de jQuery qu’à l’origine.

J’ai le rendu que je veux mais je n’arrive pas à récupérer la valeur actuelle de l’info liée à la commande pour afficher mon widget avec la bonne classe dessus !!

Pour l’exercice, disons que la valeur du virtuel est à 2 (les possibles étant 0, 1, 2 et 3) :

Mon virtuel :
Capture d’écran 2020-05-15 à 01.24.42

Mon rendu voulu et désiré au chargement de la page :
Capture d’écran 2020-05-15 à 01.25.00

Ce que j’ai au chargement de la page :
Capture d’écran 2020-05-15 à 01.25.08

Et le code du widget :

<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_multiple_#uid#">

    <div id="un_#uid#" class="switch_#uid# un" value="0">Zéro</div>
    <div id="deux_#uid#" class="switch_#uid# deux" value="1">Un</div>
    <div id="trois_#uid#" class="switch_#uid# trois" value="2">Deux</div>
    <div id="quatre_#uid#" class="switch_#uid# quatre" value="3">Trois</div>
  </div>
</div>
<style>  
  .switch_multiple_#uid#{
    margin:auto;
    font-size:1em;
    height:4em;
    line-height:4em;
    background:#cecece;
    position:relative;
    display:block;
    float:left;
  }
  .switch_#uid#{
    cursor:pointer;
    position:relative;
    display:block;
    float:left;
    padding: 0 1em;
  }

  .switch_#uid#.active{
    color:white;
    background:#000;
  }
</style>

<script>
jeedom.cmd.update['#id#'] = function(_options){
var etat = _options.display_value;
console.log(' ' + etat + ' ');
$(".switch_#uid#[value='etat']").addClass('active');
  
$( ".switch_#uid#" ).click(function() {
        $('.switch_#uid#').not(this).removeClass('active');
        $(this).toggleClass( "active" );
        jeedom.cmd.execute({ id: '#id#', value: ( $(this).attr("value") ) });
    });

}
  
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})

</script>

Ce passage :

jeedom.cmd.update['#id#'] = function(_options){
var etat = _options.display_value;
console.log(' ' + etat + ' ');

ne me renvoit rien dans la console…

J’ai l’impression de rater un truc tout con, surtout que l’on dirait en lisant le code que je récupère la valeur de la commande et non celle de l’info associée, ce qui expliquerait que ce soit vide.

Qu’est ce que je rate ?

Merci.

Woké, je suis un âne !!

Capture d’écran 2020-05-15 à 01.48.37

Ca marche beaucoup mieux en configurant le virtuel correctement.

Désolé.

Faute avouée est à moitié pardonnée.
:rofl: :rofl:

Pour ceux que ca intéresse, le code complet qui fonctionne :

<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_multiple_#uid#">

    <div id="un_#uid#" class="switch_#uid# un" value="0">Zéro</div>
    <div id="deux_#uid#" class="switch_#uid# deux" value="1">Un</div>
    <div id="trois_#uid#" class="switch_#uid# trois" value="2">Deux</div>
    <div id="quatre_#uid#" class="switch_#uid# quatre" value="3">Trois</div>
  </div>
</div>


<style>  
  .switch_multiple_#uid#{
    margin:auto;
    font-size:1em;
    height:4em;
    line-height:4em;
    background:#CECECE;
    position:relative;
    display:block;
    float:left;
  }
  .switch_#uid#{
    cursor:pointer;
    position:relative;
    display:block;
    float:left;
    padding: 0 1em;
  }

  .switch_#uid#.active{
    color:white;
    background:#000;
  }
</style>

<script>
jeedom.cmd.update['#id#'] = function(_options){
var etat = _options.display_value;
$(".switch_#uid#[value='"+etat+"']").addClass('active');
  
$( ".switch_#uid#" ).click(function() {
        $('.switch_#uid#').not(this).removeClass('active');
        $(this).toggleClass( "active" );
        jeedom.cmd.execute({ id: '#id#', value: ( $(this).attr("value") ) });
    });

}
  
jeedom.cmd.update['#id#'](
  {display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})

  </script>

Pour rajouter des boutons, il suffit de rajouter des div à la suite de celles existantes :

<div id="quatre_#uid#" class="switch_#uid# quatre" value="4">Quatre</div>
<div id="cinq_#uid#" class="switch_#uid# cinq" value="5">Cinq</div>
<div id="six_#uid#" class="switch_#uid# six" value="5">Six</div>

Le un, deux, trois, etc. dans le class= ne sert à rien en l’état, c’est au cas ou je veuille tuner individuellement un jour chaque bouton.
Les valeurs dans value=« x » sont les valeurs qui seront utilisé ultérieurement par les widgets ou les scénarios.
Ca peut très bien être value=« absent » ou value="-4".

1 J'aime

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.