วันอาทิตย์ที่ 17 มิถุนายน พ.ศ. 2561

การกำหนดค่าการเชื่อมต่อ WiFi ของ ESP-01 ผ่านหน้าเว็บ

การกำหนดค่าการเชื่อมต่อ WiFi ของ ESP-01 ผ่านหน้าเว็บ

หากต้องกำหนด SSID และ Password สำหรับการเชื่อมต่อ WiFi ไว้ภายในโค้ด คงไม่สะดวกนักเมื่อต้องเปลี่ยนไปใช้สัญญาณ WiFi ตัวใหม่ เนื่องจากต้องแก้ไขค่า SSID และ Password ในโค้ดแล้วจึงอัพโหลดโค้ดไปยัง ESP-01 ใหม่

ดังนั้น เพื่อให้การกำหนดค่าการเชื่อมต่อ WiFi ทำได้ง่ายมากขึ้น สามารถใช้ไลบรารีที่ใช้สำหรับการจัดการการเชื่อมต่อ WiFi ที่มีอยู่ เช่น AutoConnect หรือ WiFiManager เป็นต้น ได้


สำหรับบทความนี้ จะทดลองใช้ไลบรารี AutoConnect ที่พัฒนาขึ้นโดยนักพัฒนาที่ใช้ชื่อว่า Hieromon Ikasamo ซึ่งมีการออกแบบหน้าเว็บแบบ Responsive รองรับหน้าจอหลายขนาด และมีการทำงานที่เพียงพอสำหรับการจัดการการเชื่อมต่อ WiFi ได้ง่าย โดยมีภาพรวม ดังรูปที่ 1 ดังนี้

รูปที่ 1 ภาพรวมการเชื่อมต่อเครือข่าย WiFi
ที่มา : https://hieromon.github.io/AutoConnect/
จากรูป ในการตั้งค่าการเชื่อมต่อ WiFi ให้กับ ESP-01 ครั้งแรก จะใช้อุปกรณ์ซึ่งเป็นคอมพิวเตอร์ แท็บเล็ต หรือสมาร์ทโฟน ในการเชื่อมต่อไปยัง ESP-01 โดยตรงก่อน โดย ESP-01 จะทำงานในโหมด Soft AP เพื่อปล่อยสัญญาณ WiFi ออกมา หลังจากเชื่อมต่อ WiFi กับ ESP-01 โดยตรงแล้ว จะเข้าสู่หน้าการตั้งค่าการเชื่อมต่อ WiFi ดังรูปที่ 2 ซึ่งสามารถค้นหาสัญญาณ WiFi และเลือกเชื่อมต่อกับสัญญาณ WiFi ที่ต้องการโดยระบุ SSID และ Password (ถ้ามี)
เมื่อ ESP-01 เชื่อมต่อกับ WiFi ได้แล้ว ก็จะทำงานในโหมด STA ซึ่งจะได้รับ IP address เป็นวงเดียวกันกับเครือข่าย WiFi ที่เชื่อมต่อ

รูปที่ 2 หน้าจอแสดงสถานะการเชื่อมต่อและการตั้งค่า WiFi
ที่มา : https://www.hackster.io/hieromon-ikasamo/esp8266-connect-wifi-made-easy-d75f45

ขั้นตอนการติดตั้ง

  1. ติดตั้ง ESP8266 Arduino core ใน Arduino IDE ให้เรียบร้อย ตามบทความนี้ (กรณีที่เคยติดตั้งแล้วให้ข้ามขั้นตอนนี้)
  2. ติดตั้งไลบรารี AutoConnect เลือกเมนู Sketch -> Include Library -> Manage Libraries...
  3. จากนั้นค้นหา AutoConnect แล้วกดปุ่ม Install ดังรูปที่ 3
  4. ค้นหา PageBuilder แล้วกดปุ่ม Install ดังรูปที่ 4
  5. ปิดหน้าต่าง Manage Libraries
รูปที่ 3 ติดตั้ง AutoConnect
ที่มา : https://hieromon.github.io/AutoConnect/index.html
รูปที่ 4 ติดตั้ง PageBuilder
ที่มา : https://hieromon.github.io/AutoConnect/index.html

ซอร์สโค้ด


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <AutoConnect.h>
ESP8266WebServer Server;
AutoConnect      Portal(Server);
void rootPage() {
  char content[] = "Hello, world";
  Server.send(200, "text/plain", content);
}
void setup() {
  delay(1000);
  Serial.begin(115200);
  Serial.println();
  Server.on("/", rootPage);
  if (Portal.begin()) {
    Serial.println("HTTP server:" + WiFi.localIP().toString());
  }
}
void loop() {
  Portal.handleClient();
}

รูปที่ 5 การแก้ไขจากซอร์สโค้ดเดิม
ที่มา : https://github.com/Hieromon/AutoConnect

การใช้งาน

  1. ใช้คอมพิวเตอร์ หรือสมาร์ทโฟน เชื่อมต่อไปยัง WiFi ชื่อ esp8266ap และ Password เป็น 12345678
  2. จะขึ้นหน้าจอสำหรับการตั้งค่า WiFi ขึ้นมาอัตโนมัติ แต่ถ้าไม่ขึ้นสามารถใช้เว็บเบราเซอร์ และระบุ URL เป็น http://192.168.244.1/_ac
  3. กดปุ่มเมนูมุมขวาบนของหน้าจอ เลือกรายการ Configure new AP จะแสดง SSID ที่พบทั้งหมด ให้ระบุ SSID และ Password ของ WiFi ที่ต้องการเชื่อมต่อ จากนั้นกดปุ่ม apply ดังรูปที่ 5
รูปที่ 6 ตั้งค่า WiFi
ที่มา : https://www.hackster.io/hieromon-ikasamo/esp8266-connect-wifi-made-easy-d75f45

บรรณานุกรม


เขียนโดย ที่
ป้ายกำกับ: , ,

ไม่มีความคิดเห็น:

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

สมัครสมาชิก: ส่งความคิดเห็น (Atom)