स्थिर और डीएचसीपी आईपी सेटिंग्स को कॉन्फ़िगर करने के लिए ESP32 कैप्टिव पोर्टल: 8 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:21

ईएसपी 32 एकीकृत वाईफाई और बीएलई वाला एक उपकरण है। यह IoT प्रोजेक्ट्स के लिए एक वरदान की तरह है। बस अपना SSID, पासवर्ड और IP कॉन्फ़िगरेशन दें और चीजों को क्लाउड में एकीकृत करें। लेकिन, आईपी सेटिंग्स और यूजर क्रेडेंशियल्स को मैनेज करना यूजर के लिए सिरदर्द हो सकता है।

क्या होगा यदि उपयोगकर्ता वाईफाई क्रेडेंशियल बदलना चाहता है?

क्या होगा यदि उपयोगकर्ता डीएचसीपी/स्टेटिक आईपी सेटिंग्स को स्विच करना चाहता है?

ESP32 को हर बार फ्लैश करना विश्वसनीय नहीं है और इन समस्याओं का समाधान भी नहीं है। यहाँ इस निर्देश में हम प्रदर्शित करने जा रहे हैं।

• कैप्टिव पोर्टल कैसे बनाये।
• ESP32 से वेब फॉर्म होस्ट करना।
• SPIFFS ESP32 से पढ़ना और लिखना।
• सॉफ्ट एक्सेस प्वाइंट बनाना और स्टेशन से जुड़ना

चरण 1: हार्डवेयर और सॉफ्टवेयर विशिष्टता

हार्डवेयर विशिष्टता

• ESP32 वाईफाई/बीएलई
• वायरलेस तापमान और आर्द्रता सेंसर

सॉफ्टवेयर विशिष्टता

अरुडिनो आईडीई

चरण 2: एक कैप्टिव पोर्टल बनाना

कैप्टिव पोर्टल एक वेब पेज है जो नए जुड़े उपयोगकर्ताओं को नेटवर्क संसाधनों तक व्यापक पहुंच प्रदान करने से पहले प्रदर्शित किया जाता है। यहां हम डीएचसीपी और स्टेटिक आईपी सेटिंग्स के बीच चयन करने के लिए तीन वेब पेज पेश कर रहे हैं। हम आईपी पते को ईएसपी में दो तरह से परिभाषित कर सकते हैं।

• डीएचसीपी आईपी एड्रेस- यह डिवाइस को आईपी एड्रेस को डायनेमिक रूप से असाइन करने का एक तरीका है। ESP का डिफ़ॉल्ट IP पता 192.168.4.1. है
• स्टेटिक आईपी एड्रेस- हमारे नेटवर्क डिवाइस को एक स्थायी आईपी एड्रेस असाइन करना। डिवाइस को स्थिर आईपी प्रदान करने के लिए हमें आईपी एड्रेस, गेटवे एड्रेस और सबनेट मास्क को परिभाषित करने की आवश्यकता होती है।

पहले वेबपेज में, उपयोगकर्ता को डीएचसीपी और स्टेटिक आईपी सेटिंग्स के बीच चयन करने के लिए रेडियो बटन प्रदान किए जाते हैं। अगले वेबपेज में, हमें आगे बढ़ने के लिए आईपी से संबंधित जानकारी प्रदान करनी होगी।

HTML कोड

वेब पेजों के लिए HTML कोड इस Github रिपॉजिटरी में पाया जा सकता है।

HTML वेब पेज बनाने के लिए आप किसी भी IDE या टेक्स्ट एडिटर जैसे Sublime या Notepad++ का उपयोग कर सकते हैं।

• पहले डीएचसीपी और स्टेटिक आईपी सेटिंग्स के बीच चयन करने के लिए दो रेडियो बटन युक्त एक HTML वेबपेज बनाएं।
• अब अपनी प्रतिक्रिया सबमिट करने के लिए बटन बनाएं
• रेडियो बटन को कुछ नाम दें। ईएसपी वेब सर्वर वर्ग इन नामों को तर्क के रूप में लेगा और इन तर्कों का उपयोग करके रेडियो बटन की प्रतिक्रिया प्राप्त करेगा
• अब डिवाइस को प्रतिक्रिया भेजने के लिए 'सबमिट' बटन डालें।
• अन्य वेब पेजों में, हमारे पास टेक्स्ट बॉक्स होते हैं। टेक्स्ट बॉक्स में नाम मान और इनपुट प्रकार दें और प्रतिक्रिया सबमिट करने के लिए 'सबमिट' करने के लिए सबमिट बटन जोड़ें।
• टेक्स्ट फ़ील्ड की सामग्री को रीसेट करने के लिए 'रीसेट' बटन बनाएं।

// रेडियो बटन डीएचसीपी सेटिंग

स्टेटिक आईपी सेटिंग

// इनपुट टेक्स्ट बॉक्स

//जमा करने वाला बटन

इनपुट [प्रकार = "सबमिट करें"] {पृष्ठभूमि-रंग: # 3498DB; /* हरा */ सीमा: कोई नहीं; रंग सफेद; पैडिंग:15px 48px; पाठ-संरेखण: केंद्र; पाठ-सजावट: कोई नहीं; प्रदर्शन: इनलाइन-ब्लॉक; फ़ॉन्ट-आकार: 16px; }

//बटन को रीसेट करें

इनपुट [प्रकार = "सबमिट करें"] {पृष्ठभूमि-रंग: # 3498 डीबी; /* हरा */ सीमा: कोई नहीं; रंग सफेद; पैडिंग:15px 48px; पाठ-संरेखण: केंद्र; पाठ-सजावट: कोई नहीं; प्रदर्शन: इनलाइन-ब्लॉक; फ़ॉन्ट-आकार: 16px; }

चरण 3: वेब पेजों से ESP32 तक वेब प्रतिक्रिया प्राप्त करना

ESP 32 डिवाइस से वेब पेज परोसना बहुत मजेदार है। यह वेबपेज में तापमान डेटा दिखाने, कस्टम वेबपेज से एलईडी को चालू करने या वेबपेज के माध्यम से यूजर वाईफाई क्रेडेंशियल्स को स्टोर करने से कुछ भी हो सकता है। इस उद्देश्य के लिए, ईएसपी 32 वेबसर्वर क्लास से सर्वर वेब पेजों का उपयोग करता है।

• सबसे पहले, पोर्ट 80 (HTTP पोर्ट) पर वेबसर्वर क्लास का एक उदाहरण बनाएं।
• अब ESP डिवाइस को softAP के रूप में सेट करें। SSID और पासकी दें और डिवाइस को एक स्थिर IP असाइन करें।
• सर्वर शुरू करें।

//********** एसएसआईडी और एपी के लिए पास ***************/

कास्ट चार * ssidAP = "एसएसआईडी दें"; कास्ट चार * पासएपी = "पास कुंजी";

//********** स्टेटिक आईपी कॉन्फिग ***************/आईपीएड्रेस ap_local_IP(192, 168, 1, 77); आईपीएड्रेस ap_gateway(१९२, १६८, १, २५४); आईपीएड्रेस ap_subnet(255, 255, 255, 0);

//********** सॉफ्टएप कॉन्फिग ***************/

वाईफाई.मोड (WIFI_AP);

Serial.println(WiFi.softAP(ssidAP, passAP)? "सॉफ्ट-एपी सेटअप": "कनेक्ट करने में विफल");

देरी (100); Serial.println(WiFi.softAPConfig(ap_local_IP, ap_gateway, ap_subnet)? "सॉफ्ट एपी को कॉन्फ़िगर करना": "कॉन्फ़िगरेशन में त्रुटि"); Serial.println(WiFi.softAPIP ());

// सर्वर शुरू करें

सर्वर। शुरू ();

• विभिन्न कॉलबैक का उपयोग करके URL बनाएं और परोसें।
• और हैंडल क्लाइंट का उपयोग करके क्लाइंट को असीमित रूप से संभालें।

सर्वर.ऑन ("/", हैंडलरूट);

सर्वर.ऑन ("/ डीएचसीपी", हैंडलडीएचसीपी); सर्वर.ऑन ("/ स्टेटिक", हैंडलस्टैटिक); // प्रतिक्रिया सर्वर को संभालें। हैंडल क्लाइंट ();

• वेब पेजों तक पहुँचने के लिए। उस एपी से कनेक्ट करें जिसे आपने अभी बनाया है, जो आपके वाईफाई नेटवर्क में सूचीबद्ध है। अब, ब्राउज़र पर जाएं, अंतिम चरण में आपके द्वारा कॉन्फ़िगर किया गया आईपी दर्ज करें और वेबपेज तक पहुंचें।
• वेब सर्वर क्लास इनपुट्स ('टेक्स्ट', 'बटन', 'रेडियोबटन' आदि) को दिए गए नाम को तर्क के रूप में लेता है। यह इन इनपुट की प्रतिक्रियाओं को तर्क के रूप में सहेजता है और हम मान प्राप्त कर सकते हैं या उन्हें args, arg, hasArg विधियों का उपयोग करके जांच सकते हैं।

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

Serial.println(String(server.argName(i))+'\t' + String(server.arg(i)));

}

if(server.hasArg("ipv4static") && server.hasArg("gateway") && server.hasArg("subnet")){staticSet(); }else if(server.arg("ipv4")!= ""){ dhcpSetManual(); } और { dhcpSetDefault (); }

चरण 4: स्टेटिक आईपी कॉन्फ़िगरेशन

अब तक हम समझ चुके हैं कि एपी से कैसे जुड़ना है और वेबपेज के इनपुट फील्ड से वैल्यू कैसे प्राप्त करना है।

इस चरण में, हम स्टेटिक आईपी को कॉन्फ़िगर करेंगे

• स्टेटिक आईपी सेटिंग चुनें और सबमिट बटन पर क्लिक करें। आपको अगले पृष्ठ पर पुनः निर्देशित किया जाएगा।
• अगले पेज में स्टेटिक आईपी एड्रेस, गेटवे एड्रेस और सबनेट मास्क दर्ज करें यह पेज "/ स्टैटिक" पर परोसा जाएगा जिसे हैंडल स्टैटिक कॉलबैक विधि द्वारा नियंत्रित किया जाता है।
• Server.arg() विधि का उपयोग करके टेक्स्ट फ़ील्ड का मान प्राप्त करें।

स्ट्रिंग ipv4static = String(server.arg("ipv4static"));

स्ट्रिंग गेटवे = स्ट्रिंग (सर्वर.आर्ग ("गेटवे")); स्ट्रिंग सबनेट = स्ट्रिंग (सर्वर.आर्ग ("सबनेट"));

• अब, इन मानों को JSON प्रारूप में क्रमबद्ध किया गया है।
• फिर हम SPIFFS को JSON लिखेंगे।

रूट ["स्टैटिककी"] = "स्टैटिकसेट";

रूट ["स्टैटिकआईपी"] = ipv4static;

रूट ["गेटवे"] = गेटवे;

रूट ["सबनेट"] = सबनेट;

फ़ाइल fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE);

अगर (रूट.प्रिंट टू (फाइल टॉराइट)) {

Serial.println ("--फाइल लिखित"); }

• यह कॉन्फ़िगरेशन SPIFFS में सहेजा गया है। बाद में, इन मानों को SPIFFS से पढ़ा जाता है।
• स्थिर IP मान तब JSON से पार्स किए जाते हैं।

फ़ाइल फ़ाइल = SPIFFS.open("/ip_set.txt", "r");

जबकि (फ़ाइल। उपलब्ध ()) {

डिबगलॉगडाटा + = चार (फाइल। रीड ()); }

अगर (डीबगलॉगडाटा। लम्बाई ()> 5) {

JsonObject& readRoot =jsonBuffer.parseObject(debugLogData);

अगर (readRoot.containsKey("statickey")){

स्ट्रिंग ipStaticValue = readRoot ["staticIP"];

स्ट्रिंग गेटवेवैल्यू = रीडरूट ["गेटवे"];

स्ट्रिंग सबनेटवैल्यू = रीडरूट ["सबनेट"];

चरण 5: डीएचसीपी सेटिंग्स

इस चरण में, हम DHCP सेटिंग्स को कॉन्फ़िगर करेंगे

इंडेक्स पेज से डीएचसीपी सेटिंग्स का चयन करें और "सबमिट" पर क्लिक करें।

• आपको अगले पृष्ठ पर पुनः निर्देशित किया जाएगा। अगले पृष्ठ में आईपी पता दर्ज करें या डिफ़ॉल्ट चुनें का चयन करें और प्रतिक्रिया सबमिट करने के लिए "सबमिट करें" बटन पर क्लिक करें। यह पृष्ठ "/ dhcp" पर परोसा जाएगा जिसे हैंडलडीएचसीपी कॉलबैक विधि द्वारा नियंत्रित किया जाता है। Server.arg() विधि का उपयोग करके टेक्स्ट फ़ील्ड का मान प्राप्त करें। जब डिफ़ॉल्ट चेकबॉक्स चुनें पर क्लिक किया जाता है। डिवाइस को 192.168.4.1 आईपी दिया जाएगा।
• अब, इन मानों को JSON प्रारूप में क्रमबद्ध किया गया है।
• फिर हम SPIFFS को JSON लिखेंगे।

JsonObject और रूट =jsonBuffer.createObject ();

रूट ["dhcpManual"]="dhcpManual";

रूट ["डीएचसीपीआईपी"] = "192.168.4.1";

फ़ाइल fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE);

अगर (रूट.प्रिंट टू (फाइल टूराइट)) {

Serial.println ("--फाइल लिखित"); }

• यह कॉन्फ़िगरेशन SPIFFS में सहेजा गया है। बाद में, इन मानों को SPIFFS से पढ़ा जाता है।
• डीएचसीपी आईपी मान तब JSON से पार्स किए जाते हैं।

फ़ाइल फ़ाइल = SPIFFS.open ("/ ip_set.txt", "r"); जबकि (फ़ाइल। उपलब्ध ()) {डीबगलॉगडाटा + = चार (फ़ाइल। पढ़ें ()); } अगर (debugLogData.length ()> 5) {JsonObject और readRoot = jsonBuffer.parseObject (debugLogData);

अगर (readRoot.containsKey("dhcpDefault")){

स्ट्रिंग ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

डीएचसीपीएपीकॉन्फिग ();}

चरण 6: वाईफाई क्रेडेंशियल सहेजना

अभी के लिए, हमने IP कॉन्फ़िगरेशन का चयन किया है। अब हमें यूजर के वाईफाई क्रेडेंशियल्स को सेव करना होगा। इस स्थिति को हल करने के लिए। हमने इस प्रक्रिया का पालन किया है।

• तो अब हमारे पास डीएचसीपी या स्टेटिक आईपी कॉन्फ़िगरेशन में हमारा डिवाइस एपी सेटअप है जिसे हमने अंतिम चरणों में उल्लिखित कैप्टिव पोर्टल से चुना था।
• मान लीजिए कि हमने स्टेटिक आईपी कॉन्फ़िगरेशन का चयन किया है।
• हम इस आईपी पर एक सॉफ्टएपी कॉन्फ़िगर करेंगे।
• SPIFFS से मान पढ़ने और JSON से इन मानों को पार्स करने के बाद। हम इस आईपी पर सॉफ्टएपी को कॉन्फ़िगर करेंगे।
• IP स्ट्रिंग को बाइट्स में बदलें।

बाइट आईपी [4];

parseBytes (ipv4Arr, '।', आईपी, 4, 10);

ip0 = (uint8_t)आईपी [0];

ip1 = (uint8_t)आईपी[1];

ip2 = (uint8_t)आईपी[2];

ip3 = (uint8_t)आईपी [3];

आईपीएड्रेस ap_local(ip0, ip1, ip2, ip3);

//**************** स्ट्रिंग से पार्स बाइट्स******************//

शून्य पार्सबाइट्स (कॉन्स्ट चार * स्ट्र, चार सितंबर, बाइट * बाइट्स, इंट मैक्सबाइट्स, इंट बेस) {

के लिए (int i = 0; i <maxBytes; i++) {

बाइट्स = strtoul (str, NULL, बेस);

str = strchr (str, सितंबर);

अगर (str == NULL || *str == '\0') {

टूटना;

}

str++;

}}

अब हम सॉफ्टएप को इस आईपी पर कॉन्फ़िगर करेंगे

Serial.println(WiFi.softAPConfig(ap_localWeb_IP, ap_gate, ap_net)? "सॉफ्टएपी को कॉन्फ़िगर करना": "कनेक्ट नहीं"); Serial.println(WiFi.softAPIP ());

• अब वेब सर्वर शुरू करें और इस आईपी पर एक वेबपेज परोसें। उपयोगकर्ता के वाईफाई क्रेडेंशियल दर्ज करने के लिए।
• वेबपेज में SSID और पासवर्ड दर्ज करने के लिए दो टेक्स्ट फ़ील्ड होते हैं।
• हैंडलस्टैटिकफॉर्म एक कॉलबैक विधि है जो वेबपेज परोसती है।
• server.handleClient() वेबपेज से और उसके लिए अनुरोध और प्रतिक्रियाओं का ख्याल रखता है।

सर्वर। शुरू ();

सर्वर.ऑन ("/", हैंडलस्टैटिकफॉर्म);

सर्वर.ऑन नॉटफाउंड (हैंडल नॉटफाउंड);

स्टीमर = मिली ();

जबकि (मिली () - स्टीमर <= SInterval) {

सर्वर.हैंडल क्लाइंट (); }

HTML प्रपत्र SPIFFS में सहेजा गया है। हम server.arg() का उपयोग करके उपयुक्त तर्कों की जांच करते हैं। SSID और पासवर्ड का मान प्राप्त करने के लिए।

फ़ाइल फ़ाइल = SPIFFS.open("/WiFi.html", "r");

server.streamFile (फ़ाइल, "पाठ/एचटीएमएल");

फ़ाइल। बंद करें ();

चरण 7: SPIFFS से पढ़ें और लिखें

SPIFFS

सीरियल पेरिफेरल इंटरफेस फ्लैश फाइल सिस्टम, या संक्षेप में SPIFFS। यह एसपीआई फ्लैश चिप के साथ माइक्रोकंट्रोलर के लिए एक हल्के वजन वाली फाइल सिस्टम है। ESP32 के ऑनबोर्ड फ्लैश चिप में आपके वेब पेजों के लिए काफी जगह है। हमने अपने वेबपेज को फ्लैश सिस्टम में भी स्टोर किया है। spiffs पर डेटा अपलोड करने के लिए हमें कुछ चरणों का पालन करना होगा

ESP 32 SPIFFS डेटा अपलोड टूल डाउनलोड करें:

• अपने Arduino स्केचबुक निर्देशिका में, उपकरण निर्देशिका बनाएं यदि यह अभी तक मौजूद नहीं है
• टूल को टूल डायरेक्टरी में अनपैक करें (पथ /Arduino/tools/ESP32FS/tool/esp32fs.jar जैसा दिखेगा)
• Arduino IDE को पुनरारंभ करें
• एक स्केच खोलें (या एक नया बनाएं और इसे सेव करें)
• स्केच निर्देशिका पर जाएँ (स्केच > स्केच फ़ोल्डर दिखाएँ चुनें)
• डेटा नाम की एक निर्देशिका बनाएं और वहां की फाइल सिस्टम में आप जो भी फाइल चाहते हैं। हमने अपना HTML पृष्ठ webform.html. नाम से अपलोड कर दिया है
• सुनिश्चित करें कि आपने एक बोर्ड, पोर्ट और बंद सीरियल मॉनिटर का चयन किया है
• टूल्स > ESP8266 स्केच डेटा अपलोड चुनें। यह फाइलों को ESP8266 फ्लैश फाइल सिस्टम में अपलोड करना शुरू कर देना चाहिए। हो जाने पर, IDE स्टेटस बार SPIFFS इमेज अपलोडेड संदेश प्रदर्शित करेगा।

शून्य हैंडलडीएचसीपी () {फ़ाइल फ़ाइल = SPIFFS.open("/page_dhcp.html", "r"); server.streamFile (फ़ाइल, "पाठ/एचटीएमएल"); फ़ाइल.क्लोज़ ();}

शून्य हैंडलस्टैटिक () {

फ़ाइल फ़ाइल = SPIFFS.open("/page_static.html", "r"); server.streamFile (फ़ाइल, "पाठ/एचटीएमएल"); फ़ाइल.क्लोज़ ();}

SPIFFS को लिखना

यहां हम सहेजी गई सेटिंग को SPIFFS में लिख रहे हैं ताकि जब भी डिवाइस रीसेट हो जाए तो उपयोगकर्ताओं को इन चरणों से न गुजरना पड़े।

• वेबपेज से प्राप्त तर्कों को JSON ऑब्जेक्ट में बदलें
• इस JSON को SPIFFS में सहेजी गई.txt फ़ाइल में लिखें।

स्ट्रिंग ipv4static = String(server.arg("ipv4static"));

स्ट्रिंग गेटवे = स्ट्रिंग (सर्वर.आर्ग ("गेटवे")); स्ट्रिंग सबनेट = स्ट्रिंग (सर्वर.आर्ग ("सबनेट")); रूट ["स्टैटिककी"] = "स्टैटिकसेट"; रूट ["स्टैटिकआईपी"] = ipv4static; रूट ["गेटवे"] = गेटवे; रूट ["सबनेट"] = सबनेट; स्ट्रिंग 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("--File लिखित"); }else{ Serial.println ("--एरर राइटिंग फाइल"); } fileToWrite.close ();

चरण 8: कुल मिलाकर कोड

HTML और ESP32 के लिए ओवर कोड इस Github रिपॉजिटरी में पाया जा सकता है