Need help for communicating esp8266 and html

So you're a Noob? Post your questions here until you graduate! Don't be shy.
 Reply

User avatar

Need help for communicating esp8266 and html

By Jin
- Sun May 30, 2021 1:38 am #91506 So I'm trying to make a web page that tracks temperature sensors, some how succeeded to display temperatures on graph and few buttons. I need help with sending some kind of signal from webpage to esp8266 and esp8266 to html that changes button colors on web page and start running function on esp8266 when I click button on webpage....

#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
#include <ESPAsyncTCP.h>
#include <LiquidCrystal.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#define BLYNK_PRINT Serial
#include <HardwareSerial.h>
#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>
#define ONE_WIRE_BUS D3
LiquidCrystal lcd(D0, D1, D2, D4, D5, D6);
// Replace with your network credentials

char auth[] = "auth";
const char* ssid = "ssid";
const char* password = "password";
BlynkTimer timer;

// current temperature & humidity, this will be updated in loop function
float i1 = 0.0;
float i2 = 0.0;
float i3 = 0.0;
float i4 = 0.0;
float i5 = 0.0;
float i6 = 0.0;
float i7 = 0.0;
float T, T1, T2, T3, T4, T5, T6;

OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
int deviceCount = 0;
float tempC;
float Temperature[30];
float AVG_Temp;
float Pre_Set_Temp = 40;
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

unsigned long previousMillis = 0; //stoe last time DHT was updated
const long interval = 1000; // Updates DHT readings every 1 seconds


//web page
const char index_html[] PROGMEM = R"webpage(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.highcharts.com/8.0/highcharts.js"></script>

<style>
body {
background: white;
color : aliceblue;
}
#main {
background : 808080;
margin : 25px auto;

}
h1{
margin : 200px auto;
text-align :center;
font-family : "Varela Round";
font : 24pt;
color:black;
}
body {
min-width: 300px;
max-width: 1800px;
height: 600px;
margin: auto;
}
h2 {
font-family: "Crete Round";
font-size: 2.5rem;
text-align: center;
color: black;
}
.container1 {
height: auto;
width: 600px;
margin-left: 3px;
margin-right: auto;
border: 2px solid black;
border-radius: 5px;
}
.buttonesection {
height: auto;
width: 600px;
border-radius: 5px;
}
.container {
border: black;
display: flex;
width: auto;
height: auto;
}
h3{
margin : 50px;
}
.button {
border: 3px solid black;
color: white;
height: 60px;
width: 110px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 5px 3px;
cursor: pointer;
border-radius: 8px;
}

.disabled {
opacity: 0.6;
}
.space {
background: white;

text-align :center;
height: 52px;
width: 100px;
font-size: 15px;
margin-right:10px;
margin-left:15px;

}
.notice {
background: transparent;
color: black;
height: 50px;
width: 80px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 24px;
border-radius: 8px;
margin-left: 5px;
}

.button1 {background-color:white;color: black;border:2px solid #4CAF50;}
.button1:hover{background-color:#4CAF50; color: white; }
.button2 {background-color: white; color: black; border: 2px solid #008CBA;}
.button2:hover {background-color: #008CBA;color: white;}
.button3 {background-color: white; color: black; border: 2px solid #f44336;}
.button3:hover {background-color: #f44336;color: white;}


</style>
</head>
<body>
<h2>Temperature Monitoring </h2>
<div class="container">
<div class="container1">
<div id="Mold-1"></div>
<div class="buttonsection">
<button id ="preheating1" onclick="startpreheat1('preheating1','cooling1', 'heating1')" class="button button1">Pre-Heating</button>
<button id = "cooling1" onclick="startcooling1('cooling1','preheating1','heating1')" class="button button2">Cooling</button>
<button id = "heating1" onclick="startheating1('heating1','preheating1','cooling1')" class="button button3">Heating</button>
</div>
</div>
<div class="container1">
<div id="Mold-2"></div>
<div class="buttonsection">
<button id ="preheating2" onclick="startpreheat1('preheating2','cooling2', 'heating2')" class="button button1">Pre-Heating</button>
<button id = "cooling2" onclick="startcooling1('cooling2','preheating2','heating2')" class="button button2">Cooling</button>
<button id = "heating2" onclick="startheating1('heating2','preheating2','cooling2')" class="button button3">Heating</button>
</div>
</div>
<div class="container1">
<div id="Mold-3"></div>
<div class="buttonsection">
<button id ="preheating3" onclick="startpreheat1('preheating3','cooling3', 'heating3')" class="button button1">Pre-Heating</button>
<button id = "cooling3" onclick="startcooling1('cooling3','preheating3','heating3')" class="button button2">Cooling</button>
<button id = "heating3" onclick="startheating1('heating3','preheating3','cooling3')" class="button button3">Heating</button>

</div>
</div>

</div>


<h3></h3>

<div class="container">
<div class="container1">
<div id="Mold-4"></div>
<div class="buttonsection">
<button id ="preheating4" onclick="startpreheat1('preheating4','cooling4', 'heating4')" class="button button1">Pre-Heating</button>
<button id = "cooling4" onclick="startcooling1('cooling4','preheating4','heating4')" class="button button2">Cooling</button>
<button id = "heating4" onclick="startheating1('heating4','preheating4','cooling4')" class="button button3">Heating</button>

</div>
</div>
<div class="container1">
<div id="Mold-5"></div>
<div class="buttonsection">
<button id ="preheating5" onclick="startpreheat1('preheating5','cooling5', 'heating5')" class="button button1">Pre-Heating</button>
<button id = "cooling5" onclick="startcooling1('cooling5','preheating5','heating5')" class="button button2">Cooling</button>
<button id = "heating5" onclick="startheating1('heating5','preheating5','cooling5')" class="button button3">Heating</button>

</div>
</div>
<div class="container1">
<div id="Mold-6"></div>
<div class="buttonsection">
<button id ="preheating6" onclick="startpreheat1('preheating6','cooling6', 'heating6')" class="button button1">Pre-Heating</button>
<button id = "cooling6" onclick="startcooling1('cooling6','preheating6','heating6')" class="button button2">Cooling</button>
<button id = "heating6" onclick="startheating1('heating6','preheating6','cooling6')" class="button button3">Heating</button>

</div>
</div>

</div>
</div>

</body>
<script>
var chart1 = new Highcharts.Chart({
chart:{ renderTo : 'Mold-1' },
title: { text: 'Mold 1' },
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: 'Temperature (Celsius)' }
},
credits: { enabled: false }
});
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var x = (new Date()).getTime(),
y = parseFloat(this.responseText);
if(chart1.series[0].data.length > 500) {
chart1.series[0].addPoint([x, y], true, true, true);
} else {
chart1.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/temperature1", true);
xhttp.send();
}, 5000 ) ;

var chartF = new Highcharts.Chart({
chart:{ renderTo:'Mold-2' },
title: { text: 'Mold 2' },
series: [{
showInLegend: false,
data: []
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {
title: { text: 'Temperature (Celsius)' }
},
credits: { enabled: false }
});
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var x = (new Date()).getTime(),
y = parseFloat(this.responseText);
//console.log(this.responseText);
if(chartF.series[0].data.length > 500) {
chartF.series[0].addPoint([x, y], true, true, true);
} else {
chartF.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/temperature2", true);
xhttp.send();
}, 5000 ) ;

var chartH = new Highcharts.Chart({
chart:{ renderTo:'Mold-3' },
title: { text: 'Mold 3' },
series: [{
showInLegend: false,
data: []
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#18009c' }
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {
title: { text: 'Temperature (Celsius)' }
},
credits: { enabled: false }
});
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var x = (new Date()).getTime(),
y = parseFloat(this.responseText);
//console.log(this.responseText);
if(chartH.series[0].data.length > 500) {
chartH.series[0].addPoint([x, y], true, true, true);
} else {
chartH.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/temperature3", true);
xhttp.send();
}, 5000 ) ;
////////////////////////////////////////////////////////////////
var chart4 = new Highcharts.Chart({
chart:{ renderTo:'Mold-4' },
title: { text: 'Mold 4' },
series: [{
showInLegend: false,
data: []
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#18009c' }
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {
title: { text: 'Temperature (Celsius)' }
},
credits: { enabled: false }
});
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var x = (new Date()).getTime(),
y = parseFloat(this.responseText);
//console.log(this.responseText);
if(chart4.series[0].data.length > 500) {
chart4.series[0].addPoint([x, y], true, true, true);
} else {
chart4.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/temperature4", true);
xhttp.send();
}, 5000 ) ;
////////////////////////////////////////////////////////////////
var chart5 = new Highcharts.Chart({
chart:{ renderTo:'Mold-5' },
title: { text: 'Mold 5' },
series: [{
showInLegend: false,
data: []
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#18009c' }
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {
title: { text: 'Temperature (Celsius)' }
},
credits: { enabled: false }
});
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var x = (new Date()).getTime(),
y = parseFloat(this.responseText);
//console.log(this.responseText);
if(chart5.series[0].data.length > 500) {
chart5.series[0].addPoint([x, y], true, true, true);
} else {
chart5.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/temperature5", true);
xhttp.send();
}, 5000 ) ;
////////////////////////////////////////////////////////////////
var chart6 = new Highcharts.Chart({
chart:{ renderTo:'Mold-6' },
title: { text: 'Mold 6' },
series: [{
showInLegend: false,
data: []
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#18009c' }
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' }
},
yAxis: {
title: { text: 'Temperature (Celsius)' }
},
credits: { enabled: false }
});
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var x = (new Date()).getTime(),
y = parseFloat(this.responseText);
//console.log(this.responseText);
if(chart6.series[0].data.length > 500) {
chart6.series[0].addPoint([x, y], true, true, true);
} else {
chart6.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/temperature6", true);
xhttp.send();
}, 5000 ) ;
//////////////////////////////////////////////////////////////////////////
function startpreheat1(preheating1, cooling1, heating1)
{
document.getElementById(preheating1).style.backgroundColor="#4CAF50";
document.getElementById(cooling1).style.backgroundColor="#FFFFFF";
document.getElementById(heating1).style.backgroundColor="#FFFFFF";
var xhr = new XMLHttpRequest();
xhr.open('GET', '/state', true);

xhr.onload = function () {
// Request finished. Do processing here.
};

xhr.send('Hello, startpreheat1');
}
function startcooling1(cooling1, heating1,preheating1)
{
document.getElementById(preheating1).style.backgroundColor="#FFFFFF";
document.getElementById(heating1).style.backgroundColor="#FFFFFF";
document.getElementById(cooling1).style.backgroundColor="#008CBA";

}
function startheating1( heating1, cooling1,preheating1)
{
document.getElementById(preheating1).style.backgroundColor="#FFFFFF";
document.getElementById(cooling1).style.backgroundColor="#FFFFFF";
document.getElementById(heating1).style.backgroundColor="#f44336";
}
//////////////////////////////////////////////////////////////////////////
function startpreheat2(preheating2, cooling2, heating2)
{
document.getElementById(preheating2).style.backgroundColor="#4CAF50";
document.getElementById(cooling2).style.backgroundColor="#FFFFFF";
document.getElementById(heating2).style.backgroundColor="#FFFFFF";
}
function startcooling2(cooling2, heating2,preheating2)
{
document.getElementById(preheating2).style.backgroundColor="#FFFFFF";
document.getElementById(heating2).style.backgroundColor="#FFFFFF";
document.getElementById(cooling2).style.backgroundColor="#008CBA";

}
function startheating2( heating2, cooling2,preheating2)
{
document.getElementById(preheating2).style.backgroundColor="#FFFFFF";
document.getElementById(cooling2).style.backgroundColor="#FFFFFF";
document.getElementById(heating2).style.backgroundColor="#f44336";
}
//////////////////////////////////////////////////////////////////////////
function startpreheat3(preheating3, cooling3, heating3)
{
document.getElementById(preheating3).style.backgroundColor="#4CAF50";
document.getElementById(cooling3).style.backgroundColor="#FFFFFF";
document.getElementById(heating3).style.backgroundColor="#FFFFFF";
}
function startcooling3(cooling3, heating3,preheating3)
{
document.getElementById(preheating3).style.backgroundColor="#FFFFFF";
document.getElementById(heating3).style.backgroundColor="#FFFFFF";
document.getElementById(cooling3).style.backgroundColor="#008CBA";

}
function startheating3( heating3, cooling3,preheating3)
{
document.getElementById(preheating3).style.backgroundColor="#FFFFFF";
document.getElementById(cooling3).style.backgroundColor="#FFFFFF";
document.getElementById(heating3).style.backgroundColor="#f44336";
}
//////////////////////////////////////////////////////////////////////////
function startpreheat4(preheating4, cooling4, heating4)
{
document.getElementById(preheating4).style.backgroundColor="#4CAF50";
document.getElementById(cooling4).style.backgroundColor="#FFFFFF";
document.getElementById(heating4).style.backgroundColor="#FFFFFF";
}
function startcooling4(cooling4, heating4,preheating4)
{
document.getElementById(preheating4).style.backgroundColor="#FFFFFF";
document.getElementById(heating4).style.backgroundColor="#FFFFFF";
document.getElementById(cooling4).style.backgroundColor="#008CBA";

}
function startheating4( heating4, cooling4,preheating4)
{
document.getElementById(preheating4).style.backgroundColor="#FFFFFF";
document.getElementById(cooling4).style.backgroundColor="#FFFFFF";
document.getElementById(heating4).style.backgroundColor="#f44336";
}
//////////////////////////////////////////////////////////////////////////
function startpreheat5(preheating5, cooling5, heating5)
{
document.getElementById(preheating5).style.backgroundColor="#4CAF50";
document.getElementById(cooling5).style.backgroundColor="#FFFFFF";
document.getElementById(heating5).style.backgroundColor="#FFFFFF";
}
function startcooling5(cooling5, heating5,preheating5)
{
document.getElementById(preheating5).style.backgroundColor="#FFFFFF";
document.getElementById(heating5).style.backgroundColor="#FFFFFF";
document.getElementById(cooling5).style.backgroundColor="#008CBA";

}
function startheating5( heating5, cooling5,preheating5)
{
document.getElementById(preheating5).style.backgroundColor="#FFFFFF";
document.getElementById(cooling5).style.backgroundColor="#FFFFFF";
document.getElementById(heating5).style.backgroundColor="#f44336";
}
//////////////////////////////////////////////////////////////////////////
function startpreheat6(preheating6, cooling6, heating6)
{
document.getElementById(preheating6).style.backgroundColor="#4CAF50";
document.getElementById(cooling6).style.backgroundColor="#FFFFFF";
document.getElementById(heating6).style.backgroundColor="#FFFFFF";
}
function startcooling6(cooling6, heating6,preheating6)
{
document.getElementById(preheating5).style.backgroundColor="#FFFFFF";
document.getElementById(heating5).style.backgroundColor="#FFFFFF";
document.getElementById(cooling5).style.backgroundColor="#008CBA";

}
function startheating6( heating6, cooling6,preheating6)
{
document.getElementById(preheating6).style.backgroundColor="#FFFFFF";
document.getElementById(cooling6).style.backgroundColor="#FFFFFF";
document.getElementById(heating6).style.backgroundColor="#f44336";
}


</script>
</html>)webpage";
/////////////////////////////////////////////////////////////////////////////////////

void sendSensor()
{
Blynk.virtualWrite(V1, i1);
Blynk.virtualWrite(V2, i2);
Blynk.virtualWrite(V3, i3);
Blynk.virtualWrite(V4, i4);
Blynk.virtualWrite(V5, i5);
Blynk.virtualWrite(V6, i6);
delay(100);
}

///////////////////////////////////////////
void setup(){
// Serial port for debugging purposes
sensors.begin();
Serial.begin(9600);
lcd.begin(16, 2);
lcd.clear();
lcd.setCursor(13,1);
lcd.print(":");
// Connect to Wi-Fi
WiFi.begin(ssid, password);
Serial.println("Connecting to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println(".");

}

// Print ESP32 Local IP Address
Serial.println(WiFi.localIP());
Blynk.begin(auth, ssid, password);

timer.setInterval(1000L, sendSensor);

Serial.print("Locating devices...");
Serial.print("Found ");
deviceCount = sensors.getDeviceCount();
Serial.print(deviceCount, DEC);
Serial.println(" devices.");
Serial.println("");

// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
});
server.on("/temperature1", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(i1).c_str());
});
server.on("/temperature2", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(i2).c_str());
});
server.on("/temperature3", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(i3).c_str());
});
server.on("/temperature4", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(i4).c_str());
});
server.on("/temperature5", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(i5).c_str());
});
server.on("/temperature6", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(i6).c_str());
});

// Start server
server.begin();

}



void loop(){
Blynk.run();
unsigned long currentMillis = millis();
if (currentMillis - previousMillis >= interval) {
// save the last time you updated the DHT values
previousMillis = currentMillis;
sensors.requestTemperatures();

for (int i = 0; i < deviceCount; i++)
{
Serial.print("Sensor ");
Serial.print(i+1);
Serial.print(" : ");
tempC = sensors.getTempCByIndex(i);
Serial.print(tempC);
//shows degrees character
Serial.println("C");
Temperature[i+1] = tempC;


}

i1 = Temperature[1];
i2 = Temperature[2];
i3 = Temperature[3];
i4 = Temperature[4];
i5 = Temperature[5];
i6 = Temperature[6];
AVG_Temp = (i1+i2+i3+i4+i5+i6)/6;
Serial.println (AVG_Temp);

if(AVG_Temp>Pre_Set_Temp)
{
//lcd.clear();
lcd.setCursor(0,0);
lcd.print("Temp: ");
lcd.print(AVG_Temp);
lcd.print((char)223);
lcd.print("C");
lcd.setCursor(0,1);
lcd.print("Heat = ");
lcd.print("Off");
delay(1000);

}
if


(AVG_Temp<Pre_Set_Temp)
{
//lcd.clear();
lcd.setCursor(0,0);
lcd.print("Temp: ");
lcd.print(AVG_Temp);
lcd.print((char)223);
lcd.print("C");
lcd.setCursor(0,1);
lcd.print("Heat = ");
lcd.print("on");
delay(1000);

}
}
timer.run();
}
 Reply
Return to Newbie Corner