ESP8266 เป็นเว็บเซิฟเวอร์ คุมรีเลย์ 4 ช่อง เชื่อมต่อมือถือ



 ESP8266 เป็นเว็บเซิฟเวอร์ คุมรีเลย์ 4 ช่อง เชื่อมต่อมือถือ

อุปกรณ์ 

1. บอร์ด esp8266

2. เครื่องคอมพิวเตอร์ 

3. สายเชื่อมต่อ usb หรือสำหรับอัพโหลดโปรแกรมและจ่ายพลังงาน

4. Relay 4 channel

5. โทรศัพท์มือถือที่ปล่อยสัญญาณ hotpot ได้


ขั้นตอนที่ 1:เชื่อมต่อกับ Relay ให้ครบ 4 ขา

ESP8266   -> Relay 4 channel

3V        -> VCC

D1(GPIO5) -> In1

D2(GPIO4) -> In2

D5(GPIO14)-> In3

D6(GPIO12)-> In4

GND     -> GND


ESP8266 เป็นเว็บเซิฟเวอร์ สร้างลิงค์กดปุ่ม 4 ช่อง AsyncWebServer

ESPAsyncWebServer ควบคุม รีเลย์ 4 Cahnnel เป็นไลบรารี ทำมาให้ใช้ได้เลย 

ESPAsyncWebServer เป็นไลบรารีสำหรับไมโครคอนโทรลเลอร์ ESP8266 และ ESP32 

ที่ใช้ในการสร้างเว็บเซิร์ฟเวอร์แบบ asynchronous (ไม่บล็อก) ซึ่งหมายความว่า

คุณสามารถสร้างเว็บแอปพลิเคชันที่สามารถตอบสนองต่อคำขอหลาย ๆ รายการพร้อมกันได้อย่างมีประสิทธิภาพ 

โดยไม่ต้องรอคำขอหนึ่งเสร็จสิ้นก่อนจึงจะไปประมวลผลคำขออื่น


ทำไมต้องใช้ ESPAsyncWebServer?


ประสิทธิภาพสูง: เนื่องจากเป็นแบบ asynchronous ทำให้สามารถใช้ทรัพยากรของไมโครคอนโทรลเลอร์ได้อย่างคุ้มค่า

ง่ายต่อการใช้งาน: มี API ที่เข้าใจง่าย ทำให้การสร้างเว็บเซิร์ฟเวอร์เป็นเรื่องที่ไม่ซับซ้อน

ขยายได้: สามารถเพิ่มฟังก์ชันการทำงานต่างๆ ได้อย่างง่ายดาย เช่น การจัดการไฟล์ การสร้างแบบฟอร์ม และการเชื่อมต่อกับฐานข้อมูล

ใช้ทำอะไรได้บ้าง?


สร้างอินเทอร์เฟซสำหรับควบคุมอุปกรณ์: เช่น ควบคุมมอเตอร์, เซ็นเซอร์, รีเลย์ ผ่านหน้าเว็บ

สร้างแอปพลิเคชัน IoT: เช่น สร้างเซ็นเซอร์วัดอุณหภูมิที่ส่งข้อมูลไปยังเว็บเซิร์ฟเวอร์

สร้าง API สำหรับควบคุมอุปกรณ์จากอุปกรณ์อื่น: เช่น ควบคุมอุปกรณ์ผ่านสมาร์ทโฟน

สร้างหน้าเว็บแสดงข้อมูล: เช่น แสดงข้อมูลจากเซ็นเซอร์ต่างๆ


การติดตั้ง libraly ที่จำเป็นต้องใช้

ดาว์นโหลด ESPAsyncWebServer libraly

1. https://github.com/me-no-dev/ESPAsyncWebServer

2. Unzip and Rename ESPAsyncWebServer 

3. เก็บใน Arduino IDE libraries folder

หรือใช้วิธี Sketch > Include Library > Add .ZIP library เลือก zip ไฟล์ที่ดาว์นโหลดมา

4. ดาว์นโหลด ESPAsyncTCP-master  libraly

https://github.com/me-no-dev/ESPAsyncWebServer

5. Unzip Rename ESPAsyncTCP

6. เก็บใน Arduino IDE libraries folder

หรือใช้วิธี Sketch > Include Library > Add .ZIP library เลือก zip ไฟล์ที่ดาว์นโหลดมา 

แบบเดียวกับด้านบน


รีเลย์ Active Low เป็นชนิดหนึ่งของรีเลย์ที่ถูกออกแบบมาให้ทำงานเมื่อได้รับสัญญาณ 

อินพุตที่มีระดับต่ำ (Low) หรือเป็นศูนย์ (0) กล่าวอีกนัยหนึ่ง เมื่อเราส่งสัญญาณไฟฟ้า

ที่มีแรงดันต่ำไปยังขดลวดของรีเลย์ รีเลย์จะเปลี่ยนสถานะ จากเปิดเป็นปิด หรือจากปิดเป็นเปิด 

ขึ้นอยู่กับชนิดของหน้าสัมผัสที่เราใช้งาน


ขา NO, NC คืออะไร?

NO (Normally Open): หน้าสัมผัสแบบปกติเปิด หมายถึงในสภาวะปกติ (เมื่อไม่มีสัญญาณ) 

หน้าสัมผัสนี้จะไม่ต่อกัน เมื่อได้รับสัญญาณให้รีเลย์ทำงาน หน้าสัมผัส NO จะต่อกัน

NC (Normally Closed): หน้าสัมผัสแบบปกติปิด หมายถึงในสภาวะปกติ หน้าสัมผัสนี้จะต่อกัน 

เมื่อได้รับสัญญาณให้รีเลย์ทำงาน หน้าสัมผัส NC จะขาดจากกัน


การทำงานของรีเลย์ Active Low

สภาวะปกติ: เมื่อไม่มีสัญญาณอินพุตเข้ามา ที่รีเลย์ ขดลวดของรีเลย์จะไม่มีสนามแม่เหล็กเกิดขึ้น 

ทำให้หน้าสัมผัสยังคงอยู่ในสภาวะปกติ (NO เปิด, NC ปิด)

เมื่อได้รับสัญญาณ Low: เมื่อมีการส่งสัญญาณ ไฟฟ้าที่มีระดับต่ำเข้ามาที่ขดลวดของรีเลย์ 

ขดลวดจะเกิดสนามแม่เหล็ก ทำให้หน้าสัมผัสเปลี่ยนสถานะ (NO ปิด, NC เปิด)

เมื่อไม่มีสัญญาณ Low: เมื่อสัญญาณอินพุตกลับสู่ระดับสูง (High) ขดลวดจะสูญเสียสนามแม่เหล็ก 

และหน้าสัมผัสจะกลับสู่สภาวะปกติ

ขั้นตอนการทำ

1.โหลดโค้ดจากหน้าเว็บ ให้สามารถใช้งาน รีเลย์ ได้ 4ช่อง  

ใส่ ชื่อไวฟาย และรหัสผ่าน 

แก้ไข เลขขารีเลย์ให้ตรงกัน ,จำนวนช่องรีเลย์  

#define NUM_RELAYS  4

int relayGPIOs[NUM_RELAYS] = {5, 4, 14, 12};

ทดสอบการทำงาน ให้สามารถใช้งานได้ปกติ

2.ตั้งค่า แชร์ฮอตสปอตในมือถือและรหัสผ่าน เชื่อมต่ออินเตอร์เน็ต และนำมาแก้ไขในโค้ด

// Replace with your network credentials

const char* ssid = "myhotpot";

const char* password = "12345678";

ใน void setup()

วางโค้ดใต้ บรรทัดนี้ server.begin();

ด้วยโค้ด

  server.begin();

  Serial.println("IP address: ");

  Serial.println(WiFi.localIP());  

เปิด serial monitor และอัพโหลดโค้ด 

และนำเลข ไอพีแอดเดรสมาใส่ในบราวเซอร์ของมือถือ เพื่อทดสอบการใช้งาน

//complete code 

/*********

  Rui Santos

  Complete project details at https://RandomNerdTutorials.com/esp8266-relay-module-ac-web-server/

  

  The above copyright notice and this permission notice shall be included in all

  copies or substantial portions of the Software.

*********/


// Import required libraries

#include "ESP8266WiFi.h"

#include "ESPAsyncWebServer.h"


// Set to true to define Relay as Normally Open (NO)

#define RELAY_NO    true


// Set number of relays

#define NUM_RELAYS  4


// Assign each GPIO to a relay

int relayGPIOs[NUM_RELAYS] = {5, 4, 14, 12};


// Replace with your network credentials

//const char* ssid = "Nui 2.4G";

//const char* password = "0895515998";

const char* ssid = "myhotpot";

const char* password = "12345678";


const char* PARAM_INPUT_1 = "relay";

const char* PARAM_INPUT_2 = "state";


// Create AsyncWebServer object on port 80

AsyncWebServer server(80);


const char index_html[] PROGMEM = R"rawliteral(

<!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;}

    h2 {font-size: 3.0rem;}

    p {font-size: 3.0rem;}

    body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}

    .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)}

  </style>

</head>

<body>

  <h2>ESP Web Server</h2>

  %BUTTONPLACEHOLDER%

<script>function toggleCheckbox(element) {

  var xhr = new XMLHttpRequest();

  if(element.checked){ xhr.open("GET", "/update?relay="+element.id+"&state=1", true); }

  else { xhr.open("GET", "/update?relay="+element.id+"&state=0", true); }

  xhr.send();

}</script>

</body>

</html>

)rawliteral";


// Replaces placeholder with button section in your web page

String processor(const String& var){

  //Serial.println(var);

  if(var == "BUTTONPLACEHOLDER"){

    String buttons ="";

    for(int i=1; i<=NUM_RELAYS; i++){

      String relayStateValue = relayState(i);

      buttons+= "<h4>Relay #" + String(i) + " - GPIO " + relayGPIOs[i-1] + "</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"" + String(i) + "\" "+ relayStateValue +"><span class=\"slider\"></span></label>";

    }

    return buttons;

  }

  return String();

}


String relayState(int numRelay){

  if(RELAY_NO){

    if(digitalRead(relayGPIOs[numRelay-1])){

      return "";

    }

    else {

      return "checked";

    }

  }

  else {

    if(digitalRead(relayGPIOs[numRelay-1])){

      return "checked";

    }

    else {

      return "";

    }

  }

  return "";

}


void setup(){

  // Serial port for debugging purposes

  Serial.begin(115200);


  // Set all relays to off when the program starts - if set to Normally Open (NO), the relay is off when you set the relay to HIGH

  for(int i=1; i<=NUM_RELAYS; i++){

    pinMode(relayGPIOs[i-1], OUTPUT);

    if(RELAY_NO){

      digitalWrite(relayGPIOs[i-1], HIGH);

    }

    else{

      digitalWrite(relayGPIOs[i-1], LOW);

    }

  }

  

  // Connect to Wi-Fi

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {

    delay(1000);

    Serial.println("Connecting to WiFi..");

  }


  // Print ESP8266 Local IP Address

  Serial.println("IP address: ");

  Serial.println(WiFi.localIP());


  // Route for root / web page

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

    request->send_P(200, "text/html", index_html, processor);

  });


  // Send a GET request to <ESP_IP>/update?relay=<inputMessage>&state=<inputMessage2>

  server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {

    String inputMessage;

    String inputParam;

    String inputMessage2;

    String inputParam2;

    // GET input1 value on <ESP_IP>/update?relay=<inputMessage>

    if (request->hasParam(PARAM_INPUT_1) & request->hasParam(PARAM_INPUT_2)) {

      inputMessage = request->getParam(PARAM_INPUT_1)->value();

      inputParam = PARAM_INPUT_1;

      inputMessage2 = request->getParam(PARAM_INPUT_2)->value();

      inputParam2 = PARAM_INPUT_2;

      if(RELAY_NO){

        Serial.print("NO ");

        digitalWrite(relayGPIOs[inputMessage.toInt()-1], !inputMessage2.toInt());

      }

      else{

        Serial.print("NC ");

        digitalWrite(relayGPIOs[inputMessage.toInt()-1], inputMessage2.toInt());

      }

    }

    else {

      inputMessage = "No message sent";

      inputParam = "none";

    }

    Serial.println(inputMessage + inputMessage2);

    request->send(200, "text/plain", "OK");

  });

  // Start server

  server.begin();

  Serial.println("IP address: ");

  Serial.println(WiFi.localIP());  

}

  

void loop() {

}  

  

//

Reference:

https://youtu.be/jRyIkw7e1uk

https://randomnerdtutorials.com/esp8266-relay-module-ac-web-server/



ความคิดเห็น