Bonjour à tous,
Je suis en train d’intégrer mes tous-nouveaux thermostat Heatit z-TRM6 via jMQTT et je suis sur le visuel (j’utilise essentiellement le mode « Vue » sur mobile pour gérer Jeedom).
Sur le thermostat, j’ai une information numérique sur la sonde utilisée et 2 actions (sonde interne (valeur 1) VS marche forcée (valeur 5)) (je n’ai pas configuré les autres car non utiles dans mon cas mais il y en 6 de possible en tout (sonde externe, sonde au sol, combo multiples)) pour changer la valeur.
Je me suis donc fait un widget avec un effet de transition entre sonde interne et marche forcée.
Lorsque je clique sur sonde interne, l’encadré bleu glisse (capture d’écran en cours de glissade) :
Jusqu’à la position finale et vice versa :
Comme il s’agit d’action défaut et non slider, je dois gérer l’affichage et le masquage de l’autre commande. C’est là que ça cafouille, je l’ai pourtant fait de nombreuses fois.
Quand le widget se charge, il est systématiquement sur « sonde interne » même si c’est le widget de marche forcée qui est actif : je n’arrive pas à faire le décalage à l’ouverture en fonction de _options.valueDate
Voici le code du widget actuel :
<div class="cmd cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div class="cmdName">#valueName#</div>
</div>
<div id="conteneur_menu#id#">
<span id="font_glissant#id#" class="font_glissant#id#"></span>
<div id="menu#id#">
<span id="btn1#id#" onclick="font_glissant#id#.style.left = getPosition(this).left - getPosition(getElementById('conteneur_menu#id#')).left + 'px';">Sonde interne</span><span id="btn2#id#" onclick="font_glissant#id#.style.left = getPosition(this).left - getPosition(getElementById('conteneur_menu#id#')).left + 'px';">Marche forcée</span>
</div>
</div>
<style>
#conteneur_menu#id#{
border: 5px solid white;
border-radius: 8px !important;
}
#btn1#id#,#btn2#id# {
display: inline-block;
width: 100px;
font-weight: bold;
color: black;/*var(--link-color)*/;
font-size: 12px !important;
line-height: 30px;
background: white;
}
#font_glissant#id#{
background: #428BCA;
opacity: 0.6;
width: 100px;
position: absolute;
top: 0px;
left:5px;
transition: 1s;
z-index: 0;
border: 5px solid white;
border-radius: 10px !important;
height: 40px;
}
</style>
<script>
function getPosition(el) {
var x = 0;
var y = 0;
while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
x += el.offsetLeft - el.scrollLeft;
y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return {top: y, left: x};
}
jeedom.cmd.addUpdateFunction('#id#',function(_options) {
let cmd = $('.cmd[data-cmd_id=#id#]')
if ('#_time_widget_#' != '1') {
cmd.find('.timeCmd').parent().remove()
}
if (_options.display_value == 1) {//Sonde interne
if ('#name#' == 'Marche forcée') {
cmd.show();
//cmd.find('.font_glissant#id#').style.left='5px';
} else if ('#name#' == 'Sonde interne') {
cmd.hide();
}
} else if (_options.display_value == 5) {//Marche forcée
if ('#name#' == 'Marche forcée') {
cmd.hide();
} else if ('#name#' == 'Sonde interne') {
cmd.show();
//cmd.find('.font_glissant#id#').style.left='105px';
}
}
if ('#_time_widget_#' == '1') {
jeedom.cmd.displayDuration(_options.valueDate, cmd.find('.timeCmd'), '#time#')
}
});
jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}])
$('.cmd[data-cmd_uid=#uid#] #btn1#id#').off().on('click', function () {
jeedom.cmd.execute({id: '#id#'})
})
$('.cmd[data-cmd_uid=#uid#] #btn2#id#').off().on('click', function () {
jeedom.cmd.execute({id: '#id#'})
})
</script>
</div>
Si une âme charitable a des pistes, je suis preneur.
Mon explication n’est peut être pas clair, je vais essayer de faire une vidéo du comportement actuel
Merci
Caelion