Je me lance dans une explication sur le codage des widgets en 3.x,
ces informations m'ont manquées pour la correction de mes widgets
Merci à ceux qui m'ont fournit ces infos (@Cadavor, @Claude69, @JAG, @domoggvad, ...)
Si il y a des erreurs, je m'en excuse par avance, n'hésitez pas à me corriger
PRINCIPE DE BASE :
Le bon codage des widgets, permet de rafraîchir une information (texte, image, icone, ...) dans une vignette sans que toute la page soit rafraîchir.
Les informations qui ne changent pas : le label d'une commande, l'unité d'une valeur, n'ont pas besoin d'être mise à jour. Elles le seront automatique si vous modifiez ces informations dans votre virtuel lors de la sauvegarde.
Donc pour tout ce qui change souvent, la température d'une sonde, l'image d'une prise, ... il faut que ce soit codé dans le widget.
CORPS DU WIDGET
Code : Tout sélectionner
jeedom.cmd.update['#id#'] = function(_options){
[...]
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
Pour l'affichage des informations, le widget est composé de balise html DIV ou SPAM entre autre.
Pour que l'information contenue dans ces balises soit mise à jour, il faut qu'elle est une CLASS
Cette CLASS sera utilisée comme référence pour lancer la mise à jour de la valeur
EXEMPLE avec l'information STATE :
Je veux afficher la valeur de ma commande et qu'elle soit mise à jour en automatique
J'ai donc ma balise SPAN :
Code : Tout sélectionner
<span class='label label-info' style="font-size: 10px;">#state#</span>
Code : Tout sélectionner
$('.cmd[data-cmd_uid=#uid#] .label-info').html(_options.display_value);
Si la valeur est suivi de l'unité, rien de plus à faire que d'ajouter #unite# après le #state# dans la balise SPAN, puisque cette information n"évolue pas et de l'ajouter dans la partie script sous la forme
Code : Tout sélectionner
$('.cmd[data-cmd_uid=#uid#] .label-info').html(_options.display_value+' #unite#');
Code : Tout sélectionner
$('.cmd[data-cmd_uid=#uid#] .label-info').html(_options.display_value + '%');
VIDER LES INFORMATIONS PRECEDENTES :
Il est possible de vider l'info ou l'image présente, afin d'éviter l'effet double image.
Soit pour tout, il faut alors ajouter
Code : Tout sélectionner
$('.cmd[data-cmd_uid=#uid#] .iconCmd').empty();
Soit pour une commande, en ajout : .empty()
Exemple :
Code : Tout sélectionner
$('.cmd[data-cmd_uid=#uid#] .label-info') .empty() .html(_options.display_value + '%');
En ajoutant .hide()
Exemple :
Code : Tout sélectionner
$('.cmd[data-cmd_uid=#uid#] .label-info').hide().html(State + '%');
EXEMPLE AVEC UNE VALEUR DANS UNE BALISE IMAGE
Si vous voulez mettre à jour une image (par exemple provenant d'une caméra)
C'est une balise IMG qui faut utiliser
Code : Tout sélectionner
<img class"iconCmd" style="width:180px" width="180px" src="core/php/downloadFile.php?pathfile=/tmp/jeedom/ftpd/ftpd_records#state#" />
Pour la partie SCRIPT, on garde le même principe mais là c'est dans un attribut de l'image que l'on change la valeur, donc utilisation de .attr
Code : Tout sélectionner
$('.cmd[data-cmd_uid=#uid#] .iconCmd').attr('src', "core/php/downloadFile.php?pathfile=/tmp/jeedom/ftpd/ftpd_records" + _options.display_value);
Là c'est plusieurs icones possible pour une même zone, donc on à la balise DIV ou SPAN qui va recevoir l'icone
Code : Tout sélectionner
<span style="font-size: 2.5em; font-weight: bold; margin-top: 5px;" class="iconCmd"></span>
Code : Tout sélectionner
if (_options.display_value == "Fermé") { $('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="fa fa-eye-slash"></i>'); }
if (_options.display_value == "Ouvert") { $('.cmd[data-cmd_uid=#uid#] .iconCmd').append('<i class="fa fa-eye"></i>');}
Après dans le contenu du append, qui peut être remplacé par html, on retrouve le code HTML, qui peut être l'affiche d'un icone comme ci-dessus ou d'une image avec une balise IMG
Exemple :
Code : Tout sélectionner
$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.ActifInactifSlide/ToggleSlide_ON.png" />');
NDA : il doit surement y avoir une différence entre ces 2 attribues append et html ?
VALEURS COLLECTÉES :
Les 2 dernières lignes de la partie SCRIPT du Widget :
Pour afficher les informations de mise à jour au passage de la souris sur la vignette
Code : Tout sélectionner
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
Par exemple la durée d'ouverture ou de fermeture d'une fenêtre
Code : Tout sélectionner
<span class="timeCmd#uid#" style="background-color:#cmdColor# !important;padding : 3px;border-radius: 4px"></span>
jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));
WIDGET ACTION
Là c'est un peu plus compliqué, je pige pas trop le système avec les show et le hide
Il faut dans un 1er temps, tester la valeur, qui peut être numérique et/ou alpha
Code : Tout sélectionner
if (_options.display_value == 1 || _options.display_value == 'on') {
NDA: mais est-ce que cela implique que les 2 commandes actions, doivent avoir ON et OFF dans le nom ?
Code : Tout sélectionner
if (jeedom.cmd.normalizeName('#name#') == 'on') {
$('.cmd[data-cmd_id=#id#]').hide();
}else{
$('.cmd[data-cmd_id=#id#]').show();
$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('IMAGE QUAND ON');
}
} 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('IMAGE QUAND OFF');
}
Si la valeur retournée par le clique sur l'image (résultat de la commandes action) me retour 1 ou on
alors si le nom de ma commande action contient on alors je la cache, sinon je l'affiche avec l'image indiquée, correspondant au ON
Si la valeur retournée est ni 1, ni on, donc par déduction 0 ou off
alors si le nom de ma commande action contient off alors je la cache, sinon je l'affiche avec l'image indiquée, correspondant au OFF
NDA : c'est là que je comprends pas, prenons l'exemple de la prise.
Sur ma vignette la prise est verte, sa valeur à 1 ou ON, la prise est allumée
Si j'appuis sur l'image de la prise, je passe à la valeur 0 ou OFF, je devrais donc cacher donc l'image de la prise verte (On) et afficher celle de la prise rouge (off)
Voici ce qui j'ai pu réunir, j'espère qu'il n'y a pas trop d'erreur,..
j'ai mis les questionnements qui persistes en NDA, si qqun peut les éclaircies, merci d'avance