การสร้างระบบแจ้งเตือนเมื่อมีการเคลื่อนไหวด้วย IR sensor with esp32 WebSocket
บทนำ
ในยุคที่เทคโนโลยี IoT (Internet of Things) มีบทบาทสำคัญในการพัฒนานวัตกรรม การสร้าง
ระบบเฝ้าระวังด้วย IR sensor with esp32 และ WebSocket เป็นโครงงานที่น่าสนใจ ที่สามารถนำไปใช้ในสถานการณ์ต่างๆ เช่น การรักษาความปลอดภัยภายในบ้าน การเฝ้าระวังในพื้นที่ที่ไม่ควรมีการเคลื่อนไหว หรือการตรวจจับความเคลื่อนไหวในพื้นที่ที่ต้องการความปลอดภัยสูงบทความนี้จะแนะนำการสร้างระบบเฝ้าระวังด้วย ESP32 และ IR Sensor ซึ่งข้อมูลการเคลื่อนไหวจะถูกส่งไปยังเว็บเบราว์เซอร์ผ่าน WebSocket เพื่อให้ผู้ใช้งานสามารถรับการแจ้งเตือนแบบเรียลไทม์ได้
สารบัญ
อุปกรณ์ที่ใช้
- ESP32 - บอร์ดไมโครคอนโทรลเลอร์ (ข้อมูลเพิ่มเติมเกี่ยวกับ ESP32)
- IR Sensor - เซ็นเซอร์อินฟราเรดสำหรับตรวจจับการเคลื่อนไหว(ข้อมูลเพิ่มเติมเกี่ยวกับ IR Sensor)
- Buzzer - สำหรับการสร้างสัญญาณเสียงเตือน
- สายเชื่อมต่อ - สำหรับการเชื่อมต่อระหว่าง ESP32 และ IR Sensor
- Breadboard - กระดานทดลองสำหรับการเชื่อมต่ออุปกรณ์
การเชื่อมต่อระหว่าง ESP32 และ IR Sensor
เชื่อมต่อขาของ IR Sensor กับขาของ ESP32 ดังนี้:
- VCC ของ IR Sensor ต่อกับ 3.3V ของ ESP32
- GND ของ IR Sensor ต่อกับ GND ของ ESP32
- OUT ของ IR Sensor ต่อกับขาดิจิตอลของ ESP32 GPIO 25

การเชื่อมต่อระหว่าง ESP32 และ IR Sensor นี้สามารถทำได้ง่ายๆ โดยการใช้สายเชื่อมต่อและ breadboard ในการจัดการการเชื่อมต่อในแบบชั่วคราว เพื่อทดสอบการทำงานก่อนการติดตั้งจริง
หลักการทำงานของ IR Sensor
IR Sensor หรือเซ็นเซอร์อินฟราเรดทำงานโดยการตรวจจับการเปลี่ยนแปลงของรังสีอินฟราเรดที่ถูกส่งออกมา เมื่อมีการเคลื่อนไหวผ่านหน้าตัวเซ็นเซอร์ รังสีอินฟราเรดจะถูกบังหรือสะท้อนกลับมาที่เซ็นเซอร์ ทำให้เซ็นเซอร์สามารถตรวจจับการเปลี่ยนแปลงนี้และส่งสัญญาณออกมาได้การทำงานของ IR Sensor นี้มีความแม่นยำสูงและสามารถตรวจจับการเคลื่อนไหวได้ในระยะที่กำหนด ทำให้เหมาะสำหรับการใช้งานใน
ระบบเฝ้าระวังด้วย ESP32 และ WebSocketการเขียนโปรแกรม ESP32
การติดตั้งไลบรารีและการตั้งค่าเบื้องต้น
ก่อนที่จะเริ่มเขียนโปรแกรม เราจำเป็นต้องติดตั้งไลบรารีที่จำเป็นสำหรับการใช้งาน ESP32 และ WebSocket สามารถติดตั้งได้จาก
Arduino IDE โดยทำตามขั้นตอนดังนี้:
- เปิด Arduino IDE และไปที่ File -> Preferences
- ในช่อง Additional Boards Manager URLs ให้ใส่ลิงก์นี้:
https://dl.espressif.com/dl/package_esp32_index.json - ไปที่ Tools -> Board -> Boards Manager แล้วค้นหา ESP32 และกดติดตั้ง
- ติดตั้งไลบรารี WebSocketClient โดยไปที่ Sketch -> Include Library -> Manage Libraries แล้วค้นหา WebSocketClient และกดติดตั้ง
โค้ดตัวอย่างสำหรับ ESP32
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <AsyncTCP.h>
#include <ArduinoJson.h>
#include "index.h"
#include "styles.h"
#include "script.h"
// กำหนดค่า Wi-Fi
const char* ssid = "ชื่อเครือข่าย";
const char* password = "รหัสผ่าน";
// ขาของ IR Sensor เชื่อมต่อกับขา GPIO
const int irSensorPin = 25;
// ขา+ ของ Buzzer เชื่อมต่อกับขา GPIO
const int buzzerPin = 14;
AsyncWebServer server(80);
AsyncWebSocket ws("/ws");
void notifyClients() {
StaticJsonDocument<200> doc;
doc["message"] = "Motion Detected!!";
String jsonString;
serializeJson(doc, jsonString);
ws.textAll(jsonString);
}
void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
AwsFrameInfo *info = (AwsFrameInfo*)arg;
if(info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
data[len] = 0;
Serial.printf("Received message: %s\n", data);
}
}
void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {
switch (type) {
case WS_EVT_CONNECT:
Serial.println("WebSocket client connected");
break;
case WS_EVT_DISCONNECT:
Serial.println("WebSocket client disconnected");
break;
case WS_EVT_DATA:
handleWebSocketMessage(arg, data, len);
break;
case WS_EVT_PONG:
case WS_EVT_ERROR:
break;
}
}
void setup() {
Serial.begin(115200);
// เชื่อมต่อ Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
Serial.print("Local ESP32 IP: ");
Serial.println(WiFi.localIP());
// กำหนดค่า IR Sensor
pinMode(irSensorPin, INPUT);
// กำหนดค่า Buzzer
pinMode(buzzerPin, OUTPUT);
// เริ่มต้น WebSocket server
ws.onEvent(onEvent);
server.addHandler(&ws);
// คำร้องขอ root url HTML
server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send_P(200, "text/html", index_html);
});
// คำร้องขอ style.css
server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send_P(200, "text/css", style_css);
});
// คำร้องขอ script.js
server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send_P(200, "text/javascript", script_js);
});
// เริ่มต้น HTTP server
server.begin();
}
void loop() {
if (digitalRead(irSensorPin) == LOW) {
Serial.println("Motion Detected!");
digitalWrite(buzzerPin, HIGH);
notifyClients();
delay(1000); // หลีกเลี่ยงการแจ้งเตือนซ้ำซ้อน
}
else {
digitalWrite(buzzerPin, LOW);
}
ws.cleanupClients();
}
การสร้างเว็บเพจสำหรับการแจ้งเตือนในระบบเฝ้าระวัง
โครงสร้าง HTML สำหรับระบบเฝ้าระวัง
สร้างไฟล์
index.html ด้วยโค้ดดังนี้:
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ระบบเฝ้าระวังด้วย ESP32 และ WebSocket</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>ระบบเฝ้าระวังด้วย ESP32</h1>
<div id="alert-box">Waiting for motion detection...</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
)rawliteral";
การตกแต่งด้วย CSS สำหรับหน้าเว็บระบบเฝ้าระวัง
สร้างไฟล์
styles.css ด้วยโค้ดดังนี้:
const char style_css[] PROGMEM = R"rawliteral(
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
h1 {
color: #333;
}
#alert-box {
background-color: #fff;
border: 2px solid #333;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.alert {
font-size: 2.25em;
color: darkred;
}
)rawliteral";
การเขียน JavaScript สำหรับระบบเฝ้าระวังด้วย WebSocket
สร้างไฟล์
script.js ด้วยโค้ดดังนี้:
const char script_js[] PROGMEM = R"rawliteral(
var gateway = `ws://${window.location.hostname}/ws`;
var websocket;
window.addEventListener('load', onLoad);
function onLoad(event) {
initWebSocket();
}
function initWebSocket() {
websocket = new WebSocket(gateway);
websocket.onopen = onOpen;
websocket.onclose = onClose;
websocket.onmessage = onMessage;
}
function onOpen(event) {
console.log('Connection opened');
}
function onClose(event) {
console.log('Connection closed');
setTimeout(initWebSocket, 2000);
}
function onMessage(event) {
var data = JSON.parse(event.data);
var alertBox = document.getElementById('alert-box');
alertBox.innerHTML = data.message;
alertBox.classList.add('alert');
}
)rawliteral";
การทดสอบระบบเฝ้าระวัง
เมื่อเขียนโค้ดและติดตั้งทุกอย่างเรียบร้อยแล้ว สามารถทดสอบระบบโดยการเปิดเว็บเบราว์เซอร์แล้วเข้าไปที่ IP ของ ESP32 ที่เชื่อมต่อกับ Wi-Fi จากนั้นลองเคลื่อนไหวในพื้นที่ที่เซ็นเซอร์สามารถตรวจจับได้ และตรวจสอบว่าระบบสามารถส่งการแจ้งเตือนไปยังเว็บเบราว์เซอร์ได้หรือไม่
การประยุกต์ใช้งานระบบเฝ้าระวัง
ระบบเฝ้าระวังนี้สามารถนำไปใช้ในหลายๆ สถานการณ์ เช่น:
การรักษาความปลอดภัยภายในบ้าน - ตรวจจับการเคลื่อนไหวเมื่อเราไม่อยู่บ้าน
การเฝ้าระวังในพื้นที่ที่ไม่ควรมีการเคลื่อนไหว - ใช้ในพื้นที่ที่ต้องการความปลอดภัยสูง เช่น ห้องเก็บของมีค่า
การตรวจจับความเคลื่อนไหวในพื้นที่สาธารณะ - ใช้ในพื้นที่ที่ต้องการเฝ้าระวัง
Download Code
ระบบแจ้งเตือนเมื่อมีการเคลื่อนไหวด้วย ESP32, IR Sensor และ WebSocket
ดาวน์โหลดไฟล์ทั้งหมดได้ที่นี้

สรุป
การสร้างระบบเฝ้าระวังด้วย ESP32 และ WebSocket เป็นโครงงานที่มีประโยชน์และน่าสนใจ สามารถนำไปประยุกต์ใช้ในหลายๆ สถานการณ์ โครงงานนี้ไม่เพียงแต่ช่วยให้เราเข้าใจการทำงานของอุปกรณ์ต่างๆ เช่น ESP32 และ IR Sensor แต่ยังช่วยให้เราได้เรียนรู้การสื่อสารข้อมูลแบบเรียลไทม์ผ่าน WebSocket หวังว่าบทความนี้จะเป็นประโยชน์และเป็นแรงบันดาลใจให้กับผู้อ่านทุกท่านในการสร้างโครงงาน IoT ที่น่าสนใจต่อไป