ESP32 Web Server Control Relay Module

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

ก่อนจะเริ่มทำโปรเจกต์ ลองไปทำความรู้จัก ESP32 และฟีเจอร์เด่นที่คุณควรรู้ กันก่อน

ภาพรวมการทำงาน

การควบคุมรีเลย์ด้วย ESP32 นั้นเหมือนกับการควบคุม LED หรือควบคุมขา GPIO ที่คุณได้เรียนรู้จากบทเรียน ESP32 การอ่านอินพุตดิจิทัลและวิธีการควบคุมเอาต์พุต

ในตัวอย่างนี้ โมดูลรีเลย์ที่ Deva Diy ใช้ในโครงงานนี้จะใช้ Active LOW เพื่อให้โมดูลรีเลย์ทำงานนำกระแส และ HIGH เพื่อให้โมดูลรีเลย์หยุดนำกระแส

ในส่วนหน้าเว็บเพจจะสร้างปุ่มสไลด์ควบคุมการเปิดปิดรีเลย์และอัพเดทปุ่มสไลด์ ตามจำนวนรีเลย์ให้อัตโนมัติซึ่งการแก้ไขส่วนนี้จะกล่าวในของโค๊ดโปรแกม Arduino sketch

เมื่อกดปุ่มสไลด์เปิด ปิดรีเลย์บนอุปกรณ์จะส่งคำขอ HTTP GET ไปที่ ESP

คำขอที่ส่งไปให้ ESP คือ “/output” และตัวแปรพารามิเตอร์
ตัวแปรพารามิเตอร์ที่ส่งไปด้วย คือ “relay”, “state”
ค่าในตัวแปรพารามิเตอร์ relay คือ เลข ID ปุ่มสไลด์ เช่น เมื่อกดปุ่มสไลด์ Relay#1 ค่าในตัวแปรพารามิเตอร์ relay=1
ค่าในตัวแปรพารามิเตอร์ state คือ สถานะของปุ่มสไลด์ 0, 1 เมื่อปุ่มอยู่ในสถานะเปิด=0 ปุ่มอยู่ในสถานะปิด=1

ฮาร์ดแวร์ รีเลย์โมดูล

ตัวอย่างโมดูลรีเลย์ ในโครงงานนี้เป็นโมดูลรีเลย์ 2 ช่องสัญญาณ

✅ทางด้านซ้ายมีซ็อกเก็ตสามชุดสองชุดสำหรับเชื่อมต่อไฟฟ้าแรงสูง และพินด้านขวา เชื่อมต่อกับ ESP32 GPIO

✅ทางด้านขวามือมีชุดพินสี่พินและชุดพินสามพิน

✅ ชุดแรกประกอบด้วย VCC และ GND เพื่อเปิดเครื่องโมดูล และอินพุต 1 (IN1) และอินพุต 2 (IN2) เพื่อควบคุมรีเลย์ตัวที่ 1 และ 2
✅ พินชุดที่สองประกอบด้วยพิน GND, VCC และ JD-VCC พิน JD-VCC จ่ายไฟให้กับคอยล์ไฟฟ้าของรีเลย์ โมดูลมีจัมเปอร์เชื่อมต่อพิน VCC และ JD-VCC
✅ เมื่อพิน VCC และ JD-VCC จะเชื่อมต่อกัน นั่นหมายความว่าคอยล์ไฟฟ้าของรีเลย์ได้รับแหล่งจ่ายไฟตรงจาก VCC ดังนั้นโมดูลรีเลย์และวงจร ESP32 จะไม่ถูกแยกออกจากกัน
✅ ในกรณีไม่เชื่อมต่อจัมเปอร์ VCC และ JD-VCC จะแยกจากกันด้วยออปโตคัปเปลอร์ในตัวของโมดูล ซึ่งช่วยป้องกันความเสียหายที่เกิดกับ ESP32 ในกรณีที่เกิดไฟกระชาก ดังนั้นคุณจำเป็นต้องต่อไฟเลี้ยงคอยล์ไฟฟ้าของรีเลย์ที่พิน JD-VCC และ GND จากแหล่งอื่นแยกจากตัวบอร์ด ESP32

ควบคุมรีเลย์หลายตัวด้วยเว็บเซิร์ฟเวอร์ ESP32

การติดตั้งไลบรารี (Arduino IDE)

ติดตั้งไลบรารีต่อไปนี้ใน Arduino IDE ไปที่:
Sketch > Include Library > Add .zip Library และ เลือกไลบรารีที่จะติดตั้ง

ESPAsyncWebServer (โฟลเดอร์ .zip)

AsyncTCP (โฟลเดอร์ .zip)

หลังจากติดตั้งไลบรารีเสร็จแล้ว ให้คัดลอกโค้ดต่อไปนี้ไปยัง Arduino IDE ของคุณ

“หากยังไม่รู้จัก ESPAsyncWebServer มาก่อน แนะนำให้อ่านคู่มือฉบับเต็มก่อนใช้งานจริง”
🔗 ESPAsyncWebServer Guide

ไฟล์ HTML

สร้างไฟล์ index.h โดยมีข้อมูลดังนี้

const char index_html[] PROGMEM = R"rawliteral(
<div class="slider-container">
<h2>ESP Web Server ควบคุมเปิด-ปิด Relays</h2>
<span style="font-size: 1.25em;">สถานะล่าสุด Relay</span><span id="NO" style="font-size: 1.25em;"></span><span style="font-size: 1.25em;">: </span>
<span id="stateRelay" style="font-size: 1.25em;"></span>


%VALUE_INPUT%

</div>
<script>
    function updateSlider(element){
      var Relay_NO = element.id;
      var output = element.checked? 0 : 1; 
      document.getElementById("NO").innerText = Relay_NO;
      document.getElementById("stateRelay").innerText = element.checked? "ON" : "OFF";
      
      var xhr = new XMLHttpRequest();    
      xhr.open("GET", "/output?relay="+Relay_NO+"&state="+output, true);
      xhr.send();
    }
</script>


)rawliteral";

ไฟล์ style.css

สร้างไฟล์ style.h โดยมีข้อมูลดังนี้

const char style_css[] PROGMEM = R"rawliteral(
body {
margin: auto;
padding: auto;
justify-content: center;
align-items: center;
font-family: sans-serif;
text-align: center;
}

.slider-container {
max-width: 500px;
margin: 200px auto;
padding: 10px;
display: block;
justify-content: center;
align-items: center;
background: #f0f0f0;
border-radius: 20px;
border: solid 3px rgba(75, 192, 192, 1);
}

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}

input:checked + .slider {
background-color: #2196F3;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

.relayBox{
align-items: center;
padding: 10px;
margin: 10px auto;
border-radius: 20px;
border: solid 3px rgba(75, 192, 192, 1);
}

.relayName {
font-size: 1.25em;
vertical-align: middle;
}

label {
vertical-align: middle;
}
)rawliteral";

ไฟล์ Arduino sketch

นี้คือโค๊ดตัวอย่างการทำงาน Web Server เพื่อควบคุมการเปิด ปิดรีเลย์:

/*
Deva Diy
ESP Web Server ควบคุมรีเลย์โมดูลมากกว่า 1 ตัว
*/
#include
#include
#include
#include "index.h"
#include "style.h"

// สร้าง AsyncWebServer object พอร์ต 80
AsyncWebServer server(80);

//ตัวแปรบันทึกค่า ssid รหัสผ่าน
const char* ssid = "your ssid";
const char* password = "your pass";

const int count = 4;
int relay_NO[count] = {27, 26, 25, 33};

int relayState = 0;

void WiFi_init() {
unsigned long pastTime = 0;
unsigned long nowTime = 0;
unsigned long timeOut = 10000;

// ตั้งค่า esp32 WiFi Mode : Station
WiFi.mode(WIFI_STA);
// เชื่อมต่อเครื่อข่าย WiFi ด้วย ssid, password
WiFi.begin(ssid, password);

// ตรวจสอบการเชื่อมต่อ WiFi ถ้าใช้เวลาเชื่อมต่อเกิน timeOut ให้หยุดการเชื่อมต่อ
pastTime = millis();
while ((WiFi.status() != WL_CONNECTED) &amp;&amp; (nowTime &lt;= timeOut )) {
Serial.print("Connecting to "); Serial.println(ssid);
delay(500);
nowTime = millis() - pastTime;
}
if (WiFi.status() == WL_CONNECTED) {
Serial.print("Local ESP32 IP: ");
Serial.println(WiFi.localIP());
Serial.print("RSSI: ");
Serial.println(WiFi.RSSI());
}
else {
Serial.print("Unable connect to Wi-Fi " + String(ssid));
WiFi.disconnect();
}
}

// วางแท็ก HTML ในการควบคุมรีเลย์ ในส่วน placeholder
String processor(const String&amp; var) {
String str = "";
String htmlRelay = "";
if (var == "VALUE_INPUT"){
for(int i=0; i&lt;count; i++){
str = String(i+1);
int s = digitalRead(relay_NO[i]);
String check = (s == 0) ? "checked" : "";
htmlRelay += "
<div class="\&quot;relayBox\&quot;"><span class="\&quot;relayName\&quot;">Relay#" +str+ "</span><label class="\&quot;switch\&quot;"><input id="\&quot;" type="\&quot;checkbox\&quot;" /></label></div>
\n";
}
return htmlRelay;
}
return "";
}

void setup() {
Serial.begin(115200);

WiFi_init();

// configure GPIO INPUT/OUTPUT
for(int i=0; i&lt;count; i++){ pinMode(relay_NO[i], OUTPUT); digitalWrite(relay_NO[i], HIGH); } // Route for root / web page server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) { request-&gt;send_P(200, "text/html", index_html, processor);
});
server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest * request) {
request-&gt;send_P(200, "text/css", style_css);
});

// Send a GET request to ESP
server.on("/output", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputGET;
String inputGET1;

// GET input value on /output?relay="&amp;state=<output>
if (request-&gt;hasParam("relay") &amp; request-&gt;hasParam("state")) {
inputGET = request-&gt;getParam("relay")-&gt;value();
inputGET1 = request-&gt;getParam("state")-&gt;value();
int i = (inputGET.toInt()-1);
relayState = inputGET1.toInt();
digitalWrite(relay_NO[i], relayState);
}
else {
inputGET = "No Parameter!";
}
request-&gt;send(200, "text/plain", "Set up successfully");
Serial.println("Relay NO: "+inputGET);
Serial.println("State: "+inputGET1);
});
// Start server
server.begin();
}</output>

void loop() {

}

ข้อมูลรับรองเครือข่าย WiFi ใส่ข้อมูลรับรองเครือข่ายของคุณในตัวแปรนี้

const char* ssid = "your ssid";
const char* password = "your pass";

กำหนดจำนวนรีเลย์ กำหนดจำนวนรีเลย์ที่คุณต้องการควบคุมในตัวแปร count ในตัวอย่างนี้จะตั้งค่าเป็น 4

const int count = 4;

กำหนดขารีเลย์ ในตัวแปรอาเรย์นี้ เป็นตัวกำหนด ESP32 GPIO ที่ควบคุมรีเลย์ จำนวนรีเลย์ที่ตั้งค่าไว้ในตัวแปร count จะต้องตรงกับจำนวน GPIO ที่กำหนดในอาร์เรย์ relay_NO

int relay_NO[count] = {27, 26, 25, 33};

หากต้องการควบคุมรีเลย์มากกว่า 4 ตัว คุณสามารถแก้ไขจำนวนรีเลย์ในตัวแปร count และเพิ่มขา GPIO ในตัวแปร array ที่มีชื่อว่า relay_NO

Download Code ดาวน์โหลดไฟล์ทั้งหมดได้ที่นี้

กรุณา เข้าสู่ระบบ เพื่อดาวน์โหลด

สรุปบทเรียน ESP32 Web Server Control Relay Module ควบคุมโมดูลรีเลย์

คุณสามารถใช้โค๊ดตัวอย่างนี้ควบคุมการทำงานรีเลย์จากระยะไกลและยังสามารถจัดการควบคุมรีเลย์จำนวนมากได้ตามที่คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ ESP32 :