Page 1 sur 1

Widget Thermostat numérique-resize

Publié : 04 déc. 2018, 21:49
par seb5167
Salut les jeunes,

je voulais un thermostat avec juste la valeur de consigne et un bouton + et un bouton -.

J'ai trouvé ce post viewtopic.php?t=21295 mmais je ne trouve pas de widget bouton + et -

J'ai donc utilisé le widget dashboard.action.slider.thermostat_numerique du market. Cela correspond à mes besoins sauf que ce widget n'est pas redimensionnable, pas de clic droit possible, je ne peux pas le déplacer...

J'ai modifié le code pour réduire la taille, enlevé l'icone...mais impossible d'autoriser le dimensionnement et j'ai encore un mauvais positionnement des boutons.

Comment rendre le widget déplaçable et redimensionnable dans le design

Merci d'avance pour votre aide

<div class="cmd" data-type="action" data-subtype="slider" data-cmd_id="#id#" style="min-width:180px;min-height:60px;font-size: 10;" >
<center>
<div class="btn-group">
<div style="width: 100%; text-align:center;">
<div style="float: left; height: 90px;">
<span style="font-size: 0em; margin-right: 10px;" id="sbjs_icon#id#"></span>
<span style="font-size: 1em; font-weight: normal;" id="valeur#id#"></span>
<span style="font-size: 12px">#unite#</span>
</div>
<div style="float: left; margin-top: 8px; width: 35px; height: 80px; font-size: 2em; text-align: center; line-height: 30px;">
<a style="cursor: pointer;" class="btn-sm bt_plus" ><i class="fa fa-1x fa-plus-square"></i></a>
<br />
<a style="cursor: pointer;" class="btn-sm bt_minus" ><i class="fa fa-1x fa-minus-square"></i></a>
</div>
</div>
</div>
</center>
<script>
var sbjs_Timer#id#;

/***** Init *****/
$('#valeur#id#').text( parseFloat(#state#).toFixed(1) );
setTimeout(sbjs_updateIcon#id#, 50);

/***** + *****/
$('.cmd[data-cmd_id=#id#] .bt_plus').on('click', function () {
$('#valeur#id#').text( parseFloat(parseFloat($('#valeur#id#').text()) + 0.5 ).toFixed(1) );
setTimeout(sbjs_updateIcon#id#, 50);

clearTimeout(sbjs_Timer#id#);
sbjs_Timer#id# = setTimeout(sbjs_Save#id#, 1500);
});

/***** - *****/
$('.cmd[data-cmd_id=#id#] .bt_minus').on('click', function () {
$('#valeur#id#').text( parseFloat(parseFloat($('#valeur#id#').text()) - 0.5 ).toFixed(1) );
setTimeout(sbjs_updateIcon#id#, 50);

clearTimeout(sbjs_Timer#id#);
sbjs_Timer#id# = setTimeout(sbjs_Save#id#, 1500);
});

/***** Mise à jour de l'icone en fonction de la température *****/
function sbjs_updateIcon#id#() {
var sbjs_temp#id# = parseFloat( $('#valeur#id#').text() );

if ( sbjs_temp#id# < 18 )
$('#sbjs_icon#id#').html('<i class="icon jeedom-thermo-froid"></i>');
else if ( sbjs_temp#id# <= 23 )
$('#sbjs_icon#id#').html('<i class="icon jeedom-thermo-moyen"></i>');
else
$('#sbjs_icon#id#').html('<i class="icon jeedom-thermo-chaud"></i>');
}

/***** Envoi de la nouvelle consigne *****/
function sbjs_Save#id#() {
jeedom.cmd.execute({
id: '#id#',
value: { slider: parseFloat( $('#valeur#id#').text() ) }
});
}
</script>
</div>

Re: Widget Thermostat numérique-resize

Publié : 06 déc. 2018, 21:35
par seb5167
Quelqu'un aurait une idée?

Re: Widget Thermostat numérique-resize

Publié : 09 févr. 2019, 15:01
par patoche94
Bonjour seb, j'avais le même problème que toi
J'ai résolu mon problème en m'inspirant du widget "timebutton"
Il te suffit de remplacer la 1ère ligne du code du widget par celle-ci :

<div class="cmd #history# #minValue# #maxValue# tooltips cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid=#uid# style="min-width:200px;min-height:60px;margin-right:5px;margin-left:5px;padding:0px !important;font-size: 10;" >


Le widget peut alors être déplacé ou supprimé dans un design
Pour changer sa taille, tu peux jouer sur les paramètres d'affichage (clic droit sur le widget dans ton design) : tu spécifies une taille d'affichage < 1 (0.9 pour réduire de 10% la taille). J'ai d'ailleurs augmenté la "min-width" à 200 dans la ligne ci-dessus sinon les boutons +/- passaient à la ligne

Dis moi si ça marche