Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

Widget Sapin Noël Animé

Réservé à l'utilisation et la création de widgets dans JEEDOM
module
Timide
Messages : 44
Inscription : 03 mai 2016, 09:04

Re: Widget Sapin Noël Animé

Message par module » 15 déc. 2016, 09:34

Merci !
Mais en fait, j'aimerais plutôt l'appliquer sur "Etat" qui est un champ de type "info", du coup, je ne peux a priori pas appliquer le widget.

lorenzo
Timide
Messages : 80
Inscription : 03 avr. 2016, 02:31
Localisation : Aveyron

Re: Widget Sapin Noël Animé

Message par lorenzo » 24 déc. 2016, 17:46

bonjour , y a t'il une modification a faire si on souhaite avoir le widget pour mobile ?
Raspberry Pi3 +PIdrive+ Aeon Gen 5 + rflink +11 FGK101 + 2wall plug + 4 FGMS001 + 3 FGSD002 + 5 LC13 + 1 FGFS101 + 1FGS212 + 6 prise rflink

flamalex
Timide
Messages : 81
Inscription : 11 août 2016, 21:40

Re: Widget Sapin Noël Animé

Message par flamalex » 20 mai 2017, 15:01

bonjour,
j'ai adopté et adapté ce super boulot pour animer l'ouverture du portail en 10 images
seulement, etant tres débutant :), sur un click, lorsque l'etat est à "1" je souhaite que l'anime ouvre portail et sur un autre click, l'etat est à "0" je souhaite que l'anime fasse l'inverse, fermeture portail.
comment feriez vous?
par avance, merci pour votre aide

--------------------------------------------------------

Code : Tout sélectionner

<div id="sapin#id#" style="width:80px;min-height:80px;" 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="iconSapinCmd#id#"></span>
  </center>
   <script>
      var animeSapinInt;
         var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
       var cmdNom = '#name#'.toLowerCase();
      
         if('#state#' == '1' || '#state#' == 1){
             $('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.portail cine/100.png" couleurImg="rouge" width="75" height="75"/>');   
             if (cmdNom.indexOf('on') == 0 || cmdNom.indexOf('marche') == 0 ) {
                $('#sapin#id#').hide();  
            }
          
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
                 VitesseAnime = parseFloat(VitesseAnime)*500;
                animeSapinInt = setInterval(animeSapin, VitesseAnime);
            }
        }else{
             $('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.portail cine/100.png" couleurImg="blanc" width="75" height="75"/>');      
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
            $('#sapin#id#').hide(); 
            }
        }

          $('#sapin#id#').on('click', function(){
              clearInterval(animeSapinInt);
              jeedom.cmd.execute({id: '#id#'});
         });
      
        function animeSapin(){
         var couleurImg = $('#iconSapinCmd#id# img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.portail cine/90.png',
                                               'couleurImg': 'bleu'
                                              });
               }else if(couleurImg == 'bleu'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.portail cine/80.png',
                                               'couleurImg': 'magenta'
                                              });
            }else if(couleurImg == 'magenta'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.portail cine/70.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.portail cine/60.png',
                                               'couleurImg': 'jaune'
                                              });
              }else if(couleurImg == 'jaune'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.portail cine/50.png',
                                               'couleurImg': 'violet'
                                              });
                }else if(couleurImg == 'violet'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.portail cine/40.png',
                                               'couleurImg': 'orange'
                                              });
                  }else if(couleurImg == 'orange'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.portail cine/30.png',
                                               'couleurImg': 'gris'
                                              });
                    }else if(couleurImg == 'gris'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.portail cine/20.png',
                                               'couleurImg': 'rose'
                                              });
                      }else if(couleurImg == 'rose'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.portail cine/10.png',
                                               'couleurImg': 'noir'
                                              });
                        }else if(couleurImg == 'noir'){
             $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.portail cine/00.png',
                                               'couleurImg': 'blanc'
                                              });
            }else{
            $('#iconSapinCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.portail cine/00.png',
                                               'couleurImg': 'blanc'
                                              });
            }
                    
        }
    
   </script>
</div>

flamalex
Timide
Messages : 81
Inscription : 11 août 2016, 21:40

Re: Widget Sapin Noël Animé

Message par flamalex » 06 juin 2017, 14:33

réponse "à moi mm", ;)
juste une remarque, j'ai peut etre posé une question bete, mais je n'ai jamais eu d'absence de réponse sur d'autres forums de domotique,
alors c'etait ma premiere question, sur ce forum, j'ai peur pour la suite... :?
mais c'etait certainement du à ma question "bete" :D
en attendant, voici le code qui fonctionne en ouverture fermeture portail, il me reste à trouver le code pour l'ouverture partielle du portail (peut etre encore une question idiote :) ) :D

Code : Tout sélectionner

<div id="portail#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="iconPortailCmd#id#"></span>
  </center>
   <script>
      var animePortailOpen;
      var animePortailClose;
   
         var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
       var cmdNom = '#name#'.toLowerCase();
      
         if('#state#' == '1' || '#state#' == 1){
             $('#iconPortailCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/100a.png" couleurImg="rouge" width="180" height="180"/>');   
             if (cmdNom.indexOf('on') == 0 || cmdNom.indexOf('ouvrir') == 0 ) {
                $('#portail#id#').hide();  
            }
          
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('fermer') == 0) {
                 VitesseAnime = parseFloat(VitesseAnime)*900;
                animePortailOpen = setInterval(animePortailOpen, VitesseAnime);
            }
        }
     
           
     else if('#state#' == '0' || '#state#' == 0){
             $('#iconPortailCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/00.png" couleurImg2="blanc" width="180" height="180"/>');      
             if (cmdNom.indexOf('off') == 0 || cmdNom.indexOf('arret') == 0) {
              $('#portail#id#').hide(); }
          
          if (cmdNom.indexOf('on') == 0 || cmdNom.indexOf('marche') == 0) {
               VitesseAnime = parseFloat(VitesseAnime)*900;
                animePortailClose = setInterval(animePortailClose, VitesseAnime);
                 
            }
        }
       
     
       
     
     
            $('#portail#id#').on('click', function(){
              clearInterval(animePortailOpen);
              jeedom.cmd.execute({id: '#id#'});
          });     
            $('#portail#id#').on('click', function(){
              clearInterval(animePortailClose);
              jeedom.cmd.execute({id: '#id#'});
          });
      
     
    
           
     
     
        function animePortailOpen(){
         var couleurImg = $('#iconPortailCmd#id# img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/90a.png',
                                               'couleurImg': 'bleu'
                                              });
               }else if(couleurImg == 'bleu'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/80a.png',
                                               'couleurImg': 'magenta'
                                              });
            }else if(couleurImg == 'magenta'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/70a.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/60a.png',
                                               'couleurImg': 'jaune'
                                              });
              }else if(couleurImg == 'jaune'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/50a.png',
                                               'couleurImg': 'violet'
                                              });
                }else if(couleurImg == 'violet'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/40a.png',
                                               'couleurImg': 'orange'
                                              });
                  }else if(couleurImg == 'orange'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/30a.png',
                                               'couleurImg': 'gris'
                                              });
                    }else if(couleurImg == 'gris'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/20a.png',
                                               'couleurImg': 'rose'
                                              });
                      }else if(couleurImg == 'rose'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/10a.png',
                                               'couleurImg': 'noir'
                                              });
                        }else if(couleurImg == 'noir'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/00.png',
                                               'couleurImg': 'blanc'
                                              });
            }else{
            $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/00.png',
                                               'couleurImg': 'blanc'
                                              });
            }}
              
              
              
              
               function animePortailClose(){
         var couleurImg2 = $('#iconPortailCmd#id# img').attr('couleurImg2');  
               if(couleurImg2 == 'blanc'){
            $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/10a.png',
                                               'couleurImg2': 'rose'
                                              });
                }else if(couleurImg2 == 'rose'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/20a.png',
                                               'couleurImg2': 'orange'
                                              });
                  }else if(couleurImg2 == 'orange'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/30a.png',
                                               'couleurImg2': 'gris'
                                              });
                    }else if(couleurImg2 == 'gris'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/40a.png',
                                               'couleurImg2': 'jaune'
                                               });
                      }else if(couleurImg2 == 'jaune'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/50a.png',
                                               'couleurImg2': 'violet'
                                               });
                         }else if(couleurImg2 == 'violet'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/60a.png',
                                               'couleurImg2': 'vert'
                                              });
                           }else if(couleurImg2 == 'vert'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/70a.png',
                                               'couleurImg2': 'magenta'
                                              });
                             }else if(couleurImg2 == 'magenta'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/80a.png',
                                               'couleurImg2': 'bleu'
                                              });
                               }else if(couleurImg2 == 'bleu'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/90a.png',
                                               'couleurImg2': 'noir'
                                              });
                                 }else if(couleurImg2 == 'noir'){
             $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/100a.png',
                                               'couleurImg2': 'rouge'
                                              });
                       
                      }else{
            $('#iconPortailCmd#id# img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/100a.png',
                                               'couleurImg2': 'rouge'
                                              });
            }
                    
        }
    
   </script>
</div>

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: Re : Widget Sapin Noël Animé

Message par winhex » 06 juin 2017, 16:11

bonjour
ou trop évoluer, voir pars manque de temps
on est pas tous dev, dev avec du temps.

pour beaucoup le rendu n'est pas essentiel

c'est désobligeant, faut s' y faire, ou à toi de voir.

enfin le but de mon message et surtout pour te remercier. (je me le garde de côté)



flamalex
Timide
Messages : 81
Inscription : 11 août 2016, 21:40

Re: Widget Sapin Noël Animé

Message par flamalex » 07 juin 2017, 10:38

bonjour Winhex,
merci pour ta réponse
j'utilise jeedom pour le design sur tablette (avec son, vibration, retour d'etat, action....) les infos transitent en http via fibaro hc2.
ce pourquoi, j'apporte un soin particulier au design sur jeedom, ici le portail est animé (grace a vous avec le sapin que j'ai modifié), idem pour porte de garage, volets, alarme....
mais, j'ai le probleme du mode partiel "pieton", je ne souhaite pas de bouton "ouvert" "ferme" "pieton", ce pourquoi je fais tout au "clic", je pense que pour le mode pieton il y aura une exception, mais je n'arrive pas à l'integrer dans le code ci dessus.
j'ai commencé l'install de jeedom sur rpi2 avec plugin, script, virtual ect..... il y a 2 mois, j'apprends comme bcp sur le forum, c'etait ma premier question lol !
j'avoue qu'entre la tablette "tasker, PAW" la jeedom, la hc2, c'est une usine à gaz, mais je m'en sors pas trop mal,
reste uniquement (pour le moment) ce "pieton" en animation qui bloc.

mortyre
Actif
Messages : 1247
Inscription : 17 mai 2016, 16:51

Re: Widget Sapin Noël Animé

Message par mortyre » 07 juin 2017, 13:04

@Flamalex tu devrais mettre à disposition ton portail sur le market comme j'ai fait pour ma guirlande animée de noël basé sur ce script
PROD: NAS1815+ VMM Buster 10.2 / Jeedom 4.0.31 / MariaDB 10.3.18 / PHP 7.3.9
DEV: DIY Odroid C2 16gb Strech 9.11 / Jeedom 4.x Alpha / MariaDB 10.1.41 / PHP 7.0.33

flamalex
Timide
Messages : 81
Inscription : 11 août 2016, 21:40

Re: Widget Sapin Noël Animé

Message par flamalex » 07 juin 2017, 13:26

j'y ai pensé
je vais regarder comment ca fonctionne sur market
je pourrais egalement partager le garage:)
merci

flamalex
Timide
Messages : 81
Inscription : 11 août 2016, 21:40

Re: Widget Sapin Noël Animé

Message par flamalex » 07 juin 2017, 19:09

@ mortyre

vous trouverez le widget sur le market sous animation portail coulissant
dashboard.action.other.PORTAIL

idem pour la porte de garage
animation porte de garage coulissante
dashboard.action.other.GARAGE
Dernière édition par flamalex le 07 juin 2017, 19:24, édité 1 fois.

flamalex
Timide
Messages : 81
Inscription : 11 août 2016, 21:40

Re: Widget Sapin Noël Animé

Message par flamalex » 07 juin 2017, 19:13

@ mortyre
aurais tu une idée pour la position intermédiaire "pieton"
il faudrait que sur l'ouverture, le portail s’arrête à 60% lorsque l'on aura clic sur l'onglet "pieton" (ce sera le seul onglet, puisque les actions ouverture fermeture sont réalisées grace au clic)
merci

EDIT:
autre question:
sur ma tablette, jeedom en design, a chaque rafraîchissement de la page, les widget perso animés, tel que le portail et la porte de garage s'animent, alors que je n'ai pas de "click" il me semblait que la fonction suivante etait faite pour le clic, et non pour le refresh
$('#portail#id#').on('click', function(){
clearInterval(animePortailOpen);
jeedom.cmd.execute({id: '#id#'});

y a t il une solution, afin d’éviter cela?

mortyre
Actif
Messages : 1247
Inscription : 17 mai 2016, 16:51

Re: Widget Sapin Noël Animé

Message par mortyre » 07 juin 2017, 22:13

Pour la partie dev aucune idée j'ai juste suivi celle existante

Pour la partie piéton une tempo qui arrête l'ouverture du portail au bout d'un certains laps de temps me semble le plus simple
PROD: NAS1815+ VMM Buster 10.2 / Jeedom 4.0.31 / MariaDB 10.3.18 / PHP 7.3.9
DEV: DIY Odroid C2 16gb Strech 9.11 / Jeedom 4.x Alpha / MariaDB 10.1.41 / PHP 7.0.33

flamalex
Timide
Messages : 81
Inscription : 11 août 2016, 21:40

Re: Widget Sapin Noël Animé

Message par flamalex » 07 juin 2017, 23:13

non surtt pas de tempo puisque j'ai un actionneur (un bp) et un retour d'etat (ni ouvert ni ferme donc pieton)
il faut ajouter dans le code un ID supplementaire avec la cascade de positions (ferme=100% puis 90% 80% 70% 60% stop) ainsi l'animation du portail s'arrete a 60% lorsque le Bp pieton est "click" ( ca c'est pour l'action) puis pour le statut, celui ci confirme le mode pieton qui peut etre actionné par autre chose que la tablette, comme une telecommande par exemple, exactement comme j'ai fait pour l'ouverture fermeture.
bref en resumé, il faudrait reussir a inserer dans le code
un bouton poussoir pieton avec l'animation qui en decoule.

mortyre
Actif
Messages : 1247
Inscription : 17 mai 2016, 16:51

Re: Widget Sapin Noël Animé

Message par mortyre » 07 juin 2017, 23:36

bon courage tient nous au courant :-)
PROD: NAS1815+ VMM Buster 10.2 / Jeedom 4.0.31 / MariaDB 10.3.18 / PHP 7.3.9
DEV: DIY Odroid C2 16gb Strech 9.11 / Jeedom 4.x Alpha / MariaDB 10.1.41 / PHP 7.0.33

flamalex
Timide
Messages : 81
Inscription : 11 août 2016, 21:40

Re: Widget Sapin Noël Animé

Message par flamalex » 10 juin 2017, 07:47

Bonjour,
je pensais avoir deposé les widgets portail et garage sur le market, mais je ne les vois pas, sauf dans "mes creations"
les voyez vous ?
l'icon est une image d'un portail plein gris anthracite ouvert en partie avec des piliers blanc et un gyro
pour le garage, porte pleine gris anthracite fermée avec mur en briques rouges foncées.

edit:
voila, c'est bon, j'avais oublié de valider "stable"
normalement vous avez acces au widget, automatisme, portail et garage

Avatar de l’utilisateur
skyline-ch
Actif
Messages : 1504
Inscription : 30 juil. 2014, 17:06
Localisation : Suisse - VS
Contact :

Re: Widget Sapin Noël Animé

Message par skyline-ch » 15 juin 2017, 01:16

@flamalex, j'ai relus et regarder ton widget , la je pense pas que tu soie sur la bonne voie pour le système.

L'animation n'est pas des plus optimal comme construite, tu devrais plus partir sur quelque chose a base de ce tuto https://www.alsacreations.com/tuto/lire ... tique.html

Pour moi c'est un peux flou le processus qui est utiliser entre jeedom et HC2, qui envoie quoi à qui, c'est jeedom qu envoie un valeur a HC2 qui donne l'ordre au module et retourne une position à HC2 qui envoie cette valeur a jeedom ?
selon le chemin et les infos qui circule il faut adapter la façon de faire pour que cela correspondent.

Peux tu nous en dire plus ?
Compétence :
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP

flamalex
Timide
Messages : 81
Inscription : 11 août 2016, 21:40

Re: Widget Sapin Noël Animé

Message par flamalex » 15 juin 2017, 07:14

@Skyline-ch
je te remercie d'examiner ma problématique.
si nous faisons abstraction de Hc2, dans un 1er tps,
sur jeedom, j'ai un virtual "position" open/close/pieton,
1/0/2, si celui ci est en binaire alors seul le 1/0 fonctionne en appuyant sur le widget, celui du sapin que j'ai adapté.
maintenant, pour les tests, je fais le mm widget avec qqes modif, mais en numerique, j'obtiens alors les 3 boutons visible,
la question est, comment faire disparaitre uniquement open/close (qui seront actionnés par click function) et laisser le bouton "pieton" visible qui permettra d'actionner l'action pieton?
je ne pense pas etre suffisamment clair ds mes explications, je vais partager le 2em widget avec boutons visibles.
au final, je veux un widget animé , 3 positions, actionnées au touché (function clic) pour 2 positions et la 3eme visible sous forme de bp.

flamalex
Timide
Messages : 81
Inscription : 11 août 2016, 21:40

Re: Widget Sapin Noël Animé

Message par flamalex » 15 juin 2017, 07:32

plusieurs questions:
la fonction "clic", pour ma part, interaction au touché sur le widget, ne fonctionne qu'en "binaire"?
peut on l'integrer dans un "numerique"?
lorsque l'animation est en position pieton, que l'on souhaite "open", l'animation reprends portail fermé pour s'ouvrir, peut on faire en sort qu'il s'ouvre suivant la position dans laquelle il se trouve, ici pieton dans l'exemple?
enfin, a chaque fois que l'ecran de la tablette s'allume, l'animation se reinitialise, pourquoi?
par avance merci pour votre aide

Avatar de l’utilisateur
skyline-ch
Actif
Messages : 1504
Inscription : 30 juil. 2014, 17:06
Localisation : Suisse - VS
Contact :

Re: Widget Sapin Noël Animé

Message par skyline-ch » 15 juin 2017, 19:02

@flamalex, tu vas être comptent, y aura pas de bouton dans ton widget ;)

Me reste juste à l'animer
Compétence :
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP

flamalex
Timide
Messages : 81
Inscription : 11 août 2016, 21:40

Re: Widget Sapin Noël Animé

Message par flamalex » 15 juin 2017, 19:04

allé !!!! c'est pas vrai,
chapeau
je suis impatient de voir ça

Avatar de l’utilisateur
skyline-ch
Actif
Messages : 1504
Inscription : 30 juil. 2014, 17:06
Localisation : Suisse - VS
Contact :

Re: Widget Sapin Noël Animé

Message par skyline-ch » 15 juin 2017, 20:23

alors @flamalex, bon il est pas parfait, y as pas mal d'amélioration qui pourrais être apporter et améliorer l'animation, j'ai par fois des accélération brutal, mais il fonctionne plus tôt bien.

Donc il faut :
un équipement avec un commande infos liée au 3 commandes actions.
les commandes action doivent rigoureusement s'appeler "Ouvrir", "Pieton", et "Fermer"
Les 3 commandes action doivent envoyer a la commande état respectivement 2, 1, 0

pour ouvrir, mettre en semi ouvert ou fermer il faut cliquer dans la bonne zone du widget, il est diviser en 3, en gros clique sur le pilier gauche ouvre, au centre de l'image met en mode piéton, et pilier droit ferme.

Amélioration possible : variabiliser les noms des commandes, leur valeurs avec les option des widgets, rendre compatible jeedom v3, calculer automatiquement en fonction de la taille de l'image les divisions des zones de clique

il faut supprimer toute les images que tu as dans ton dossier du widget puis ajouter les 2 en fichiers joins

Code : Tout sélectionner

<div id="portail#id#" style="width:180px;min-height:180px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#" data-nomCmd="#name#">
   <center>
        <span style="font-size : 3em;font-weight: bold;margin-top: -20px;" class="action" id="iconPortailCmd#id#">
     		<img src="plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/portail.png"  width="180" height="180"/>	
          	<div class="portailPorteCont">
              <img src="plugins/widget/core/template/dashboard/cmd.action.other.PORTAIL ANTRACITE/porte.png"  width="180" height="180" style="display:none;" class="portailPorte"/>
            </div>
     	</span>
  </center>
  <style>
      #portail#id# div.portailPorteCont {
      position:relative;
      top:-125px;
      left: 0px;
      overflow: hidden;
      height: 120px;
      width: 141px;
   </style>
   <script>

       	var cmdNom = '#name#'.toLowerCase();
     	if(cmdNom == 'pieton'){
          	var posPortF = '-22px';
          	var posPortP = '-80px';
          	var posPortO = '-155px'; 
          	var PosPortDep = 0;
          
            if('#state#' == 2 || '#state#' == '2' ){
				PosPortDep = posPortO;
            }else if('#state#' == 1 || '#state#' == '1' ){
				PosPortDep = posPortP;
            }else{
				PosPortDep = posPortF;
            }
          
          	$('#portail#id# img.portailPorte').css({'display':'inline-block', 'position': 'relative', 'top': '-55px', 'left': PosPortDep});
        	//$('#portail#id#').siblings('div[data-subtype="other"][data-nomCmd="Ouvrir"],div[data-subtype="other"][data-nomCmd="Fermer"]').hide();        	
            var spanId = 'iconPortailCmd#id#';
          
            $('#'+spanId +' img,#'+spanId +' .portailPorteCont').on('click', function(e){

                if(e.offsetX < 50){
					console.log('dbclick < 50',e.offsetX);
                  	jeedom.cmd.execute({id: $('#portail#id#').siblings('div[data-subtype="other"][data-nomCmd="Ouvrir"]')["0"].dataset.cmd_id});
                  	$('#portail#id# img.portailPorte').animate({'left':posPortO},2500);
                  
                }else if(e.offsetX >= 50 && e.offsetX <= 130) {
                    console.log('dbclick >= 50 &&  =< 130',e.offsetX);
                  	jeedom.cmd.execute({id: '#id#'});
                  	$('#portail#id# img.portailPorte').animate({'left':posPortP},1250);
                  
                }else{
                  	console.log('dbclick  > 130',e.offsetX);
                  	jeedom.cmd.execute({id: $('#portail#id#').siblings('div[data-subtype="other"][data-nomCmd="Fermer"]')["0"].dataset.cmd_id});
                  	$('#portail#id# img.portailPorte').animate({'left':posPortF},2500);
                }
             });
        }else{
          $('#portail#id#[data-subtype="other"][data-nomCmd="Ouvrir"], #portail#id#[data-subtype="other"][data-nomCmd="Fermer"]').hide();
        }
   </script>
</div>
Pièces jointes
portail.png
portail.png (6.73 Kio) Consulté 839 fois
porte.png
porte.png (5.9 Kio) Consulté 839 fois
Compétence :
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 0 invité