IotWebConf V3.0.1 นี้จัดว่า เป็นไลบรารี่ ที่ไม่ธรรมดา สำหรับ การจัดการ การตั้งค่า WiFi และ ข้อมูลต่างๆ เท่าที่ผมเคยใช้มา ตั้งแต่เวอร์ชั่น ก่อนหน้านี้ มีการจำกัดรุ่น Board Manager ของ Esp8266 แต่ Esp32 เองก็คงได้ Version ไม่สูงนัก
แต่ใน Version นี้ ออกมา มันสามารถใช้ Board Manager ของ Esp8266 และ Esp32 ได้สูงสุดที่มีในปัจจุบันได้ ถือว่าเป็นการปลดล็อค ในเรื่องของการจำกัด Board Manager ของ Esp8266 และ Esp32 ลงไปได้เลย
ทีนี้เรามาดูคุณสมบัติกันครับ (แปลมาและเรียบเรียงตามความเข้าใจของผมนะครับ)
IotWebConf Upgrading to v3.0.1
เมื่อเร็ว ๆ นี้มีการเผยแพร่เวอร์ชัน 3.0.0 รุ่นนี้ไม่สามารถใช้งานร่วมกับเวอร์ชันเก่าได้ และต้องทำการแก้ไขบางอย่างกับรหัสที่มีอยู่โปรดไปที่คู่มือการย้ายข้อมูล
กล่าวโดยทั่วไป
IotWebConf เป็นไลบรารี Arduino สำหรับ ESP8266 / ESP32 เพื่อจัดเตรียมพอร์ทัลการกำหนดค่าเว็บ WiFi / AP แบบสแตนด์อโลนที่ไม่ปิดกั้นสำหรับ ESP8266 IotWebConf ต้องใช้แพ็กเกจบอร์ด esp8266 เวอร์ชัน 2.4.2 หรือใหม่กว่า!
จุดเด่น
- จัดการการตั้งค่าการเชื่อมต่อ WiFi
- จัดเตรียมอินเทอร์เฟซผู้ใช้พอร์ทัลการกำหนดค่า
- คุณสามารถขยายการกำหนดค่าด้วยโครงสร้างที่เหมาะสมที่ซับซ้อนของคุณเองซึ่งจะถูกจัดเก็บโดยอัตโนมัติ
- ตัวเลือกในการกำหนดค่าการเชื่อมต่อ WiFi หลายตัว (configure multiple WiFi connections) (ลองทำในครั้ง
ถัดไปเมื่อไม่มีการใช้งานครั้งล่าสุด)
- การปรับแต่ง HTML
- การสนับสนุนการตรวจสอบความถูกต้องสำหรับรายการคุณสมบัติคอนฟิกูเรชัน
- รหัสผู้ใช้จะได้รับแจ้งการเปลี่ยนแปลงสถานะด้วยวิธีการเรียกกลับมา (callback methods)
- การกำหนดค่า (รวมถึงรายการที่คุณกำหนดเอง) จะเก็บไว้ใน EEPROM
- รองรับการอัปเดตเฟิร์มแวร์ OTA
- พอร์ทัล Config ยังคงใช้งานได้แม้จะเชื่อมต่อ WiFi แล้วก็ตาม
- "ลงชื่อเข้าใช้เครือข่าย" อัตโนมัติจะปรากฏขึ้นในเบราว์เซอร์ของคุณ (แคปทีฟพอร์ทัล)
- ไม่ปิดกั้น – รหัสที่กำหนดเองของคุณจะไม่ถูกบล็อกในกระบวนการทั้งหมด
- ไฟล์ส่วนหัวที่จัดทำเอกสารไว้อย่างดีและตัวอย่างตั้งแต่ระดับง่ายไปจนถึงระดับที่ซับซ้อน
มันทำงานอย่างไร
แนวคิดก็คือสิ่งนี้จะมีอินเทอร์เฟซเว็บเพื่อให้สามารถแก้ไขการกำหนดค่าได้เช่นสำหรับการเชื่อมต่อกับเครือข่าย WiFi ในพื้นที่จำเป็นต้องมี SSID และรหัสผ่าน เมื่อไม่มีการกำหนดค่า WiFi หรือเครือข่ายที่กำหนดค่าไว้ไม่พร้อมใช้งานเครือข่ายจะสร้าง AP (จุดเชื่อมต่อ) ของตัวเองและให้ไคลเอ็นต์เชื่อมต่อโดยตรงเพื่อทำการกำหนดค่า นอกจากนี้ยังมีปุ่ม (หรือสมมติว่า Pin) ซึ่งเมื่อกดเมื่อเริ่มต้นระบบจะทำให้รหัสผ่านเริ่มต้น ถูกใช้แทนรหัสผ่านที่กำหนดค่าไว้ (ลืม) คุณสามารถค้นหารหัสผ่านเริ่มต้นได้ในแหล่งที่มา :) IotWebConf บันทึกคอนฟิกูเรชันใน "EEPROM" คุณสามารถขยายพอร์ทัลการกำหนดค่าด้วยไอเท็มคอนฟิกูเรชันที่กำหนดเองไอเท็มเหล่านั้นจะได้รับการดูแลโดย IotWebConf
กรณีการใช้งาน
1. คุณเปิด IoT เป็นครั้งแรก - มันจะเปลี่ยนเป็นโหมด AP (จุดเชื่อมต่อ) และรอคุณอยู่บนที่อยู่ 192.168.4.1 พร้อมเว็บอินเตอร์เฟสเพื่อตั้งค่าเครือข่ายท้องถิ่นของคุณ (และการกำหนดค่าอื่น ๆ ) เป็นครั้งแรก รหัสผ่านเริ่มต้นจะถูกใช้เมื่อคุณเชื่อมต่อกับ AP เมื่อคุณเชื่อมต่อกับ AP อุปกรณ์ของคุณมักจะเปิดหน้าพอร์ทัลโดยอัตโนมัติ (เราเรียกสิ่งนี้ว่า Captive Portal) เมื่อกำหนดค่าเสร็จแล้วคุณต้องออกจาก AP อุปกรณ์ตรวจพบว่าไม่มีใครเชื่อมต่ออยู่และยังคงทำงานตามปกติ
2. การกำหนดค่า WiFi มีการเปลี่ยนแปลง เช่นสิ่งที่ถูกย้ายไปยังตำแหน่งอื่น - เมื่อสิ่งนั้นไม่สามารถเชื่อมต่อกับ WiFi ที่กำหนดค่าไว้ มันจะกลับไปที่โหมด AP และรอให้คุณเปลี่ยนการกำหนดค่าเครือข่ายเมื่อไม่มีการกำหนดค่ามันก็จะเก็บ พยายามเชื่อมต่อกับการตั้งค่าที่กำหนดไว้ แล้วสิ่งนี้จะไม่ปิด AP ในขณะที่ใครก็ตามเชื่อมต่ออยู่ดังนั้นคุณต้องออกจาก AP เมื่อเสร็จสิ้นการกำหนดค่า
3. คุณต้องการเชื่อมต่อกับ AP แต่ลืมรหัสผ่าน AP WiFi ที่กำหนดค่าไว้ที่คุณตั้งค่าไว้ก่อนหน้านี้ - เชื่อมต่อพินที่เหมาะสมบน Arduino เข้ากับกราวด์ด้วยปุ่มกดการกดปุ่มค้างไว้ขณะเปิดเครื่องทำให้สิ่งเริ่มต้น โหมด AP ที่มีรหัสผ่านเริ่มต้น (ดูกรณีที่ 1 พินถูกกำหนดค่าในรหัส) **ถ้าคิดว่าไม่ลืมก็ไม่จำเป็นต้องต่อ
4. คุณต้องการเปลี่ยนการกำหนดค่าก่อนที่ Thing จะเชื่อมต่อกับ Internet-Fine! สิ่งนี้จะเริ่มต้นในโหมด AP เสมอและให้กรอบเวลาแก่คุณในการเชื่อมต่อและทำการปรับเปลี่ยนการกำหนดค่าทุกครั้งที่มีการเชื่อมต่อกับ AP (ให้มาโดยอุปกรณ์) AP จะยังคงเปิดอยู่จนกว่าจะปิดการเชื่อมต่อดังนั้นใช้เวลาของคุณในการเปลี่ยนแปลงสิ่งนี้จะรอคุณในขณะที่คุณเชื่อมต่ออยู่
5. คุณต้องการเปลี่ยนคอนฟิกูเรชันที่รันไทม์ - ไม่มีปัญหา IotWebConf ช่วยให้พอร์ทัลการกำหนดค่าทำงานแม้หลังจากการเชื่อมต่อ WiFi เสร็จสิ้นในสถานการณ์นี้คุณต้องป้อนชื่อผู้ใช้ "admin" และรหัสผ่าน AP (กำหนดค่าไว้แล้ว) เพื่อเข้าสู่พอร์ทัลการกำหนดค่า โปรดทราบว่ารหัสผ่านที่ระบุสำหรับการตรวจสอบสิทธิ์ไม่ได้ซ่อนจากอุปกรณ์ที่เชื่อมต่อกับเครือข่าย WiFi เดียวกันคุณอาจต้องการบังคับให้รีบูตสิ่งนี้เพื่อใช้การเปลี่ยนแปลงของคุณ
บันทึกย่อของผู้ใช้
- ในพอร์ทัลการกำหนดค่า คุณสามารถแตะสองครั้งที่รหัสผ่านเพื่อเปิดเผยสิ่งที่คุณพิมพ์ (แตะสองครั้งอีกครั้งเพื่อซ่อนข้อความที่เปิดเผย)
- เมื่อเข้าถึงพอร์ทัลการกำหนดค่าผ่านเครือข่าย WiFi ที่เชื่อมต่อกล่องโต้ตอบที่มีชื่อผู้ใช้และรหัสผ่านจะปรากฏขึ้นรหัสผ่านคือรหัสที่คุณกำหนดไว้สำหรับ "รหัสผ่าน AP" ชื่อผู้ใช้คือ "ผู้ดูแลระบบ" (“admin”)
IotWebConf vs. WiFiManager
WiFiManager ของ tzapu เป็นไลบรารีที่ยอดเยี่ยมคุณสมบัติของ IotWebConf อาจคล้ายกับ WiFiManager มากอย่างไรก็ตาม IotWebConf พยายามที่จะแตกต่างออกไป
- WiFiManager ของ tzapu เป็นไลบรารีที่ยอดเยี่ยมคุณสมบัติของ IotWebConf อาจคล้ายกับ WiFiManager มากอย่างไรก็ตาม IotWebConf พยายามที่จะแตกต่างออกไป WiFiManager ไม่อนุญาตให้คุณกำหนดค่าการเชื่อมต่อ WiFi หลายวิธีใน IotWebConf มีวิธีกำหนดการเชื่อมต่อเพิ่มเติม: ถ้ามี ไม่พร้อมใช้งานครั้งต่อไปจะพยายามโดยอัตโนมัติ
- WiFiManager ไม่ได้จัดการคุณสมบัติที่กำหนดเองของคุณ แต่ IotWebConf เก็บการกำหนดค่าของคุณใน "EEPROM"
- WiFiManager ไม่ทำการตรวจสอบความถูกต้อง IotWebConf อนุญาตให้คุณตรวจสอบการเปลี่ยนแปลงคุณสมบัติของคุณที่ทำในพอร์ทัลการกำหนดค่า
- WiFiManager ไม่รองรับ ESP32
- ด้วย WiFiManager คุณไม่สามารถใช้ทั้งการกำหนดค่าเริ่มต้นและการกำหนดค่าตามความต้องการด้วย IotWebConf พอร์ทัลการกำหนดค่าจะยังคงพร้อมใช้งานผ่าน WiFi ภายในที่เชื่อมต่อ
- WiFiManager แสดงรายการเครือข่ายที่พร้อมใช้งานและหน้าข้อมูลในขณะที่คุณสมบัติเหล่านี้ยอดเยี่ยม IotWebConf พยายามทำให้โค้ดเรียบง่ายดังนั้นฟีเจอร์เหล่านี้จึงไม่ได้ให้บริการโดย IotWebConf
- IotWebConf เหมาะสำหรับผู้ใช้ขั้นสูงคุณสามารถควบคุมการตั้งค่าเว็บเซิร์ฟเวอร์พฤติกรรมช่องป้อนข้อมูลการกำหนดค่าและการตรวจสอบความถูกต้องได้
หลังจากที่ Downlod Library มา ก็เอาไปไว้ใน C:\Users\xxxxx\Documents\Arduino\libraries
จากนั้นก็ทำการทดสอบ และแก้ไข เพื่อให้ตรงกับความต้องการดังนี้
***1. การเปิดค่า Hidden Password IotWebConf V3.0.1
1. C:\Users\xxxxxx\Documents\Arduino\libraries\IotWebConf\src
ชื่อไฟล์ที่แก้ : IotWebConfSettings.h
บรรทัดที่ 57 เดิม
// -- Logs passwords to Serial if enabled.
//#define IOTWEBCONF_DEBUG_PWD_TO_SERIAL
แก้เป็น
// -- Logs passwords to Serial if enabled.
#define IOTWEBCONF_DEBUG_PWD_TO_SERIAL
- C:\Users\MAXGOD\Documents\Arduino\libraries\IotWebConf\src
ชื่อไฟล์ที่แก้ : IotWebConfParameter.cpp
บรรทัดที่ 368 out->println(F("<hidden>"));
แก้
//out->println(F("<hidden>"));
out->print("'");
out->print(current->valueBuffer);
out->println("'");
จุดประสงค์ คือผมต้องการเปิดให้เห็น Password ที่ผมป้อนไปนั่นเอง เพราะโดยปกติ password จะ ถูกซ่อนไว้เพื่อความปลอดภัย
*** 2. การปรับแต่งสี หน้า Config
การเปิดค่า Hidden Password IotWebConf V3.0.1
- C:\Users\MAXGOD\Documents\Arduino\libraries\IotWebConf\src
ชื่อไฟล์ที่แก้ : IotWebConf.h
2.1
// -- HTML page fragments
1. IOTWEBCONF_HTML_HEAD_END[] PROGMEM =
"</head><body style=background-color:#0a5cc2;>";
2. IOTWEBCONF_HTML_BODY_INNER[] PROGMEM =
"<div style='text-align:left;display:inline-block;min-width:260px;color: #fffbfb;>'>\n";
3. const char IOTWEBCONF_HTML_STYLE_INNER[] PROGMEM =
input{width:95%;background-color:#a1ecff;
4. IotWebConf(
const char* thingName, DNSServer* dnsServer, WebServer* server,
const char* initialApPassword, const char* configVersion = "PUY IOT") :
IotWebConf(thingName, dnsServer, &this->_standardWebServerWrapper, initialApPassword, configVersion)
{
this->_standardWebServerWrapper._server = server; }
5. IOTWEBCONF_HTML_STYLE_INNER[] PROGMEM =
button{border:0;border-radius:0.3rem;background-color:#12bfea;color:#090808;
6. IOTWEBCONF_HTML_END[] PROGMEM =
</div><br/><br/><br/><label style='color: #0fe8cc'>โปรเจคนี้ พัฒนาโดย : Mr Aittirong Thongyoy</label><br/><label style='color: #0fe8cc'>ที่อยู่ Trang City</label><br/><label style='color: #0fe8cc'> G-mail : mysmarthomepuy@gmail.com </label></body></html>";
2.2
ชุดนี้จะอยู่ใน Web server ที่ผู้ใช้เขียนลงใน ไฟล์โปรเจคของงาน (.ino)
void handleRoot()
{
// -- Let IotWebConf test and handle captive portal requests.
if (iotWebConf.handleCaptivePortal())
{
// -- Captive portal request were already served.
return;
}
String s = "<!DOCTYPE html<html lang=\"en-TH\"><head><meta charset=\"UTF-8\"name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\"/>";
s += "<title>IotWebConf แสดงค่าที่ถูกกำหนดไว้ </title> </head><body style=background-color:#0a5cc2;font-family:verdana;><p style=color:#fafcfa;font-size:22px;>ESPxxx_โปรเจค : xxxx</p>";
s += "<a href=\"/config\"><button style=color:#010801;font-family:verdana;font-size:22px;width:120px;height:40px;background-color:#32eb29;border-radius:30px;> ตั้งค่า </button></a>";
s += "</body></html>\n";
server.send(200, "text/html", s);
}
เอาละครับ ถ้าใครสนใจ ไฟล์ Library ที่ผมแก้ไขแล้ว ก็ Download ได้เลยครับ
IotWebConf.rar (330.4 KB)
