Bonjour,
Je suis toujours sur mon projet de programmateur d’arrosage et je cherche maintenant à créer un widget qui permet, en prenant peu de place, de sélectionner quel(s) jour(s) de la semaine sans devoir créer un couple de commande info / action par jour possible.
L’idée c’est de coder la semaine sur un mot binaire au chaque jour à un poids différent (lundi = 1, mardi = 2, mercredi = 4, jeudi = 8, vendredi = 16, samedi = 32 et dimanche = 64 ainsi, si lundi et dimanche sont actif le mot vaut 65, si tous les jours sont actif, le mot vaut 127… bref du binaire classique) mais pour l’instant j’en suis pas là.
Mon problème c’est déjà de créer le widget avec les 7 cases à cocher.
Pour essayer de comprendre un peu le fonctionnement du code des widgets, je suis parti d’un modèle binaire tout simple qui afficher une case cochée ou non en fonction de la valeur.
concrètement j’ai ça :
<div class="cmd cmd-widget cursor" data-type="action" data-subtype="other" data-template="tmpliconline" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="content-xs">
<span class="cmdName ">#valueName#</span><span class="execute iconCmdLine tooltips tippied" data-title="#name#"></span>
</div>
<div class="timeCmd label label-default history cursor" data-type="info" data-cmd_id="#value_id#"></div>
<script>
document.querySelector('.cmd[data-cmd_uid=#uid#] .execute').addEventListener('click', function() {
jeedom.cmd.execute({ id: '#id#' })
})
jeedom.cmd.addUpdateFunction('#id#', function(_options) {
if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
if ('#_time_widget_#' == '1' || '#time#' == 'duration' || '#time#' == 'date') {
jeedom.cmd.displayDuration(_options.valueDate, cmd.querySelector('.timeCmd'), '#time#')
}
if (_options.display_value >= 1 || _options.display_value == 'on') {
if (jeedom.cmd.normalizeName('#name#') == 'on') {
cmd.unseen()
} else {
cmd.seen()
cmd.querySelector('.iconCmdLine').innerHTML = "<i class='icon jeedom2-case_ok'></i>" //"#_icon_on_#"
}
} else {
if (jeedom.cmd.normalizeName('#name#') == 'off') {
cmd.unseen()
} else {
cmd.seen()
cmd.querySelector('.iconCmdLine').innerHTML = "<i class='icon jeedom2-case'></i>" //"#_icon_off_#"
}
}
}
})
jeedom.cmd.refreshValue([{ cmd_id: '#id#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])
</script>
</div>
Et ça fait précisément ce pourquoi c’est fait : afficher une case cochée ou non.
Bref, maintenant mon problème c’est de lui faire afficher 7 cases, un peu comme ça : (exemple fait sous paint)
Mais je n’ai aucune idée de comment faire ça, ni même si c’est possible ?
J’ai tenté ça :
<div class="content-xs">
<span class="cmdName ">#valueName#</span><span class="execute iconCmdLine tooltips tippied" data-title="#name#"></span>
<span class="cmdName ">#valueName#</span><span class="execute iconCmdLine tooltips tippied" data-title="#name#"></span>
</div>
<div class="timeCmd label label-default history cursor" data-type="info" data-cmd_id="#value_id#"></div>
ou ça :
<div class="content-xs">
<span class="cmdName ">#valueName#</span><span class="execute iconCmdLine tooltips tippied" data-title="#name#"></span>
<span class="cmdName ">#valueName#</span><span class="execute iconCmdLine tooltips tippied" data-title="#name#"></span>
</div>
<div class="content-xs">
<span class="cmdName ">#valueName#</span><span class="execute iconCmdLine tooltips tippied" data-title="#name#"></span>
<span class="cmdName ">#valueName#</span><span class="execute iconCmdLine tooltips tippied" data-title="#name#"></span>
</div>
Juste pour voir ce que ça donne, mais dans un cas comme dans l’autre, j’ai bien le texte associé à #valueName# qui s’affiche 2 fois, mais j’ai qu’une seule case qui s’affiche.
En gros je ne sais comment dire au moteur de Jeedom qu’il doit afficher plusieurs choses aux endroits voulu.
Quelqu’un pour m’expliquer comment ça marche, ou me donner un liens vers une doc qui l’explique ?
Merci d’avance.