<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slider & gauge</title>
<style>
#pot {
left: -50px;
position: absolute;
top: 70px;
-webkit-transform: rotate(-90deg);
}
#gaug {
left: 40px;
position: absolute;
top: 5px;
width:160px;
}
</style>
<script src="https://www.google.com/jsapi?
autoload={'modules':[{'name':'visualization','version':'1','packages':['gauge']}]}">
</script>
<script>
google.load('visualization', '1', {packages: ['gauge']});
google.setOnLoadCallback(drawGauge);
var gaugeOptions = {min: 10, max: 30, greenFrom:18, greenTo: 20,
yellowFrom: 20, yellowTo: 22, redFrom: 22, redTo: 30, minorTicks: 5};
var gauge;
function drawGauge() {
gaugeData = new google.visualization.DataTable();
gaugeData.addColumn('number', 'Celsius');
gaugeData.addRows(1);
gaugeData.setCell(0, 0, 0);
gauge = new google.visualization.Gauge(document.getElementById('gaug'));
gauge.draw(gaugeData, gaugeOptions);
}
</script>
</head>
<body>
<input type="range" min="100" max="300" value="0" id="pot">
<div id="gaug"></div>
<script>
document.getElementById("pot").addEventListener("mousemove", drawArrow);
document.getElementById("pot").addEventListener("mouseup", send2php);
function send2php() {
var x=document.getElementById("pot").value/10;
window.location.href="./slid.php?byte=" + x;
}
function drawArrow() {
var x=document.getElementById("pot").value/10;
gaugeData.setValue(0, 0, x);
gauge.draw(gaugeData, gaugeOptions);
}
</script>
</body>
</html>
Deux éléments HTML visibles
L'élément <body> déclare deux éléments visibles sur la page web, lignes 40 et 41 :- Le potentiomètre obtenu avec la déclaration <input> et les attributs :
- type="range" définit la forme : potentiomètre
- min="100" est la valeur correspondant au curseur en butée basse : 10.0°C
- max="300" est la valeur correspondant au curseur en butée haute : 30.0°C
- value="0" force la position du curseur au chargement de la page en butée basse
- id="pot" identifie l'élément, le potentiomètre
- La jauge confinée dans l'élément <div> identifié avec l'attribut id="gaug"
Javascript
Il y a trois éléments <script>:
- En lignes 20 à 22, déclaration de la librairie des classes, méthodes et propriétés mises à contribution pour le tracé des jauges.
- En lignes 23 à 37, on distingue:
- Ligne 25, appel de la méthode (fonction) drawGauge() déclarée ensuite. L'appel aura lieu lorsque le chargement de la page sera terminé.
- Lignes 26 et 27, déclaration et affectation de la variable gaugeOptions (vecteur). Simplement, on définit ici l'échelle (10 à 30), les couleurs dans l'échelle, les divisions toutes les 5 unités.
- Ligne 28, déclaration de la variable gauge. C'est l'objet représentant la jauge!
- Lignes 29 à 36, déclaration de la fonction drawGauge() qui s'exécutera quand elle sera appelée. On retient 3 items seulement:
- Ligne 31, Celsius est le mot s'affichant dans la jauge
- Ligne 33, le 3ième 0 est la valeur affichée par la jauge au chargement de la page
- Ligne 34, gaug est l'identificateur de l'élément <div> où la jauge est dessinée
- Lignes 42 à 54
- Ligne 43, exécutée au chargement de la page, associe au potentiomètre "pot", la fonction nommée drawArrow() détaillée ensuite. Celle-ci sera exécutée lorsque le pointeur de souris se déplacera sur lui (mousemove)
- Ligne 44, exécutée également au chargement de la page, associe la fonction send2php() qui sera exécutée à l'instant où le bouton de la souris sera relâché au-dessus du potentiomètre (mouseup)
- Lignes 49 à 53, la fonction drawArrow() s'exécutera quand elle sera appelée. Elle déclare et affecte la variable x de la valeur délivrée par le potentiomètre. En butée haute, il délivrerait 300 mais x serait alors affectée de 30 représentant la température maximale désirée. X est transmise à la fonction setValue() en ligne 51 puis en ligne 52 la fonction draw() actualise le dessin de la jauge.
- Lignes 45 à 48, la fonction send2php() s'exécutera quand elle sera appelée. Elle affecte la variable locale x puis appelle la page web nommée slid.php (située dans le même répertoire) à laquelle on acolle la chaîne de caractères "?byte=" suivi de la valeur du potentiomètre. Dans le cas où il serait tout en haut, la requête HTTP serait : slid.php?byte=30. Il s'agirait alors de passer le paramètre nommé byte de valeur 30 au script php selon la méthode GET c'est à dire à la suite de l'URL de la page appelée.
CSS
Il s'agit des lignes intégrées à l'élément <style>. La ligne 11 oriente le potentiomètre verticalement et le dirige de façon à ce que son curseur en bas corresponde à sa valeur 0. Cette ligne est compatible avec le navigateur Chrome.
Les autres lignes disposent le potentiomètre et la jauge aux endroits désirés sur la page web.
PHP
Le script est détaillé dans le billet "un potentiomètre sur une page web"
Aucun commentaire:
Enregistrer un commentaire