ESP32 Captive Portal برای پیکربندی تنظیمات IP استاتیک و DHCP: 8 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:55

ESP 32 دستگاهی با WiFi و BLE یکپارچه است. این به نوعی برای پروژه های اینترنت اشیا مفید است. فقط SSID ، رمز عبور و پیکربندی IP خود را وارد کنید و موارد را در ابر ادغام کنید. اما مدیریت تنظیمات IP و اعتبارنامه کاربر می تواند برای کاربر دردسرساز شود.

اگر کاربر بخواهد اعتبار WiFi را تغییر دهد ، چه می شود؟

اگر کاربر بخواهد تنظیمات DHCP/Static IP را تغییر دهد ، چه می شود؟

هر بار چشمک زدن ESP32 قابل اعتماد نیست و حتی راه حلی برای این مشکلات نیست. در اینجا در این دستورالعمل نشان خواهیم داد.

• نحوه ایجاد یک پورتال اسیر
• میزبانی فرم وب از ESP32.
• خواندن و نوشتن از SPIFFS ESP32.
• ایجاد نقطه دسترسی نرم و اتصال به ایستگاه

مرحله 1: مشخصات سخت افزار و نرم افزار

مشخصات سخت افزار

• ESP32 WiFi/BLE
• سنسور دما و رطوبت بی سیم

مشخصات نرم افزار

آردوینو IDE

مرحله 2: ایجاد یک پورتال اسیر

پورتال اسیر یک صفحه وب است که قبل از دسترسی گسترده تر به منابع شبکه برای کاربران تازه متصل نمایش داده می شود. در اینجا ما از سه صفحه وب برای انتخاب بین DHCP و Static IP Settings استفاده می کنیم. ما می توانیم آدرس IP به ESP را به دو صورت تعریف کنیم.

• آدرس IP DHCP- راهی برای اختصاص پویا آدرس IP به دستگاه است. آدرس IP پیش فرض ESP 192.168.4.1 است
• آدرس IP ثابت- اختصاص یک آدرس IP دائمی به دستگاه شبکه ما. برای ارائه IP ثابت به دستگاه باید آدرس IP ، آدرس دروازه و ماسک زیر شبکه را تعریف کنیم.

در اولین صفحه وب ، دکمه های رادیویی در اختیار کاربر قرار می گیرد تا بین تنظیمات DHCP و Static IP را انتخاب کند. در صفحه بعدی ، باید اطلاعات مربوط به IP را برای ادامه کار ارائه دهیم.

کد HTML

کد HTML صفحات وب را می توانید در این مخزن Github پیدا کنید.

برای ایجاد صفحات وب HTML می توانید از هر IDE یا ویرایشگر متن مانند Sublime یا notepad ++ استفاده کنید.

• ابتدا یک صفحه وب HTML شامل دو دکمه رادیویی برای انتخاب بین DHCP و Static IP Settings ایجاد کنید.
• حالا دکمه ای را برای ارسال پاسخ ایجاد کنید
• نام دکمه های رادیو را بگذارید. کلاس سرور ESP این اسامی را به عنوان آرگومان در نظر گرفته و با استفاده از این آرگومان ها پاسخ دکمه های رادیویی را دریافت می کند
• اکنون دکمه 'SUBMIT' را وارد کنید تا پاسخ به دستگاه ارسال شود.
• در سایر صفحات وب ، جعبه های متنی داریم. مقدار نام و نوع ورودی را به کادر متن داده و یک دکمه ارسال به "ارسال" ارسال پاسخ اضافه کنید.
• برای تنظیم مجدد محتوای قسمت متن ، یک دکمه "RESET" ایجاد کنید.

// تنظیمات DHCP دکمه رادیویی

تنظیمات IP ثابت

// جعبه های ورودی متن

// دکمه ارسال

input [type = "submit"] {background-color: #3498DB؛ / * سبز */ مرز: هیچ؛ رنگ سفید؛ بالشتک: 15 پیکسل 48 پیکسل؛ text-align: center؛ text-decoration: none؛ نمایش: inline-block؛ اندازه فونت: 16px؛ }

//دکمه تنظیم مجدد

input [type = "submit"] {background-color: #3498DB؛ / * سبز */ مرز: هیچ؛ رنگ سفید؛ بالشتک: 15 پیکسل 48 پیکسل؛ text-align: center؛ text-decoration: none؛ نمایش: inline-block؛ اندازه فونت: 16px؛ }

مرحله 3: دریافت پاسخ وب از صفحات وب به ESP32

ارائه صفحات وب از دستگاه ESP 32 سرگرم کننده است. این می تواند از نمایش داده های دما در صفحه وب ، تبدیل LED ها از صفحه وب سفارشی یا ذخیره اعتبارنامه WiFi کاربر از طریق یک صفحه وب باشد. برای این منظور ، ESP 32 از WebServer Class برای سرور صفحات وب استفاده می کند.

• ابتدا نمونه ای از کلاس WebServer را در پورت 80 (پورت HTTP) ایجاد کنید.
• حالا دستگاه ESP را به عنوان softAP تنظیم کنید. SSID و رمز عبور را بدهید و یک IP ثابت به دستگاه اختصاص دهید.
• سرور را شروع کنید

// ********* SSID و Pass for AP **************/

const char *ssidAP = "دادن SSID"؛ const char *passAP = "کلید عبور" ؛

// ********* پیکربندی IP استاتیک **************/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 setup": "متصل نشد")؛

تأخیر (100) ؛ Serial.println (WiFi.softAPConfig (ap_local_IP ، ap_gateway ، ap_subnet)؟ "پیکربندی Soft AP": "خطا در پیکربندی") ؛ Serial.println (WiFi.softAPIP ()) ؛

// سرور را راه اندازی کنید

server.begin ()؛

• URL را با استفاده از فراخوان های مختلف ایجاد و ارائه دهید.
• و با استفاده از handleClient کلاینت را بصورت غیر همزمان کنترل کنید.

server.on ("/" ، handleRoot) ؛

server.on ("/dhcp"، handleDHCP)؛ server.on ("/static"، handleStatic)؛ // رسیدگی به پاسخ ها server.handleClient ()؛

• برای دسترسی به صفحات وب به AP که به تازگی ایجاد کرده اید و در شبکه های WiFi خود فهرست شده است ، متصل شوید. اکنون ، به مرورگر بروید ، IP تنظیم شده توسط شما در آخرین مرحله را وارد کرده و به صفحه وب دسترسی پیدا کنید.
• کلاس وب سرور نامی را که به ورودی ها ('text' ، 'button' ، 'radiobutton'etc.) به عنوان آرگومان داده می شود. این پاسخ این ورودی ها را به عنوان آرگومان ذخیره می کند و ما می توانیم مقادیر را بدست آوریم یا آنها را با استفاده از متدهای 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 ("دروازه") && server.hasArg ("زیر شبکه")) {staticSet ()؛ } else if (server.arg ("ipv4")! = "") {dhcpSetManual ()؛ } else {dhcpSetDefault ()؛ }

مرحله 4: پیکربندی IP ثابت

تا اینجا ما نحوه اتصال به AP و نحوه بدست آوردن مقادیر از فیلدهای ورودی صفحه وب را درک کرده ایم

در این مرحله ، IP Static را پیکربندی می کنیم

• Static IP Setting را انتخاب کرده و بر روی دکمه ارسال کلیک کنید. به صفحه بعدی هدایت می شوید.
• در صفحه بعد آدرس IP ثابت ، آدرس دروازه و ماسک زیر شبکه را وارد کنید ، این صفحه در "/static" ارائه می شود که با روش تماس گیرنده استاتیک دسته اداره می شود.
• با استفاده از متد server.arg () مقدار فیلدهای متنی را بدست آورید.

رشته ipv4static = رشته (server.arg ("ipv4static")) ؛

String gateway = String (server.arg ("دروازه")) ؛ زیر شبکه String = String (server.arg ("زیر شبکه")) ؛

• در حال حاضر ، این مقادیر به صورت JSON قالب بندی می شوند.
• سپس JSON را به SPIFFS می نویسیم.

root ["statickey"] = "staticSet"؛

root ["staticIP"] = ipv4static؛

root ["gateway"] = دروازه ؛

root ["subnet"] = زیر شبکه ؛

file 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")) {

رشته ipStaticValue = readRoot ["staticIP"]؛

String gatewayValue = readRoot ["gateway"]؛

رشته subnetValue = readRoot ["زیر شبکه"]؛

مرحله 5: تنظیمات DHCP

در این مرحله ، ما تنظیمات DHCP را پیکربندی می کنیم

تنظیمات DHCP را از صفحه فهرست انتخاب کرده و روی "ارسال" کلیک کنید

• به صفحه بعدی هدایت می شوید. در صفحه بعدی آدرس IP را وارد کنید یا گزینه default را انتخاب کنید و برای ارسال پاسخ روی دکمه "ارسال" کلیک کنید. این صفحه در "/dhcp" که با روش callDHCP اداره می شود ، ارائه می شود. با استفاده از متد server.arg () مقدار فیلدهای متنی را بدست آورید. وقتی روی کادر تأیید پیش فرض کلیک کنید. IP 192.168.4.1 به دستگاه داده می شود.
• در حال حاضر ، این مقادیر به صورت JSON قالب بندی می شوند.
• سپس JSON را به SPIFFS می نویسیم.

JsonObject & root = jsonBuffer.createObject ()؛

root ["dhcpManual"] = "dhcpManual"؛

root ["dhcpIP"] = "192.168.4.1"؛

file fileToWrite = SPIFFS.open ("/ip_set.txt" ، FILE_WRITE) ؛

if (root.printTo (fileToWrite)) {

Serial.println ("-فایل نوشته شده است") ؛ }

• این پیکربندی در SPIFFS ذخیره می شود. بعداً ، این مقادیر از SPIFFS خوانده می شوند.
• سپس مقادیر IP dhcp از JSON تجزیه می شود.

فایل فایل = SPIFFS.open ("/ip_set.txt" ، "r") ؛ در حالی که (file.available ()) {debugLogData += char (file.read ()) ؛ } if (debugLogData.length ()> 5) {JsonObject & readRoot = jsonBuffer.parseObject (debugLogData) ؛

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

رشته ipdhcpValue = readRoot ["dhcpIP"] ؛

Serial.println (ipdhcpValue) ؛

dhcpAPConfig ()؛}

مرحله 6: صرفه جویی در اعتبار WiFi

در حال حاضر ، ما پیکربندی IP را انتخاب کرده ایم. اکنون ما باید اعتبار wifi کاربر را ذخیره کنیم. تا این وضعیت حل شود. ما این روال را دنبال کرده ایم.

• بنابراین اکنون ما تنظیمات AP دستگاه خود را در DHCP یا پیکربندی IP Static داریم که از پورتال اسیری انتخاب شده در آخرین مراحل انتخاب کرده بودیم.
• فرض کنید پیکربندی IP Static را انتخاب کرده ایم.
• در این IP یک softAP پیکربندی می کنیم.
• پس از خواندن مقادیر 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]؛

آدرس IP 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 ، base) ؛

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 = millis ()؛

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

server.handleClient ()؛ }

فرم HTML در SPIFFS ذخیره می شود. آرگومان های مناسب را با استفاده از server.arg () بررسی می کنیم. برای بدست آوردن مقدار SSID و Password

فایل فایل = SPIFFS.open ("/WiFi.html"، "r")؛

server.streamFile (فایل ، "text/html") ؛

file.close ()؛

مرحله 7: خواندن و نوشتن از SPIFFS

SPIFFS

سیستم فایل فلش رابط محیطی سریال ، یا به طور خلاصه SPIFFS. این یک سیستم فایل سبک برای میکروکنترلرها با تراشه فلش SPI است. تراشه فلش داخلی ESP32 فضای زیادی برای صفحات وب شما دارد. ما همچنین صفحه وب خود را در Flash System ذخیره کرده ایم. برای بارگذاری داده ها در spiff ها چند مرحله را باید دنبال کنیم

ابزار بارگذاری داده ESP 32 SPIFFS را بارگیری کنید:

• در فهرست راهنمای طرح آردوینو خود ، اگر هنوز فهرست راهنما وجود ندارد ، ایجاد کنید
• ابزار را در فهرست ابزارها باز کنید (مسیر شبیه /Arduino/tools/ESP32FS/tool/esp32fs.jar خواهد بود)
• راه اندازی مجدد Arduino IDE
• باز کردن یک طرح (یا ایجاد یک طرح جدید و ذخیره آن)
• به فهرست اسکچ بروید (Sketch> Show Sketch Folder را انتخاب کنید)
• یک دایرکتوری به نام data و هر پرونده ای که می خواهید در سیستم فایل در آنجا ایجاد کنید. ما صفحه HTML خود را با نام webform.html بارگذاری کرده ایم
• مطمئن شوید که یک برد ، پورت و Serial Monitor بسته انتخاب کرده اید
• ابزارها> ESP8266 Sketch Data Upload را انتخاب کنید. با این کار بارگذاری پرونده ها در سیستم فایل فلش ESP8266 شروع می شود. پس از اتمام ، نوار وضعیت IDE پیام SPIFFS Image Uploaded را نمایش می دهد.

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 بنویسید.

رشته ipv4static = رشته (server.arg ("ipv4static")) ؛

String gateway = String (server.arg ("دروازه")) ؛ زیر شبکه String = String (server.arg ("زیر شبکه")) ؛ root ["statickey"] = "staticSet"؛ root ["staticIP"] = ipv4static؛ root ["gateway"] = دروازه ؛ root ["subnet"] = زیر شبکه ؛ رشته JSONStatic؛ char JSON [120]؛ root.printTo (سریال) ؛ root.prettyPrintTo (JSONStatic) ؛ JSONStatic.toCharArray (JSON ، sizeof (JSONStatic) +2) ؛ file 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 پیدا کنید