<!DOCTYPE html>
<html lang="Fr"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="\RGraph.common.core.js"></script>
<script src="\RGraph.common.dynamic.js"></script>
<script src="\RGraph.gauge.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<link rel="stylesheet" href="\index.css">
<script>
window.onload = function ()
{
displayGraph();
RGraph.AJAX.getCSV({url: '/getData', callback: myCallback});
}
function myCallback (data)
{
RGraph.reset(document.getElementById('cvs'));
RGraph.reset(document.getElementById('cvs2'));
gauge = new RGraph.Gauge({
id: 'cvs',
min: -20,
max: 60,
value: data[0],
options: {
textColor: 'white',
backgroundColor: 'black',
borderOuter: 'grey',
borderInner: 'black',
borderOutline: 'black',
shadow: true,
shadowColor: 'grey',
centerpinColor: 'black',
labelsValue: true,
labelsValueDecimals: 1,
labelsValueBounding: false,
labelsValueYPos: 0.75,
labelsValueBold: true,
labelsValueUnitsPost: ' °C',
titleTop: 'DHT22',
titleBottom: 'Température',
colorsRanges: [[-20, 0, '#0000FF'], [0, 15,'#00FFFF'], [15, 30, '#00FF47'], [30, 40, '#FFFF00'], [40,60,'#FF4A00']] ,
adjustable: true,
textSize: 12
}
}).draw()
gauge2 = new RGraph.Gauge({
id: 'cvs2',
min: 0,
max: 100,
value: data[1],
options: {
textColor: 'white',
backgroundColor: 'black',
borderOuter: 'grey',
borderInner: 'black',
borderOutline: 'black',
shadow: true,
shadowColor: 'grey',
centerpinColor: 'black',
labelsValue: true,
labelsValueDecimals: 1,
labelsValueBounding: false,
labelsValueYPos: 0.75,
labelsValueBold: true,
labelsValueUnitsPost: ' %',
titleTop: 'DHT22',
titleBottom: 'Humidité',
colorsRanges: [[0, 40, '#DC3912'], [40, 50,'#FF9900'], [50, 75, '#00FF00'], [75, 85, '#FF9900'], [85,100,'#DC3912']] ,
adjustable: true,
textSize: 12
}
}).draw()
}
var Temperature = []; // on créer un tableau de variable vide nommé "Temperature"
var Humidite = []; // on créer un tableau de variable vide nommé "Humidite"
var Heure = []; // on créer un tableau de variable vide nommé "Heure"
// lla fonction qui dessine le graphe
function displayGraph() {
var ctx = document.getElementById("graphe").getContext('2d'); // la div ou se trouve le graphe
var Chart2 = new Chart(ctx, { // on y crée un nouveau graphe
type: 'line', // de type line
data: { // les datas
labels: Heure, // axe X, les datas du tableau Heure
datasets: [{ // 1er axes Y
label: 'Température', // le label
fontColor: 'red',
yAxisID: 'T', // son ID
fill: false, // pas de remplissage sous la courbe
backgroundColor: '#FF0000', // couleur du point
borderColor: '#FF0000', // couleur de la courbe
pointHoverRadius: 5,
pointRadius: 3,
data: Temperature // les datas du tableau Temperature
}, { // 2eme axes Y
label: 'Humidité', // le label
fontColor: 'blue',
yAxisID: 'H', // son ID
fill: false, // pas de remplissage sous la courbe
backgroundColor: '#0000FF', // couleur du point
borderColor: '#0000FF', // couleur de la courbe
pointHoverRadius: 5,
pointRadius: 3,
data: Humidite // les datas du tableau Humidite
}],
},
options: { // les options
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function (tooltipItem, data) {
if (tooltipItem.datasetIndex === 0) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += Math.round(tooltipItem.yLabel * 100) / 100;
label += ' °C' ;
return label;
} else if (tooltipItem.datasetIndex === 1) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += Math.round(tooltipItem.yLabel * 100) / 100;
label += ' %';
return label;
}
}
}
},
title: { // le titre
display: true,
fontColor: 'white',
text: 'Température et Humidité'
},
legend: {
labels: {
fontColor: 'white',
}
},
maintainAspectRatio: false,
elements: {
line: {
tension: 0.5 // pour arrondir la courbe
}
},
scales: { // les axes Y
yAxes: [{ // 1er axe Y
gridLines: {
color: 'red',
display: false,
},
scaleLabel: { // le label
display: true,
fontColor: 'red',
labelString: 'Température en °C'
},
ticks: { // l'échelle
fontColor: 'red',
min:0,
max:50
},
id: 'T', // l'ID
type: 'linear', // le type
position: 'left' // sa position
},{ // 2eme axe Y
gridLines: {
color: 'blue',
display: false,
},
scaleLabel: { // le label
display: true,
fontColor: 'blue',
labelString: 'Humidité en %'
},
ticks: { // l'échelle
fontColor: 'blue',
//beginAtZero:true ou false
min:0,
max:100
},
id: 'H', // l'ID
type: 'linear', // le type
position: 'right' // sa position
}],
xAxes: [{
gridLines: {
color: 'white',
display: false,
},
ticks: {
fontColor: 'white',
}
}]
}
}
});
}
// on lance la requete toute les 5 s qui rafraichi le graphe et le tableau avec les nouvelles datas
setInterval(function() {
RGraph.AJAX.getCSV({url: '/getData', callback: myCallback});
getData();
}, 5000);
function getData() {
var xhttp = new XMLHttpRequest(); // on construit une requete
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// on traite la reponse, la découpe et met nos datas dans des tableaux
var hrs = new Date().toLocaleString();
var datas = this.responseText;
var split = datas.split(',');
var temp = split[0];
var humi = split[1];
Temperature.push(temp);
Humidite.push(humi);
Heure.push(hrs);
displayGraph(); // on met a jour le graph
// on met a jour le Tableau
var tableau = document.getElementById("tableau");
var row = tableau.insertRow(1); // Ajouter après les titres
var cell1 = row.insertCell(0); // on crée nos cellules
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = hrs; // On insère nos datas dans dataTable
cell2.innerHTML = temp + " °c";
cell3.innerHTML = humi + " %";
}
};
xhttp.open("GET", "getData", true); // requete pour ouvrir la page readDHT du serveur pour récupérer nos datas
xhttp.send(); // on envoie la requete
}
</script>
</head>
<body>
<h1>Sonde DHT22</h1>
<h2>Jauge en temps réel sur un NodeMCU</h2>
<div id="jauge">
<canvas id="cvs" width="300" height="300">[No canvas support]</canvas>
<canvas id="cvs2" width="300" height="300">[No canvas support]</canvas>
</div>
<h2>Graphe en temps réel sur un NodeMCU</h2>
<div>
<canvas id="graphe" width="100%" height="400"></canvas>
</div>
<h2>tableau de datas en temps reel sur un NodeMCU</h2>
<div>
<table id="tableau">
<tr><th>Heure</th><th>Température</th><th>Humidité</th></tr>
</table>
</div>
</body>
</html>