วิธีใช้ ESP8266 ESP-01 สร้างเครือข่าย WiFi ของตัวเอง

วิธีใช้ 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 จุด


วิธีใช้ ESP8266 ESP-01



รายการอุปกรณ์


ขั้นตอนการทํางาน

1. ศึกษา การลงโปรแกรมของ ESP8266 ESP-01


2. อัพโหลดโค้ด


เชื่อมต่อสาย ESP8266 ESP-01 (สำหรับการลงโปรแกรม)

เชื่อมต่อสาย ESP8266 ESP-01 (สำหรับการลงโปรแกรม)

วิธีใช้ 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;
}



อัพโหลดโค้ด

วิธีใช้ ESP8266 ESP-01 สร้างเครือข่าย WiFi


อัพโหลด และ รอจนกระทั่งขึ้น Done uploading.

วิธีใช้ ESP8266 ESP-01 สร้างเครือข่าย WiFi


3. เชื่อมต่อสาย ESP8266 ESP-01 สำหรับทดสอบการทำงาน

วิธีใช้ ESP8266 ESP-01 สร้างเครือข่าย WiFi


วิธีใช้ ESP8266 ESP-01 สร้างเครือข่าย WiFi



4. ทดสอบการทำงาน


ใช้ สมาร์ทโฟน ไปที่การตั้งค่า -> Wi-Fi

ใช้ สมาร์ทโฟน ไปที่การตั้งค่า -> Wi-Fi


เลือกเครือข่าย Wi-Fi เป็น ESP8266 (ตามที่เราเขียนโค้ดไว้)

การตั้งค่า wifi  ESP8266 ESP-01



ใส่รหัสผ่านเครือข่าย = 12345678 -> เชื่อมต่อ


รหัสผ่านเครือข่าย = 12345678 -> เชื่อมต่อ


แสดงการเชื่อมต่อเครือข่าย Wi-Fi เป็น ESP8266

วิธีใช้ ESP8266 ESP-01 สร้างเครือข่าย



เปิดเว็บบราวเซอร์ ที่ URL ป้อนไอพี : 192.168.1.1


เปิดเว็บบราวเซอร์ ที่ URL ป้อนไอพี : 192.168.1.1


สถานะเบื้องต้น

วิธีใช้ ESP8266 ESP-01 สร้างเครือข่าย WiFi


แล้วทดสอบการทำงาน คลิกที่ปุ่มบน

ทดสอบการทำงาน วิธีใช้ ESP8266 ESP-01


ไฟ LED สีเขียวติด

วิธีใช้ ESP8266 ESP-01 สร้างเครือข่าย WiFi


และ คลิกที่ปุ่มล่าง

วิธีใช้ ESP8266 ESP-01 สร้างเครือข่าย WiFi ของตัวเอง

ไฟ LED สีแดงติด

วิธีใช้ ESP8266 ESP-01 สร้างเครือข่าย WiFi


แสดงว่า ทดสอบการทำงานของคุณสำเร็จแล้ว


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/