Modification Widget Icone/Action Animé pour porte de garage

[Gsxrnoir2001]

Bonjour à tous,
j’ai récupéré un widget (script html), je ne sais vraiment plus où, qui fonctionne trés mal sur core v4.2.

1er bug: quand je clique sur l’icone, l’état de ma commande permute bien de « 0 » à « 1 », et vice versa,
mais l’animation de l’icone se mets en route qu’en actualisant avec « F5 ».

2eme bug: a chaque actualisation avec « F5 », l’animation redémarre du début.

D’avance merci à ceux qui résoudra mon problème, ou qui m’aideron à le résoudre, sachant que le code et moi…eh bien ça fait 2

Voici le code

<div id="garage#id#" style="width:180px;min-height:180px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#">
   <center>
         <span style="font-size : 3em;font-weight: bold;margin-top: -20px;" class="action" id="iconGarageCmd#id#"></span>
  </center>
   <script>
      var animeGarageOpen;
      var animeGarageClose;
         var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
       var cmdNom = '#name#'.toLowerCase();
      
         if('#state#' == '1' || '#state#' == 1){
             $('#iconGarageCmd#id#').append('<img src="data/customTemplates/dashboard/cmd.action.other.GARAGE/100.png" couleurImg="rouge" width="180" height="180"/>');   
             if (cmdNom.indexOf('on') == 0 || cmdNom.indexOf('marche') == 0 ) {
                $('#garage#id#').hide();  
            }
          
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                 VitesseAnime = parseFloat(VitesseAnime)*600;
                animeGarageOpen = setInterval(animeGarage, VitesseAnime);
            }
        }
     else if('#state#' == '0' || '#state#' == 0){
             $('#iconGarageCmd#id#').append('<img src="data/customTemplates/dashboard/cmd.action.other.GARAGE/00.png" couleurImg2="blanc" width="180" height="180"/>');      
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
              $('#garage#id#').hide(); }
          
          if (cmdNom.indexOf('on') == 0 || cmdNom.indexOf('marche') == 0) {
               VitesseAnime = parseFloat(VitesseAnime)*600;
                animeGarageClose = setInterval(animeGarage2, VitesseAnime);
                 
            }
        }
     

          $('#garage#id#').on('click', function(){
              clearInterval(animeGarageOpen);
              jeedom.cmd.execute({id: '#id#'});
          });
            
            $('#garage#id#').on('click', function(){
              clearInterval(animeGarageClose);
              jeedom.cmd.execute({id: '#id#'});
          });
      
        function animeGarage(){
         var couleurImg = $('#iconGarageCmd#id# img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/90.png',
                                               'couleurImg': 'bleu'
                                              });
               }else if(couleurImg == 'bleu'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/80.png',
                                               'couleurImg': 'magenta'
                                              });
            }else if(couleurImg == 'magenta'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/70.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/60.png',
                                               'couleurImg': 'jaune'
                                              });
              }else if(couleurImg == 'jaune'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/50.png',
                                               'couleurImg': 'violet'
                                              });
                }else if(couleurImg == 'violet'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/40.png',
                                               'couleurImg': 'orange'
                                              });
                  }else if(couleurImg == 'orange'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/30.png',
                                               'couleurImg': 'gris'
                                              });
                    }else if(couleurImg == 'gris'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/20.png',
                                               'couleurImg': 'rose'
                                              });
                      }else if(couleurImg == 'rose'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/10.png',
                                               'couleurImg': 'noir'
                                              });
                        }else if(couleurImg == 'noir'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/00.png',
                                               'couleurImg': 'blanc'
                                              });
            }else{
            $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/00.png',
                                               'couleurImg': 'blanc'
                                              });
            }
        
        }
              
              
              
              
               function animeGarage2(){
         var couleurImg2 = $('#iconGarageCmd#id# img').attr('couleurImg2');  
               if(couleurImg2 == 'blanc'){
            $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/10.png',
                                               'couleurImg2': 'rose'
                                              });
                }else if(couleurImg2 == 'rose'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/20.png',
                                               'couleurImg2': 'orange'
                                              });
                  }else if(couleurImg2 == 'orange'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/30.png',
                                               'couleurImg2': 'gris'
                                              });
                    }else if(couleurImg2 == 'gris'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/40.png',
                                               'couleurImg2': 'jaune'
                                               });
                      }else if(couleurImg2 == 'jaune'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/50.png',
                                               'couleurImg2': 'violet'
                                               });
                         }else if(couleurImg2 == 'violet'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/60.png',
                                               'couleurImg2': 'vert'
                                              });
                           }else if(couleurImg2 == 'vert'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/70.png',
                                               'couleurImg2': 'magenta'
                                              });
                             }else if(couleurImg2 == 'magenta'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/80.png',
                                               'couleurImg2': 'bleu'
                                              });
                               }else if(couleurImg2 == 'bleu'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/90.png',
                                               'couleurImg2': 'noir'
                                              });
                                 }else if(couleurImg2 == 'noir'){
             $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/100.png',
                                               'couleurImg2': 'rouge'
                                              });
                       
                      }else{
            $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/100.png',
                                               'couleurImg2': 'rouge'
                                              });
            }
                    
        }
    
   </script>
</div>

et les icones

[Phpvarious]

Bonjour,
tu peut tester cette version :

<div class="cmd cmd-widget" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <template>
    <div>VitesseAnime : vitesse de transition entre les images en secondes [defaut : 0.6]</div>
    <div>time_widget : affiche le temps sous le widget [defaut : 0]</div>
    <div>width : taille de l'image [défaut : 180]</div>
  </template>
  <div id="garage#id#" class="action cursor">
    <center>
      <span style="font-size : 3em;font-weight: bold;margin-top: -20px;" id="iconGarageCmd#id#"></span>
    </center>
  </div>
  <div class="value">
    <span class="timeCmd label label-default #value_history#" data-type="info" data-cmd_id="#value_id#"></span>
  </div>
  <script type="text/javascript">
    var animeGarageOpen#id#;
    var animeGarageClose#id#;
    var VitesseAnime#id# = 600;
    var width#id# = 180;
    var height#id# = 180;
    if ($.issetWidgetOptParam('#VitesseAnime#', 'VitesseAnime')) {
      VitesseAnime#id# = parseFloat('#VitesseAnime#')*1000
    }
    if ($.issetWidgetOptParam('#width#', 'width')) {
      width#id# = parseFloat('#width#')
      height#id# = parseFloat('#width#')
    }
    var paramImg#id# = 'width="'+width#id#+'" height="'+height#id#+'"'
    
    jeedom.cmd.update['#id#'] = function(_options)
    {
      var cmd = $('.cmd[data-cmd_id=#id#]')
      if ('#time_widget#' != '1') {
        cmd.find('.timeCmd').parent().remove()
      }
      animeGarageOpen#id# = clearInterval(animeGarageOpen#id#)
      animeGarageClose#id# = clearInterval(animeGarageClose#id#)
      $('#iconGarageCmd#id#').attr('title','Valeur : '+_options.display_value+'<br>Valeur du '+_options.valueDate+'<br>collectée le '+_options.collectDate);
      if (['1', 1, '99', 99, 'on'].includes(_options.display_value))
      {
        if (jeedom.cmd.normalizeName('#name#') == 'on') {
          $('.cmd[data-cmd_id=#id#]').hide()
        }
        else { 
          $('.cmd[data-cmd_id=#id#]').show()
          if ('#time_widget#' == '1') {
            jeedom.cmd.displayDuration(_options.valueDate, cmd.find('.timeCmd'), '#time#')
          }
          if (_options.no_animate == null) {
            $('#iconGarageCmd#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.action.other.GARAGE/100.png" couleurImg="rouge" '+paramImg#id#+' data-img="100"/>')
            $('.cmd[data-cmd_id=#id#]').show()
            animeGarageOpen#id# = setInterval(animeGarage#id#, VitesseAnime#id#)
          }
          else {
            $('#iconGarageCmd#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.action.other.GARAGE/00.png" couleurImg="rouge" '+paramImg#id#+' data-img="00"/>')
            $('.cmd[data-cmd_id=#id#]').show()
          }
        }
      } 
      else if (['0', 0, 'off'].includes(_options.display_value)) {
        if (jeedom.cmd.normalizeName('#name#') == 'off') {
          $('.cmd[data-cmd_id=#id#]').hide()
        }
        else {
          if (_options.no_animate == null) {
            $('#iconGarageCmd#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.action.other.GARAGE/00.png" couleurImg2="blanc" '+paramImg#id#+' data-img="0"/>')
            $('.cmd[data-cmd_id=#id#]').show()
            animeGarageClose#id# = setInterval(animeGarage2#id#, VitesseAnime#id#) // de 10 a 100
          }
          else {
            if ('#time_widget#' == '1') {
              jeedom.cmd.displayDuration(_options.valueDate, cmd.find('.timeCmd'), '#time#')
            }
            $('#iconGarageCmd#id#').empty().append('<img src="data/customTemplates/dashboard/cmd.action.other.GARAGE/100.png" couleurImg2="blanc" '+paramImg#id#+' data-img="100"/>')
            $('.cmd[data-cmd_id=#id#]').show()
          }
        }
      }
    }
    
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#',no_animate:true});
    
    $('.cmd[data-cmd_uid=#uid#] .action').off().on('click', function(){
      jeedom.cmd.execute({id: '#id#'})
    });
    function animeGarage#id#(){
      var couleurImg = $('#iconGarageCmd#id# img').attr('couleurImg')
      if(couleurImg == 'rouge') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/90.png','couleurImg': 'bleu',})
      else if (couleurImg == 'bleu') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/80.png','couleurImg': 'magenta'})
      else if (couleurImg == 'magenta') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/70.png','couleurImg': 'vert'})
      else if (couleurImg == 'vert') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/60.png','couleurImg': 'jaune'})
      else if (couleurImg == 'jaune') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/50.png','couleurImg': 'violet'})
      else if (couleurImg == 'violet') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/50.png','couleurImg': 'orange'})
      else if (couleurImg == 'orange') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/30.png','couleurImg': 'gris'})
      else if (couleurImg == 'gris') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/20.png','couleurImg': 'rose'})
      else if (couleurImg == 'rose') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/10.png','couleurImg': 'noir'})
      else if (couleurImg == 'noir') {
        $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/00.png','couleurImg': 'blanc'})
        animeGarageOpen#id# = clearInterval(animeGarageOpen#id#)
      }else{
        $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/00.png','couleurImg': 'blanc'})
        animeGarageOpen#id# = clearInterval(animeGarageOpen#id#)
      }
    }
    
    function animeGarage2#id#(){
      var couleurImg2 = $('#iconGarageCmd#id# img').attr('couleurImg2')
      if (couleurImg2 == 'blanc') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/10.png','couleurImg2': 'rose'})
      else if (couleurImg2 == 'rose') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/20.png','couleurImg2': 'orange'})
      else if (couleurImg2 == 'orange') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/30.png','couleurImg2': 'gris'})
      else if (couleurImg2 == 'gris') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/40.png','couleurImg2': 'jaune'})
      else if (couleurImg2 == 'jaune') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/50.png','couleurImg2': 'violet'})
      else if (couleurImg2 == 'violet') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/60.png','couleurImg2': 'vert'})
      else if (couleurImg2 == 'vert') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/70.png','couleurImg2': 'magenta'})
      else if (couleurImg2 == 'magenta') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/80.png','couleurImg2': 'bleu'})
      else if (couleurImg2 == 'bleu') $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/90.png','couleurImg2': 'noir'})
      else if (couleurImg2 == 'noir') {
        $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/100.png','couleurImg2': 'rouge'})
        animeGarageClose#id# = clearInterval(animeGarageClose#id#)
      }else{
        $('#iconGarageCmd#id# img').attr({'src': 'data/customTemplates/dashboard/cmd.action.other.GARAGE/100.png','couleurImg2': 'rouge'})
        animeGarageClose#id# = clearInterval(animeGarageClose#id#)
      }
    }
  </script>
  <style></style>
</div>

Bonne journée.

[Gsxrnoir2001]

Bonjour Phpvarious,

Je viens de tester ta version…eh bien un grand merci, car il fonctionne très bien.

les 2 bugs ont totalement disparu, et les Paramètres optionnels fonctionnent aussi.

en un mot…BRAVO