วิธีใช้ ESP8266 ESP-01 ปล่อย WiFi สร้างเครือข่าย WiFi
โหมดการทำงานของ ESP8266
หนึ่งในคุณสมบัติที่ยอดเยี่ยมที่สุดของ ESP8266 คือไม่เพียง แต่เชื่อมต่อกับเครือข่าย WiFi ที่มีอยู่และทำหน้าที่เป็นเว็บเซิร์ฟเวอร์ แต่ยังสามารถตั้งค่าเครือข่ายของตัวเอง เพื่อให้อุปกรณ์อื่น ๆ สามารถเชื่อมต่อโดยตรงและเข้าถึงได้โดยเว็บเพจ สิ่งนี้เป็นไปได้เพราะ ESP8266 สามารถทำงานในโหมดต่าง ๆ ได้ 3 โหมด คือ โหมด AP โหมด STA และโหมด AP & STA โดยในแต่ละโหมดมีความแตกต่างกันดังนี้
- โหมด AP – เป็นโหมดที่จะต้องรอให้มีอุปกรณ์มาเชื่อมต่อจึงจะสามารถรับส่งข้อมูลกันได้
- โหมด STA – เป็นโหมดที่กำหนดให้ ESP8266 ไปเชื่อมต่อกับอุปกรณ์อื่น ๆ เช่น เร้าเตอร์ แล้วรับส่งข้อมูลระหว่างเครื่องในวงแลนได้
- โหมด AP & STA – เป็นโหมดที่สามารถทำงานได้ทั้ง 2 อย่างภายในเวลาเดียวกัน แต่ความสเถียรจะลดลง และทำให้ใช้กำลังไฟฟ้ามากขึ้น
- ในการใช้งานควบคุมอุปกรณ์ต่าง ๆ ที่อยู่ในระยะใกล้ และต้องย้ายสถานที่ใช้งานที่บ่อย เช่น นำไปใช้งานควบคุมหุ่นนต์ ควรจะใช้งานในโหมด AP
วิธีใช้ ESP8266 ESP-01 ปล่อย WiFi สร้างเครือข่าย WiFi
วิธีใช้ ESP8266 ESP-01 สร้างเครือข่าย WiFi ปล่อย WiFi ของตัวเองนั้น ทำได้โดยการปล่อย WiFi จาก ESP8266 และเลือกใช้ โหมด AP คือให้ ESP8266 ESP-01 สร้างเครือข่าย WiFi ของตัวเองโดยทำหน้าที่เป็นฮับ (เช่นเดียวกับเราเตอร์ WiFi) สำหรับสถานีหนึ่งสถานีหรือมากกว่านั้นเรียกว่าจุดเชื่อมต่อ (AP) ไม่เหมือนกับเราเตอร์ WiFi มันไม่มีส่วนต่อประสานกับเครือข่ายต่อสาย ดังนั้นโหมดการทำงานดังกล่าวจึงเรียกว่า Soft Access Point (soft-AP) ข้อดีคือ IP ที่ส่งให้แสดงผ่านหน้าเว็บ จะเป็น IP เดิม ไม่เปลี่ยนแปลง ข้อเสียคือกำหนดจุดเชื่อมต่อในเครือข่ายไม่เกิน 5 จุด
รายการอุปกรณ์
- 1. ESP8266 ESP-01 Wireless WIFI Module
- 2. CP2102 USB 2.0 to UART TTL 5PIN Connector Module
- 3. Mini Breadboard 170 holes
- 4. Jumper (F2M) 20cm Female to Male
- 5. Jumper (M2M) 20cm Male to Male
- 6. Traffic Light LED Display Module
ขั้นตอนการทํางาน
1. ศึกษา การลงโปรแกรมของ ESP8266 ESP-01
2. อัพโหลดโค้ด
เชื่อมต่อสาย ESP8266 ESP-01 (สำหรับการลงโปรแกรม)
ลงโปรแกรม ESP8266 ESP-01
เปิดโปรแกรม Arduino IDE เขียนโปรแกรม หรือ Sketch ตามโค้ดด้านล่างนี้
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
/* Put your SSID & Password */
const char* ssid = "ESP8266"; // Enter SSID here
const char* password = "12345678"; //Enter Password here
/* Put IP Address details */
IPAddress local_ip(192, 168, 1, 1);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
ESP8266WebServer server(80);
uint8_t LED1pin = 0;
bool LED1status = LOW;
uint8_t LED2pin = 2;
bool LED2status = LOW;
void setup() {
Serial.begin(115200);
pinMode(LED1pin, OUTPUT);
pinMode(LED2pin, OUTPUT);
WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);
delay(100);
server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
if (LED1status)
{
digitalWrite(LED1pin, HIGH);
}
else
{
digitalWrite(LED1pin, LOW);
}
if (LED2status)
{
digitalWrite(LED2pin, HIGH);
}
else
{
digitalWrite(LED2pin, LOW);
}
}
void handle_OnConnect() {
LED1status = LOW;
LED2status = LOW;
Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status, LED2status));
}
void handle_led1on() {
LED1status = HIGH;
Serial.println("GPIO7 Status: ON");
server.send(200, "text/html", SendHTML(true, LED2status));
}
void handle_led1off() {
LED1status = LOW;
Serial.println("GPIO7 Status: OFF");
server.send(200, "text/html", SendHTML(false, LED2status));
}
void handle_led2on() {
LED2status = HIGH;
Serial.println("GPIO6 Status: ON");
server.send(200, "text/html", SendHTML(LED1status, true));
}
void handle_led2off() {
LED2status = LOW;
Serial.println("GPIO6 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status, false));
}
void handle_NotFound() {
server.send(404, "text/plain", "Not found");
}
String SendHTML(uint8_t led1stat, uint8_t led2stat) {
String ptr = "<!DOCTYPE html> <html>\n";
ptr += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr += "<title>LED Control</title>\n";
ptr += "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr += "body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr += ".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr += ".button-on {background-color: #1abc9c;}\n";
ptr += ".button-on:active {background-color: #16a085;}\n";
ptr += ".button-off {background-color: #34495e;}\n";
ptr += ".button-off:active {background-color: #2c3e50;}\n";
ptr += "p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
ptr += "</style>\n";
ptr += "</head>\n";
ptr += "<body>\n";
ptr += "<h1>ESP8266 Web Server</h1>\n";
ptr += "<h3>Using Access Point(AP) Mode</h3>\n";
if (led1stat)
{
ptr += "<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";
}
else
{
ptr += "<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";
}
if (led2stat)
{
ptr += "<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";
}
else
{
ptr += "<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";
}
ptr += "</body>\n";
ptr += "</html>\n";
return ptr;
}
อัพโหลดโค้ด
อัพโหลด และ รอจนกระทั่งขึ้น Done uploading.
3. เชื่อมต่อสาย ESP8266 ESP-01 สำหรับทดสอบการทำงาน
4. ทดสอบการทำงาน
ใช้ สมาร์ทโฟน ไปที่การตั้งค่า -> Wi-Fi
เลือกเครือข่าย Wi-Fi เป็น ESP8266 (ตามที่เราเขียนโค้ดไว้)
ใส่รหัสผ่านเครือข่าย = 12345678 -> เชื่อมต่อ
แสดงการเชื่อมต่อเครือข่าย Wi-Fi เป็น ESP8266
เปิดเว็บบราวเซอร์ ที่ URL ป้อนไอพี : 192.168.1.1
สถานะเบื้องต้น
แล้วทดสอบการทำงาน คลิกที่ปุ่มบน
ไฟ LED สีเขียวติด
และ คลิกที่ปุ่มล่าง
ไฟ LED สีแดงติด
แสดงว่า ทดสอบการทำงานของคุณสำเร็จแล้ว
5. อธิบายโค้ด
เรียกใช้งานไลบรารี ESP8266WiFi.h ไลบรารีนี้มีวิธีการใช้งาน WiFi ของ ESP8266 เพื่อเชื่อมต่อกับเครือข่าย หลังจากนั้นเรายังเรียกใช้ไลบรารี ESP8266WebServer.h ซึ่งมีวิธีการที่จะช่วยให้เราตั้งค่าเซิร์ฟเวอร์และจัดการคำขอ HTTP
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
เนื่องจากเรากำลังตั้งค่า ESP8266 ESP-01 ใช้งานในโหมด (AP) ซึ่งจะสร้างเครือข่าย WiFi ดังนั้นเราต้องตั้งค่า SSID, รหัสผ่าน, ที่อยู่ IP, IP ซับเน็ตมาสก์และ IP เกตเวย์
/* Put your SSID & Password */
const char* ssid = "ESP8266"; // Enter SSID here
const char* password = "12345678"; //Enter Password here
/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);
ต่อไปเราจะประกาศ object ของไลบรารี ESP8266WebServer เพื่อให้เราสามารถเข้าถึงฟังก์ชั่นของมัน ตัวสร้างของวัตถุนี้ใช้พอร์ตเป็นพารามิเตอร์ เนื่องจาก 80 เป็นพอร์ตเริ่มต้นสำหรับ HTTP เราจะใช้ค่านี้ ตอนนี้คุณสามารถเข้าถึงเซิร์ฟเวอร์โดยไม่จำเป็นต้องระบุพอร์ตใน URL
// declare an object of ESP8266WebServer library
ESP8266WebServer server(80);
ต่อไปเราจะประกาศขา GPIO ของ ESP8266 ESP-01 ที่มี LED เชื่อมต่ออยู่และสถานะเริ่มต้น
uint8_t LED1pin = 0;
bool LED1status = LOW;
uint8_t LED2pin = 2;
bool LED2status = LOW;
ในฟังก์ชั่น Setup ()
เรากำหนดค่าเซิร์ฟเวอร์ HTTP ของเราก่อนเรียกใช้จริง ก่อนอื่นเราเปิดการเชื่อมต่อแบบอนุกรม และตั้งค่าขา GPIO เป็น OUTPUT
Serial.begin(115200);
pinMode(LED1pin, OUTPUT);
pinMode(LED2pin, OUTPUT);
จากนั้นเราตั้งค่าจุดเชื่อมต่อ Access Point (soft-AP) เพื่อสร้างเครือข่าย Wi-Fi โดยการตรวจสอบ SSID, รหัสผ่าน, ที่อยู่ IP, IP ซับเน็ตมาสก์และ IP เกตเวย์
WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);
delay(100);
เพื่อจัดการคำขอ HTTP ขาเข้าเราจำเป็นต้องระบุรหัสที่จะดำเนินการเมื่อมีการเข้าชม URL เฉพาะ ในการทำเช่นนั้นเราใช้วิธีการ วิธีนี้ใช้ 2 พารามิเตอร์ อันแรกคือเส้นทาง URL และที่สองคือชื่อของฟังก์ชั่นที่เราต้องการที่จะดำเนินการเมื่อ URL นั้นถูกเรียกใช้งาน
ตัวอย่างเช่นบรรทัดแรกของตัวอย่างรหัสด้านล่างระบุว่าเมื่อเซิร์ฟเวอร์ได้รับคำขอ HTTP บนเส้นทางรูท (/) มันจะเรียกฟังก์ชั่น handle_OnConnect ()
ในทำนองเดียวกันเราจำเป็นต้องระบุ URL เพิ่มเติมอีก 4 แห่งเพื่อจัดการสถานะไฟ LED 2 สถานะ
server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);
เรายังไม่ได้ระบุว่าเซิร์ฟเวอร์ควรทำอย่างไรหากผู้ใช้งานร้องขอ URL อื่นใดนอกเหนือจากที่ระบุไว้ใน server.on () ควรตอบสนองด้วยสถานะ HTTP 404 (ไม่พบ) และข้อความสำหรับผู้ใช้ เราเขียนสิ่งนี้ไว้ในฟังก์ชั่นเช่นกันและใช้ server.onNotFound () เพื่อบอกว่าควรจะดำเนินการเมื่อได้รับคำขอ URL ที่ไม่ได้ระบุไว้กับ object ของไลบรารี ESP8266WebServer
server.onNotFound(handle_NotFound);
เพื่อเริ่มต้นเซิร์ฟเวอร์ของเรา เราเรียกวิธีการเริ่มต้นการใช้งานเซิร์ฟเวอร์
server.begin();
Serial.println("HTTP server started");
ในฟังก์ชัน Loop ()
ในการจัดการคำขอ HTTP ขาเข้าจริงเราต้องเรียกใช้เมธอด handleClient () จาก object ของไลบรารี ESP8266WebServer นอกจากนี้เรายังเปลี่ยนสถานะของ LED ตามคำขอ
void loop() {
server.handleClient();
if(LED1status)
{digitalWrite(LED1pin, HIGH);}
else
{digitalWrite(LED1pin, LOW);}
if(LED2status)
{digitalWrite(LED2pin, HIGH);}
else
{digitalWrite(LED2pin, LOW);}
}
ต่อไปเราต้องสร้างฟังก์ชั่นที่เราแนบไปกับรูท (/) URL ด้วยเซิร์ฟเวอร์ จำได้ไหม? ในช่วงเริ่มต้นของฟังก์ชั่นนี้เราตั้งสถานะของทั้ง LED เป็น LOW (สถานะเริ่มต้นของ LED) เพื่อตอบสนองต่อคำขอ HTTP แม้ว่าวิธีการนั้นสามารถเรียกใช้กับชุดอาร์กิวเมนต์ที่แตกต่างกัน แต่รูปแบบที่ง่ายที่สุดประกอบด้วยรหัสตอบกลับ HTTP ประเภทเนื้อหาและเนื้อหา
ในกรณีของเราเรากำลังส่งรหัส 200 (หนึ่งในรหัสสถานะ HTTP) ซึ่งสอดคล้องกับการตอบสนองตกลง จากนั้นเรากำลังระบุประเภทเนื้อหาเป็น“ text / html“ และในที่สุดเราก็เรียก SendHTML () ฟังก์ชั่นที่กำหนดเองซึ่งสร้างหน้า HTML แบบไดนามิกที่มีสถานะของไฟ LED
void handle_OnConnect()
{
LED1status = LOW;
LED2status = LOW;
Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status,LED2status));
}
ในทำนองเดียวกันเราต้องสร้าง 4 ฟังก์ชัน เพื่อจัดการคำขอ เปิด / ปิด LED และหน้าข้อผิดพลาด 404
void handle_led1on() {
LED1status = HIGH;
Serial.println("GPIO7 Status: ON");
server.send(200, "text/html", SendHTML(true,LED2status));
}
void handle_led1off() {
LED1status = LOW;
Serial.println("GPIO7 Status: OFF");
server.send(200, "text/html", SendHTML(false,LED2status));
}
void handle_led2on() {
LED2status = HIGH;
Serial.println("GPIO6 Status: ON");
server.send(200, "text/html", SendHTML(LED1status,true));
}
void handle_led2off() {
LED2status = LOW;
Serial.println("GPIO6 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status,false));
}
void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}
การแสดงเว็บเพจ HTML
ฟังก์ชัน SendHTML () มีหน้าที่สร้างหน้าเว็บทุกครั้งที่เว็บเซิร์ฟเวอร์ ESP8266 ได้รับคำขอจากเว็บไคลเอ็นต์ มันเป็นการรวมโค้ด HTML เข้ากับสตริงขนาดใหญ่และกลับไปยังฟังก์ชัน server.send () ที่เรากล่าวถึงก่อนหน้านี้ ฟังก์ชั่นรับสถานะ LED เป็นพารามิเตอร์ในการสร้างเนื้อหา HTML แบบไดนามิก
ข้อความแรกที่คุณควรส่งคือการประกาศ < ! DOCTYPE > ที่ระบุว่าเรากำลังส่งรหัส HTML
String SendHTML(uint8_t led1stat,uint8_t led2stat){
String ptr = "<!DOCTYPE html> <html>\n";
ถัดไปคือ < meta > ที่ทำให้หน้าเว็บตอบสนองในเว็บเบราว์เซอร์ใด ๆ ในขณะที่แท็ก < title > จะตั้งชื่อของหน้า
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>LED Control</title>\n";
จัดแต่งหน้าเว็บ
ต่อไปเรามี CSS เพื่อกำหนดลักษณะปุ่มและลักษณะที่ปรากฏของหน้าเว็บ เราเลือกแบบอักษร Helvetica กำหนดเนื้อหาที่จะแสดงเป็นบล็อกอินไลน์และจัดตำแหน่งที่กึ่งกลาง
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
โค้ดต่อไปนี้จะตั้งค่าสีแบบอักษรและระยะขอบรอบ ๆ ตัวแท็ก H1, H3 และ p
ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
สไตล์บางอย่างถูกนำไปใช้กับปุ่มเช่นเดียวกับคุณสมบัติเช่นสี, ขนาด, ระยะขอบ ฯลฯ ปุ่มเปิดและปิดมีสีพื้นหลังที่แตกต่างกันในขณะที่: ตัวเลือกที่ใช้งานสำหรับปุ่มให้แน่ใจว่าผลการคลิกปุ่ม
ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #1abc9c;}\n";
ptr +=".button-on:active {background-color: #16a085;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";
การตั้งค่าหัวเรื่องของเว็บเพจ
ถัดไปตั้งค่าหัวเรื่องของหน้าเว็บ คุณสามารถเปลี่ยนข้อความนี้เป็นสิ่งที่เหมาะกับแอปพลิเคชันของคุณ
ptr +="<h1>ESP8266 Web Server</h1>\n";
ptr +="<h3>Using Access Point(AP) Mode</h3>\n";
การแสดงปุ่มและสถานะที่เกี่ยวข้อง
ในการสร้างปุ่มและสถานะ LED แบบไดนามิกเราจะใช้คำสั่ง if ดังนั้นขึ้นอยู่กับสถานะของพิน GPIO ปุ่ม เปิด/ปิด จะปรากฏขึ้น
if(led1stat)
{ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
else
{ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}
if(led2stat)
{ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
else
{ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}
credit : https://lastminuteengineers.com/creating-esp8266-web-server-arduino-ide/