 |
Le framework Javascript RGraph |
 |
| Noms : | ||
| Centre d'intérêt : | CI 2 Instrumentation / Acquisition et restitution de grandeurs physiques | |
| Classe : | Term Sti2d Sin | |
| Id programme : | sin15, sin31 | |
| Conditions : | Seule , durée 3 heures. | |
| Matériel : | - un ordinateur; | |
| Logiciel : | - Netbeans; - Utiliser le navigateur chrome; |
|
| Document : | ||
I. Objectifs
- Être capable de mettre en œuvre le framework applets javascript RGraph.
II. Introduction
RGraph est une bibliothèque gratuite pour un usage non commercial (licence: Creative Commons BY-NC 3.0 license). Elle permet de tracer:
des jauges- des thermomètres
- des graphiques
La librairie RGRAPH simplifie considérablement les développements en fournissant une librairie très complète. RGRAPH n'est exploitable que au travers l'élément CANVAS qui est un élément HTML5 et nécessite pas mal de code JavaScript si l'on veut générer des graphes complexes et animés.
Toutes les informations sont disponible sur le site internet suivant: http://www.rgraph.net/
III. Premier élément : une jauge classique
On va faire l'essai d'une jauge classique :
Récupérez le fichier "Jauges_RGraph.zip", décompressez-le. Vous avez à disposition tout pour réaliser ce TP
Ouvrez le fichier "gauge-basic.html" avec Notepad++
Ouvrez le fichier "gauge-basic.html" avec le navigateur Mozilla
a) Analysez le fichier html afin de comprendre comment est mis en œuvre cette jauge.
b) Modifiez ensuite le code html pour obtenir le résultat ci-dessous :
Contraintes :
- la taille est de 300 × 300
- la valeur est de 76 (à mettre dans une variable "valeur")
c) On se propose de personnaliser notre jauge. En vous aidant des exemples et de la documentation (http://www.rgraph.net/docs/gauge.html), modifiez votre code HTML pour obtenir le résultat suivant :
d) Modifiez le fichier CSS afin de centrer notre "canvas" et obtenir le résultat ci-dessous :
e) On va maintenant tester les bugs possibles si on rentre des valeurs erronées. Faites des essais en rentrant les valeurs suivantes, donnez les résultats obtenus et conclure:
- valeur = 150
- valeur = -143
- valeur = '92'
- valeur = 'toto'
IV. 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.
|
V. Troisième élément : une courbe
Ouvrez le fichier "courbe.html" avec Notepad++
Ouvrez le fichier "courbe.html" avec le navigateur Mozilla
a) Analysez le fichier html afin de comprendre comment est mis en œuvre cet courbe.
b) Modifiez ensuite le code html pour obtenir le résultat ci-dessous :
Remarque : des informations sont disponibles sur le site de Rgraph : http://www.rgraph.net/docs/line.html