Created
June 16, 2020 14:15
-
-
Save Avotrix/af406b64cb818aeab0e8776cbe9d8930 to your computer and use it in GitHub Desktop.
Mq135_GasSensor_Asynchronous_airqualitycheck
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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