faire clignoter un widget

[Swatmorpheus]

Salut , je voulais faire clignoter un widget pour les poubelles , je suis parti d'un widget qui existait et ajouté un code mais le widget disparait mais ne réapparait pas , je pense que ça doit venir qu'il est sur l'ancienne version de js , voici le code.

Code : Tout sélectionner

<div style="width:110px;min-height:80px; visibility:visible;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
    <center>
        <span class='cmdName' style="font-weight: bold;font-size : 12px;#hideCmdName#;">#name_display#</span>
        <span style="font-size: 4em;" id="iconCmd#id#"></span>  
  </center>
    <script type="text/javascript">
        
var clignotement = function(){ 
   if (document.getElementById('iconcmd#id#').style.visibility=='visible'){ 
      document.getElementById('iconcmd#id#').style.visibility=='hidden'; 
   } 
   else{ 
   document.getElementById('iconcmd#id#').style.visibility=='visible'; 
   } 
}; 
// mise en place de l appel de la fonction toutes les 0.8 secondes 
// Pour arrêter le clignotement : clearInterval(periode); 
periode = setInterval(clignotement, 800); 
      
        if ('#state#' == '0' || '#state#' == 0) {
                        $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.poub cligno/poubelle-selectif.png" />');
        }
        if ('#state#' == '1' || '#state#' == 1) {
                        $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.poub cligno/poubelle-menagere 2.png" />');
        }
       if ('#state#' == '2' || '#state#' == 2) {
                        $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.poub cligno/poubelle-vert.png" />');
        }
       if ('#state#' == '3' || '#state#' == 3) {
                        $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.poub cligno/poubelle 2.png" />');
        }
     
      
      
    </script>
</div>

si quelqu'un a une idée

edit: j'ai remis le type="text/javascript" dans la balise script , car j'avais ouvert une 2e balise script et non fermé , le widget est bien visible mais comme je suis sur l'ancien js je pense pas que ça rafraîchi , avec la console , il me dit toujours que j'ai une erreur sur une ligne ( j'ai mis 8000 pour 8 secondes pour voir s'il disparaît bien)

Capture_debug.PNG (22.49 Kio) Consulté 1706 fois

[oranggilatahi]

Manque peut être l'appel jeedom.cmd.update
On peut trouver la solution sur le forum

[Salvialf]

Salut,

Pour le fun....!

Si tu veux tester avec ce code et me dire ce que t'en penses ? Par contre toutes les images clignotent là alors que tu veux peut-être que ce soit seulement une seule ou deux qui clignote peut-être ?

Code : Tout sélectionner

<div style="width:110px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
    <center>
        <span class='cmdName' style="font-weight: bold;font-size : 12px;#hideCmdName#;">#name_display#</span>
        <span style="font-size: 4em;" id="iconCmd#id#"></span>  
  </center>
  <style>
    @keyframes cligno
{
0% {opacity:0;}
100% {opacity:1;}
}
#iconCmd#id# {animation:cligno infinite 0.8s;}
  </style>
    <script>
      var iconUpdate#uid# = function (state) {  
        if (state == 0) {
                        $('#iconCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.poub cligno/poubelle-selectif.png" />');
        }
        if (state == 1) {
                        $('#iconCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.poub cligno/poubelle-menagere 2.png" />');
        }
       if (state == 2) {
                        $('#iconCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.poub cligno/poubelle-vert.png" />');
        }
       if (state == 3) {
                        $('#iconCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.poub cligno/poubelle 2.png" />');
        }
      }
      
      jeedom.cmd.update['#id#'] = function(_options){
		$('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
		iconUpdate#uid#(_options.display_value);
      }
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});       
    </script>
</div>

[Swatmorpheus]

merci salvialf , je vais tester ça aujourd'hui , peut être mettre une option pour le clignotement , en faite ce que je voulais c'est faire clignoter le widget et le faire arrêter via un bouton d'arrêt notif.
A voir comment faire , passer par une option qui peut être modifier via bloc code dans les scénarios

[Salvialf]

merci salvialf , je vais tester ça aujourd'hui , peut être mettre une option pour le clignotement , en faite ce que je voulais c'est faire clignoter le widget et le faire arrêter via un bouton d'arrêt notif.
A voir comment faire , passer par une option qui peut être modifier via bloc code dans les scénarios

Si tu veux tester ce nouveau code:

Code : Tout sélectionner

<div style="width:110px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
    <center>
        <span class='cmdName' style="font-weight: bold;font-size : 12px;#hideCmdName#;">#name_display#</span>
        <span style="font-size: 4em;" id="iconCmd#id#"></span>  
  </center>
  <style>
    @keyframes cligno
{
0% {opacity:0;}
100% {opacity:1;}
}
.iconCmd#id# {animation:cligno infinite 0.8s;}
  </style>
    <script>
      var iconUpdate#uid# = function (state) {  
        if (state == 0) {
                        $('#iconCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.poub cligno/poubelle-selectif.png" />').addClass("iconCmd#id#");
        }
        if (state == 1) {
                        $('#iconCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.poub cligno/poubelle-menagere 2.png" />').addClass("iconCmd#id#");
        }
       if (state == 2) {
                        $('#iconCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.poub cligno/poubelle-vert.png" />').addClass("iconCmd#id#");
        }
       if (state == 3) {
                        $('#iconCmd#id#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.poub cligno/poubelle 2.png" />').addClass("iconCmd#id#");
        }
      }
      
	  $('#iconCmd#id#').on('click', function() {
        $('#iconCmd#id#').removeClass("iconCmd#id#");});
	  
      jeedom.cmd.update['#id#'] = function(_options){
		$('.cmd[data-cmd_uid=#uid#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
		iconUpdate#uid#(_options.display_value);
      }
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});       
    </script>
</div>

En cliquant sur l'icône elle s'arrête de clignoter jusqu'au prochain changement d'état (...ou rafraichissement de la page )
A tester pour voir si ça peut te convenir à l'usage ou ce qu'il faudrait adapter éventuellement ?!

[yogui]

Regarde ce poste
viewtopic.php?t=2567

Envoyé de mon STF-L09 en utilisant Tapatalk

[Swatmorpheus]

Salut , merci je viens de tester ça , le premier code je n'avais rien , bizarre , pourtant j'ai bien vidé le cache , le code suivant est parfait !!! merci à toi , faut vraiment que je me plonge dans le code car je n'ai pas encore tout saisie la structuration.

par contre vu que sur fullykiosk la page se rafraîchit toutes les 5m , y'a t il un moyen que le widget garde le clignotement ou non suivant si j'ai acquitté ?
@ yogui oui j'avais vu ce post mais je trouvé que c'était un peu un usine à gaz ^^

[yogui]

Pour l'usine à gaz je peux comprendre le but de ce widget était de rendre la chose flexible a l'extrême avec possibilité de configurer le maximum sans toucher au code

Envoyé de mon STF-L09 en utilisant Tapatalk

[Swatmorpheus]

je le testerai quand j'aurai un peu de temps pour ça