Dans ce post précédent, je m'étais essayé à faire un potentiomètre de thermostat réglable à la souris ou au touché pour nos tablettes.
La société NEST semble pour l'instant ne distribuer ces thermostats qu'aux Etats Unis ou Canada, en tout cas pas en France. En regardant le cablage de l'appareil, il est vrai qu'on est loin des symboles que l'on peut retrouver dans nos contrées Européenes.
Donc pourquoi ne pas s'en faire un virtuel qui dialoguerait avec HomeAutomate ?
Les outils :
JQuery qu'on ne présente plus et les css3 qu'on ne présentent plus non plus.
Un éditeur de texte (Notepad++) par exemple.
Les fonctions demandées :
Mode température : je souhaite pouvoir régler la température facilement.
Mode soufflante: je souhaite pouvoir régler la soufflante VMC facilement.
Mode demande de chauffage : je souhaite forcer la chaudière pour 2 ou 4h.
Exigences esthétiques et ergonomiques :
Réglage par rotation, sélection par clic ou pression digitale (Amélioration par
rapport à la dernière version, fini les accoups, utilisation de la tangente au
lieu de sin et cos)
Look : Le plus proche possible du vrai modèle.
Compatibles Chrome/FF/IE/Autres
Voici donc le résultat, je ne poste pas ici toutes les sources (car vite illisibles) mais voici le lien pour les obtenir. Voici également le lien vers la DEMO en ligne.
Mode d'emploi :
Lorsque l'on charge la première fois la page, le thermostat est sur Off. Pour l'allumer, il faut cliquer sur 'nest'
Automatiquement, le thermostat se place sur le mode ventilation (AIRWAVE)
par défaut la valeur est de 50.
Pour faire varier la valeur, rien de plus simple, cliquez et rester appuyé dans le disque noir et dirigez vous autour du disque. La valeur doit augmenter ainsi que la couleur de fond.
La petite feuille verte indique le mode d'économie d'énergie. Pour passer au mode température, cliquez sur nest 2 fois, la navigation reste la même :
Pour une demande express de chauffage, cliquez sur nest jusqu'à voir le mode Heat Now, là, le thermostat vous demande pour combien de temps voulez-vous que la chaudière se mette en route (2h ou 4h)
Cliquez sur 2h ou 4h à votre convenance.La confirmation est affichée à l'aide de la petite flamme en bas. Pour supprimer la demande il suffira de cliquer sur la flamme :
Voilà pour cette deuxième partie, on verra dans une troisième partie comment faire dialoguer le thermostat avec HomeAutomate, utilisation d'Ajax.
Conclusion : Je n'avais pas trop testé l'association Css/Jquery, mais je dois dire que le travail est facilité par diverses fonctions. J'ai testé le code sur Chrome et FireFox, je dirais que Chrome est plus rapide, mais l'affichage des barres de progressions parait moins propre.
jquery knob rotate nest thermostat
Très beau ! Bon boulot ! Par contre, cela ne fonctionne pas a partir d'un iphone ou d'un ipad, c'est dommage. As tu une solution ?
RépondreSupprimerMerci, L'ipad fonctionne avec un navigateur SAFARI ou autre chose de particulier ?
RépondreSupprimerTrès sympa, bravo! Pour ma part, je tente de l'incorporer dans un framework web que j'assemble pour controler un système de domotique OpenSource ... DomoCAN. C'est basé sur un serveur NGINX pour faire du push (COMET) qui permet d'envoyer en streaming des infos en provenance du système (status, temp, ex.)
RépondreSupprimerJe me demandais si il y avait un moyen d'avoir au démarrage l'état actuel du sytème au lieu de revenir à 0?
Merci, Henry
Salut Henry,
SupprimerSympa ton projet ! tu as un blog ? J'avance pas mal en ce moment sur le mien pas trop le temps de mettre des posts, ça va reprendre avec l'hiver et la neige ;).
Pour mettre des valeurs à l'initialisation, c'est faisable sans problème, il suffirait de se faire une petite fonction init qui à l'aide d'ajax viendrait récupérer les valeurs en envoyant une requête http sur ton serveur. C'est tout à fait possible. D'ailleurs c'était le but d'un prochain billet, l'intéraction (init + mise à jour ajax depuis le NEST)
Ceci pourrait t'intéresser :
function initialize()
{
airwave=
currentTemperature=
// Appel AJAX Synchrone ou Asynchrone d'ailleurs, bon pour de l'init c'est mieux d'avoir du synchrone
var requestAirwave=$.ajax({
url: "ObjectAction?action=getCurrentAirWave",
dataType: "html",
async: false
});
// Une fois la requete ajax terminée, on récupère la valeur.
requestAirwave.done(function(msg) {
airwave=msg;
});
var requestTemperature=$.ajax({
url: "ObjectAction?action=getCurrentTemperature",
dataType: "html",
async: false
});
requestTemperature.done(function(msg) {
currentTemperature=msg;
});
}
Salut HomeAutomate Gorilla,
RépondreSupprimerMerci de ta réponse rapide. Pour ce qui est de l'init, effectivement, j'ai déclaré une fonction qui s'initialise sur le ready, ça marche. Je vais quand même tenter ton approche, car pour être honnête, je ne suis pas le king en jquery et ... je fais du reverse engineering des 2 projets, donc donc je fais 10 erreurs pour 1 truc qui marche ;-)
Donc, je suis arrivé à faire fonctionner quelque chose en reprennant ta suite de if else, mais je vais tester ta solution car elle me semble plus élégante et certainnement plus fonctionnelle...
Pour ce qui est des actions, ton aide est la bienvenue, j'ai testé ce que tu avais documenté sur le forum "touteladomotique" mais cela ne réagit que et sur tous les changements de tempé; en plus ... je dois aussi prévoir les fonctions jquery de mon environnement "parent" en conséquence... ça va venir...
J'avais une autre question en rapport aux 2 premières. Quels sont les significations exactes des variables "temperature", "temperatureNest" et "currenttemperature"? Il me semble en effet qu'à l'init il serait bien de voir par ex. si le Nest est en chauffe, à quelle tempé il est (sonde) et quel est la consigne... Je pensais modififer le message "HEATING" en "HEATING (17°)".
Pour ton info, voici l'état actuel de mon intégration dans le projet que j'ai repris de BenoitD54 et se connectant à un domoCAN (projet Opensource Hard et soft [url]http://abcelectronique.fr/bigonoff/domocan.php?par=36f08[/url] ):
[url]http://domocan.heberg-forum.net/sutra3145_interface-tactile.html#3145[/url]
Merci encore et au plaisir d'encore échanger avec toi... Henry
Sympa les liens, c'est une autre vision de la chose. Intéressant.
SupprimerAlors sinon :
temperature: température par défaut, genre quand rien est branché pour initialiser quelque chose, pour la démo par exemple
temperatureNest : température affichée sur le Nest, c'est la vraie température c'est qui donne la consigne.
currentTemperature : température récupérée par une sonde ou un manager sur HomeAutomate.
Je ne suis pas un King non plus ;), j'ai aussi un taux de succès de 25% ;).
Merci pour tes réponses, je ne comprenais pas pourquoi avoir ces 3 variables temperatures mais à part temperatureNest, aucun changement n'est visible...
RépondreSupprimerC'est effectivement une autre approche mais utilisant des briques communes ou complémentaires;-) (benoitD54 au départ de cette interface web a utilisé un serveur NGINX avec push qui permet de récupérer en live les changements de variable ou d'état ... assez bluffant par rapport à la page web classique)
Pour ma part, je dois dire que je ne connais pas HomeAutomate donc je serai aussi intéressé de découvrir plus ... si tu as des liens, je suis preneur.
Bon, tu vas dire que je dévie encore de l'idée d'origine, mais j'avance à petits pas vers le thermostat magnifique et fonctionnel que je cherchait, je positionne maintenant non seulement le mode, mais aussi une couleur de départ, ainsi que HEATING/COOLING. Pour ce qui est du display, j'ai intégré aussi la gestion des plages horaire de chauffage.
Pour ton info, j'ai testé ton init, mais suis revenu sur ma solution, en effet, je n'ai pas besoin de parser des fonctions sur mon serveur web, je récupère directement en jquery les paramètres que je passe dans l'iframe avec par exemple:
HTML parent:
var temp_nest = Math.round({TEMPERATURE});
nest.html, ouvert en iframe:
// temperature affichée sur le controleur Nest pas défaut.
var temperatureNest=window.parent.temp_nest;
... Voila ou j'en suis... pour l'instant, encore merci pour cet échange. Bien à toi, Henry
Hello,
RépondreSupprimerTu parle d'un prochain billet (init + mise à jour ajax depuis le NEST), tu peux nous dire si tu a avancé ? Est ce possible d'avoir les sources non minimisé ?
De plus il n'a plus l'air compatible avec firefox (pb d'affichage)
Merci pour le clin d’œil sur la page de démo
Simplearetenir
Salut Eric,
SupprimerOui, j'ai pu connecter le nest en jquery avec ajax, je vais essayer de te republier ça. A vrai dire j'ai pas mal changé la philosophie de l'interface.
Effectivement j'avais remarqué que sur FF cela s'affichait anormalement, il faut que je me replonge la dedans (je n'utilise que chrome).
J'essaie de faire ça cette semaine.
Ok nouveau post avec correction FF.
Supprimerhttp://homeautomategorilla.blogspot.fr/2013/10/a-la-demande-generale-nest-suite-et-fin.html