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
Répondre
Avatar de l’utilisateur
domomat
Actif
Messages : 943
Inscription : 21 juil. 2014, 20:19
Localisation : Johannesburg

Widget Sapin Noël Animé

Message par domomat » 02 déc. 2014, 19:35

Ce post à pour but la création collaborative d'un widget animé d'un sapin de noël

J'ai essayé de faire un nouveau widget animé :oops: et je bloque à nouveau sur la partie script. J'ai envie d'apprendre ! (le css, ca rentre bien mais la partie JS c'est plus dure pour moi)

But :
c'est une déclinaison de action.other.light avec une image de sapin et une animation de guirlande qui clignote
J'aimerais que quand c'est Off alors image du sapin OFF et que quand c'est ON alors c'est l'animation CSS qui est jouée.
Je ne sais pas comment dans le script afficher l'animation à la place de l'image OFF.


voila ma tentative d'un cmd.action.other:

Code : Tout sélectionner

<div style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="info" data-subtype="numeric" data-cmd_id="#id#">
    <center>

        <span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="action" id="iconCmd#id#"></span>
    </center>

  
  
  <style> 
 #iconCmd#id# {
    width: 54px;
    height: 75px;
    background-repeat: no-repeat;
    position: relative;
    margin-left:0px;


   
    /* Chrome, Safari, Opera */
    -webkit-animation-name: mycolor;
    -webkit-animation-duration: 3s;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
}
    
        /* Firefox */
    -mos-animation-name: mycolor;
    -mos-animation-duration: 3s;
    -mos-animation-direction: normal;
    -mos-animation-delay: 2s;
    -mos-animation-iteration-count: infinite;
    -mos-animation-play-state: running;
}
    

/* Chrome, Safari, Opera */
@-webkit-keyframes mycolor {
    0%   {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png');}
    25%  {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png');}
    50%  {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png');}
    75%  {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png');}
    100% {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png');}
}
    
    /* Chrome, Safari, Opera */
@-mos-keyframes mycolor {
    0%   {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png');}
    25%  {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png');}
    50%  {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_vert.png');}
    75%  {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_bleu.png');}
    100% {background:url('plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_violet.png');}
}

</style> 

<script>

    
       if ('#displayName#' == 1 || '#displayName#' == '1') {
            $('.cmd[data-cmd_id=#id#] .cmdName').show();
        }
        var cmdName = '#name#';
        if ('#state#' == '1' || '#state#' == 1) {
            $('#iconCmd#id#').css('-webkit-animation-play-state' , 'running');
   
            if (cmdName.toLowerCase().indexOf('on') == 0) {
                $('.cmd[data-cmd_id=#id#]').hide();
            }
        } else {
            $('#iconCmd#id#').css('-webkit-animation-play-state' , 'paused');
            $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" width="54" height="75"/>');
            
          if (cmdName.toLowerCase().indexOf('off') == 0) {
                $('.cmd[data-cmd_id=#id#]').hide();
            }
        }
        $('.cmd[data-cmd_id=#id#] .action').off();
        $('.cmd[data-cmd_id=#id#] .action').on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
        
    
   </script>    
Pièces jointes
christmas_tree_vert.png
christmas_tree_vert.png (4.22 Kio) Consulté 3895 fois
christmas_tree_rouge.png
christmas_tree_rouge.png (3.89 Kio) Consulté 3895 fois
christmas_tree_OFF.png
christmas_tree_OFF.png (3.03 Kio) Consulté 3895 fois
Jeedom --> Depuis Juillet 2014
VM Debian (NUC i5) - 100% Xiaomi Aqara & Yeelight
Détails ici

Avatar de l’utilisateur
domomat
Actif
Messages : 943
Inscription : 21 juil. 2014, 20:19
Localisation : Johannesburg

Re: Widget Sapin Noel Animé

Message par domomat » 02 déc. 2014, 19:36

suite des images
Pièces jointes
christmas_tree_violet.png
christmas_tree_violet.png (4.02 Kio) Consulté 3892 fois
christmas_tree_bleu.png
christmas_tree_bleu.png (4.37 Kio) Consulté 3892 fois
Jeedom --> Depuis Juillet 2014
VM Debian (NUC i5) - 100% Xiaomi Aqara & Yeelight
Détails ici

Avatar de l’utilisateur
Aloïs
Timide
Messages : 425
Inscription : 02 août 2014, 13:44

Re: Widget Sapin Noel Animé

Message par Aloïs » 02 déc. 2014, 20:50

Oo punaise ça pu la déculottée sévère ça...
Cuisine connectée : Porte Cachée

Avatar de l’utilisateur
domomat
Actif
Messages : 943
Inscription : 21 juil. 2014, 20:19
Localisation : Johannesburg

Re: Widget Sapin Noel Animé

Message par domomat » 02 déc. 2014, 21:05

:lol:
Aloïs a écrit :Oo punaise ça pu la déculottée sévère ça...
c'est pas le but, en plus ce widget, il ne marchera qu'avec l'aide des dieux du JS et du CSS, mais j'ai gouté au CSS avec le widget moulin et les possibilités sont juste énorme !

L'idée c'est que grace aux CSS (animations entre autre) rendre l'interface encore plus WAF.

Dès que le sapin marche j'attaque (gros défi) le widget "soleil" (inspiré de Yaho météo):
Capture d’écran 2014-12-02 à 21.02.32.png
Capture d’écran 2014-12-02 à 21.02.32.png (43.51 Kio) Consulté 3862 fois
Jeedom --> Depuis Juillet 2014
VM Debian (NUC i5) - 100% Xiaomi Aqara & Yeelight
Détails ici

Avatar de l’utilisateur
Aloïs
Timide
Messages : 425
Inscription : 02 août 2014, 13:44

Re: Widget Sapin Noel Animé

Message par Aloïs » 02 déc. 2014, 21:11

Waa ça me plais ! Désolé avec GIF et html je suis à font de mes capacités. Je suis pas contre une explication de l'animation css si tu comptes le détailler
Cuisine connectée : Porte Cachée

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

Re: Widget Sapin Noel Animé

Message par skyline-ch » 02 déc. 2014, 21:43

Comme promis pas MP je vais venir te donné un coup de main pour cette réalisation, et ont le fera ici pour que les membres qui souhaite suivre et apprendre puisse le faire.
Donc hésiter pas à poser vos questions et proposer des solution si vous en avez.

Je me met au boulot demain soir ;)
Compétence :
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP

Avatar de l’utilisateur
domomat
Actif
Messages : 943
Inscription : 21 juil. 2014, 20:19
Localisation : Johannesburg

Re: Widget Sapin Noel Animé

Message par domomat » 02 déc. 2014, 22:01

merci skyline-ch, à demain, je vais continuer à lire des trucs sur CSS...

http://www.w3schools.com/css/default.asp
https://developer.mozilla.org/fr/docs/Web/Guide/CSS
Jeedom --> Depuis Juillet 2014
VM Debian (NUC i5) - 100% Xiaomi Aqara & Yeelight
Détails ici

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

Re: Widget Sapin Noel Animé

Message par skyline-ch » 02 déc. 2014, 22:30

Si tu veux lire de bon petit truc tu peux aussi lire sur Jquery.

Pour ceux qui ne savent pas se que c'est, Jquery, c'est un framwork javascript qui simplifie des actions JS standard et routinière.
Exemple :
Pour sélectionner un élément sur une page avec JS il faut par fois plusieurs ligne de code, avec Jquery cela se fais en une seul ligne très simplement.
De plus cela vas plaire a Domomat, ont utilise souvent les sélecteur CSS pour cela ;)

Un peux de lecture :
http://openclassrooms.com/courses/simpl ... vec-jquery
http://openclassrooms.com/courses/jquer ... simplement

Pour les fainéant comme moi :
https://www.youtube.com/watch?v=N3ii2HxJAHo
Compétence :
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP

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 » 03 déc. 2014, 19:29

Bon je suis prêt a me mettre au boulot, petite question pour la direction a prendre, tu veux que l'action on off se fasse sur des boutons ou directement en cliquant sur le sapin ?
Compétence :
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP

totovaauski
Actif
Messages : 1926
Inscription : 05 juil. 2014, 11:21

Re: Widget Sapin Noël Animé

Message par totovaauski » 03 déc. 2014, 19:43

si je peux me permettre : + 1 sur le sapin !!
RPI3 + Dongle Aeon
Jeedom sur : Raspberry Pi + Raspberry compute
Mysensors , z-wave, xiaomi ...

https://www.youtube.com/watch?v=-bjbUg9d64g
https://www.youtube.com/watch?v=GPj1ozB ... _b-Toq47NQ

Avatar de l’utilisateur
domomat
Actif
Messages : 943
Inscription : 21 juil. 2014, 20:19
Localisation : Johannesburg

Re: Widget Sapin Noël Animé

Message par domomat » 03 déc. 2014, 19:50

skyline-ch a écrit :Bon je suis prêt a me mettre au boulot, petite question pour la direction a prendre, tu veux que l'action on off se fasse sur des boutons ou directement en cliquant sur le sapin ?
directement sur le sapin, STP...
Jeedom --> Depuis Juillet 2014
VM Debian (NUC i5) - 100% Xiaomi Aqara & Yeelight
Détails ici

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 » 03 déc. 2014, 20:12

ok donc c'est partis.

Ont commence avec le coté apprentissage discuter ;)

Pour commencé, il faut donc avoir un widget de type action.other et non pas infos.xxx.
Dans la config du virtuel ou du module, ont as besoin de 1 commande on et une off, qui doivent être afficher et sur les quelle ont vas appliquer le widget sapin.
Le principe c'est donc d'afficher qu'un seul des 2 boutons(sapin) en fonction de l'état de la prise.

Comment procéder pour la création du code :
C'est ma technique, il y en as surement d'autre, donc pour ma part j'aime bien commencer par imaginer le concept.
Dans notre cas avoir un sapin qui change en fonction de l’état et donc que je peux activer ou désactiver par clique dessus, suite de quoi j'envisage les évolutions plus poussée, comme par exemple pouvoir donné la possibilité a l'utilisateur de choisir les couleurs de la guirlande, de pouvoir afficher les lumière dans des position aléatoire, de pouvoir mélanger les couleurs, et de pouvoir choisir le nombres de lampe allumé.

Donc l'idée final semble complexe à réaliser c'est pourquoi il font découper le projet en couche de difficulté.

Je te propose donc de sauver ton code, et de partir d'une page vierge.
Compétence :
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP

Avatar de l’utilisateur
domomat
Actif
Messages : 943
Inscription : 21 juil. 2014, 20:19
Localisation : Johannesburg

Re: Widget Sapin Noël Animé

Message par domomat » 03 déc. 2014, 20:19

effectivement c'est ambitieux et oui, partons d'une page vierge, j'ai tellement joué avec le code, il n'est pas terrible.

Ce serait alors plus simple probablement de faire un PNG que pour le sapin et de faire les boules en CSS pour pourvoir changer la couleur plus facilement ?
Jeedom --> Depuis Juillet 2014
VM Debian (NUC i5) - 100% Xiaomi Aqara & Yeelight
Détails ici

Avatar de l’utilisateur
domomat
Actif
Messages : 943
Inscription : 21 juil. 2014, 20:19
Localisation : Johannesburg

Re: Widget Sapin Noël Animé

Message par domomat » 03 déc. 2014, 20:23

J'ai trouvé des boules (décorations) :
http://sixrevisions.com/css/how-to-crea ... ornaments/
Jeedom --> Depuis Juillet 2014
VM Debian (NUC i5) - 100% Xiaomi Aqara & Yeelight
Détails ici

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 » 03 déc. 2014, 20:26

Première couche de difficulté.

Créer le HTML qui ais si ont prend un corp humain le squelette, il as pour but de donné une structure de bas niveau pour tout les éléments d'une page

Pour ma part je met tout mes codes pour les widgets dans une "div", comme le widget es un objet unique sur la page (objet comportent plusieurs élément, comme un corps humain qui as plusieurs partie (bras, jambes, tête...)
puis ont met une balise "center" pour que le tout soit positionner correctement par rapport au autre widget.
En suite il faut ajouter un élément qui vas accueillir notre sapin, dans se cas je prendrais une "span", mais ont aurais pus prendre une "div"

On peux aussi déjà préparer la partie qui vas accueillir la partie javascipt avec les balise "script" que je place volontairement dans la première dive pour la cohérence de l'objet dans la lecture de la page
Ont obtiens donc notre squelette

Code : Tout sélectionner

<div>
   <center>
          <span></span>
   </center>
   <script>
   
    </script>
</div>
Compétence :
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP

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 » 03 déc. 2014, 20:30

domomat a écrit :J'ai trouvé des boules (décorations) :
http://sixrevisions.com/css/how-to-crea ... ornaments/
A garder de coté pour l'évolution et l'embellissement ultérieur quant le projet sera déjà fonctionnelle, car si ont intégré tout de suite sa risque de compliquer la création, ont reviens au principe de couche de difficulté

domomat a écrit :effectivement c'est ambitieux et oui, partons d'une page vierge, j'ai tellement joué avec le code, il n'est pas terrible.

Ce serait alors plus simple probablement de faire un PNG que pour le sapin et de faire les boules en CSS pour pourvoir changer la couleur plus facilement ?

effectivement ce serais mieux, mais ont vas utiliser ta première idée pour voir comment un projet peux évoluer et donc passer par toutes les étapes, mais au final ont fera avec du CSS tes boules
Compétence :
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP

Avatar de l’utilisateur
domomat
Actif
Messages : 943
Inscription : 21 juil. 2014, 20:19
Localisation : Johannesburg

Re: Widget Sapin Noël Animé

Message par domomat » 03 déc. 2014, 20:35

quelle est la différence entre span et div ?

merci google :

Ces deux balises sont des conteneurs qui sont destinés à structurer le contenu, mais ils ont un rôle complémentaire et des règles de rendu différentes. Span sert surtout à associer un style à une partie d'un texte tandis que div sert à agencer le contenu de la page.
Jeedom --> Depuis Juillet 2014
VM Debian (NUC i5) - 100% Xiaomi Aqara & Yeelight
Détails ici

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 » 03 déc. 2014, 20:42

donc une fois que l'ont as notre structure, il faut y mettre des infos utile et rendre les élément unique sur la page affin de pouvoir les cibler facilement et avoir les infos utils.

Pour cela ont ajoute au balise HTML des attributs.
Loïc utilise pas mal le data-xxx, perso j'utilise les ids, class, et attribut perso (c'est un choix de préférence)

Donc pour notre code on vas avoir besoin de divers class sur la "div primaire et sur la "span", ont vas aussi ajouter un attribut style et pour la "span" un id.
Pour ma part l'id (dois être unique sur la page)est composer d'un mot clé et de l'id de la commande se qui garanti qu'il soie unique, ont peux donc ici mettre "imgSapin#id#" (#id# sera remplacer par jeedom avec le numéro id de la commande)
Ont as la donc la première notion de variable, un concept très très importent pour javascript, il faut impérativement comprendre se que c'est qu'une variable

Ont as donc un code

Code : Tout sélectionner

<div style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor">
   <center>
          <span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="action" id="iconSapinCmd#id#"></span>
   </center>
   <script>
   
    </script>
</div>
Compétence :
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP

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 » 03 déc. 2014, 20:45

domomat a écrit :quelle est la différence entre span et div ?

merci google :

Ces deux balises sont des conteneurs qui sont destinés à structurer le contenu, mais ils ont un rôle complémentaire et des règles de rendu différentes. Span sert surtout à associer un style à une partie d'un texte tandis que div sert à agencer le contenu de la page.
Par le passer il y avais un réél impact a choisir l'un ou l'autre, car les div renvoie a la ligne, se qui n'ai pas le cas de la span, mais avec css3 ou 2 je sais plus ont as une propriété qui permet de modifier se comportement.
Ont as donc depuis plus tendance a les utiliser comme dis dans ton poste pour des agencements dans la structure du code
Compétence :
- Prog : HTML5, CSS3, JS, JQuery, SQL, PHP

Avatar de l’utilisateur
chamalo
Timide
Messages : 410
Inscription : 11 nov. 2014, 19:48

Re: Widget Sapin Noël Animé

Message par chamalo » 03 déc. 2014, 21:03

skyline-ch a écrit :

Code : Tout sélectionner

<div>
   <center>
          <span></span>
   </center>
   <script>
   
    </script>
</div>
alors vu qu'on est la pour apprendre et que ceux qui lisent mes post on du comprendre que je suis un "pro-bootstrap" je n’utilise plus <center> je préfère utiliser <div class="center-block">
domomat a écrit :quelle est la différence entre span et div ?
normalement <span> s'utilisent à l’intérieur d'un <div>, avec des librairies du type bootstrap l'usage en devient pratiquement obsolète, la balise html est plus la comme un marqueur, tout va ce joué sur la class et le CSS associé, n'oublions pas que le CSS permet de créer des class de style il est existe aussi des classe générique du type ".Maclasse div {}" qui veut dire applique ce style sur tout les <div> compris dans l’élément de classe MaClasse.
HTML5 et CSS3 sont prévu pour que chacun fasse son boulot, l'un s’occupant du contenu (HTML5) de la page l'autre de son style (CSS1/2/3)

Tu peut même en faire l’expérience remplace les span par des div ou vice-versa normalement cela presque aucun impact

je rajoute ces liens à ceux de @skyline-ch pour ceux qui veulent apprendre :
http://www.w3schools.com/
http://getbootstrap.com/getting-started/

et après clairement, on a cette chance aujourd'hui "Googles est votre ami" ;)
Dev: Plugins Thèmes - JeeRemote
Module Widget Facile dans le plugin Widget

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités