Puisque le magnifique thermostat NEST n'est pas prêt d'être disponible en France avant pas mal de temps. Pourquoi ne pas se lancer dans la fabrication d'un thermostat virtuel type "Potar" pilotable en tactile sur nos tablettes.
Après quelques recherches, je suis tombé sur cette DEMO. Une fois décortiquée, je m'aperçois qu'il y a pas mal de variables en dur, et le simple fait de vouloir un potar plus gros, m'embarque dans des calculs de dingue. En plus cette démo inclut foultitude de css et de script js. Et je voulais également que le potard puisse tourner librement sans "butée".
Donc pourquoi pas simplifier et s'adapter.
Liste des composants :
- JQuery (intégré dans HomeAutomate) et permettant de faire des IHM sympa.
- Une image de potar (désolé pour la qualité)
- Une fonte type LCD bleu néon.
On commence par intégrer le style (surtout les fontes) :
<style>
a img {
border: none;
}
a {
color: #FFF;
}
@font-face {
font-family: "FontLCD";
src: url(fonts/DS-DIGI.TTF) format("truetype");
}
p.lcdfont {
font-family: "FontLCD", Verdana, Tahoma;
font-size:85px;
color:#5ac3f1;
}
</style>
Puis vient la partie JQuery, il faut importer JQuery Core et un plugin dédié aux rotations
Ex :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jQueryRotateCompressed.js"></script>
Enfin vient la partie script JQuery (y a surement moyen d'optimiser, je ne trouve pas fluide le défilement):
<script type="text/javascript">
$(document).ready(function(){
// Variable pour le dernier angle calculé
var lastAngle=0;
// Variable pour la dernière position en abcisse
var lastx=0;
// Variable pour le dernier signe calculé
var lastSign="+";
// Variable pour savoir si le boutton de la souris est pressé.
var mouseDown="";
// température par défaut au commencement
var temperature=19;
$( "#temperature" ).html( "19.0°C");
$('#potar').mousedown(function(e){
// Lorsqu'on appuie sur le bouton de gauche, on autorise le thermostat à bouger
mouseDown="ok";
});
$('*').mouseup(function(e){
// Lorsqu'on relache le bouton de gauche, on n'autorise plus le thermostat à bouger
mouseDown="";
});
$('#potar').mousemove(function(e){
// Si on est autorisé à bouger
if ( mouseDown == "ok" )
{
var left=e.pageX- this.offsetLeft;
var top=e.pageY - this.offsetTop;
var width=$('#potar').width();
var height=$('#potar').height();
var sens="";
if ( lastx < (left) && (height/2 - top ) > 0)
{
sens="+";
}
if ( lastx >= left && (height/2 - top ) > 0)
{
sens="-";
}
if ( lastx <= (left) && (height/2 - top ) < 0)
{
sens="-";
}
if ( lastx >= left && (height/2 - top ) < 0)
{
sens="+";
}
// Si rien ne bouge on conserve le même signe
if ( lastx == left )
{
sens=lastSign;
}
// Si le sens est positif on fait tourner le disque, et on augmente la t°
if ( sens == "+" )
{
lastAngle+=1;
temperature+=0.1;
}
else
{
lastAngle-=1;
temperature-=0.1;
}
// Arrondi au Dixième
temperature=Math.round(temperature*10)/10;
// Si le sens est indeterminable, on garde le dernier
if ( sens != "" )
{
lastSign=sens;
}
// On effectue une rotation
$('#potar').rotateAnimation(lastAngle);
lastx = left;
$( "#temperature" ).html( temperature +"°C");
}
});
});
</script>
Puis la partie HTML :
<body style="background: #000; color: #FFF;">
<p name="temperature" id="temperature" class="lcdfont" style="text-align: center;" ></div>
<div style="text-align: center;"><img draggable="false" id="potar" src="img/potar.png" /></div>
</body>
Résultat :
jquery knob rotate
