Exercice Thermostat (inactif pour l'automne 2021, consultez LOG2420 sur Moodle)

Objectif : créer une application qui simule un thermomètre pour le contrôle de température d'une chambre.

Cet exercice vise à mettre en pratique les bases du HTML, CSS et JavaScript que nous avons vues à date, et à introduire l'utilisation de quelques concepts et techniques web.

Éléments à implémenter

Le code de démarrage fournit les bases de l'application. Il doit être complété pour que le comportement de la fenêtre de l'application corresponde à la video ci-dessous. Le fichier chambre.js contient le code qui simule l'échange thermique entre la pièce et l'extérieur et une fonction pour fixer la valeur du thermomètre. Le code thermostat.js contient le code des vues à compléter ainsi que le code d'initialisation. On retrouve finalement du code CSS et des exemples d'utilisation d'objets d'interface de jQuery.

Comportement à implémenter

Le contrôle de droite (bouton glissoir, ou slider) fixe la température du thermostat de la chambre. Le thermomètre de gauche affiche la température de la chambre. Quelques valeurs supplémentaires sont affichées au milieu.

Concepts et techniques

• Génération de boucles temporelles avec setTimeout ou setInterval.
• Patron observateur-observé. Dans l'architecture MVC, le modèle est observé par des observateurs qui représentent des vues. Le modèle conserve une liste de vue et dès qu'il est modifié, il avise les vues de se mettre à jour.
• Communication par événements (event listeners).
• Objets d'interfaces avec jQuery