IoTWEBCONFIG Ver. ใหม่ กับการจัดการ การตั้งค่า WiFi และ ข้อมูลต่างๆ ที่ง่ายขึ้น

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

จากนั้นก็ทำการทดสอบ และแก้ไข เพื่อให้ตรงกับความต้องการดังนี้

***1. การเปิดค่า Hidden Password IotWebConf V3.0.1

1. C:\Users\xxxxxx\Documents\Arduino\libraries\IotWebConf\src
ชื่อไฟล์ที่แก้  : IotWebConf.cpp


บรรทัดที่ 706  Serial.println(F("] (password is hidden)"));
แก้
      //Serial.println(F("] (password is hidden)"));
      Serial.print("] with password [");
      Serial.print(this->_wifiAuthInfo.password);
      Serial.println("]");

บรรทัดที่ 828  Serial.println(F("] (password is hidden)"));
แก้
      //Serial.println(F("] (password is hidden)"));
      Serial.println(this->_initialApPassword);

บรรทัดที่ 838  Serial.println(F("] (password is hidden)"));
แก้
      //Serial.println(F("] (password is hidden)"));
      Serial.println(this->_initialApPassword);
  1. 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

  1. C:\Users\MAXGOD\Documents\Arduino\libraries\IotWebConf\src

ชื่อไฟล์ที่แก้ : IotWebConf.h

image

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
image

ชุดนี้จะอยู่ใน 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)

2 Likes

ต่อไปจะเป็นการนำเอาไฟล์ Library ที่ผมแก้เอาไว้แล้วมาใช้ ESP 32 นะครับ (ESP8266 ก็ใช้ได้ เพราะใช้โครงสร้างแบบเดียวกัน)

Code ชุดที่ 1 Esp32
// TridentTD Version 3.0.2 สนับสนุน ESP32 Core 1.0.5, 1.0.6
// ESP32 Core 1.0.6
// IotWebConf V 3.0.1 สนับสนุน ESP8266 board package version 2.4.2 - 2.4.7
// สนับสนุน ESP32 board package version 1.0.4 - 1.0.6
// google sheet esp32 ใช้งานได้

คุณสมบัติของ Code ชุดนี้
1. ใช้ป้อนค่า ssid และค่า password เพื่อใช้ในการต่ออินเทอร์เน็ต 
2. จะมีไฟแสดงสถานะของบอร์ดในเรื่องของการเชื่อมต่อ WiFi 
3. จะมีปุ่มกดรีเซ็ตค่ากลับไปเป็นค่า default ในกรณีที่จำ Password ไม่ได้  (ไม่ใช้จึงไม่ทำ)
4. มีเวลา TimerOut ให้ตั้งค่า เป็นวินาที ( 1 – 600 วินาที)
อ้างจาก  IotWebConf.h บรรทัดที่ 560 
NumberParameter("Startup delay (seconds)", "iwcApTimeout", this->_apTimeoutStr, IOTWEBCONF_WORD_LEN, IOTWEBCONF_DEFAULT_AP_MODE_TIMEOUT_SECS, NULL, "min='1' max='600'");
5. สร้างการป้อนค่า  ข้อมูล  3 ชุดคือ
	5.1 ID ของ Google Sheet
	5.2 ID Line Notify
 	5.3 เวลาในการส่งข้อมูลใน Google Sheet ในรูปแบบ  นาที

IotWebConf_2__3DaTa_Esp32.rar (4.5 KB)

การนำไปใช้งาน แค่ตัด code ของ Google sheet ออก ก็นำไปใช้งานได้แล้วครับ

ผลลัพธ์

image

1 Like

Code ชุดที่ 2 Esp32
// TridentTD Version 3.0.2 สนับสนุน ESP32 Core 1.0.5, 1.0.6
// ESP32 Core 1.0.6
// IotWebConf V 3.0.1 สนับสนุน ESP8266 board package version 2.4.2 - 2.4.7
// สนับสนุน ESP32 board package version 1.0.4 - 1.0.6
// google sheet esp32 ใช้งานได้

เหมือนกับ Code ชุดที่ 1 แต่จะเพิ่ม

6. เพิ่ม  Multi Wifi มาอีก 3 ตัว รวมกับตัวหลัก เป็น 4 ตัว  ***ครั้งแรกของการตั้งค่าต้องป้อนให้ครบทั้ง 4 ชุด 
  - คืออาจจะเอาจริงแค่ 1 หรือ 2 ชุด อีก 2 ชุดที่เหลือ ให้ป้อนอะไรก็ได้เพราะไม่ใช้อยู่แล้ว
 หลักการทำงานคือ ทำชุดที่ 1 ก่อน ถ้าชุดที่ 1 เชื่อมต่อไม่ได้ ก็จะวนหาอีก 1 รอบ คือ 30 วินาที
  -จากนั้นจะเข้าไปเชื่อมต่อ ชุดที่ 2 ถ้าเชื่อมต่อได้ก็จะทำงานต่อได้เลย แต่ถ้าเชื่อมต่อไม่ได้ ก็จะวนชุดที่ 2 อีก 1 รอบ 30 วินาที
  -จากนั้นจะเข้าไปเชื่อมต่อ ชุดที่ 3 ถ้าเชื่อมต่อได้ก็จะทำงานต่อได้เลย แต่ถ้าเชื่อมต่อไม่ได้ ก็จะวนชุดที่ 3 อีก 1 รอบ 30 วินาที
  -จากนั้นจะเข้าไปเชื่อมต่อ ชุดที่ 4 ถ้าเชื่อมต่อได้ก็จะทำงานต่อได้เลย แต่ถ้าเชื่อมต่อไม่ได้ ก็จะวนชุดที่ 4 อีก 1 รอบ 30 วินาที
 - และถ้าเชื่อมต่อชุดที่ 4 ไม่ได้ ก็จะวนชุดที่ 4 อีก 1 รอบ 30 วินาที จากนั้นจะวน กลับไปหา ชุดที่ 1 ใหม่ 
 - และจะวนไปเรื่อยๆ จนกว่า จะมี WiFi ชุดใดชุดชุดหนึ่งที่ทำงานและเชื่อมต่อได้

IotWebConf_2.1__3DaTa_Esp32.rar (5.0 KB)
การนำไปใช้งาน แค่ตัด code ของ Google sheet ออก ก็นำไปใช้งานได้แล้วครับ

ผลลัพธ์

image

image

Code ชุดที่ 3 Esp32
// TridentTD Version 3.0.2 สนับสนุน ESP32 Core 1.0.5, 1.0.6
// ESP32 Core 1.0.6
// IotWebConf V 3.0.1 สนับสนุน ESP8266 board package version 2.4.2 - 2.4.7
// สนับสนุน ESP32 board package version 1.0.4 - 1.0.6
// google sheet esp32 ใช้งานได้

เหมือนกับ Code ชุดที่ 1และ 2 แต่จะเพิ่ม Logo ของเราเข้าไป

7. ตกแต่ง  ความสวยงามของ Web Portal
ภาพขนาดที่เหมาะสม  203 x 60 Pixel  นามสกุล  .png
เอาเข้า  https://onlinepngtools.com/convert-png-to-base64  เพื่อแปลงภาพให้เป็น code ฝังใน Web ไม่ต้องไปอ้างอิงจากที่อื่น

IotWebConf_2.2__3DaTa_Esp32.rar (24.1 KB)
การนำไปใช้งาน แค่ตัด code ของ Google sheet ออก ก็นำไปใช้งานได้แล้วครับ
***ถ้ารูปใหญ่มากจะมีผลต่อการโหลดเข้าหน้า Web config นะครับ เพราะฉะนั้นเอาแต่พอดีๆ

ผลลัพธ์

image

image

image

image

ลองนำไปประยุกต์ใช้กันดูนะครับ ***ถ้ามีการเพิ่มชุด code อื่นๆ อีก จะนำเสนอกันอีกที

Code ชุดที่ 4 Esp32
// TridentTD Version 3.0.2 สนับสนุน ESP32 Core 1.0.5, 1.0.6
// ESP32 Core 1.0.6
// IotWebConf V 3.0.1 สนับสนุน ESP8266 board package version 2.4.2 - 2.4.7
// สนับสนุน ESP32 board package version 1.0.4 - 1.0.6
// google sheet esp32 ใช้งานได้

เหมือนกับ Code ชุดที่ 1, 2 และ 3 แต่จะเพิ่ม ESP32 OTA Update เข้าไป

IotWebConf_2.3__3DaTa_Esp32.rar (575.1 KB)
การนำไปใช้งาน แค่ตัด code ของ Google sheet ออก ก็นำไปใช้งานได้แล้วครับ

เพิ่ม ESP32 OTA Update

การอัพโหลดโปรแกรม เรียกว่า OTA : Over-The-Air เป็นวิธีการอัพโหลดโปรแกรมโดยไม่ใช้สาย USB ที่อยู่ใน WiFi วงเดียวกัน

ขั้นตอนที่ 1

  • เมื่อเขียน Code เสร็จก็ให้อัพโหลด Code ด้วย arduino ide ตามปกติผ่านสาย USB
  • จากนั้นทำการ Config ค่า ssid และ Password ตลอดจน Multi WiFi และ ID Password ของ access point พูดง่ายๆคือกล่องทุกค่าที่มีจากนั้นกดปุ่ม Apply ระบบทำการเชื่อมต่อ WiFi และอินเตอร์เน็ตเรียบร้อยแล้วก็จะส่ง Line กลับมาหาเราว่าระบบทำงานเรียบร้อยแล้วจากนั้นให้เราเปิดหน้าต่าง Monitor และดู IP Address ที่รับมาจาก WiFi ว่าเป็น IP Address อะไร
  • เมื่อเรามีการเปลี่ยนแปลงและแก้ไขตัวโค้ดที่อยู่ใน arduino ide และต้องการจะอัพโหลดไปยัง esp32 ใหม่เป็นครั้งที่ 2 ในครั้งนี้ให้เราทำการย้าย esp32 ไปใช้แหล่งจ่ายไฟแหล่งอื่น พูดง่ายๆคือ esp32 ไม่ต้องต่อกับคอมพิวเตอร์โดยผ่านสาย USB อีกแล้ว

**ขั้นตอนที่ 2 **

  • ที่โปรแกรม arduino ide ไปที่เมนู sketch เลือก Export compiled Binary

image

  • รอ compiled ให้เสร็จไฟล์ที่ได้จะมีนามสกุล . bin แล้วจะไปอยู่ในตำแหน่งที่เราเก็บไฟล์โปรเจคของเราเอาไว้

image

ขั้นตอนที่3

  • ไปที่ Web Browser และป้อน IP Address ของ esp32 ที่ได้รับมาจาก Modem Router สมมุติว่าพิมพ์ address 192.168 0.72 ก็ให้พิมพ์ลงไปและกดปุ่ม enter

image

แล้วจะพบหน้าตามรูปด้านล่าง

image

จากนั้นกดปุ่ม “ตั้งค่า” ก็จะเข้าไปยังหน้าการ Config ค่าต่างๆ (ภาพตัดครึ่งนะครับ)

image image

สังเกตข้อความตำแหน่งนี้ ให้กดปุ่มเข้าไป

image

จะปรากฏหน้าเว็บตามรูปให้คลิกปุ่มเลือกไฟล์

image

จากนั้นให้เข้าไปเลือกไฟล์บินที่เราทำเอาไว้ในขั้นตอนที่ 2 แล้วกดปุ่ม Open

image

ชื่อไฟล์นามสกุล .bin ที่เราเลือกจะมาปรากฏในหน้าเว็บ Server จากนั้นให้กดปุ่ม Update
ระบบจะทำการอัพโหลดไฟล์ไปยัง esp32 และเมื่อเสร็จแล้วจะขึ้นข้อความดังภาพ

image

image

รอจนกว่าหน้าเว็บจะกลับมายังหน้าหลัก

ตอนนี้ก็เป็นอันเสร็จสิ้นระบบการส่งข้อมูลผ่าน OTA ตอนนี้ Esp32 ก็จะทำงานตามปกติ

เป็นไงครับ สำหรับ IoTWebconf ตัวนี้ไม่ธรรมดาจริงๆๆ นะครับ

ตอนนี้มี 4 รูปแบบแล้วนะครับ ยังไงผมว่า รูปแบบใดรูปแบบหนึ่ง คงเหมาะสมสำหรับเพื่อนสมาชิก ที่สนใจนะครับ

2 Likes

สุดยอดเลยครับพี่ นี้แถบจะครอบจักวาลการตั้งค่าแล้วนะครับนี้

ขอบคุณครับ @Remy_Martin ฉลองครบ 100 การตั้งกระทู้ครับ :v:

2 Likes

ขอบคุณผู้ใหญ่ใจดี แห่งเว็บ eleceasy ครับพี่ เนื้อหาแต่ละกระทู้นี้ละเอียดมาก หาอ่านที่ไหนไม่ได้นอกจากที่นี้ ที่เดียวเท่านั้น

Thanks Thank You GIF by Lumi

1 Like

Code ชุดที่ 5 Esp32 เพิ่ม mode Static IP และ Dynamic IP

สำหรับ Code ชุดนี้ ต่อตาม Diagram แล้วใช้ได้เลยครับ (ผู้ทดลองอาจจะต้องมี ID Linenotify 2 Token เพื่อให้เห็นผลชัดเจน)

// TridentTD Version 3.0.2 สนับสนุน ESP32 Core 1.0.5, 1.0.6
// ESP32 Core 1.0.6
// IotWebConf V 3.0.1 สนับสนุน ESP8266 board package version 2.4.2 - 2.4.7
// สนับสนุน ESP32 board package version 1.0.4 - 1.0.6
// การเลือก mode Static IP และ Dynamic IP*
//เพิ่มระบบ OTA Update

คุณสมบัติของ Code ชุดนี้

  1. ใช้ป้อนค่า ssid และค่า password เพื่อใช้ในการต่ออินเทอร์เน็ต

  2. จะมีไฟแสดงสถานะของบอร์ดในเรื่องของการเชื่อมต่อ WiFi

  3. จะมีปุ่มกดรีเซ็ตค่ากลับไปเป็นค่า default ในกรณีที่จำ Password ไม่ได้ (ไม่ใช้จึงไม่ทำ)

  4. มีเวลา TimerOut ให้ตั้งค่า เป็นวินาที ( 1 – 600 วินาที)

  5. สร้างการป้อนค่า ข้อมูล คือ
    5.1 2 ID Line Notify
    5.2 ชุดการป้อน Static IP IP, Subnet mark, Gateway

  6. เพิ่ม ESP32 OTA Update *** วิธีการดูจากหัวช้อที่ Post ด้านบน

IotWebConf_Esp32_Static_Dynamic-IP_2ID_Line_OTA.rar (5.5 KB)

ชุดการป้อน Static IP IP, Subnet mark , Gateway
เลื่อนสวิทซ์ไปยัง Mode Static IP ( I ) และ Reboot ESP32

2

4

ทำไม download ไฟล์ไม่ได้ครับ

ผมลอง download ก็ได้นี่ครับ ได้คลิกที่รูปลูกศรลงหรือเปล่าครับ

1 Like

ได้หล่ะครับ ขอบคุณครับ

esp32 38 pin ใช้ได้ไหมครับ

esp32 38 pin ใช้ได้ ครับ

ผ่านแล้วครับ

สงสัยครับ ทำไม ver.ใหม่นี้ EEPROM ไม่เริ่มต้นที่ 512 ครับพี่.
From…FC

ผมคิดว่าดีแล้วครับ ไม่ต้องมานั่งกังวลเรื่องนี้ ถ้าผมใช้ EEprom ก็จะขยับ ไปใช้ Address ที่ไกลๆ ออกไปอีก เพื่อป้องกันการใช้ Address ทับกัน เช่น Address ที่ 900 - 1000

ตัวอย่าง

#include <EEPROM.h>
void setup()
{

 EEPROM.begin(1024);

  EEPROM.get(900, KeepkWh);
  Serial.print("KeepkWh :");
  Serial.println(KeepkWh);

  EEPROM.get(950, KeepSub);
  Serial.print("KeepSub :");
  Serial.println(KeepSub);

  EEPROM.get(1000, KeepResule);
  Serial.print("KeepResule :");
  Serial.println(KeepResule);

}

void loop(){

if (Internet  == 1 and energy >= 0 and energy <= 0.1 and keep1 == 0 ) {

      KeepkWh = 0;
      EEPROM.put(900, KeepkWh);
      EEPROM.commit(); //จบการเขียน
      delay(50);

      KeepSub = 0;
      EEPROM.put(950, KeepSub);
      delay(50);

      KeepResule = 0 ;
      EEPROM.put(1000, KeepResule);
      delay(50);
      Serial.println("เข้า Loop energy == 0");
      keep1 = 1;
    }

    delay(1000);


}

แล้วลองดูว่า Adress ที่ กำหนดมีผลกระทบอะไรกับ Address อื่นบ้าง แล้วก็ลองเปลี่ยน Address ใหม่ g=jo 20 30 40

ครับ ขอบคุณครับพี่ พอดีผมใช้ EEprom อยู่ครับ จะย้ายตามที่พี่แนะนำครับ
ver.นี้ การทำงานของ startup delay จะหน่วงเวลาเฉพาะครั้งแรกหรือเปล่าครับ
กดปุ่มรีเซ็ตเชื่อมต่อไวไฟเร็วมากครับ จับ AP ไม่ทันเลยครับ(ตั้งไว้ 60s)
หรือ EEprom ทับกันก็ไม่รู้ครับ เดี๋ยวลองย้ายดูครับ แต่หน้าจอ port com ก็แสดง 60s นี่ครับงง

ปกติผมเอาแค่ค่าที่เค้าให้มาครับ​ 30วินาที​ พอเข้าไป​ config.ก็ปรับลดเหลือ​ 10 วินาที​ เอ่อ… ผมเข้าทันนะครับ​ อิอิ…

1 Like

ผมตั้งไว้ 60s แต่ 2 วินาทื เข้าได้แล้ว เร็วเกิน…ver.เก่าไม่เป็น แต่ชอบเร็วver.นี้ครับ สวยดี

2 Likes