Cổng thông tin cố định ESP32 để định cấu hình cài đặt IP tĩnh và DHCP: 8 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:33

ESP 32 là thiết bị tích hợp WiFi và BLE. Nó là một lợi ích cho các dự án IoT. Chỉ cần cung cấp cấu hình SSID, mật khẩu và IP của bạn và tích hợp mọi thứ vào đám mây. Tuy nhiên, quản lý cài đặt IP và thông tin đăng nhập của người dùng có thể là một vấn đề đau đầu đối với người dùng.

Điều gì sẽ xảy ra nếu Người dùng muốn thay đổi thông tin đăng nhập WiFi?

Điều gì sẽ xảy ra nếu người dùng muốn chuyển đổi cài đặt DHCP / IP tĩnh?

Việc nhấp nháy ESP32 mọi lúc không đáng tin cậy và thậm chí không phải là giải pháp cho những vấn đề này. Ở đây trong hướng dẫn này, chúng tôi sẽ chứng minh.

• Cách tạo cổng cố định.
• Lưu trữ một biểu mẫu web từ ESP32.
• Đọc và Viết từ SPIFFS ESP32.
• Tạo một điểm truy cập mềm và kết nối với một trạm

Bước 1: Đặc điểm kỹ thuật phần cứng và phần mềm

Đặc điểm kỹ thuật phần cứng

• ESP32 WiFi / BLE
• Cảm biến nhiệt độ và độ ẩm không dây

Đặc điểm kỹ thuật phần mềm

Arduino IDE

Bước 2: Tạo Cổng cố định

Cổng bị khóa là một trang web được hiển thị cho những người dùng mới được kết nối trước khi họ được cấp quyền truy cập rộng hơn vào các tài nguyên mạng. Ở đây, chúng tôi đang cung cấp ba trang web để lựa chọn giữa Cài đặt DHCP và IP tĩnh. chúng ta có thể xác định địa chỉ IP cho ESP theo hai cách.

• Địa chỉ IP của DHCP- đó là một cách để gán động địa chỉ IP cho thiết bị. Địa chỉ IP mặc định của ESP là 192.168.4.1
• Địa chỉ IP tĩnh- chỉ định Địa chỉ IP cố định cho thiết bị mạng của chúng tôi. để cung cấp IP tĩnh cho thiết bị, chúng ta cần xác định địa chỉ IP, địa chỉ cổng vào và mặt nạ mạng con.

Trong trang web đầu tiên, Người dùng được cung cấp các nút radio để chọn giữa cài đặt DHCP và IP tĩnh. Trong trang web tiếp theo, chúng tôi phải cung cấp thông tin liên quan đến IP để tiếp tục.

Mã HTML

Có thể tìm thấy mã HTML cho các trang web trong kho lưu trữ Github này.

Bạn có thể sử dụng bất kỳ IDE hoặc trình soạn thảo văn bản nào như Sublime hoặc notepad ++ để tạo các trang web HTML.

• Đầu tiên Tạo một trang web HTML có chứa hai nút radio để chọn giữa Cài đặt DHCP và IP tĩnh.
• Bây giờ hãy tạo nút để gửi câu trả lời của bạn
• Đặt tên cho các nút radio. Lớp máy chủ Web ESP sẽ lấy các tên này làm đối số và nhận phản hồi của các nút radio bằng cách sử dụng các đối số này
• Bây giờ, hãy chèn nút 'GỬI' để gửi phản hồi đến thiết bị.
• Trong các trang web khác, chúng tôi có các hộp văn bản. Cung cấp giá trị tên và Kiểu đầu vào vào hộp văn bản và thêm nút gửi để 'GỬI' gửi phản hồi.
• Tạo nút 'ĐẶT LẠI' để đặt lại nội dung của trường văn bản.

// Cài đặt DHCP nút radio

Cài đặt IP tĩnh

// Hộp văn bản nhập

// Nút gửi

input [type = "submit"] {background-color: # 3498DB; / * Green * / border: không có; màu trắng; đệm: 15px 48px; text-align: center; văn bản-trang trí: không có; display: inline-block; font-size: 16px; }

//Nút reset

input [type = "submit"] {background-color: # 3498DB; / * Green * / border: không có; màu trắng; đệm: 15px 48px; text-align: center; văn bản-trang trí: không có; display: inline-block; font-size: 16px; }

Bước 3: Nhận phản hồi web từ các trang web đến ESP32

Phục vụ các trang web từ thiết bị ESP 32 rất thú vị. Nó có thể là bất cứ điều gì từ hiển thị dữ liệu nhiệt độ trong trang web, chuyển đèn led từ trang web tùy chỉnh hoặc lưu trữ thông tin đăng nhập WiFi của người dùng thông qua một trang web. Với mục đích này, ESP 32 sử dụng Lớp WebServer cho các trang web máy chủ.

• Đầu tiên, Tạo một phiên bản của lớp WebServer tại cổng 80 (cổng
• Bây giờ hãy thiết lập thiết bị ESP dưới dạng softAP. Cung cấp SSID và mã khóa và gán IP tĩnh cho thiết bị.
• Khởi động máy chủ.

// ********* SSID và Pass cho AP ************** /

const char * ssidAP = "cung cấp SSID"; const char * passAP = "khóa truyền";

// ********* Cấu hình IP tĩnh ************** / IPAddress ap_local_IP (192, 168, 1, 77); IPAddress ap_gateway (192, 168, 1, 254); IPAddress ap_subnet (255, 255, 255, 0);

// ********* Cấu hình SoftAP ************** /

WiFi.mode (WIFI_AP);

Serial.println (WiFi.softAP (ssidAP, passAP)? "Soft-AP setup": "Không kết nối được");

chậm trễ (100); Serial.println (WiFi.softAPConfig (ap_local_IP, ap_gateway, ap_subnet)? "Cấu hình Soft AP": "Lỗi trong Cấu hình"); Serial.println (WiFi.softAPIP ());

// bắt đầu máy chủ

server.begin ();

• Tạo và phân phát URL bằng cách sử dụng các lệnh gọi lại khác nhau.
• và xử lý không đồng bộ ứng dụng khách bằng cách sử dụng handleClient.

server.on ("/", handleRoot);

server.on ("/ dhcp", handleDHCP); server.on ("/ static", handleStatic); // xử lý các phản hồi server.handleClient ();

• Để truy cập các trang web. Kết nối với AP mà bạn vừa tạo, được liệt kê trong mạng WiFi của bạn. Bây giờ, hãy vào trình duyệt, Nhập IP mà bạn đã định cấu hình ở bước cuối cùng và truy cập trang web.
• Lớp máy chủ web lấy tên được đặt cho các đầu vào ('text', 'button', 'radiobutton'etc.) Làm đối số. Nó lưu các phản hồi của các đầu vào này dưới dạng đối số và chúng ta có thể lấy các giá trị hoặc kiểm tra chúng bằng cách sử dụng các phương thức 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 (); } else {dhcpSetDefault (); }

Bước 4: Cấu hình IP tĩnh

Cho đến nay chúng ta đã hiểu cách kết nối với AP và cách lấy các giá trị từ các trường đầu vào của trang web

Trong bước này, chúng tôi sẽ cấu hình IP tĩnh

• Chọn Cài đặt IP tĩnh và nhấp vào nút Gửi. Bạn sẽ được chuyển hướng đến trang tiếp theo.
• Trong trang tiếp theo, hãy nhập địa chỉ IP tĩnh, địa chỉ cổng vào và Mặt nạ mạng con. Trang này sẽ được phân phát tại "/ static" được xử lý bằng phương thức gọi lại xử lý tĩnh.
• Nhận giá trị của các trường văn bản bằng cách sử dụng phương thức server.arg ().

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

Cổng vào chuỗi = String (server.arg ("cổng vào")); String subnet = String (server.arg ("mạng con"));

• Bây giờ, các giá trị này được tuần tự hóa thành Định dạng JSON.
• Sau đó, chúng tôi sẽ viết JSON thành SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = cổng vào;

root ["subnet"] = mạng con;

Tập tin fileToWrite = SPIFFS.open ("/ ip_set.txt", FILE_WRITE);

if (root.printTo (fileToWrite)) {

Serial.println ("- Tệp Đã Viết"); }

• Cấu hình này được lưu trong SPIFFS. Sau đó, các giá trị này được đọc từ SPIFFS.
• Các giá trị IP tĩnh sau đó được phân tích cú pháp từ JSON.

Tệp tin = 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")) {

Chuỗi ipStaticValue = readRoot ["staticIP"];

String gatewayValue = readRoot ["gateway"];

String subnetValue = readRoot ["mạng con"];

Bước 5: Cài đặt DHCP

Trong bước này, chúng tôi sẽ cấu hình Cài đặt DHCP

Chọn Cài đặt DHCP từ trang chỉ mục và nhấp vào "Gửi"

• Bạn sẽ được chuyển hướng đến trang tiếp theo. Trong trang tiếp theo, nhập địa chỉ IP hoặc chọn chọn mặc định và nhấp vào nút "Gửi" để gửi phản hồi. Trang này sẽ được phân phát tại "/ dhcp" được xử lý bởi phương thức gọi lại handleDHCP. Nhận giá trị của các trường văn bản bằng cách sử dụng phương thức server.arg (). Khi được nhấp vào, hãy chọn hộp kiểm mặc định. IP 192.168.4.1 sẽ được cấp cho thiết bị.
• Bây giờ, các giá trị này được tuần tự hóa thành Định dạng JSON.
• Sau đó, chúng tôi sẽ viết JSON thành SPIFFS.

JsonObject & root = jsonBuffer.createObject ();

root ["dhcpManual"] = "dhcpManual";

root ["dhcpIP"] = "192.168.4.1";

Tập tin fileToWrite = SPIFFS.open ("/ ip_set.txt", FILE_WRITE);

if (root.printTo (fileToWrite)) {

Serial.println ("- Tệp Đã Viết"); }

• Cấu hình này được lưu trong SPIFFS. Sau đó, các giá trị này được đọc từ SPIFFS.
• Các giá trị IP dhcp sau đó được phân tích cú pháp từ JSON.

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

Chuỗi ipdhcpValue = readRoot ["dhcpIP"];

Serial.println (ipdhcpValue);

dhcpAPConfig ();}

Bước 6: Lưu thông tin đăng nhập WiFi

Hiện tại, chúng tôi đã chọn cấu hình IP. Bây giờ chúng ta cần lưu thông tin đăng nhập wifi của Người dùng. Để giải quyết tình trạng này. Chúng tôi đã làm theo quy trình này.

• Vì vậy, bây giờ chúng tôi đã thiết lập AP thiết bị của mình trong cấu hình DHCP hoặc IP tĩnh mà chúng tôi đã chọn từ cổng cố định được đề cập trong các bước trước.
• Giả sử chúng tôi đã chọn cấu hình IP tĩnh.
• Chúng tôi sẽ cấu hình một softAP tại IP này.
• Sau khi đọc các giá trị từ SPIFFS và phân tích cú pháp các giá trị này từ JSON. Chúng tôi sẽ cấu hình softAP tại IP này.
• Chuyển đổi chuỗi IP thành byte.

byte 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);

// *************** Phân tích cú pháp các byte từ chuỗi ****************** //

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

for (int i = 0; i <maxBytes; i ++) {

byte = strtoul (str, NULL, cơ sở);

str = strchr (str, sep);

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

nghỉ;

}

str ++;

}}

Bây giờ chúng ta sẽ cấu hình softAP tại IP này

Serial.println (WiFi.softAPConfig (ap_localWeb_IP, ap_gate, ap_net)? "Cấu hình softAP": "không được kết nối"); Serial.println (WiFi.softAPIP ());

• Bây giờ hãy khởi động máy chủ web và cung cấp một trang web tại IP này. Để nhập thông tin đăng nhập WiFi của người dùng.
• Trang web bao gồm hai trường văn bản để nhập SSID và Mật khẩu.
• handleStaticForm là một phương thức gọi lại phục vụ trang web.
• server.handleClient () xử lý yêu cầu và phản hồi đến và từ trang web.

server.begin ();

server.on ("/", handleStaticForm);

server.onNotFound (xử lýNotFound);

STimer = millis ();

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

server.handleClient (); }

Biểu mẫu HTML được lưu trong SPIFFS. chúng tôi kiểm tra các đối số phù hợp bằng cách sử dụng server.arg (). để lấy giá trị của SSID và Mật khẩu

Tệp tin = SPIFFS.open ("/ WiFi.html", "r");

server.streamFile (tệp, "text / html");

file.close ();

Bước 7: Đọc và ghi từ SPIFFS

SPIFFS

Hệ thống tệp Flash giao diện ngoại vi nối tiếp, gọi tắt là SPIFFS. Đó là một hệ thống tệp trọng lượng nhẹ dành cho bộ vi điều khiển với chip flash SPI. Chip flash tích hợp của ESP32 có nhiều dung lượng cho các trang web của bạn. Chúng tôi cũng đã lưu trữ trang web của mình trong Hệ thống Flash. Chúng tôi cần làm theo một số bước để tải dữ liệu lên mức tăng đột biến

Tải xuống công cụ tải lên dữ liệu ESP 32 SPIFFS:

• Trong thư mục sổ phác thảo Arduino của bạn, hãy tạo thư mục công cụ nếu nó chưa tồn tại
• Giải nén công cụ vào thư mục công cụ (đường dẫn sẽ giống như /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Khởi động lại Arduino IDE
• Mở một bản phác thảo (hoặc tạo một bản phác thảo mới và lưu nó)
• Đi tới thư mục phác thảo (chọn Sketch> Show Sketch Folder)
• Tạo một thư mục có tên dữ liệu và bất kỳ tệp nào bạn muốn trong hệ thống tệp ở đó. Chúng tôi đã tải lên trang HTML của mình với tên webform.html
• Đảm bảo rằng bạn đã chọn bo mạch, cổng và màn hình nối tiếp đã đóng
• Chọn Công cụ> Tải lên dữ liệu phác thảo ESP8266. Thao tác này sẽ bắt đầu tải các tệp lên hệ thống tệp flash ESP8266. Khi hoàn tất, thanh trạng thái IDE sẽ hiển thị thông báo SPIFFS Image Uploaded.

void xử lýDHCP () {Tệp tin = SPIFFS.open ("/ page_dhcp.html", "r"); server.streamFile (tệp, "text / html"); file.close ();}

void handleStatic () {

Tệp tin = SPIFFS.open ("/ page_static.html", "r"); server.streamFile (tệp, "text / html"); file.close ();}

Viết thư cho SPIFFS

Ở đây chúng tôi viết cài đặt đã lưu vào SPIFFS để người dùng không phải thực hiện các bước này bất cứ khi nào thiết bị đặt lại.

• Chuyển đổi các đối số nhận được từ trang web thành các đối tượng JSON
• Ghi JSON này vào tệp.txt được lưu trong SPIFFS.

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

Cổng vào chuỗi = String (server.arg ("cổng vào")); String subnet = String (server.arg ("mạng con")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["gateway"] = cổng vào; root ["subnet"] = mạng con; Chuỗi JSONStatic; char JSON [120]; root.printTo (Serial); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); Tập tin fileToWrite = SPIFFS.open ("/ ip_set.txt", FILE_WRITE); if (! fileToWrite) {Serial.println ("Lỗi khi mở SPIFFS"); } if (fileToWrite.print (JSON)) {Serial.println ("- Tập tin Đã viết"); } else {Serial.println ("- Lỗi Ghi Tệp"); } fileToWrite.close ();

Bước 8: Mã tổng thể

Mã Over cho HTML và ESP32 có thể được tìm thấy trong Kho lưu trữ Github này