Merci beaucoup à Skyline-ch pour la création de ce sur le forum de Jeedom.
Étape 1 - Création du corps HTML
Créer le HTML est, si ont le compare à un corps humain, le squelette, il a pour but de donner 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 est un objet unique sur la page (objet comportent plusieurs élément, comme un corps humain qui a plusieurs parties (bras, jambes, tête...). Puis on met une balise "center" pour que le tout soit positionné correctement par rapport aux autres widgets. En suite il faut ajouter un élément qui va accueillir notre sapin, dans se cas je prendrais une "span", mais on aurais pu prendre une "div" (choix structurelle)
On peut aussi déjà préparer la partie qui vas accueillir la partie javascipt avec les balises "script" que je place volontairement dans la première div pour la cohérence de l'objet dans la lecture de la page On obtient donc notre squelette :
Code : Tout sélectionner
<div>
<center>
<span></span>
</center>
<script>
</script>
</div>Pour cela on ajoute aux balises 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 va avoir besoin de divers class sur la "div primaire et sur la "span", on va aussi ajouter un attribut style et pour la "span" un id. Pour ma part l'id (doit être unique sur la page) est composé d'un mot clé et de l'id de la commande ce qui garantit qu'il soit unique, ont peut donc ici mettre "imgSapin#id#" (#id# sera remplacé par jeedom avec le numéro id de la commande) On a là donc la première notion de variable, un concept très important pour javascript, il faut impérativement comprendre ce qu’est une variable
On a 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>Donc la première chose a faire c'est tester si on est sur allumé ou éteint. Pour se faire on va utiliser la variable #state# qui contient la valeur d'état du module, dans notre cas c'est une prise donc on aura soit un "0" soit un "1".
On utilise donc une structure conditionnelle JS (JS = javascript), on va utiliser le "if else" (en FR "si(condition) sinon")
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>
if('#state#' == '1' || '#state#' == 1){
//Code pour le cas de la lumière allumer
}else{
//cas pour la lumière éteins
}
</script>
</div>On va donc utiliser du Jquery, on va écrire 2 lignes qui afficherons dans la span l'image qui va avec l'état, dans un premier temps on va ne mettre qu'une image avec boules rouge pour l'état allumer, toujours pour rester dans l'évolution par couche que permet de vérifier que le mécanisme fonctionne sans voir un gros code chargé.
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>
if('#state#' == '1' || '#state#' == 1){
$('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png" width="54" height="75"/>');
}else{
$('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" width="54" height="75"/>');
}
</script>
</div>La chaine est composée de sélecteur css principalement mais on peut faire bien plus avec d'autre filtre (on va pas renter dans les détails ici pour le moment car les sélecteurs css suffiront)
$('#iconSapinCmd#id#') traduit, veut dire : $-> créer un objet Jquery, ('#iconSapinCmd#id#') -> avec l'élément html qui as l'id (# indique que l'on cherche un id) iconSapinCmd#id#
en suite on a .append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" width="54" height="75"/>');
le "." permet de lier la suite avec l'objet Jquery que l'on vient de créer, puis "append()" qui est une fonction Jquery (fonction = ensemble d'action javascript) la fonction append permet d’ajouter du contenu a l'intérieur de l'objet Jquery, il va ajouter le contenu donné entre les (), dans notre cas l'image du sapin. A la fin de notre code Jquery ne pas oublier de terminer avec un ";"
On peut déjà tester se code en appliquant le widget aux commandes on et off, on peut aussi laisser afficher l'état pour vérifier la cohérence des actions
Ok, donc là, on a 2 sapins et quand on click, rien ne se passe. Mais si on va forcer l'action dans les paramètres du module avec le bouton « tester » et que l'on revient sur la dashoard on peut voir que les sapins ont bien changé, ce qui confirme que le code na pas d'erreur et qu’il est bien fonctionnel.
Nous allons donc devoir, maintenant, ajouter l'action pour le click : Comme tout à l'heure, on va créer un objet Jquery avec le span qui contient le sapin $('#iconSapinCmd#id#'), on va luis ajouter la fonction "on", qui est une fonction qui gère tous les événements (clavier, souris, changement dans la page, etc., ...).
La fonction On comprend 2 paramètres, le premier c'est le type d’événement, dans notre cas se sera click, le second paramètre c'est une fonction dite anonyme car elle na pas de nom (on peut en passer d'autre mais restons concentrer sur le plus simple et se que l'on utilise dans notre cas)
Dans cette fonction anonyme on va utiliser une commande JS de Jeedom "jeedom.cmd.execute" qui prend en paramètre l'id de la commande à exécuter (je rentre pas dans le détail de ces para car cela compliquerait l'apprentissage)
On doit donc ajouter la commande suivante : $('#iconSapinCmd#id#'] .action').on('click', function() { jeedom.cmd.execute({id: '#id#'});}); Placer le tout après le if else ce qui donne :
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>
<span style="font-size: 3em;font-weight: bold;margin-top: -90px;" class="action" id="SapinCmd#id#">#state#</span>
</center>
<script>
if('#state#' == '1' || '#state#' == 1){
$('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_rouge.png" width="54" height="75"/>');
}else{
$('#iconSapinCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.Sapin_Anime/christmas_tree_OFF.png" width="54" height="75"/>');
}
$('#iconSapinCmd#id# img').on('click', function() {
jeedom.cmd.execute({id: '#id#'});
});
</script>
</div>