Hướng dẫn đọc cảm biến ánh sáng (LDR) bằng ESP32 và hiển thị giá trị độ sáng realtime trên trình duyệt thông qua WebSocket. Bài viết có mã ví dụ, sơ đồ nối dây và giải thích rõ ràng.
Mục lục
- Giới thiệu
- Nguyên lý cảm biến LDR
- Phần cứng cần chuẩn bị
- Sơ đồ kết nối
- Mã nguồn hoàn chỉnh
- Giải thích mã
- Kết quả & demo
- Gợi ý mở rộng
1) Giới thiệu
Cảm biến ánh sáng LDR (Light Dependent Resistor) giúp đo cường độ ánh sáng môi trường. Khi ánh sáng mạnh, điện trở giảm → điện áp ADC tăng; khi tối, điện trở tăng → điện áp giảm.
Trong bài này, ta sẽ:
- Đọc giá trị ánh sáng bằng ADC GPIO34 của ESP32.
- Gửi dữ liệu realtime lên trình duyệt bằng WebSocket.
- Vẽ biểu đồ trực tiếp theo thời gian.
2) Nguyên lý hoạt động LDR
- LDR có điện trở thay đổi theo cường độ sáng (từ vài trăm Ω đến vài MΩ).
- Để đo được điện áp, ta tạo mạch chia điện áp (Voltage Divider):
3.3V ---[LDR]---(ADC Pin)---[10kΩ]---GND- Khi sáng → điện áp ADC cao.
- Khi tối → điện áp ADC thấp.
3) Phần cứng cần chuẩn bị
| Linh kiện | Số lượng | Ghi chú |
|---|---|---|
| ESP32 DevKit V1 | 1 | |
| Cảm biến LDR | 1 | Loại 5mm hoặc module |
| Điện trở 10kΩ | 1 | Dùng cho mạch chia áp |
| Dây nối/Breadboard | Vài sợi |
4) Sơ đồ kết nối (Connection Diagram)
- LDR → 3.3V và chân ADC34 (GPIO34)
- Điện trở 10kΩ → từ ADC34 xuống GND
- ESP32 cấp nguồn qua USB.
- Gửi dữ liệu realtime qua WebSocket tới trình duyệt.
5) Mã nguồn hoàn chỉnh
#include <WiFi.h>
#include <WebServer.h>
#include <WebSocketsServer.h>
#define LDR_PIN 34 // chân ADC đọc cảm biến ánh sáng
const char* ssid = "YourWiFiName";
const char* password = "YourPassword";
WebServer http(80);
WebSocketsServer ws(81);
const char HTML_PAGE[] PROGMEM = R"HTML(
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ESP32 LDR Realtime</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: system-ui; text-align:center; padding:30px;}
canvas { max-width:600px; margin:auto; }
</style>
</head>
<body>
<h1>ESP32 - LDR Sensor Realtime</h1>
<canvas id="chart"></canvas>
<script>
let ws, chart, data=[];
function connect(){
ws = new WebSocket('ws://' + location.hostname + ':81/');
ws.onmessage = e=>{
const val=parseInt(e.data);
data.push(val);
if(data.length>50) data.shift();
chart.data.labels = data.map((_,i)=>i);
chart.data.datasets[0].data = data;
chart.update();
};
ws.onclose=()=>setTimeout(connect,2000);
}
connect();
const ctx=document.getElementById('chart');
chart=new Chart(ctx,{type:'line',data:{
labels:[],datasets:[{label:'Light Level',data:[],borderColor:'#10b981',tension:0.2}]},
options:{scales:{y:{beginAtZero:true,max:4095}}}
});
</script>
</body></html>
)HTML";
void handleRoot() {
http.send_P(200, "text/html", HTML_PAGE);
}
void setup() {
Serial.begin(115200);
pinMode(LDR_PIN, INPUT);
WiFi.begin(ssid, password);
Serial.print("Connecting WiFi");
while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); }
Serial.println("\n✅ WiFi connected: " + WiFi.localIP().toString());
http.on("/", handleRoot);
http.begin();
ws.begin();
Serial.println("✅ HTTP server started");
Serial.println("✅ WebSocket server started on :81");
}
unsigned long lastSend = 0;
void loop() {
http.handleClient();
ws.loop();
unsigned long now = millis();
if (now - lastSend > 500) { // gửi mỗi 0.5s
int value = analogRead(LDR_PIN);
ws.broadcastTXT(String(value));
lastSend = now;
}
}
6) Giải thích mã
- analogRead(GPIO34) đọc giá trị ADC (0–4095).
- WebSocket Server (cổng 81) gửi dữ liệu realtime sang trình duyệt.
- Chart.js hiển thị dữ liệu ánh sáng realtime.
- Khi ánh sáng mạnh, biểu đồ tăng; khi che cảm biến, biểu đồ giảm.
7) Kết quả & demo
- Khi chạy, Serial Monitor hiển thị IP của ESP32 (VD:
192.168.1.105). - Mở trình duyệt → truy cập:
http://192.168.1.105/ - Biểu đồ realtime hiển thị cường độ ánh sáng (0–4095).
- Thử chiếu đèn hoặc che cảm biến → đường biểu đồ thay đổi tức thì.
8) Gợi ý mở rộng
- Gửi dữ liệu nhiều cảm biến cùng lúc (LDR + DHT11).
- Lưu dữ liệu vào SD Card hoặc Firebase.
- Thêm nút bật/tắt đèn tự động theo mức ánh sáng.
- Dùng canvas.js hoặc ECharts để hiển thị chuyên nghiệp hơn.
Để lại một bình luận