ESP8266 WebServer อ่านค่าอุณหภูมิ ความชื้น DHT22

การเชื่อมต่อ

ESP8266 -> Sensor DHT22 วัดอุณหภูมิและความชื้น

3V -> ขา+

GND -> ขา-

D1(GPIO 5) -> ขาOUT

การปรับแต่งโค้ด

// Updates DHT readings every 10 seconds

const long interval = 10000;

เพิ่ม การอ่านค่าอุณหภูมิ Fahrenheit and Heat Index

ประกาศตัวแปร ด้านบนของ void setup() เพิ่มเป็นดังนี้

float t = 0.0;

float h = 0.0;

float f = 0.0;

float hic = 0.0;

float hif = 0.0;

ใน void loop() เพิ่มตัวแปรเข้ามาและแก้ไขโค้ด

เพิ่มบรรทัดนี้ อ่านค่าอุณหภูมิ Fahrenheit

// Read temperature as Celsius (the default)

float newT = dht.readTemperature();

float newF = dht.readTemperature(true);

if (isnan(newT)) {

Serial.println("Failed to read from DHT sensor!");

}else {

t = newT;

Serial.println(t);

f = newF;

Serial.println(f);

}

ใน void loop() เพิ่มตัวแปรเข้ามาและแก้ไขโค้ด

เพิ่มบรรทัดนี้ อ่านค่า Heat Index

// Read Humidity

float newH = dht.readHumidity();

float newHIF = dht.computeHeatIndex(newF, newH);

float newHIC = dht.computeHeatIndex(newT, newH, false);

// if humidity read failed, don't change h value

if (isnan(newH)) {

Serial.println("Failed to read from DHT sensor!");

}else{

h = newH;

Serial.print("newH:");

Serial.println(h);

hif = newHIF;

Serial.print("newHIF:");

Serial.println(hif);

hic = newHIC;

Serial.print("newHIC:");

Serial.println(hic);

}

ทดสอบใน Serial Monitor ตรวจสอบความถูกต้องก่อน

ลำดับถัดมาแก้ไขในส่วนแสดงผล

const char index_html[] PROGMEM = R"rawliteral(

<!DOCTYPE HTML><html>

<head>

<style>

html {

font-family: Arial;

display: inline-block;

margin: 0px auto;

text-align: center;

}

h2 { font-size: 3.0rem; }

p { font-size: 3.0rem; }

.units { font-size: 1.2rem; }

.dht-labels{

font-size: 1.5rem;

vertical-align:middle;

padding-bottom: 15px;

}

</style>

</head>

<body>

<h2>ESP8266 DHT Server</h2>

Temperature

%TEMPERATURE%

°C

Temperature

%TEMPERATUREF%

°F

Heat Index

%HIC%

°C

Heat Index

%HIF%

°F

Humidity

%HUMIDITY%

%

</body>

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("temperature").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/temperature", true);

xhttp.send();

}, 10000 ) ;

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("temperaturef").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/temperaturef", true);

xhttp.send();

}, 10000 ) ;

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("humidity").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/humidity", true);

xhttp.send();

}, 10000 ) ;

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("hic").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/hic", true);

xhttp.send();

}, 10000 ) ;

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("hif").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/hif", true);

xhttp.send();

}, 10000 ) ;

</script>

</html>)rawliteral";

แก้ไขในส่วนของ สตริง

// Replaces placeholder with DHT values

String processor(const String& var){

//Serial.println(var);

if(var == "TEMPERATURE"){

return String(t);

}

else if(var == "TEMPERATUREF"){

return String(f);

}

else if(var == "HUMIDITY"){

return String(h);

}

else if(var == "HIC"){

return String(hic);

}

else if(var == "HIF"){

return String(hif);

}

return String();

}

แก้ไข void setup(){

// Route for root / web page

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/html", index_html, processor);

});

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", String(t).c_str());

});

server.on("/temperaturef", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", String(f).c_str());

});

server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", String(h).c_str());

});

server.on("/hic", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", String(hic).c_str());

});

server.on("/hif", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", String(hif).c_str());

});

// Start server

server.begin();

}

โค้ดทั้งหมด

// Import required libraries

#include <Arduino.h>

#include <ESP8266WiFi.h>

#include <Hash.h>

#include <ESPAsyncTCP.h>

#include <ESPAsyncWebServer.h>

#include <Adafruit_Sensor.h>

#include <DHT.h>

// Replace with your network credentials

const char* ssid = "Nui 2.4G";

const char* password = "0895515998";

#define DHTPIN 5 // Digital pin connected to the DHT sensor

// Uncomment the type of sensor in use:

//#define DHTTYPE DHT11 // DHT 11

#define DHTTYPE DHT22 // DHT 22 (AM2302)

//#define DHTTYPE DHT21 // DHT 21 (AM2301)

DHT dht(DHTPIN, DHTTYPE);

// current temperature & humidity, updated in loop()

float t = 0.0;

float h = 0.0;

float f = 0.0;

float hic = 0.0;

float hif = 0.0;

// Create AsyncWebServer object on port 80

AsyncWebServer server(80);

// Generally, you should use "unsigned long" for variables that hold time

// The value will quickly become too large for an int to store

unsigned long previousMillis = 0; // will store last time DHT was updated

// Updates DHT readings every 10 seconds

const long interval = 3000;

const char index_html[] PROGMEM = R"rawliteral(

<!DOCTYPE HTML><html>

<head>

<style>

html {

font-family: Arial;

display: inline-block;

margin: 0px auto;

text-align: center;

}

h2 { font-size: 3.0rem; }

p { font-size: 3.0rem; }

.units { font-size: 1.2rem; }

.dht-labels{

font-size: 1.5rem;

vertical-align:middle;

padding-bottom: 15px;

}

</style>

</head>

<body>

<h2>ESP8266 DHT Server</h2>

Temperature

%TEMPERATURE%

°C

Temperature

%TEMPERATUREF%

°F

Heat Index

%HIC%

°C

Heat Index

%HIF%

°F

Humidity

%HUMIDITY%

%

</body>

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("temperature").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/temperature", true);

xhttp.send();

}, 10000 ) ;

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("temperaturef").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/temperaturef", true);

xhttp.send();

}, 10000 ) ;

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("humidity").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/humidity", true);

xhttp.send();

}, 10000 ) ;

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("hic").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/hic", true);

xhttp.send();

}, 10000 ) ;

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("hif").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/hif", true);

xhttp.send();

}, 10000 ) ;

</script>

</html>)rawliteral";

// Replaces placeholder with DHT values

String processor(const String& var){

//Serial.println(var);

if(var == "TEMPERATURE"){

return String(t);

}

else if(var == "TEMPERATUREF"){

return String(f);

}

else if(var == "HUMIDITY"){

return String(h);

}

else if(var == "HIC"){

return String(hic);

}

else if(var == "HIF"){

return String(hif);

}

return String();

}

void setup(){

// Serial port for debugging purposes

Serial.begin(115200);

dht.begin();

// Connect to Wi-Fi

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());

// Route for root / web page

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/html", index_html, processor);

});

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", String(t).c_str());

});

server.on("/temperaturef", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", String(f).c_str());

});

server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", String(h).c_str());

});

server.on("/hic", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", String(hic).c_str());

});

server.on("/hif", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/plain", String(hif).c_str());

});

// Start server

server.begin();

}

void loop(){

unsigned long currentMillis = millis();

if (currentMillis - previousMillis >= interval) {

// save the last time you updated the DHT values

previousMillis = currentMillis;

// Read temperature as Celsius (the default)

float newT = dht.readTemperature();

float newF = dht.readTemperature(true);

if (isnan(newT)) {

Serial.println("Failed to read from DHT sensor!");

}else {

t = newT;

Serial.println(t);

f = newF;

Serial.println(f);

}

// Read Humidity

float newH = dht.readHumidity();

float newHIF = dht.computeHeatIndex(newF, newH);

float newHIC = dht.computeHeatIndex(newT, newH, false);

// if humidity read failed, don't change h value

if (isnan(newH)) {

Serial.println("Failed to read from DHT sensor!");

}else{

h = newH;

Serial.print("newH:");

Serial.println(h);

hif = newHIF;

Serial.print("newHIF:");

Serial.println(hif);

hic = newHIC;

Serial.print("newHIC:");

Serial.println(hic);

}

///////////////////////////////////////////////

Reference:

https://randomnerdtutorials.com/esp8266-dht11dht22-temperature-and-humidity-web-server-with-arduino-ide/

https://fontawesome.com/icons?d=gallery

แก้ไขสี

https://htmlcolorcodes.com/color-chart/

ช่องลาเลอ

ค้นหาบล็อกนี้

ESP8266 WebServer อ่านค่าอุณหภูมิ ความชื้น DHT22

ความคิดเห็น

แสดงความคิดเห็น