Etat lumières d'un menu HTML Display

[wojc]

Bonjour,
j’ai créé un menu avec le plugin HTML Display pour faire mon Design.
J’aimerais que lorsqu’une lumière s’allume, le nombre de lumières s’affiche dans le menu en face de l’icone lumière.
Voilà ce que cela donne:

Le problème c’est que je suis obligé de rafraîchir ma page pour que jeedom affiche le résultat.
Je ne sais plus comment faire.
Voici le code html:

   
     <!-- LUMIERES  -->
           <li class="sidebar-dropdown">
            <a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=39&fullscreen=1#section1'">
              
             <i class="fa fa-lightbulb" aria-hidden="true"></i> 
              <span>LUMIERES</span>   
              
              <span class="NbLumieres badge yellow"></span>              
              
            </a> 
          </li>
        
      
      <div>

        <script>
  var NbLumieres=2217;
    
  jeedom.cmd.update[NbLumieres] = function(_options){
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: NbLumieres,
                                success:  function(valeur_courante) {
                            //      alert(valeur_courante);
$('.NbLumieres').empty();
if (valeur_courante == 0 ) { $('.NbLumieres').css('color', '');  
                            $('.yellow').hide(); // Cache le badge si 0 
} 
                                 
                                  else {$('.NbLumieres').css('color', '#00008B');
      $('.NbLumieres').append(valeur_courante);}
				}})   
   }; 
      jeedom.cmd.update[NbLumieres](); 
  
	</script>

Merci beaucoup

[ajja17orange]

bonjour
il te manque le set attribut sur id

Recuperer la valeur d'une commande dans un design avec text/html

bonjour pour info je ne vois pas de .setAttribute sur « data-cmd_id » dans ton morceau de code c’est important pour l’actualisation sinon jeedom.update est inutile pour moi sauf si en v4 ça à changer mais je pense pas au vu des codes widgets je pense que se « data-cmd_id » existe aussi pour éviter les doublons d’équipements aussi.

fait des test avant mise en place

[wojc]

Merci pour ta réponse,
mais je ne sais pas où et comment mettre le .setAttribute sur « data-cmd_id ».
J’ai fait comme cela mais ça ne fonctionne pas.

   <script>
  var NbLumieres=2217;
    
          $('.NbLumieres')[0].setAttribute('data-cmd_id', NbLumieres);
          
  jeedom.cmd.update[NbLumieres] = function(_options){
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: NbLumieres,
                                success:  function(valeur_courante) {
                            //      alert(valeur_courante);
$('.NbLumieres').empty();
if (valeur_courante == 0 ) { $('.NbLumieres').css('color', '');  
                            $('.yellow').hide(); // Cache le badge si 0 
} 
                                 
                                  else {$('.NbLumieres').css('color', '#00008B');
                                        
      $('.NbLumieres').append(valeur_courante);}
				}})   
   }; 
      jeedom.cmd.update[NbLumieres](); 
  
	</script>

Merci de ton aide.

[ajja17orange]

la difference entre

un span et div
et une class et un id

ça à son importance là pour obtenir

une base fonctionnel « tester »

     <!-- LUMIERES 
       -->

<li class="sidebar-dropdown"><div id="light" class="cmd">
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=39&fullscreen=1#section1'">
<i class="fa fa-lightbulb" aria-hidden="true"></i>
              <span>LUMIERES</span>
  
              <span class="NbLumieres badge yellow"></span>    
   </a>  </div>           
          </li>
<li class="sidebar-dropdown"><div id="rc" class="cmd">
<a href="#" onclick="document.getElementById('pagecontent_iframe').src ='/index.php?v=d&p=plan&plan_id=39&fullscreen=1#section1'">
<i class="fa fa-lightbulb" aria-hidden="true"></i>
              <span>VOLET</span>
  
              <span class="NbVolet badge yellow"></span>    
   </a>  </div>           
          </li>
<style>
li {
  display: inline;
}
</style>
        <script>          
  var NbLumieres=205;
      $('#light')[0].setAttribute('data-cmd_id', NbLumieres);
          
  jeedom.cmd.update[NbLumieres] = function(_options){
			jeedom.cmd.execute({ id: NbLumieres, success:  function(valeur_courante) {
$('.NbLumieres').empty();
if (valeur_courante == 0 ) { $('.NbLumieres').css('color', ''); 
$('.yellow').hide(); // Cache le badge si 0 
} else { $('.NbLumieres').css('color', '#00008B').append(valeur_courante); 
$('.yellow').show()       
       }
				}})   
   }; 
      jeedom.cmd.update[NbLumieres](); 
	</script>

hs
tu caches yellow « hide » mais tu ne le montres pas « show »

[wojc]

@ajja17orange

Merci pour ton aide, par contre, je suis toujours obligé de rafraîchir ma page du design pour mettre à jour la valeur du nombre de lumières.
Cela ne ce fait pas automatiquement.
Une idée?
Merci

[ajja17orange]

as tu l’équipement sur la même page que le plug html display
si oui c’est normal
2 data-cmd_id avec le meme ID
un seul se met a jour (j essai de trouver une manière pour reprendre la mise à jour)
si non
test avec mon petit morceau de code et si c’est ok c’est dans ton code complet

[wojc]

Merci pour ta réponse, effectivement, j’avais l’équipement sur la même page.
C’est donc résolu…
Merci beaucoup pour ton aide et ta patience.

[ajja17orange]

@ajja17orange

(j essai de trouver une manière pour reprendre la mise à jour)

<div id="report2">
</div>
<script>
  var id_surveil2=205;
//var elem1 = '.cmd[data-cmd_id="205"]';
var elem2 = '.cmd[data-cmd_id="'+id_surveil2+'"]';
var targetNode2 = document.querySelector(elem2);

// Options de l'observateur (quelles sont les mutations à observer)
var config = { attributes: true, childList: true };


var execute2 = function() {
jeedom.cmd.execute({ id: id_surveil2, success:  function(valeur_courante) {
 $('#report2').text(valeur_courante); 
       }
				})
};  
// Créé une instance de l'observateur lié à la fonction de execute
var observer2 = new MutationObserver(execute2);

// Commence à observer le noeud cible pour les mutations précédemment configurées
observer2.observe(targetNode2, config);
  
// L'observation peut être arrêtée par la suite
// observer2.disconnect();
</script>

[lors de modif de se code faire un ctrl-f5 ou decommenter la dernier ligne pour arrêté observer]

dans ton code savoir si data-cmd_id est déjà dans la page
si
if ($("div[data-cmd_id="+NbLumieres+"]").length == 1){
il est déjà present dans la page de là le mini script du dessus à adapter
} else {
existe pas la setattribut,…
}