📑 เนื้อหาในบทความ
🎯 ภาพรวมโปรเจกต์
ในบทความนี้คุณจะได้เรียนรู้วิธีสร้างระบบตรวจสอบอุณหภูมิและความชื้นแบบเรียลไทม์ โดยใช้ ESP32 ที่ทำหน้าที่เป็น Web Server ทำให้สามารถเข้าถึงข้อมูลจากสมาร์ทโฟน แท็บเล็ต หรือคอมพิวเตอร์ ทุกอุปกรณ์ที่เชื่อมต่ออยู่ในเครือข่าย WiFi เดียวกัน
✨ คุณสมบัติหลัก:
- • วัดอุณหภูมิและความชื้นแบบเรียลไทม์
- • Web Server ที่เข้าถึงได้จาก WiFi
- • อัปเดตข้อมูลอัตโนมัติทุก 2 วินาที
- • แสดงผลแบบ Responsive รองรับมือถือ
- • ใช้งานง่ายไม่ต้องต่อ Internet
🔌 อุปกรณ์ที่ต้องใช้
ESP32 Board
ใช้บอร์ด ESP32 ทั่วไป เช่น ESP32 DevKit, NodeMCU-32, หรือ WROVER
ราคาประมาณ 150-250 บาท
DHT22 Temperature & Humidity Sensor
เซ็นเซอร์วัดอุณหภูมิและความชื้นความแม่นยำสูง
ราคาประมาณ 50-80 บาท
Resistor 10kΩ
ใช้เป็น Pull-up resistor สำหรับ DHT22
ราคาประมาณ 1 บาท
Jumper Wires & Breadboard
สายไฟเชื่อมต่อและบอร์ดทดลอง
ราคาประมาณ 30-50 บาท
💡 เคล็ดลับ: DHT22 ให้ความแม่นยำสูงกว่า DHT11 (±0.5°C และ ±2%RH) แต่ราคาแพงกว่าเล็กน้อย ถ้ามีงบจำกัดสามารถใช้ DHT11 แทนได้
🔗 การต่อสาย
ต่อสายตามรายการดังนี้:
| DHT22 Pin | ESP32 Pin |
|---|---|
| VCC (Pin 1) | 3.3V |
| DATA (Pin 2) | GPIO 4 (หรือขาอื่น) |
| NC (Pin 3) | ไม่ต่อ |
| GND (Pin 4) | GND |
⚠️ สำคัญ: อย่าลืมต่อ Resistor 10kΩ ระหว่าง VCC และ DATA (Pull-up resistor) เพื่อให้เซ็นเซอร์ทำงานได้ถูกต้อง
💻 การติดตั้ง Software
1. ติดตั้ง Arduino IDE
ดาวน์โหลดและติดตั้งจาก arduino.cc
2. เพิ่ม ESP32 Board Support
ไปที่ File → Preferences → Additional Board Manager URLs
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json3. ติดตั้ง DHT Library
ไปที่ Sketch → Include Library → Manage Libraries
ค้นหา "DHT sensor library" และติดตั้งของ Adafruit
📝 โค้ดโปรแกรม
นี่คือโค้ดทั้งหมดสำหรับ ESP32 DHT22 Web Server:
#include <WiFi.h>
#include <WebServer.h>
#include "DHT.h"
// ===== ตั้งค่า WiFi =====
const char* ssid = "YOUR_WIFI_SSID"; // แก้ไขเป็น WiFi ของคุณ
const char* password = "YOUR_WIFI_PASSWORD"; // แก้ไขเป็นรหัสผ่าน
// ===== ตั้งค่า DHT22 =====
#define DHTPIN 4 // GPIO 4 ที่ต่อกับ DATA
#define DHTTYPE DHT22 // รุ่นเซ็นเซอร์ DHT22
DHT dht(DHTPIN, DHTTYPE);
// ===== สร้าง Web Server =====
WebServer server(80);
// ตัวแปรเก็บค่าอุณหภูมิและความชื้น
float temperature = 0.0;
float humidity = 0.0;
// HTML สำหรับแสดงผล
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP32 DHT22 Monitor</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 500px;
width: 100%;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
font-size: 28px;
}
.sensor-card {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 15px;
padding: 25px;
margin: 15px 0;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.sensor-icon {
font-size: 48px;
margin-bottom: 10px;
}
.sensor-value {
font-size: 48px;
font-weight: bold;
color: #667eea;
margin: 10px 0;
}
.sensor-label {
font-size: 16px;
color: #666;
text-transform: uppercase;
letter-spacing: 2px;
}
.update-info {
text-align: center;
color: #888;
font-size: 12px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>🌡️ จอภาพอุณหภูมิ & ความชื้น</h1>
<div class="sensor-card">
<div class="sensor-icon">🌡️</div>
<div class="sensor-label">อุณหภูมิ</div>
<div class="sensor-value" id="temp">--.-°C</div>
</div>
<div class="sensor-card">
<div class="sensor-icon">💧</div>
<div class="sensor-label">ความชื้น</div>
<div class="sensor-value" id="humid">--.-%</div>
</div>
<div class="update-info">
อัปเดตล่าสุด: <span id="update-time">--:--:--</span>
</div>
</div>
<script>
function updateSensorData() {
fetch('/sensor')
.then(response => response.json())
.then(data => {
document.getElementById('temp').textContent = data.temperature.toFixed(1) + '°C';
document.getElementById('humid').textContent = data.humidity.toFixed(1) + '%';
document.getElementById('update-time').textContent = new Date().toLocaleTimeString('th-TH');
})
.catch(error => console.error('Error:', error));
}
// อัปเดตทุก 2 วินาที
updateSensorData();
setInterval(updateSensorData, 2000);
</script>
</body>
</html>
)rawliteral";
void setup() {
Serial.begin(115200);
// เริ่มต้นใช้งาน DHT
dht.begin();
// เชื่อมต่อ WiFi
Serial.println("\n\nกำลังเชื่อมต่อ WiFi...");
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\n✅ เชื่อมต่อ WiFi สำเร็จ!");
Serial.print("📡 IP Address: ");
Serial.println(WiFi.localIP());
// ตั้งค่า Web Server routes
server.on("/", []() {
server.send(200, "text/html", index_html);
});
server.on("/sensor", HTTP_GET, []() {
// อ่านค่าจากเซ็นเซอร์
temperature = dht.readTemperature();
humidity = dht.readHumidity();
// ตรวจสอบความผิดพลาด
if (isnan(temperature) || isnan(humidity)) {
server.send(500, "application/json", "{\"error\":\"Failed to read from DHT sensor\"}");
return;
}
// สร้าง JSON response
String json = "{";
json += "\"temperature\":" + String(temperature) + ",";
json += "\"humidity\":" + String(humidity);
json += "}";
server.send(200, "application/json", json);
});
// เริ่มต้น Web Server
server.begin();
Serial.println("🌐 HTTP server started");
Serial.println("\nเปิดเว็บเบราว์เซอร์ไปที่: http://" + WiFi.localIP().toString());
}
void loop() {
server.handleClient();
delay(2); // ป้องกัน watchdog timer reset
} 💡 หมายเหตุ: อย่าลืมแก้ไข ssid และ password ให้ตรงกับ WiFi ของคุณก่อนอัปโหลดโค้ด
🧪 การทดสอบ
1. อัปโหลดโค้ด
กดปุ่ม Upload ใน Arduino IDE และรอจนกว่าจะเสร็จสิ้น
2. เปิด Serial Monitor
ตั้งค่า baud rate เป็น 115200 และดู IP address
3. เปิดเว็บเบราว์เซอร์
พิมพ์ IP address ที่ได้จาก Serial Monitor (เช่น http://192.168.1.100)
4. ทดสอบเซ็นเซอร์
ลมหายใจเป่าที่เซ็นเซอร์เพื่อดูการเปลี่ยนแปลงของความชื้น
🚀 เชื่อมต่อ CynoIoT Platform
หลังจากทดสอบระบบเบื้องต้นเรียบร้อยแล้ว คุณสามารถเชื่อมต่อข้อมูลเข้า CynoIoT Platform เพื่อเก็บข้อมูลและแสดงผลใน Dashboard ได้:
1. สมัครสมาชิกฟรีที่ cynoiot.com
2. สร้างโปรเจกต์ใหม่และรับ API Key
3. ส่งข้อมูลอุณหภูมิ/ความชื้นผ่าน HTTP POST หรือ MQTT
4. ติดตามข้อมูลใน Dashboard แบบเรียลไทม์
🎉 เริ่มต้นใช้งาน CynoIoT ฟรีวันนี้!
สมัครสมาชิก🔧 การแก้ปัญหาที่พบบ่อย
ปัญหา: DHT22 อ่านค่าได้ NaN
สาเหตุ: ต่อสายผิด ไม่ได้ต่อ pull-up resistor หรือเซ็นเซอร์เสีย
วิธีแก้: ตรวจสอบการต่อสายและเปลี่ยนเซ็นเซอร์ใหม่
ปัญหา: เชื่อมต่อ WiFi ไม่ได้
สาเหตุ: ชื่อหรือรหัสผ่านผิด
วิธีแก้: ตรวจสอบ ssid และ password ในโค้ด
ปัญหา: ESP32 รีสตาร์ทเองบ่อย
สาเหตุ: ไม่เพียงพอหรือต่อ load มากเกินไป
วิธีแก้: ใช้แหล่งจ่ายไฟที่เหมาะสม (ขั้นต่ำ 500mA)
ปัญหา: เข้าเว็บได้ครั้งแรกแล้วหาย
สาเหตุ: ESP32 รีสตาร์ทหรือ WiFi หลุด
วิธีแก้: ตรวจสอบ Serial Monitor และแหล่งจ่ายไฟ
📝 สรุป
ในบทความนี้คุณได้เรียนรู้:
- ✅ การต่อ DHT22 กับ ESP32
- ✅ สร้าง Web Server บน ESP32
- ✅ อ่านค่าอุณหภูมิและความชื้น
- ✅ แสดงผลบนเว็บเบราว์เซอร์
- ✅ การแก้ปัญหาที่พบบ่อย