Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

Widget Thermostat numérique-resize

Pour échanger sur les plugins classés en catégorie "Bien-être/Confort"
seb5167
Timide
Messages : 10
Inscription : 14 oct. 2018, 16:38

Widget Thermostat numérique-resize

Message par seb5167 » 04 déc. 2018, 21:49

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>

seb5167
Timide
Messages : 10
Inscription : 14 oct. 2018, 16:38

Re: Widget Thermostat numérique-resize

Message par seb5167 » 06 déc. 2018, 21:35

Quelqu'un aurait une idée?

patoche94
Timide
Messages : 93
Inscription : 01 nov. 2017, 20:31

Re: Widget Thermostat numérique-resize

Message par patoche94 » 09 févr. 2019, 15:01

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

Répondre

Revenir vers « [Catégorie] Confort / Bien-être »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité