פורטל Captive ESP32 להגדרת הגדרות IP סטטיות ו- DHCP: 8 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:15

ESP 32 הוא מכשיר עם WiFi משולב ו- BLE. זה סוג של ברכה לפרויקטים של IoT. פשוט תן את תצורות ה- SSID, הסיסמה וה- IP שלך ושלב את הדברים בענן. אבל ניהול הגדרות ה- IP ואישורי המשתמש יכול להוות כאב ראש למשתמש.

מה אם המשתמש רוצה לשנות את אישורי ה- WiFi?

מה אם המשתמש רוצה להחליף את הגדרות ה- DHCP/IP סטטי?

מהבהב ה- ESP32 בכל פעם אינו אמין ואפילו לא הפתרון לבעיות אלה. כאן במדריך זה אנו הולכים להפגין.

• כיצד ליצור פורטל שבוי.
• אירוח טופס אינטרנט מ- ESP32.
• קריאה וכתיבה מ- SPIFFS ESP32.
• יצירת נקודת גישה רכה וחיבור לתחנה

שלב 1: מפרט חומרה ותוכנה

מפרט חומרה

• ESP32 WiFi/BLE
• חיישן טמפרטורה ולחות אלחוטי

מפרט תוכנה

Arduino IDE

שלב 2: יצירת פורטל Captive

פורטל שבוי הוא דף אינטרנט המוצג למשתמשים המחוברים לאחרונה לפני שהם מקבלים גישה רחבה יותר למשאבי רשת. כאן אנו מגישים שלושה דפי אינטרנט לבחירה בין DHCP והגדרות IP סטטיות. אנו יכולים להגדיר את כתובת ה- IP ל- ESP בשתי דרכים.

• כתובת IP DHCP- זוהי דרך להקצות דינאמית את כתובת ה- IP למכשיר. כתובת ה- IP של ברירת המחדל של ה- ESP היא 192.168.4.1
• כתובת IP סטטית- הקצאת כתובת IP קבועה למכשיר הרשת שלנו. כדי לספק את ה- IP הסטטי למכשיר אנו צריכים להגדיר את כתובת ה- IP, כתובת השער ומסכת רשת המשנה.

בדף האינטרנט הראשון, המשתמש מסופק עם לחצני האפשרויות לבחירה בין הגדרות DHCP והגדרות IP סטטיות. בדף האינטרנט הבא, עלינו לספק את המידע הקשור ל- IP כדי להמשיך הלאה.

קוד HTML

קוד HTML לדפי אינטרנט ניתן למצוא במאגר זה של Github.

אתה יכול להשתמש בכל IDE או עורך טקסט כמו Sublime או פנקס רשימות ++ כדי ליצור דפי אינטרנט HTML.

• ראשית צור דף אינטרנט הכולל שני לחצני בחירה לבחירה בין הגדרות DHCP והגדרות IP סטטיות.
• כעת צור את הכפתור לשלוח את תגובתך
• תן שם כלשהו ללחצני האפשרויות. מחלקת שרת האינטרנט של ESP תיקח את השמות הללו כארגומנטים ותקבל את תגובת כפתורי הבחירה באמצעות ארגומנטים אלה
• כעת הכנס כפתור 'שלח' לשליחת התגובה למכשיר.
• בדפי האינטרנט האחרים, יש לנו תיבות טקסט. תן את ערך השם וסוג הקלט לתיבת הטקסט והוסף כפתור שלח כדי 'שלח' שלח את התגובה.
• צור כפתור 'איפוס' לאיפוס התוכן של שדה הטקסט.

// הגדרת כפתור רדיו DHCP

הגדרת IP סטטית

// קלט תיבות טקסט

// כפתור שלח

input [type = "submit"] {background-color: #3498DB; / * ירוק */ גבול: אין; צבע לבן; ריפוד: 15px 48px; יישור טקסט: מרכז; טקסט-קישוט: אין; תצוגה: inline-block; גודל גופן: 16 פיקסלים; }

//כפתור אתחול

input [type = "submit"] {background-color: #3498DB; / * ירוק */ גבול: אין; צבע לבן; ריפוד: 15px 48px; יישור טקסט: מרכז; טקסט-קישוט: אין; תצוגה: inline-block; גודל גופן: 16 פיקסלים; }

שלב 3: קבלת תגובת האינטרנט מדפי אינטרנט ל- ESP32

הגשת דפי אינטרנט ממכשיר ESP 32 היא כיף גדול. זה יכול להיות הכל מהצגת נתוני הטמפרטורה בדף האינטרנט, הפיכת ה- LED מהדף המותאם אישית או אחסון אישורי ה- WiFi של המשתמש באמצעות דף אינטרנט. למטרה זו, ESP 32 משתמש ב- WebServer Class לשרת דפי אינטרנט.

• ראשית, צור מופע של מחלקת WebServer ביציאה 80 (יציאת
• כעת הגדר את מכשיר ה- ESP כ- softAP. תן את ה- SSID ואת מפתח הסיסמה והקצה IP סטטי למכשיר.
• התחל את השרת.

// ********* SSID ו- Pass for AP **************/

const char *ssidAP = "לתת SSID"; const char *passAP = "מפתח מעבר";

// ********* Config IP Static **************/IPAddress ap_local_IP (192, 168, 1, 77); IPAddress ap_gateway (192, 168, 1, 254); IPAddress ap_subnet (255, 255, 255, 0);

// ********* SoftAP Config ***************/

WiFi.mode (WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP)? "התקנת soft-AP": "החיבור נכשל");

עיכוב (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Configuring Soft AP": "שגיאה בתצורה"); Serial.println (WiFi.softAPIP ());

// התחל את השרת

server.begin ();

• צור והגש את כתובת האתר באמצעות שיחות טלפון חוזרות שונות.
• ולטפל בלקוח באופן אסינכרוני באמצעות handleClient.

server.on ("/", handleRoot);

server.on ("/dhcp", handleDHCP); server.on ("/static", handleStatic); // לטפל בתגובות server.handleClient ();

• לגישה לדפי האינטרנט. התחבר ל- AP שזה עתה יצרת, המופיע ברשתות ה- WiFi שלך. כעת, עבור לדפדפן, הזן את ה- IP שהוגדר על ידך בשלב האחרון וגש לדף האינטרנט.
• מחלקת שרת האינטרנט לוקחת את השם שניתן לכניסות ('טקסט', 'כפתור', 'כפתור רדיו' וכו ') כארגומנטים. הוא שומר את התגובות של תשומות אלה כארגומנטים ואנו יכולים לקבל את הערכים או לבדוק אותם באמצעות שיטות args, arg, hasArg.

if (server.args ()> 0) {for (int i = 0; i <= server.args (); i ++) {

Serial.println (מחרוזת (server.argName (i)) + '\ t' + מחרוזת (server.arg (i)));

}

if (server.hasArg ("ipv4static") && server.hasArg ("gateway") && server.hasArg ("subnet")) {staticSet (); } אחר אם (server.arg ("ipv4")! = "") {dhcpSetManual (); } אחר {dhcpSetDefault (); }

שלב 4: תצורת IP סטטית

עד כה הבנו כיצד להתחבר ל- AP וכיצד לקבל את הערכים משדות הקלט של דף האינטרנט

בשלב זה נתקין את ה- IP הסטטי

• בחר את הגדרת ה- IP הסטטית ולחץ על כפתור שלח. תועבר לדף הבא.
• בעמוד הבא הזן את כתובת ה- IP הסטטית, את כתובת השער ואת מסכת רשת המשנה דף זה יוגש ב- "/static" אשר מטופלת על ידי שיטת החזרה סטטית של ידית אחיזה סטטית.
• קבל את הערך של שדות טקסט בשיטת server.arg ().

String ipv4static = String (server.arg ("ipv4static"));

שער מחרוזת = String (server.arg ("שער")); רשת משנה של מחרוזת = String (server.arg ("רשת משנה"));

• כעת, ערכים אלה מסודרים לפורמט JSON.
• לאחר מכן נכתוב את ה- JSON ל- SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["שער"] = שער;

root ["subnet"] = רשת משנה;

קובץ fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE);

if (root.printTo (fileToWrite)) {

Serial.println ("-קובץ כתוב"); }

• תצורה זו נשמרת ב- SPIFFS. מאוחר יותר, ערכים אלה נקראים מ- SPIFFS.
• ערכי ה- IP הסטטיים מנותחים לאחר מכן מ- JSON.

קובץ קובץ = SPIFFS.open ("/ip_set.txt", "r");

while (file.available ()) {

debugLogData += char (file.read ()); }

if (debugLogData.length ()> 5) {

JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

if (readRoot.containsKey ("statickey")) {

String ipStaticValue = readRoot ["staticIP"];

String gatewayValue = readRoot ["gateway"];

String subnetValue = readRoot ["subnet"];

שלב 5: הגדרות DHCP

בשלב זה נגדיר את הגדרות DHCP

בחר את הגדרות DHCP מדף האינדקס ולחץ על "שלח"

• תועבר לדף הבא. בעמוד הבא הזן את כתובת ה- IP או בחר בחר ברירת מחדל ולחץ על כפתור "שלח" כדי לשלוח את התגובה. דף זה יוגש בכתובת "/dhcp" אשר מטופלת בשיטת החזרה של handleDHCP. קבל את הערך של שדות טקסט בשיטת server.arg (). בלחיצה על בחר תיבת סימון ברירת מחדל. ה- IP 192.168.4.1 יינתן למכשיר.
• כעת, ערכים אלה מסודרים לפורמט JSON.
• לאחר מכן נכתוב את ה- JSON ל- SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

קובץ fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE);

if (root.printTo (fileToWrite)) {

Serial.println ("-קובץ כתוב"); }

• תצורה זו נשמרת ב- SPIFFS. מאוחר יותר, ערכים אלה נקראים מ- SPIFFS.
• ערכי ה- dhcp מנותחים לאחר מכן מ- JSON.

קובץ קובץ = SPIFFS.open ("/ip_set.txt", "r"); while (file.available ()) {debugLogData += char (file.read ()); } if (debugLogData.length ()> 5) {JsonObject & readRoot = jsonBuffer.parseObject (debugLogData);

if (readRoot.containsKey ("dhcpDefault")) {

String ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

שלב 6: שמירת אישורי WiFi

לעת עתה, בחרנו את תצורת ה- IP. כעת עלינו לשמור את אישורי ה- wifi של המשתמש. כדי לפתור את המצב הזה. פעלנו לפי הליך זה.

• אז עכשיו יש לנו את התקנת ה- AP שלנו למכשיר בתצורת DHCP או IP סטטי שבחרנו מהפורטל השבוי שהוזכר בשלבים האחרונים.
• נניח שבחרנו בתצורת IP סטטית.
• אנו נגדיר softAP ב- IP זה.
• לאחר קריאת הערכים מ- SPIFFS וניתוח ערכים אלה מ- JSON. אנו נקבע את תצורת ה- softAP ב- IP זה.
• המרת מחרוזת ה- IP לבייטים.

בת ip [4];

parseBytes (ipv4Arr, '.', ip, 4, 10);

ip0 = (uint8_t) ip [0];

ip1 = (uint8_t) ip [1];

ip2 = (uint8_t) ip [2];

ip3 = (uint8_t) ip [3];

IPAddress ap_local (ip0, ip1, ip2, ip3);

// **************** ניתוח בתים מהמחרוזת ***************** //

void parseBytes (const char* str, char sep, byte* bytes, int maxBytes, int base) {

עבור (int i = 0; i <maxBytes; i ++) {

בתים = strtoul (str, NULL, בסיס);

str = strchr (str, sep);

if (str == NULL || *str == '\ 0') {

לשבור;

}

str ++;

}}

כעת נקבע את תצורת ה- softAP ב- IP זה

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "הגדרת softAP": "לא מחובר"); Serial.println (WiFi.softAPIP ());

• כעת התחל את שרת האינטרנט והגש דף אינטרנט ב- IP זה. כדי להזין את אישורי ה- WiFi של המשתמש.
• דף האינטרנט מורכב משני שדות טקסט להזנת SSID וסיסמה.
• handleStaticForm היא שיטת שיחה חוזרת המשרתת את דף האינטרנט.
• server.handleClient () דואג לבקשה ולתגובות לדף האינטרנט וממנו.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (handleNotFound);

STimer = מיליס ();

while (millis ()-STimer <= SInterval) {

server.handleClient (); }

טופס ה- HTML נשמר ב- SPIFFS. אנו בודקים את הארגומנטים המתאימים באמצעות server.arg (). כדי לקבל את הערך של SSID וסיסמה

קובץ קובץ = SPIFFS.open ("/WiFi.html", "r");

server.streamFile (קובץ, "text/html");

file.close ();

שלב 7: קרא וכתוב מ- SPIFFS

SPIFFS

ממשק היקפי סדרתי Flash File File, או בקיצור SPIFFS. זוהי מערכת קבצים קלה עבור בקרי מיקרו עם שבב פלאש SPI. לשבב הפלאש המשולב של ESP32 יש הרבה מקום לדפי האינטרנט שלך. שמרנו גם את דף האינטרנט שלנו במערכת Flash. ישנם מספר שלבים שעלינו לבצע כדי להעלות נתונים ל- spiffs

הורד את כלי העלאת הנתונים ESP 32 SPIFFS:

• בספריית הסקיצות של Arduino, צור ספריית כלים אם היא עדיין לא קיימת
• פרק את הכלי לספריית הכלים (הנתיב ייראה כמו /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• הפעל מחדש את Arduino IDE
• פתח סקיצה (או צור רישום חדש ושמור אותה)
• עבור לספריית הסקיצות (בחר סקיצה> הצג תיקיית סקיצות)
• צור שם ספרייה בשם נתונים וכל הקבצים שאתה רוצה במערכת הקבצים שם. העלנו את דף ה- HTML שלנו בשם webform.html
• וודא שבחרת לוח, יציאה וצג סידורי סגור
• בחר כלים> העלאת נתוני סקיצה ESP8266. זה אמור להתחיל להעלות את הקבצים למערכת קבצי הבזק ESP8266. בסיום, שורת המצב של IDE תציג הודעה שהועלתה תמונה SPIFFS.

void handleDHCP () {קובץ קובץ = SPIFFS.open ("/page_dhcp.html", "r"); server.streamFile (קובץ, "text/html"); file.close ();}

void handleStatic () {

קובץ קובץ = SPIFFS.open ("/page_static.html", "r"); server.streamFile (קובץ, "text/html"); file.close ();}

כתיבה ל- SPIFFS

כאן אנו כותבים את ההגדרה השמורה ל- SPIFFS כך שמשתמשים לא יצטרכו לעבור את השלבים האלה בכל פעם שהתקן מתאפס.

• המר את הארגומנטים שהתקבלו מדף האינטרנט לאובייקטים של JSON
• כתוב JSON זה לקובץ ה- txt השמור ב- SPIFFS.

String ipv4static = String (server.arg ("ipv4static"));

שער מחרוזת = String (server.arg ("שער")); רשת משנה משנה = מחרוזת (server.arg ("רשת משנה")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["שער"] = שער; root ["subnet"] = רשת משנה; מחרוזת JSONStatic; צ'אר JSON [120]; root.printTo (סידורי); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); קובץ fileToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("שגיאה בפתיחת SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("-קובץ כתוב"); } else {Serial.println ("-שגיאת כתיבת קובץ"); } fileToWrite.close ();

שלב 8: קוד כולל

קוד Over עבור HTML ו- ESP32 ניתן למצוא במאגר Github זה