Widget Sapin Noël Animé
Re: Widget Sapin Noël Animé
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
on pourrait ajouter le gyro qui clignote sur pilier, lorsque portail en mouvement (ouhai je sais je complique )
super boulot Skyline
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
on pourrait ajouter le gyro qui clignote sur pilier, lorsque portail en mouvement (ouhai je sais je complique )
super boulot Skyline
- skyline-ch
- Actif
- Messages : 1504
- Inscription : 30 juil. 2014, 17:06
- Localisation : Suisse - VS
- Contact :
Re: Widget Sapin Noël Animé
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
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
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP
Re: Widget Sapin Noël Animé
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 !!!!
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 !!!!
- skyline-ch
- Actif
- Messages : 1504
- Inscription : 30 juil. 2014, 17:06
- Localisation : Suisse - VS
- Contact :
Re: Widget Sapin Noël Animé
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
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
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP
Re: Widget Sapin Noël Animé
Personne ne c'est amusé à faire le projecteur animé ?
-
- Timide
- Messages : 5
- Inscription : 12 sept. 2017, 12:54
Re: Widget Sapin Noël Animé
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
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
Re: Widget Sapin Noël Animé
Il me semble pas avoir de problème avec le mien
-
- Timide
- Messages : 5
- Inscription : 12 sept. 2017, 12:54
Re: Widget Sapin Noël Animé
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
Re: Widget Sapin Noël Animé
En effet le sapin se double lorsqu'on est à Onstringshot a écrit : ↑20 oct. 2018, 14:17Je 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
Re: Widget Sapin Noël Animé
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...
J'ai regardé mais cela dépasse mes compétences. Je vais continuer de chercher tout de même...
Re: Widget Sapin Noël Animé
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.
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>
Re: Widget Sapin Noël Animé
ça à l'air de fonctionner !!!RemiVDS a écrit : ↑13 nov. 2018, 14:17Aprè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>
C'est noël avant l'heure !
Re: Widget Sapin Noël Animé
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
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
Re: Widget Sapin Noël Animé
oui moi aussi le sapin est en double.
Y'a-t-il une âme charitable qui peut regarder le problème?
Y'a-t-il une âme charitable qui peut regarder le problème?
-
- Timide
- Messages : 40
- Inscription : 27 janv. 2019, 17:36
Re: Widget Sapin Noël Animé
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.
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.
Re: Widget Sapin Noël Animé
Il ne fonctionne plus en v3 non plus alors celui de la guirlande fonctionne luifrederic27 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.
Envoyé de mon MI 9 en utilisant Tapatalk
Re: Widget Sapin Noël Animé
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.
- Nicolas33140
- Timide
- Messages : 69
- Inscription : 05 févr. 2016, 23:07
- Localisation : Bordeaux metropole
Re: Widget Sapin Noël Animé
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 ?
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 ?
Re: Widget Sapin Noël Animé
J'ai remarque aussi. Je pense qu'il faut des tailles d'images différentes.
- Nicolas33140
- Timide
- Messages : 69
- Inscription : 05 févr. 2016, 23:07
- Localisation : Bordeaux metropole
Re: Widget Sapin Noël Animé
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 ?
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 ?
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 13 invités