Skip to content

Instantly share code, notes, and snippets.

@Avotrix

Avotrix/airqualitycheck.ino

Created June 16, 2020 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Avotrix/af406b64cb818aeab0e8776cbe9d8930 to your computer and use it in GitHub Desktop.
Save Avotrix/af406b64cb818aeab0e8776cbe9d8930 to your computer and use it in GitHub Desktop.
Download ZIP
Mq135_GasSensor_Asynchronous_airqualitycheck
Raw
airqualitycheck.ino
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
//-----------------------Network Credentials--------------------------------
const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_PASSWORD";
//---------------------------Create AsyncWebServer object on port 80-----------------------------------
AsyncWebServer server(80);
float t = 0.0; //Initialising the variable t which will be used to store the Analog Sensor value later on.
//-------------------------------------------------HTML CODE-------------------------------------------------------------------
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
body {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto;
min-height:100%;
}
h2 {
font-family: Arial;
font-size: 4.0rem;
text-align: center;
}
#sensor{
text-align: center;
font-size: 20px;
font-size: 25px;
}
.button {
background-color: LimeGreen; /* Green */
border-radius:10px;
border:none;
color: #213346;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 26px;
margin: 4px 2px;
cursor: pointer;
width:100%;
}
table, th, td {
text-align: center;
width: 30%;
}
</style>
</head>
<body>
<h2 style="color:#213346;">A<span style="color:#E84638;font-weight:bold">V</span>OTRIX</h2>
<!-- -----------------------------------Table Showing the air quality Range ------------------------------------->
<div class="rangetable">
<table >
<tr>
<th style="width:10%;">Color</th>
<th>Air Quality</th>
<th>Range</th>
</tr>
<tr>
<td style="background-color:limegreen; width:10%;"></td>
<td>Fresh Air</td>
<td>0-300</td>
</tr>
<tr>
<td style="background-color:gold; width:10%;"></td>
<td>Moderate Air</td>
<td>301-700</td>
</tr>
<tr>
<td style="background-color:red; width:10%;"></td>
<td>Polluted Air</td>
<td>701-1024</td>
</tr>
</table>
</div>
<br>
<!-- -----------------------------------Color Bar showing Air Quality------------------------------------->
<div id="Buttoncontainer">
<input type="button" value="Fresh Air" id="ColorButton" class="button">
</div>
<!-- -----------------------------------Displaying the Sensor Value ------------------------------------->
<div id="sensor">
<div id="chart-GasSensor" class="container"></div>
<span class="sensor_label">Sensor Value :</span>
<span id="SensorValue">%Gasvalue%</span> </div>
<br>
</body>
</html>
<!-- -----------------------------------Script ------------------------------------->
<script>
var chartT = new Highcharts.Chart({
chart:{ renderTo : 'chart-GasSensor' },
title: { text: 'Gas Sensor Data' },
series: [{
showInLegend: false,
data: []
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#059e8a' }
},
xAxis: { type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {
title: { text: 'Gas Analog Vaue' } },
credits: { enabled: false }
});
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var x = (new Date()).getTime(), //X axis for time representation
y = parseFloat(this.responseText); //Y axix for Analog Gas value Representation
document.getElementById("SensorValue").innerHTML = this.responseText;
z= parseFloat(this.responseText);
//--------Fresh air COndition----------------------------------------------------
if(z<500){
document.getElementById("ColorButton").style.backgroundColor="limeGreen";
document.getElementById("ColorButton").value="Fresh Air";
}
//--------Moderate air COndition----------------------------------------------------
else if(z>500 && z<1000){
document.getElementById("ColorButton").style.backgroundColor="Gold";
document.getElementById("ColorButton").value="Moderate Air";
}
//--------Polluted air COndition----------------------------------------------------
else if(z>1000){
document.getElementById("ColorButton").style.backgroundColor="red";
document.getElementById("ColorButton").value="Polluted Air";
}
//console.log(this.responseText);
if(chartT.series[0].data.length > 40) {
chartT.series[0].addPoint([x, y], true, true, true);
} else {
chartT.series[0].addPoint([x, y], true, false, true); }} };
xhttp.open("GET", "/sensorvalue", true);
xhttp.send();
}, 2000 ) ;
</script>
</html>)rawliteral";
//-------------------------------------------------End of HTML Code-------------------------------------------------
//--------------------------------Function to read analog Value from Gas Sensor-----------------------------------
String ReadGasSensor(){
float t=analogRead(A0);
if(isnan(t)){
Serial.println("Failed to read from the sensor!");
return "";
}
else {
Serial.println(t);
return String(t);
}
}
//------------------------------------------------------------Setup----------------------------------------------------------
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
//--------------------------------Connecting to Wifi--------------------------------------
WiFi.begin(ssid, password);
Serial.println("Connecting to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println(".");
}
//Print ESP8266 Local IP Address
Serial.println(WiFi.localIP());
//-------------------------Http Requests--------------------------------------------------------
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
});
server.on("/sensorvalue", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", ReadGasSensor().c_str());
});
//------------------------Start the Server-----------------------------------------------------------------------
// Start server
server.begin();
}
//-------------------------------------------------End Of the Setup-----------------------------------
void loop(){
//Nothing happens here
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment