Bonjour,
Je voudrais avoir un retour visuel de l’état de mes lumières, comme avec le widget light slider mais uniquement une LightBulb en gris si off et si on elle prend la couleur de ma valeur.
J’ai des phililps hue en lumière et je m’y connais pas en widget.
Merci d’avance 
Salut a tous, j’ai avancé sur le widget mais je bloque sur la variable pour changer de couleur automatiquement, je vous mets le code :
<div>
<span class="cmdName #hide_name#">#name_display# </span> <strong class="state"></strong>
<span id="lightbulb"> </span>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
var color = '#state#' ;
var cmd = $('.cmd[data-cmd_id=#id#]');
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(_options.display_value)
cmd.find('#lightbulb').html('<i class="far fa-3x fa-lightbulb"></i>')
}
//on récupère l'élément
var elmt = document.getElementById("lightbulb");
// on modifie son style
elmt.style.color = 'color';
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
</script>
</div>
Si je remplace ma variable ‹ color › a elmt.style.color en une couleur ça change mais pas avec la variable.
Et je suis obligé de recharger le widget pour que les modifications s’applique. Une solution ?
C’est un problème de « portée » de variable.
La variable color traitée par la fonction jeedom.comd.udate n’est visible qu’a l’intérieur de cette fonction. Une fois sortie du bloc code de cette fonction elle n’est plus visible. Donc en dehors de ce bloc la variable color que tu utilises est « flottante » càd non définie…
Je ne comprends pas pourquoi tu mets la portion de code //on récupère l’élément en dehors de la fonction update dans ton cas.
Je ne m’y connais pas du tout, je vais essayer de la mettre à l’intérieur de la commande update
@Yves19 ça fonctionne bien mais je suis obligé d’actualiser ma page pour que la couleur s’actualise, je pense qu’il faut que j’ajoute une ligne pour mettre à jour mais je ne sais pas quoi ?
Une idée ?
Remets nous une copie de ton code actualisée
Merci
Bonjour @Yves19 ,
Désolé pour le temps de réponse, voici le code :
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div>
<!-- <span class="cmdName #hide_name#">#name_display# </span> <strong class="state"></strong> -->
<span id="lightbulb"> </span>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
var color = '#state#' ;
var cmd = $('.cmd[data-cmd_id=#id#]');
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(_options.display_value)
cmd.find('#lightbulb').html('<i class="far fa-3x fa-lightbulb"></i>')
//on récupère l'élément
var elmt = document.getElementById("lightbulb");
// on modifie son style
elmt.style.color = color;
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
</script>
</div>
Bonjour,
J’ai fais une modifications dans mon code, mais je n’ai toujours pas la mise a jour automatique des lumières, je suis obligé d’actualisé. Quelqu’un a une solution ?
Je mets le code ci dessous.
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div>
<!-- <span class="cmdName #hide_name#">#name_display# </span> <strong class="state"></strong> -->
<span id="lightbulb#id#"> </span>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
var color = '#state#' ;
var cmd = $('.cmd[data-cmd_id=#id#]');
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(_options.display_value)
cmd.find('#lightbulb#id#').html('<i class="far fa-3x fa-lightbulb"></i>')
//on récupère l'élément
var elmt = document.getElementById("lightbulb#id#");
// on modifie son style
elmt.style.color = color;
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
</script>
</div>
Salut,
Pas l’occasion de tester mais dans la fonction de mise à jour auto il faut utiliser _options.display_value et non pas #state#.
A voir s’il n’y a que ça à corriger ?!
Nickel ça fonctionne parfaitement !
Je mets le widget corrigé ci dessous, il est applicable sur une Info, Autre qui a une couleur en hex : #000000 ou aurte!
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div>
<!-- <span class="cmdName #hide_name#">#name_display# </span> <strong class="state"></strong> -->
<span id="lightbulb#id#"> </span>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
var color = _options.display_value ;
var cmd = $('.cmd[data-cmd_id=#id#]');
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('_options.display_value').empty().append(_options.display_value)
cmd.find('#lightbulb#id#').html('<i class="far fa-3x fa-lightbulb"></i>')
//on récupère l'élément
var elmt = document.getElementById("lightbulb#id#");
// on modifie son style
elmt.style.color = color;
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
</script>
</div>
Je mettrais un petit GIF dans la soirée ! Et merci à @Yves19 et @Salvialf !
Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.