II. Deuxième élément : un thermomètre

Ouvrez le fichier "thermometer-basic.html" avec Notepad++

Ouvrez le fichier "thermometer-basic.html" avec le navigateur Mozilla

a) Analysez le fichier html afin de comprendre comment est mis en œuvre ce thermomètre.

b) Modifiez ensuite le code html pour obtenir le résultat ci-dessous  :

Contraintes :

• la hauteur est de 90 (sans déformation du thermomètre)
• la valeur est de 25°C (à mettre dans une variable "valeur")
• échelle: -30 à 50 °C

Remarque : des informations sont disponibles sur le site de Rgraph : http://www.rgraph.net/docs/thermometer.html




c) On veut maintenant mettre les 2 éléments vus précédemment sur la même page (et dans le même fichier html) dans le but d'obtenir le résultat ci-dessous :



Pour cela il va falloir se servir des tableaux HTML et mettre dans une case le 1er canvas et dans celle d'à côté l'autre canvas (on garde 76 % d'humidité et 25°C)

Pour faire un tableau sur HTML : http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-tableaux-1  ou page 183 de apprenez-a-creer-votre-site-web-avec-html5-et-css3.pdf

Remarque : ne pas hésiter à faire un tableau d'abord avec les bordures dessinées pour voir comment le tableau se place, se centre, …. et une fois que tout est parfait on enlève le dessin des bordures.

Créez un nouveau fichier HTML (gauge+thermometer.html), modifiez le fichier CSS et quand tout fonctionne faites valider par le professeur.

 

Tout ça l'air assez simple à utiliser, non ? En fait il y aura une difficulté supplémentaire (et non négligeable). Comme Javascript est une script "client", il est exécuté au niveau du navigateur et pas au niveau du serveur. Or c'est dans le serveur qu'il y aura les données numériques (dans des fichiers ou plus vraisemblablement dans une base de données). Bref Javascript n'y a pas accès. Il va falloir donc trouver le moyen de récupérer les valeurs que l'on veut afficher avec les applets RGraph (il y a des astuces plus ou moins compliquées notamment à l'aide de programmes PHP). Ce n'est pas l'objet de ce TP mais il faudra y penser si vous voulez afficher des valeurs réelles issues par exemple de capteurs.