การสร้างระบบแจ้งเตือนเมื่อมีการเคลื่อนไหวด้วย ESP32, IR Sensor และ WebSocket

การสร้างระบบแจ้งเตือนเมื่อมีการเคลื่อนไหวด้วย IR sensor with esp32 WebSocket

บทนำ

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

สารบัญ

อุปกรณ์ที่ใช้

  1. ESP32 - บอร์ดไมโครคอนโทรลเลอร์ (ข้อมูลเพิ่มเติมเกี่ยวกับ ESP32)
  2. IR Sensor - เซ็นเซอร์อินฟราเรดสำหรับตรวจจับการเคลื่อนไหว(ข้อมูลเพิ่มเติมเกี่ยวกับ IR Sensor)
  3. Buzzer - สำหรับการสร้างสัญญาณเสียงเตือน
  4. สายเชื่อมต่อ - สำหรับการเชื่อมต่อระหว่าง ESP32 และ IR Sensor
  5. 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 และ WebSocket นี้คือรูปการต่อสายสัญญาณการเชื่อมต่อระหว่าง ESP32 และ IR Sensor นี้สามารถทำได้ง่ายๆ โดยการใช้สายเชื่อมต่อและ breadboard ในการจัดการการเชื่อมต่อในแบบชั่วคราว เพื่อทดสอบการทำงานก่อนการติดตั้งจริง

หลักการทำงานของ IR Sensor

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

การเขียนโปรแกรม ESP32

การติดตั้งไลบรารีและการตั้งค่าเบื้องต้น

ก่อนที่จะเริ่มเขียนโปรแกรม เราจำเป็นต้องติดตั้งไลบรารีที่จำเป็นสำหรับการใช้งาน ESP32 และ WebSocket สามารถติดตั้งได้จาก Arduino IDE โดยทำตามขั้นตอนดังนี้:
  1. เปิด Arduino IDE และไปที่ File -> Preferences
  2. ในช่อง Additional Boards Manager URLs ให้ใส่ลิงก์นี้: https://dl.espressif.com/dl/package_esp32_index.json
  3. ไปที่ Tools -> Board -> Boards Manager แล้วค้นหา ESP32 และกดติดตั้ง
  4. ติดตั้งไลบรารี 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 ที่น่าสนใจต่อไป
Shopping Cart
Scroll to Top