Bonjour les amis,
Une remarque sur cette page :
https://doc.jeedom.com/fr_FR/core/4.4/widgets
Sur les exemples pour les widgets, on trouve par exemple :
Jeedom.cmd.update['#id#']
N’y a t il pas un souci de majuscule en trop sur Jeedom ? ne serait ce pas jeedom ?
@kiboost ?
Merci, je me suis un peu cassé les dents dessus, je préfère vous le signaler
a+
Ah oui tout à fait ! Je vais faire les corrections merci
Hello,
en 4.4, ne faut-il pas favoriser maintenant jeedom.cmd.addUpdateFunction et jeedom.cmd.refreshValue ?
Exemple :
Si c’est ce que j’ai fait. et en js 
Super pour ces précisions.
Dans la logique de ce qui a été fait, il faut aussi faire bien attention à l’emplacement d’images qu’on utiliserait dans une tuile.
Ainsi, si je suis l’exemple du HygroThermographe, on place les images dans /var/www/html/plugins/monplugin/core/template/dashboard/cmd.info.string.alarm (alarm étant mon template) c’est ok ?
et ensuite, si on veut récupérer l’image dans la définition du template dans class on fait un truc du genre :
$return['info']['string']['alarm'] = array( 'template' => 'alarm', 'replace' => array("#hide_name#" => "hidden", "#marge_gauche#" => "55px", "#marge_haut#" => "15px"), 'monimage' => array( array( 'operation' => "#value# == ''", 'state_light' => "<img src='??????/etat1_light.png' title ='" . __('etat1', __FILE__) . "'>", 'state_dark' => "<img src='??????/etat2_light.png' title ='" . __('etat2', __FILE__) . "'>" ), array( 'operation' => "#value# != ''", 'state_light' => "<img src='??????/etat2_light.png' title ='" . __('etat1', __FILE__) . "'>", 'state_dark' => "<img src='??????/etat2_dark.png' title ='" . __('etat2', __FILE__) . "'>" ) ) );
Tout cela est toujours bon ? On met quoi à la place des ???
Merci pour ces évolutions, on tente de se mettre en conformité dès que possible.
C’est je pense la meilleure méthode a suivre pour ne pas éparpiller les images, c’est plus facile pour retrouver laquelle va avec quel template.
Par contre 'monimage' => array(..., monimage est inconnu pour le core, il faut mettre :
'test' => array( et ainsi utiliser le tag #test# et #change_theme# dans ton template :
Exemple du template tmplmultistate :
Si tes images sont stockées dans le dossier cmd.info.string.alarm le chemin devrait être :
plugins/NOMDUPLUGIN/core/template/dashboard/cmd.info.string.alarm"
Merci @Phpvarious et @kiboost j’avance bien…
Pour les images, je les ai mises au bon endroit.
Pour le test, j’ai mis :
$return['info']['string']['alarm'] = array( 'template' => 'alarm', 'replace' => array("#hide_name#" => "hidden", "#marge_gauche#" => "55px", "#marge_haut#" => "15px"), 'test' => array( array( 'operation' => "#value# == ''", 'state_light' => "<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-Off.png' title ='" . __('Alarm Off', __FILE__) . "'>", 'state_dark' => "<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-Off_dark.png' title ='" . __('Alarme Off', __FILE__) . "'>" ), array( 'operation' => "#value# != ''", 'state_light' => "<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-On.png' title ='" . __('Alarme On', __FILE__) . "'>", 'state_dark' => "<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-On_dark.png' title ='" . __('Alarme On', __FILE__) . "'>" ) ) );
J’ai remplacé jeedom.cmd.update par jeedom.cmd.refreshValue
J’ai remplacé jeedom.cmd.update[‹ #id# ›] = function(_options){ par jeedom.cmd.addUpdateFunction(‹ #id# ›, function(_options) {
J’ai compris qu’il fallait remplacer _options.display_value par _options.value
A ce stade, je suis bloqué, je n’arrive pas à trouver comment afficher mon image, celle que j’ai définie dans le test au dessus (en fonction du skin et s’il y a ou pas une valeur retournée.)
Avec 4.4.0 on peut afficher cette image ?
sur 4.3, je mettais juste #test# et l’image s’affichait, cela est refusé par 4.4
J’ai tenté d’afficher le contenu de #test# à l’ecran :
En le récupérant complet dans la console, voici le contenu de #test#
if (_options.display_value == '') {
cmd.setAttribute("data-state", 0)
state = jeedom.widgets.getThemeImg("<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-Off.png' title ='Alarm Off'>", "<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-Off_dark.png' title ='Alarme Off'>")
}
if (_options.display_value != '') {
cmd.setAttribute("data-state", 1)
state = jeedom.widgets.getThemeImg("<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-On.png' title ='Alarme On'>", "<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-On_dark.png' title ='Alarme On'>")
}
Pour être très clair sur ce que je souhaite faire : j’ai 2 images (alarme On et alarme Off) et une pour chaque skin (light ou dark).
Le résultat fonctionne sur 4.3, cela donne cela :
Quand il n’y a pas d’alarme :
Quand il y a une alarme :
Tu veut dire que avec le même code :
en 4.3 sa te ressort l’image et pas en 4.4 ? tu utilisais bien un template du core avant ? c’est pas dans le toHtml que tu initiais le tag #test# plutôt ?
car en 4.3 et 4.4, #test# est un morceau de JS, il faut donc bien le disposer dans ton widget :
oui, c’est ça, je cherche à comprendre.
J’ai edité mon post :
Tu peut tester avec le template du core :
Remplace 'template' => 'alarm', par 'template' => 'tmplmultistate',
se sera le template du core qui sera utilisé, et tu verra que l’image s’affichera correctement.
a relire ton post :
Je voit pas comment arriver a ce résultat, en utilisant le systeme de template du core, car le texte 19:00 Aujourd'hui sort certainement du toHtml 
a si, sauf si ce texte est la valeur ‹ #value# › 
Je transforme dans le script du widget (grâce à #value#), j’ai presque trouvé… je te dis quand c’est bon.
J’ai regardé le widget alarm sur ton plugin alexaapi (beta).
Je comprend que tu es plein d’erreur, en faite tu utilise la méthode jQuery
var cmd = $('.cmd[data-cmd_id=#id#]'); hors le code utilise maintenant une méthode full JS :
if (_options.display_value == '') {
cmd.setAttribute("data-state", 0)
state = jeedom.widgets.getThemeImg("<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-Off.png' title ='Alarm Off'>", "<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-Off_dark.png' title ='Alarme Off'>")
}
il faut utiliser
var cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]');
et ainsi modifier tous ce qui pointe vers cmd. en full js
Ensuite dans le code tu fait un traitement directement sur _options.display_value :
_options.display_value=inforecuperee.substr(11, 2)+":"+inforecuperee.substr(14, 2)+"<br>"
J’éviterai de modifier _options.display_value car #test# l’utilise :
Dans le cas de ton exemple c’est pas perturbent, car tu vérifie juste si il y a une valeur ou pas.
J’ai fait un test en partant de alexaapi version beta :
dans la class :
public static function templateWidget(){
$return = array('info' => array('string' => array()));
$return['info']['string']['alarm'] = array(
'replace' => array("#hide_name#" => "hidden","#marge_gauche#" => "55px", "#marge_haut#" => "15px"),
'template' => 'alarm',
'test' => array(
array(
'operation' => "#value# == ''",
'state_light' => "<img src='plugins/alexaapi/core/img/Alarm-Clock-Icon-Off.png' title ='" . __('Playing', __FILE__) . "'>",
'state_dark' => "<img src='plugins/alexaapi/core/img/Alarm-Clock-Icon-Off_dark.png' title ='" . __('En charge', __FILE__) . "'>"
),
array(
'operation' => "#value# != ''",
'state_light' => "<img src='plugins/alexaapi/core/img/Alarm-Clock-Icon-On.png' title ='" . __('En Pause', __FILE__) . "'>",
'state_dark' => "<img src='plugins/alexaapi/core/img/Alarm-Clock-Icon-On_dark.png' title ='" . __('En Pause', __FILE__) . "'>"
)
)
);
return $return;
}
Puis le widget, j’ai laissé des commentaires d’explications :
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tmplmultistate" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;margin-left: #marge_gauche#;margin-top: #marge_haut#;">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<span class="iconCmd"></span>
</div>
<div class="content-xs" >
<span class="cmdName #hide_name#">#name_display# </span><br><p><strong class="state #hide_state#"></strong></p>
</div>
<div class="value">
<span class="timeCmd#uid# timeCmd label label-default value"></span>
</div>
<script>
//jeedom.cmd.update['#id#'] = function(_options){ // ancienne méthode
jeedom.cmd.addUpdateFunction('#id#', function(_options) { // // nouvelle méthode
//var cmd = $('.cmd[data-cmd_id=#id#]'); // jQuery
var cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'); // JS
var now = new Date();
var inforecuperee=_options.display_value;
/* Modification des variables pour que _options.display_value reste brut */
if (inforecuperee == "none")
//_options.display_value="";
inforecuperee="";
else {
// 2019-12-02 19:45:00
//_options.display_value=inforecuperee.substr(11, 2)+":"+inforecuperee.substr(14, 2)+"<br>"
inforecuperee = _options.display_value.substr(11, 2)+":"+_options.display_value.substr(14, 2)+"<br>"
//if ((now.getFullYear()==inforecuperee.substr(0, 4)) && (now.getMonth() + 1 == inforecuperee.substr(5, 2))&& (now.getDate() == inforecuperee.substr(8, 2)))
//_options.display_value=_options.display_value+"Aujourd'hui";
if ((now.getFullYear()==_options.display_value.substr(0, 4)) && (now.getMonth() + 1 == _options.display_value.substr(5, 2))&& (now.getDate() == _options.display_value.substr(8, 2)))
inforecuperee=inforecuperee+"Aujourd'hui";
//else if ((now.getFullYear()==inforecuperee.substr(0, 4)) && (now.getMonth() + 1 == inforecuperee.substr(5, 2))&& (now.getDate() +1 == inforecuperee.substr(8, 2)))
//_options.display_value=_options.display_value+"Demain";
else if ((now.getFullYear()==_options.display_value.substr(0, 4)) && (now.getMonth() + 1 == _options.display_value.substr(5, 2))&& (now.getDate() +1 == _options.display_value.substr(8, 2)))
inforecuperee=inforecuperee+"Demain";
//else
//_options.display_value=_options.display_value+inforecuperee.substr(8, 2)+"-"+inforecuperee.substr(5, 2)+"-"+inforecuperee.substr(0, 4);
else
inforecuperee=inforecuperee+_options.display_value.substr(8, 2)+"-"+_options.display_value.substr(5, 2)+"-"+_options.display_value.substr(0, 4);
}
//cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate); // jQuery
cmd.setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate) // JS
//cmd.find('.state').empty().append(_options.display_value); // jQuery
cmd.querySelector('.state').innerHTML = inforecuperee // JS
if('#_time_widget_#' == '1'){
//jeedom.cmd.displayDuration(_options.valueDate, cmd.find('.timeCmd')); // jQuery
jeedom.cmd.displayDuration(_options.valueDate, cmd.querySelector('.timeCmd'), '#time#'); // JS
}else{
//cmd.find('.timeCmd').parent().remove();
}
var state = '';
//cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate+'<br/>Valeur : '+_options.display_value+'#unite#'); // jQuery
cmd.setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate) // JS
#test#
//cmd.find('.iconCmd').empty().append(state);
cmd.querySelector('.iconCmd').innerHTML = state
//var style = '';
if(!isNaN('#_desktop_width_#')){
//style = 'width:#_desktop_width_#px !important;'
cmd.querySelector('.iconCmd img').setAttribute('style', 'width:#_desktop_width_#px !important;') // JS
}
//cmd.find('.iconCmd img').attr('style',style); // jQuery déplacer en JS dans la condition ci-dessus
//cmd.off('changeThemeEventCmd').on('changeThemeEventCmd',function (event, theme) { //
document.body.addEventListener('changeThemeEvent', function() {
//console.log(theme);
console.log(jeedom.widgets.getThemeImg('Theme Light','Theme Dark'));
var state = '';
#change_theme#
if(state != ''){
//cmd.find('.iconCmd').empty().append(state); // jQuery
cmd.querySelector('.iconCmd').innerHTML = state // JS
}
//var style = '';
if(!isNaN('#_desktop_width_#')){
//style = '#_desktop_width_#px !important;'
cmd.querySelector('.iconCmd img').setAttribute('width', '#_desktop_width_#px !important;') // JS
}
//cmd.find('.iconCmd img').attr('style',style); // jQuery déplacer en JS dans la condition ci-dessus
});
//}
}) // nouvelle méthode
//jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }]) // Nouvelle méthode
/* // plus besoin
$('body').on('changeThemeEvent', function (event, theme) {
$('.cmd[data-cmd_id=#id#]').trigger('changeThemeEventCmd',theme);
});
*/
</script>
<!-- Hide parameters #_mobile_width_# -->
</div>
@Phpvarious sur class ? tu n’as rien changé, je ne vois pas de différence.
Sur mon Jeedom de dev, avec réorg des images je me suis arrêté à :
$return['info']['string']['alarm'] = array(
'template' => 'alarm',
'replace' => array("#hide_name#" => "hidden", "#marge_gauche#" => "55px", "#marge_haut#" => "15px"),
'test' => array(
array(
'operation' => "#value# == ''",
'state_light' => "<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-Off.png' title ='" . __('Alarm Off', __FILE__) . "'>",
'state_dark' => "<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-Off_dark.png' title ='" . __('Alarme Off', __FILE__) . "'>"
),
array(
'operation' => "#value# != ''",
'state_light' => "<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-On.png' title ='" . __('Alarme On', __FILE__) . "'>",
'state_dark' => "<img src='plugins/alexaapi/core/template/dashboard/cmd.info.string.alarm/Alarm-Clock-Icon-On_dark.png' title ='" . __('Alarme On', __FILE__) . "'>"
)
)
);
J’ai repris le Widget avec tes modifs, c’est presque bon, j’ai les icones mais pas les bons, je vais vérifier ce que fait le test (je pense qu’il y a un mélange entre none et ‹ ›. J’étais arrivé au même résultat que tes modifs (sauf le cmd.find que j’avais pas remplacé par cmd.querySelector).
Je suis presque au bout, une fois un widget opérationnel, je pourrai repasser les autres en revue.
Merci pour ton aide.
j’ai repris exactement ce qu’il y a dans le plugin.
Attention je me suis aussi aperçu d’un truc :
Alarm-Clock-Icon-Off.png et Alarm-Clock-Icon-Off_dark.png ne sont pas identique au niveau du logo.
Pourtant tu en prend bien compte dans le code :
if (inforecuperee == "none"){
//_options.display_value="";
inforecuperee="";
}
oui dans le widget mais pas dans la class, j’ai corrigé comme cela :
'operation' => "#value# != 'none'",
Je suis presque bon, j’ai juste un plantage au changement d’état. Quand j’ajoute une alarm, cela doit lancer un update et ça plante. Je cherche pourquoi.
Visiblement ça plante sur :
cmd.setAttribute('title', 'Date de valeur: ' + _options.valueDate + '<br>Date de collecte: ' + _options.collectDate) // JS
(Uncaught TypeError: Cannot read properties of null (reading ‹ setAttribute ›))
Le souci cest que dans la class tu verifie pas
operation’ => "#value# == ‹ none ›
Donc si tu as un event string == none, possible que sa perturbe le widget