Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

Widget Sapin Noël Animé

Réservé à l'utilisation et la création de widgets dans JEEDOM
flamalex
Timide
Messages : 81
Inscription : 11 août 2016, 21:40

Re: Widget Sapin Noël Animé

Message par flamalex » 15 juin 2017, 21:15

tu es un génie
chapeau, visuellement c'est extra
l'effet est vraiment super
bravo @Skyline-ch

en effet, si tu appuies les translations sont fluides, pas tjr exact, mais c'est génial.
par contre, si tu lances l'action par le virtual, il n'y a pas d'animation, c'est direct 0/1 ou 2, tu vois ce que je veux dire?
le virtual doit etre "numerique", "action", "defaut" ?

edit:
les améliorations que tu proposes sont tres intéressantes, notamment "taille image", en effet lorsque tu places le widget sur Design, tu as tendance à la redimensionner en fonction de la taille et place sur l'ecran.
"variabiliser" te servirait à quoi (je n'y connais rien, lol dsl !! ) est ce pour rendre constant, varier la vitesse?

que puis je "bricoler" pour rendre constant ?
pourras tu commenter le code, histoire que je comprenne :) ;) je m'etais familiarisé avec le code précédent, la je suis perdu :) :shock:

on pourrait ajouter le gyro qui clignote sur pilier, lorsque portail en mouvement (ouhai je sais je complique :mrgreen: )

super boulot Skyline

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 » 16 juin 2017, 00:32

houla, pour apporter les modif proposer il faudrait un cours complet à celui qui ni connais rien du coup se serais long et compliquer a expliquer.

Variabiliser veux enlever les valeurs fix pour les remplacer avec des variables qui vont modifier le comportement sans pour autant modifier le codes, soit ses valeurs sont calculée par le code à la volée soit c'est des option que l'utilisateur entre.

effectivement je me suis concentrer sur se que tu ma demander au clique, c'est pour cela que je voulais avoir plus d'info pour savoir se qui se passe, comment circule les informations, ici je me suis concentrer sur le click, pour une animation sur changement de la valeur ont dois pouvoir le faire avec un on change crocher sur le widget état ou la valeur state mais cela faudrait le tester car ce widget es très particulier.
Si il aurais eux des valeurs entre 0 et 100 ont aurais plus utiliser le principe des volets roulant.

Par contre la j'aurais pas le temps de m'occuper de tout cela
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 » 16 juin 2017, 13:53

pour l'animation constante j'ai ajouté ceci:
var speed = 1850;
var easing = 'easeInOutQuad';

et donc pour les lignes concernées
"$('#portail#id# img.portailPorte').animate({'left':posPortO},speed,easing);"
il y a une légère amélioration, mais ce n'est pas encore ça.


il y a un "{" seul, apres "div.portailPorteCont", en debut de code, tu le refermes ou? j'ai fait des tests et ça plante tout
" #portail#id# div.portailPorteCont { "

j'ai cru comprendre que la durée est fonction du format pixel !!
1sec = 50px , 2sec = 100px, ca expliquerait les saccades et changement brutal de vitesse.
exemple: si j'applique 3sec (3000) à l'ouverture du portail, l'image portail fermée est de 100px (admettons) alors arrivé à 1/3 de l'ouverture
il bondit puisque arrivé à 100px= 2sec or 3sec = 150px
est ce exact? ai je mal compris? si cela est vrai alors si je vaux une animation de 10 sec il va falloir que j'installe un ecran de cinéma dans mon entrée pour ouvrir et fermer le portail !!!! :D :lol:

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 » 16 juin 2017, 16:09

Pour la fermeture avec le } dans la partie style tu peux la mettre après le "width: 141px;", c'est un oublis ;)

La fonction animate de jquery prend en premier un paramètre de direction avec le nombre de pixel a ajouter à la position actuel, en suite le speed c'est en combien de temps le déplacement doit être fais.

Pour être optimum il faudrait calculer ses 2 valeur dynamiquement en fonction de la position et donc le temps a exécuter l'animation en rapport au nombre de pixel.
Cela donnerai une vitesse toujours correcte, mais pas forcément que l'animation sera top car la on est dans un contexte spécial avec la méthode d'actualisation des widgets, qui sera modifier avec jeedom 3

https://sutterlity.gitbooks.io/apprendr ... ation.html
Compétence :
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP

Avatar de l’utilisateur
Dams
Helper
Messages : 878
Inscription : 16 sept. 2014, 08:06
Localisation : Annecy

Re: Widget Sapin Noël Animé

Message par Dams » 03 déc. 2017, 18:48

bartounet a écrit :
14 déc. 2016, 00:09
Super merci
Et un petit widget pour les projecteur de noel dehors?

C'est la modee en ce moment
Personne ne c'est amusé à faire le projecteur animé ?
Helper Officiel Jeedom
Merci à l'équipe pour le job !!
Trucs & Astuces I Documentation Jeedom

stringshot
Timide
Messages : 5
Inscription : 12 sept. 2017, 12:54

Re: Widget Sapin Noël Animé

Message par stringshot » 19 oct. 2018, 11:33

Bonjour

Je m'y prends tot cette année et je voulais réactiver ce widget qui est top, mais avec les dernieres mises a jour, le widget se double

Avez vous prévu de revoir le code ?

Merci d'avance

Avatar de l’utilisateur
Dams
Helper
Messages : 878
Inscription : 16 sept. 2014, 08:06
Localisation : Annecy

Re: Widget Sapin Noël Animé

Message par Dams » 19 oct. 2018, 11:52

Il me semble pas avoir de problème avec le mien
Helper Officiel Jeedom
Merci à l'équipe pour le job !!
Trucs & Astuces I Documentation Jeedom

stringshot
Timide
Messages : 5
Inscription : 12 sept. 2017, 12:54

Re: Widget Sapin Noël Animé

Message par stringshot » 20 oct. 2018, 14:17

Je n'avais pas de soucis l'année dernière avec mais depuis la mise a jour 3.2.3 je crois il y a pas mal de widget doubles. Le forum a pas mal de cas

Avatar de l’utilisateur
Dams
Helper
Messages : 878
Inscription : 16 sept. 2014, 08:06
Localisation : Annecy

Re: Widget Sapin Noël Animé

Message par Dams » 22 oct. 2018, 06:33

stringshot a écrit :
20 oct. 2018, 14:17
Je n'avais pas de soucis l'année dernière avec mais depuis la mise a jour 3.2.3 je crois il y a pas mal de widget doubles. Le forum a pas mal de cas
En effet le sapin se double lorsqu'on est à On
Helper Officiel Jeedom
Merci à l'équipe pour le job !!
Trucs & Astuces I Documentation Jeedom

RemiVDS
Timide
Messages : 44
Inscription : 01 nov. 2018, 16:50

Re: Widget Sapin Noël Animé

Message par RemiVDS » 13 nov. 2018, 12:39

Je dois bien reconnaître que si une personne bien attentionnée faisait une MAJ du widget, cela serait cool.
J'ai regardé mais cela dépasse mes compétences. Je vais continuer de chercher tout de même...

RemiVDS
Timide
Messages : 44
Inscription : 01 nov. 2018, 16:50

Re: Widget Sapin Noël Animé

Message par RemiVDS » 13 nov. 2018, 14:17

Après un peu de recherche, voici quelque chose qui semble fonctionner.
Je suis une buse en html, css et je ne connais rien au JS donc à tester pour confirmer que cela fonctionne dans le temps.

Code : Tout sélectionner

<div style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <center>
        <!--     <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#valueName#</div>     -->
        <span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="iconCmd"></span>
    </center>
    <script>
		var animeSapinInt;
        var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
		
        jeedom.cmd.update['#id#'] = function(_options){
        	if (_options.display_value == '1' || _options.display_value >= 1 || _options.display_value == 'on') {
            if (jeedom.cmd.normalizeName('#name#') == 'on') {
                    $('.cmd[data-cmd_id=#id#]').hide();
					VitesseAnime = parseFloat(VitesseAnime)*1000;
                    animeSapinInt = setInterval(animeSapin, VitesseAnime);
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png" couleurImg="rouge" width="54" height="75"/>');
            }
        } else {
            if (jeedom.cmd.normalizeName('#name#') == 'off') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" couleurImg="OFF" width="54" height="75"/>');
                }
            }
        }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
        $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
			clearInterval(animeSapinInt);
            jeedom.cmd.execute({id: '#id#'});
        });
		
		function animeSapin(){
         var couleurImg = $('.cmd[data-cmd_id=#id#] img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('.cmd[data-cmd_id=#id#] img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png',
                                               'couleurImg': 'bleu'
                                              });
            }else if(couleurImg == 'bleu'){
             $('.cmd[data-cmd_id=#id#] img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('.cmd[data-cmd_id=#id#] img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png',
                                               'couleurImg': 'violet'
                                              });
            }else{
            $('.cmd[data-cmd_id=#id#] img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png',
                                               'couleurImg': 'rouge'
                                              });
            }
          
        }
    </script>
</div>

Avatar de l’utilisateur
Dams
Helper
Messages : 878
Inscription : 16 sept. 2014, 08:06
Localisation : Annecy

Re: Widget Sapin Noël Animé

Message par Dams » 13 nov. 2018, 17:20

RemiVDS a écrit :
13 nov. 2018, 14:17
Après un peu de recherche, voici quelque chose qui semble fonctionner.
Je suis une buse en html, css et je ne connais rien au JS donc à tester pour confirmer que cela fonctionne dans le temps.

Code : Tout sélectionner

<div style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <center>
        <!--     <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#valueName#</div>     -->
        <span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="iconCmd"></span>
    </center>
    <script>
		var animeSapinInt;
        var VitesseAnime = (parseFloat("#VitesseAnime#") >= 0) ? '#VitesseAnime#' : 1 ;
		
        jeedom.cmd.update['#id#'] = function(_options){
        	if (_options.display_value == '1' || _options.display_value >= 1 || _options.display_value == 'on') {
            if (jeedom.cmd.normalizeName('#name#') == 'on') {
                    $('.cmd[data-cmd_id=#id#]').hide();
					VitesseAnime = parseFloat(VitesseAnime)*1000;
                    animeSapinInt = setInterval(animeSapin, VitesseAnime);
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png" couleurImg="rouge" width="54" height="75"/>');
            }
        } else {
            if (jeedom.cmd.normalizeName('#name#') == 'off') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                }else{
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" couleurImg="OFF" width="54" height="75"/>');
                }
            }
        }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
        $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
			clearInterval(animeSapinInt);
            jeedom.cmd.execute({id: '#id#'});
        });
		
		function animeSapin(){
         var couleurImg = $('.cmd[data-cmd_id=#id#] img').attr('couleurImg');     
             if(couleurImg == 'rouge'){
                 $('.cmd[data-cmd_id=#id#] img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png',
                                               'couleurImg': 'bleu'
                                              });
            }else if(couleurImg == 'bleu'){
             $('.cmd[data-cmd_id=#id#] img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png',
                                               'couleurImg': 'vert'
                                              });
            }else if(couleurImg == 'vert'){
             $('.cmd[data-cmd_id=#id#] img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png',
                                               'couleurImg': 'violet'
                                              });
            }else{
            $('.cmd[data-cmd_id=#id#] img').attr({'src': 'plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png',
                                               'couleurImg': 'rouge'
                                              });
            }
          
        }
    </script>
</div>
ça à l'air de fonctionner !!!
C'est noël avant l'heure ! :)
Helper Officiel Jeedom
Merci à l'équipe pour le job !!
Trucs & Astuces I Documentation Jeedom

sacle
Timide
Messages : 13
Inscription : 30 juil. 2018, 23:25

Re: Widget Sapin Noël Animé

Message par sacle » 05 déc. 2018, 21:52

Bonjour,
Y'a un pas à pas pour ce widget ? avec les noms des actions et la configuration à mettre en place ?

1) J'ai une prise DIO, je n'ai pas réussi à bien faire fonctionner le widget. Pourtant j'ai bien les actions On / Off et mon info Etat

2) Trouvé sur ce forum, j'ai créé un virtuel par dessus. Là ça marche mieux, sauf que je dois rafraîchir la page à chaque fois
Au début je n'ai qu'une icone : sapin éteint par exemple
J'appuie dessus, le sapin s'allume : mais là je vois 2 icônes l'une à coté de l'autre, l'une éteinte, l'autre clignotante (il faut que je trouve comment ajouter une image)
Je rafraîchie la page : c'est ok je vois uniquement le sapin clignotant
J'imagine que l'icone "off" devrait être automatiquement masquée non ? Normal ?

Et pour le premier point, vous me confirmer que ça ne marche qu'avec un virtuel ? pas possible directement avec la prise ?

Merci pour ce widget, c'est mon premier dans mon installation

Avatar de l’utilisateur
Dams
Helper
Messages : 878
Inscription : 16 sept. 2014, 08:06
Localisation : Annecy

Re: Widget Sapin Noël Animé

Message par Dams » 30 août 2019, 13:11

oui moi aussi le sapin est en double.
Y'a-t-il une âme charitable qui peut regarder le problème?
Helper Officiel Jeedom
Merci à l'équipe pour le job !!
Trucs & Astuces I Documentation Jeedom

frederic27
Timide
Messages : 40
Inscription : 27 janv. 2019, 17:36

Re: Widget Sapin Noël Animé

Message par frederic27 » 28 nov. 2019, 08:59

Bonjour à tous,

Pour mon premier Noel avec Jeedom, je voudrai customiser un peu ma tablette.

Est-ce que quelqu'un a testé le widget sur la V4 ? Je l'ai appliqué à mon virtuel, mais il ne change pas d'état.

mecano91
Actif
Messages : 953
Inscription : 30 sept. 2014, 20:41
Localisation : Paris, France

Re: Widget Sapin Noël Animé

Message par mecano91 » 01 déc. 2019, 23:19

frederic27 a écrit :Bonjour à tous,

Pour mon premier Noel avec Jeedom, je voudrai customiser un peu ma tablette.

Est-ce que quelqu'un a testé le widget sur la V4 ? Je l'ai appliqué à mon virtuel, mais il ne change pas d'état.
Il ne fonctionne plus en v3 non plus alors celui de la guirlande fonctionne lui

Envoyé de mon MI 9 en utilisant Tapatalk


RemiVDS
Timide
Messages : 44
Inscription : 01 nov. 2018, 16:50

Re: Widget Sapin Noël Animé

Message par RemiVDS » 02 déc. 2019, 09:31

Perso je ne me suis pas cassé la tête. J'ai repris le widget pour faire un template. Le sapin n'est pas animé mais ça fait le job.
sapin.zip
template sapin
(6.03 Kio) Téléchargé 11 fois

Avatar de l’utilisateur
Nicolas33140
Timide
Messages : 69
Inscription : 05 févr. 2016, 23:07
Localisation : Bordeaux metropole

Re: Widget Sapin Noël Animé

Message par Nicolas33140 » 08 déc. 2019, 11:58

J'ai de mon coté utilisé l'assistant de création de widget > widget on/off.
Cela fonctionne très bien avec les widgets de type dashboard mais je n'arrive pas à le faire fonctionner pour le mobile.
L'image ne s'affiche pas.
Quelqu'un sait si les widget mobile sont compatibles avec les images ?

RemiVDS
Timide
Messages : 44
Inscription : 01 nov. 2018, 16:50

Re: Widget Sapin Noël Animé

Message par RemiVDS » 08 déc. 2019, 18:48

J'ai remarque aussi. Je pense qu'il faut des tailles d'images différentes.

Avatar de l’utilisateur
Nicolas33140
Timide
Messages : 69
Inscription : 05 févr. 2016, 23:07
Localisation : Bordeaux metropole

Re: Widget Sapin Noël Animé

Message par Nicolas33140 » 10 déc. 2019, 08:24

J'ai testé en réduisant un peu la taille de l'image (50px de large au lieu de 64), ça ne fonctionne pas.
Je vais testé ce soir en réduisant de moitié mais j'ai peur que cela ne serve à rien.

Quelqu'un à le sapin en version mobile ?

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

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