<!-- Air quality monitoring system using MH_Z19B sensor with WIFI, WEBSERVER
Hardware : Wemos D1 mini, MH_Z19B
Software : Arduino IDE, EPS8266 Sketch Data Upload
Library : ESPAsyncTCP, ESPAsyncWebServer -->
<!DOCTYPE html>
<html>
<head>
<title>Air quality monitor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages':['gauge','corechart']});
// Display clock above air quality gauge
function startClock() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
minute = minute < 10 ? "0" + minute : minute;
second = second < 10 ? "0" + second : second;
document.getElementById("clock_div").innerHTML =
hour + ":" + minute + ":" + second;
var tmp = setTimeout(startClock, 500);
}
</script>
</head>
<body onload="startClock()">
<h1>CO2 air quality monitor</h1>
<div id="clock_div"></div>
<div id="chart_div"></div>
<script>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['CO2', 0]
]);
var options = {
width: 800, height: 240,
redFrom: 2000, redTo: 5000,
yellowFrom:1000, yellowTo: 1999,
greenFrom:0, greenTo: 999,
max: 5000,
minorTicks: 10,
majorTicks: ["0","1000","2000","3000","4000","5000"]
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var pms = this.responseText.split(" ");
data.setValue(0, 1, this.responseText);
// data.setValue(1, 1, pms[1]);
// data.setValue(2, 1, pms[2]);
chart.draw(data, options);
}
};
xhttp.open("GET", "/updatesensorreading", true);
xhttp.send();
}, 3000 );
}
</script>
</body>
</html>