[TH] ESP-01s + Relay

jarutex Arduino, Arduino C/C++, esp8266, Thai

บทความนี้เป็นการประยุกต์ใช้โมดูล ESP-01s เชื่อมต่อกับโมดูล ESP-01/01s Relay v4.0 ดังภาพที่ 1 เพื่อสั่งงานให้รีเลย์ทำงาน โดยตัวอย่างโปรแกรมเป็นการเปิดและปิดรีเลย์ผ่านทางเว็บบราวเซอร์ซึ่งได้กล่าวถึงไปบ้างแล้วในบทความ WebServer แต่เพิ่มเติมคือเรื่องการดัก URL สำหรับนำมาเป็นอาร์กิวเมนต์ของการทำงาน

ภาพที่ 1 ตัวอย่างการทดลองในบทความ ESP-01s + Relay

โมดูล ESP-01/01s Relay

โมดูล ESP-01/01s Relay v4.0 ดังภาพที่ 2 และ 3 เป็นโมดูลที่ออกแบบเพื่อใช้กับชุด ESP-01 หรือ ESP-01s โดยบนบอร์ดมีช่องเสียบโมดูล ESP-01/01s มาให้ดังส่วนประกอบของบอร์ดในภาพที่ 4 และตัวอย่างการติดตั้งบอร์ด ESP-01s ในภาพที่ 5

ภาพที่ 2 โมดูล ESP-01/01s Relay ด้านบน
ภาพที่ 3 โมดูล ESP-01/01s Relay ด้านล่าง
ภาพที่ 4 ส่วนประกอบของโมดูล ESP-01/01s Relay

บนตัวบอร์ดมีตัวแปลงแรงดันจาก 5vdc ให้เป็น 3V3 พร้อมปุ่มสำหรับรีเซ็ตทำให้สะดวกในการใช้งานเนื่องจากการแปลงแรงดัน 5VDC (3.7-12vdc)มาแปลงเป็น 3V3 เพื่อทำให้ใช้โมดูล ESP-01 หรือ ESP-01s ได้ง่ายขึ้นส่วนหัวเชื่อมต่อแบบ 3 ช่องในฝั่งรีเลย์ใช้สำหรับต่อขับโหลดภายนอกทั้งเป็นแบบแรงดันไฟฟ้ากระแสตรงหรือกระแสสลับ

ภาพที่ 5 โมดูล ESP-01/01s Relay ที่ติดตั้ง ESP-01s

คุณสมบัติหลักของโมดูลเป็นดังนี้

  • รองรับการใช้งานได้ทั้งบอร์ด ESP-01 และ ESP-01s
  • รีเลย์ที่ติดตั้งสามารถใช้กับไฟฟ้ากระแสตรง 220V และขับกระแสได้สูงสุด 10A
  • ช่องเชื่อมต่อกับรีเลย์มี 3 ขั้วสำหรับ NC, NO และ COM
  • ทำงานที่แรงดันนำเข้า 3.7VDC ถึง 12VDC
  • ต้องการกระแสมากกว่า 250mA แต่ด้วยการใช้ LD1117 ซึ่งรองรับการขับโหลดได้สูงสุด 800mA จึงเพียงพอต่อการใช้งาน

ผังวงจรของ ESP-01/01s Relay v4.0 เป็นดังภาพที่ 6 จะพบว่าขาสำหรับขับรีเลย์คือ GPIO0 และใช้ LD1117 เป็นตัวแปลงแรงดัน

ภาพที่ 6 ผังวงจรของ ESP-01/01s Relay V4.0
ที่มา https://github.com/IOT-MCU/ESP-01S-Relay-v4.0/blob/master/ESP-01S%20Relay%20v4.0.pdf

ตัวอย่างโปรแกรม

ตัวอย่างโปรแกรมแรกเป็นการทดสอบโมดูลรีเลย์ด้วยการส่ง HIGH และ LOW สลับทุก 10 วินาที

// Relay 5V
#define relayPin 0
#define ledPin 2

void setup() {
  pinMode( relayPin, OUTPUT );
  pinMode( ledPin, OUTPUT );
}

void loop() {
  digitalWrite( ledPin, HIGH ); 
  digitalWrite( relayPin, HIGH );
  delay(10000);
  digitalWrite( ledPin, LOW ); 
  digitalWrite( relayPin, LOW );
  delay(10000);
}

ในการทดสอบแล็บครั้งนี้ได้ใช้การขับโหลดเป็นหลอดแอลอีดีดังภาพที่ 7 แทนการใช้หลอดไฟฟ้ากระแสสลับ (เพื่อป้องกันผู้เขียนบทความเอง)

ภาพที่ 7 ตัวอย่างการต่อใช้งานเพื่อขับหลอดแอลอีดี

จากบทความก่อนหน้านี้การทำงานของการให้บริการเว็บเป็นการแสดงให้ผู้ใช้ทราบ แต่ในกรณีของการนำเข้าข้อมูลจากผู้ใช้นั้นต้องอาศัยส่วนประกอบเว็บที่เป็นการนำเข้าจากฟอร์ม และส่งพารามิเตอร์มาในรูปแบบของ HTTP GET Requests เช่น

<form action='/ชื่อทรัพยากร' id='รหัสของฟอร์ม'>
</form>
<button type="submit" form="รหัสชองฟอร์ม" value="Submit">ข้อความบนปุ่ม</button>

จากแบบฟอร์มด้านบนเมื่อเขียนภาษา HTML ดังต่อไปนี้จะได้ว่าถ้าผู้ใช้กดปุ่มจะเรียกเว็บด้วย /abc? ซึ่ง /abc คือสิ่งที่เราใช้ในการกำหนด server.on(“/abc”, ฟังก์ชันตอบสนองการทำงาน )

<form action='/abc' id='controlForm'>
</form>
<button type="submit" form="controlForm" value="Submit">Press</button>

โค้ดโปรแกรมการควบคุมรีเลย์ผ่านหน้าเว็บเป็นดังนี้

// control Relay
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

#define AP_NAME "JarutEx"
#define AP_PASSWD "123456789"
#define relayPin 0
#define ledPin 2

IPAddress myIP(192, 168, 4, 1);
IPAddress gwIP(192, 168, 4, 10);
IPAddress subnet(255, 255, 255, 0);

ESP8266WebServer server(80);


void setup() {
  pinMode( relayPin, OUTPUT );
  pinMode( ledPin, OUTPUT );
  if (WiFi.softAPConfig( myIP, gwIP, subnet )) {
    if (WiFi.softAP(AP_NAME, AP_PASSWD, 8, false, 5)) {
      digitalWrite( ledPin, HIGH );
    } else {
      digitalWrite( ledPin, LOW );
      while (true);
    }
  } else {
    while (true) {
      digitalWrite( ledPin, LOW );
      delay(100);
      digitalWrite( ledPin, HIGH );
      delay(100);
    }
  }
  server.on("/", htmlPage);
  server.on("/turnOn", doTurnOn);
  server.on("/turnOff", doTurnOff);
  server.begin();
}

int relayStatus = 0; // 0 = off, 1 = on


void doTurnOn() {
  relayStatus = 1;
  digitalWrite( relayPin, LOW );

  htmlPage();
}

void doTurnOff() {
  relayStatus = 0;
  digitalWrite( relayPin, HIGH );
  htmlPage();
}

void htmlPage() {
  String html;
  html.reserve(2048);               // prevent ram fragmentation
  html = F(
           "<!DOCTYPE HTML>"
           "<html><head>"
           "<meta name='viewport' content='width=device-width, initial-scale=1'>"
           "<style>"
           "html {font-family: Arial; display: inline-block; text-align: center;}"
           "h1 {font-size: 3.0rem;}"
           "p {font-size: 3.0rem;}"
           "body {max-width: 800px; margin:0px auto; padding-bottom: 16px;}"
           ".switch {position: relative; display: inline-block; width: 120px; height: 68px} "
           ".switch input {display: none}"
           ".slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px}"
           ".slider:before {position: absolute; content: ''; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px}"
           "input:checked+.slider {background-color: #2196F3}"
           "input: checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}"
           ".button {"
           "background-color: #4CAF50; /* Green */"
           "border: none;"
           "color: white;"
           "padding: 32px 32px;"
           "text-align: center;"
           "text-decoration: none;"
           "display: inline-block;"
           "font-size: 16px;"
           "width: 10.0rem;"
           "height: 10.0rem;"
           "border-radius: 50%;"
           "}"
           ".buttonOn {background-color: #f44336;}"
           ".buttonOff {background-color: #555555;}"
           "</style>"
           "</head><body>"
           "<h1>ESP-01/01a Relay V4.0</h1>"
         );
  if (relayStatus == 0) {
    html += F("<div><form action='/turnOn' id='controlRelay'>" // input type='button'>On/Off</input></div>");
              "</form>"
              "<button type='submit' class='button buttonOn' form='controlRelay' value=Submit'>Turn On</button>"
              "</div>"
             );
  } else {
    html += F("<div><form action='/turnOff' id='controlRelay'>" // input type='button'>On/Off</input></div>");
              "</form>"
              "<button  class='button buttonOff' type='submit' form='controlRelay' value=Submit'>Turn Off</button>"
              "</div>"
             );

  }
  html += F("</body></html>\r\n");
  server.send(200, "text/html", html);
}

void loop() {
  server.handleClient();
}

ในภาพที่ 8 เป็นตัวอย่างเมื่อส่ง HIGH ไปที่ Relay และภาพที่ 9 เป็นตัวอย่างเมื่อส่ง LOW ซึ่งส่งผลให้วงจรเปิด หรือไฟดับ/หลอดแอลอีดีไม่ติด และวงจรปิดหรือไฟติด/หลอดแอลอีดีติด (กรุณาตรวจสอบการต่อวงจรของฝั่งรีเลย์ให้ดีเพราะสามารถต่อแล้วทำงานกลับกันได้) ส่วนภาพที่ 10 และ 11 เป็นภาพตัวอย่างการใช้งานจากหน้าเว็บบราวเซอร์

ภาพที่ 8 ตัวอย่างผลลัพธ์เมื่อส่งสถานะ HIGH
ภาพที่ 9 ตัวอย่างเมื่อส่งสถานะ LOW
ภาพที่ 10 หน้าเว็บเมื่ออยู่ในสถานะปิด
ภาพที่ 11 หน้าเว็บในสถานะเปิด

สรุป

จากบทความนี้จะพบว่าโมดูล ESP-01/01s Relay มีความสะดวกในการนำไปติดตั้งใช้งานจริงเพราะบนบอร์ดมีภาคแปลงไฟจาก 3.7-12VDC ให้เป็น 3V3 เพื่อเลี้ยงบอร์ด ESP-01s และใช้ 5VDC จาก Power Bank ได้ผลดีเช่นเดียวกัน แต่ถ้าต้องการเปิดปิดไฟฟ้ากระแสสลับ ทางทีมงานขอให้ผู้ทดลองระมัดระวังให้ดีเนื่องจากมีอันตราย และคำถามสำคัญ คือ ทำอย่างไให้หน้าเว็บสวยงาม สุดท้ายขอให้สนุกกับการเขียนโปรแกรมครับ

แหล่งอ้างอิง

  1. IOT MCU github : ESP-01/01s Relay V4.0
  2. IOT MCU Datasheet : ESP-01/01s Relay V4.0 Document
  3. ST : LD1117
  4. Random Nerd Tutorial : ESP8266 NodeMCU Relay Module – Control AC Appliances (Web Server)
  5. Random Nerd Tutorial : Input Data on HTML From ESP32/ESP8266 Web Server using Arduino IDE

(C) 2021, โดย อ.ดนัย เจษฎาฐิติกุล/อ.จารุต บุศราทิจ

ปรับปรุงเมื่อ 2021-08-08, 2021-08-10, 2021-11-07