ESP8266 เป็นเว็บเซิฟเวอร์ คุมรีเลย์ 4 channel control by web browser

อุปกรณ์

1. บอร์ด esp8266

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

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

4. Relay 4 channel

ขั้นตอนและวิธีการสร้าง

ขั้นตอนที่ 1. ทำความเข้าใจเกี่ยวกับโค้ดเว็บไซต์ HTML

บันทึกเป็นไฟล์ helloworld.html

(คลิปก่อนหน้านี้)

ขั้นตอนที่ 2: การสร้างเว็บเซิร์ฟเวอร์บน ESP8266

สั่งพิมพ์ hello World และ next page

(คลิปก่อนหน้านี้)

ขั้นตอนที่ 3.ปรับโค้ด HTML บันทึกเป็น index.h เก็บไฟล์ไว้ระดับเดียวกับ

ไฟล์ Arduino IDE

const char MAIN_page[] PROGMEM = R"=====(

<HTML>

<HEAD>

<TITLE>My first web page</TITLE>

</HEAD>

<BODY>

<B>Hello World.... </B>

</CENTER>

</BODY>

</HTML>

)=====";

อธิบายโค้ด const char MAIN_page[] PROGMEM = R"

โค้ดบรรทัดนี้ในภาษา C/C++ กำหนดตัวแปรและค่าให้กับตัวแปรนั้น

เพื่อใช้ในการจัดเก็บข้อความ HTML สำหรับแสดงผลบนหน้าเว็บไซต์ โดยมีรายละเอียดดังนี้:

การประกาศตัวแปร

const char MAIN_page[]:

const: ระบุว่าค่าของตัวแปรนี้จะไม่สามารถเปลี่ยนแปลงได้หลังจากการกำหนดค่าครั้งแรก (constant)

char: ระบุว่าตัวแปรนี้จะเก็บข้อมูลชนิดอักขระ (character)

MAIN_page[]: ชื่อของตัวแปร (identifier) ที่ใช้ในการอ้างอิงถึงข้อความ HTML นี้

โดย [] บ่งบอกว่าเป็น array (อาร์เรย์) ของอักขระ หรือก็คือสตริงนั่นเอง

อธิบายโค้ด const char MAIN_page[] PROGMEM = R"

โค้ดบรรทัดนี้ในภาษา C/C++ กำหนดตัวแปรและค่าให้กับตัวแปรนั้น เพื่อใช้ในการจัดเก็บข้อความ HTML สำหรับแสดงผลบนหน้าเว็บไซต์ โดยมีรายละเอียดดังนี้:

การกำหนดค่าด้วย R"

R": เป็น raw string literal ในภาษา C++ ช่วยให้สามารถเขียนสตริงที่มีอักขระพิเศษ เช่น \n,

ได้โดยไม่ต้องใส่ backslash (\) เหตุผลที่ใช้ raw string literal:

ความสะดวกในการเขียน: ไม่ต้องกังวลกับการใส่ backslash อักขระพิเศษ

ลดความผิดพลาด: ลดโอกาสในการเกิดข้อผิดพลาดจากการใส่ backslash ผิด

เรียกใช้ใหม่ เป็น

void handleRoot() {

server.send(200, "text / plain", MAIN_page);

}

ขั้นตอนที่ 3: สร้างปุ่มบนเว็บ โดยเพิ่มโค้ด HTML

<h1>Switch 1 : on off </h1><br>

Click to turn <a href="Swon">Switch ON</a><br>

Click to turn <a href="Swoff">Switch OFF</a><br>

ขั้นตอนที่ 4: เพิ่มโค้ด Switch On /OFF

void handleSwon() {

Serial.println("Switch On");

server.send(200, "text/html", "Switch is ON");

}

void handleSwoff() {

Serial.println("Switch Off");

server.send(200, "text/html", "Switch is Off");

}

ขั้นตอนที่ 4: ประกอบเข้าด้วยกันทดสอบและแก้ไข

#include <ESP8266WiFi.h>

#include <WiFiClient.h>

#include <ESP8266WebServer.h>

//SSID and Password of your WiFi router

const char* ssid = "Nui 2.4G";

const char* password = "0895515998";

ESP8266WebServer server(80); //Server on port 80

const char MAIN_page[] PROGMEM = R"=====(

<HTML>

<HEAD>

<TITLE>My first web page</TITLE>

</HEAD>

<BODY>

<B>Hello World ESP8266 EP02</B>

<h1>Switch 1 :</h1>

Ciclk to turn <a href="Swon">Switch ON</a><br>

Ciclk to turn <a href="Swoff">Switch OFF</a><br>

</CENTER>

</BODY>

</HTML>

)=====";

void handleRoot() {

server.send(200, "text / plain", MAIN_page);

}

void handleSwon() {

Serial.println("Switch On");

server.send(200, "text/html", "Switch is ON");

}

void handleSwoff() {

Serial.println("Switch Off");

server.send(200, "text/html", "Switch is Off");

}

void setup(void){

Serial.begin(115200);

//เชื่อมต่อวายฟาย ด้วยคำสั่ง

WiFi.begin(ssid,password); //Connect to your WiFi router

Serial.println("");

//คำสั่งสำหรับ พยายามเชื่อมต่อจนกว่าจะได้

// Wait for connection

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

delay(500);

Serial.print(".");

}

//If connection successful show IP address in serial monitor

Serial.println("");

Serial.print("Connected to ");

Serial.println(ssid);

Serial.print("IP address: ");

//พิมพ์หมายเลขไอพี เพื่อเปิดดูในหน้าเว็บ

Serial.println(WiFi.localIP()); //IP address assigned to your ESP

server.on("/", handleRoot); //Which routine to handle at root location

server.on("/Swon", handleSwon); //as Per <a href="ledOn">, Subroutine to be called

server.on("/Swoff", handleSwoff);

server.begin(); //Start server

Serial.println("HTTP server started");

}

void loop(void){

server.handleClient(); //Handle client requests

}

5. ปรับให้คลิกแล้วอยู่หน้าเดิมด้วยคำสั่ง Tags

target="thispage" และ

<h1>Hello World ESP8266 EP02</h1>

Ciclk to turn <a href="Swon" target="thispage">Switch ON</a><br>

Ciclk to turn <a href="Swoff" target="thispage">Switch OFF</a><br>

</CENTER>

6.ทำการเชื่อมต่อกับอุปกรณ์ เช่น Led ,Relay เป็นต้น

ESP8266 เชื่อมต่อรีเลย์ 4 channel

การเชื่อมต่อ ใช้ ขารีเลย์ ตัวเดียว

ESP8266 -> Relay 4 channel

3V -> VCC

D1(GPIO5) -> In1

GND -> GND

ประกาศตัวแปร

int r1 = 5;

void setup() {

//ตั้งค่า พินเลข เป็นเอาท์พุต

pinMode(r1, OUTPUT);

//เปิดจ่ายไฟ ค่าพินเลข เพื่อปิดการทำงานของ Relay

digitalWrite(r1, HIGH);

}

สั่งเปิด / รีเลย์

digitalWrite(r1,HIGH); // off

digitalWrite(r1,LOW); // on

//Complete Code

#include <ESP8266WiFi.h>

#include <WiFiClient.h>

#include <ESP8266WebServer.h>

//SSID and Password of your WiFi router

const char* ssid = "Nui 2.4G";

const char* password = "0895515998";

ESP8266WebServer server(80); //Server on port 80

int r1 = 5;

const char MAIN_page[] PROGMEM = R"=====(

<HTML>

<HEAD>

<TITLE>My first web page</TITLE>

</HEAD>

<BODY>

<h1>Hello World ESP8266 EP02</h1>

Ciclk to turn <a href="Swon" target="thispage">Switch ON</a><br>

Ciclk to turn <a href="Swoff" target="thispage">Switch OFF</a><br>

</CENTER>

</BODY>

</HTML>

)=====";

void handleRoot() {

server.send(200, "text / plain", MAIN_page);

}

void handleSwon() {

Serial.println("Switch On");

digitalWrite(r1,LOW); //LED off

server.send(200, "text/html", "Switch is ON");

}

void handleSwoff() {

Serial.println("Switch Off");

digitalWrite(r1,HIGH); //LED off

server.send(200, "text/html", "Switch is Off");

}

void setup(void){

Serial.begin(115200);

//ตั้งค่า พินเลข เป็นเอาท์พุต

pinMode(r1, OUTPUT);

//เปิดจ่ายไฟ ค่าพินเลข เพื่อปิดการทำงานของ Relay

digitalWrite(r1, HIGH);

//เชื่อมต่อวายฟาย ด้วยคำสั่ง

WiFi.begin(ssid,password); //Connect to your WiFi router

Serial.println("");

//คำสั่งสำหรับ พยายามเชื่อมต่อจนกว่าจะได้

// Wait for connection

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

delay(500);

Serial.print(".");

}

//If connection successful show IP address in serial monitor

Serial.println("");

Serial.print("Connected to ");

Serial.println(ssid);

Serial.print("IP address: ");

//พิมพ์หมายเลขไอพี เพื่อเปิดดูในหน้าเว็บ

Serial.println(WiFi.localIP()); //IP address assigned to your ESP

server.on("/", handleRoot); //Which routine to handle at root location

server.on("/Swon", handleSwon); //as Per <a href="ledOn">, Subroutine to be called

server.on("/Swoff", handleSwoff);

server.begin(); //Start server

Serial.println("HTTP server started");

}

void loop(void){

server.handleClient(); //Handle client requests

}

/////////////////////////////////////////////////

Relate:

https://gnipsel.com/esp8266/esp8266_01.html

https://circuits4you.com/2018/02/05/esp8266-arduino-wifi-web-server-led-on-off-control/

ช่องลาเลอ

ค้นหาบล็อกนี้

ESP8266 เป็นเว็บเซิฟเวอร์ คุมรีเลย์ 4 channel control by web browser

ความคิดเห็น

แสดงความคิดเห็น