Πίνακας περιεχομένων:

ESP32 Captive Portal για τη διαμόρφωση των στατικών και DHCP IP ρυθμίσεων: 8 βήματα
ESP32 Captive Portal για τη διαμόρφωση των στατικών και DHCP IP ρυθμίσεων: 8 βήματα

Βίντεο: ESP32 Captive Portal για τη διαμόρφωση των στατικών και DHCP IP ρυθμίσεων: 8 βήματα

Βίντεο: ESP32 Captive Portal για τη διαμόρφωση των στατικών και DHCP IP ρυθμίσεων: 8 βήματα
Βίντεο: GATE OPENING DRIVE from a conventional tube and a wiper motor! 2024, Νοέμβριος
Anonim
ESP32 Captive Portal για τη διαμόρφωση στατικών και DHCP IP ρυθμίσεων
ESP32 Captive Portal για τη διαμόρφωση στατικών και DHCP IP ρυθμίσεων

Το ESP 32 είναι μια συσκευή με ενσωματωμένο WiFi και BLE. Είναι ένα όφελος για τα έργα IoT. Απλώς δώστε τις διαμορφώσεις SSID, κωδικού πρόσβασης και IP και ενσωματώστε τα πράγματα στο cloud. Αλλά, η διαχείριση των ρυθμίσεων IP και των διαπιστευτηρίων χρήστη μπορεί να προκαλέσει πονοκέφαλο στον χρήστη.

Τι γίνεται αν ο Χρήστης θέλει να αλλάξει τα διαπιστευτήρια WiFi;

Τι γίνεται αν ο χρήστης θέλει να αλλάξει τις ρυθμίσεις DHCP/Στατική IP;

Το να αναβοσβήνει το ESP32 κάθε φορά δεν είναι αξιόπιστο ούτε καν η λύση για αυτά τα προβλήματα. Εδώ σε αυτό το διδακτικό θα δείξουμε.

  • Πώς να δημιουργήσετε μια δεσμευμένη πύλη.
  • Φιλοξενία φόρμας ιστού από το ESP32.
  • Ανάγνωση και γραφή από το SPIFFS ESP32.
  • Δημιουργία ενός σημείου μαλακής πρόσβασης και σύνδεση με έναν σταθμό

Βήμα 1: Προδιαγραφή υλικού και λογισμικού

Προδιαγραφή υλικού

  • ESP32 WiFi/BLE
  • Ασύρματος αισθητήρας θερμοκρασίας και υγρασίας

Προδιαγραφές λογισμικού

Arduino IDE

Βήμα 2: Δημιουργία πύλης αιχμαλωσίας

Δημιουργία πύλης αιχμαλωσίας
Δημιουργία πύλης αιχμαλωσίας
Δημιουργία πύλης αιχμαλωσίας
Δημιουργία πύλης αιχμαλωσίας
Δημιουργία πύλης αιχμαλωσίας
Δημιουργία πύλης αιχμαλωσίας

Μια δεσμευμένη πύλη είναι μια ιστοσελίδα που εμφανίζεται στους νεοσυνδεδεμένους χρήστες t πριν τους δοθεί ευρύτερη πρόσβαση στους πόρους του δικτύου. Εδώ εξυπηρετούμε τρεις ιστοσελίδες για να επιλέξουμε μεταξύ DHCP και Static IP Settings. μπορούμε να ορίσουμε τη διεύθυνση IP στο ESP με δύο τρόπους.

  • Διεύθυνση IP DHCP- είναι ένας τρόπος δυναμικής εκχώρησης της διεύθυνσης IP στη συσκευή. Η προεπιλεγμένη διεύθυνση IP του ESP είναι 192.168.4.1
  • Στατική διεύθυνση IP- εκχώρηση μόνιμης διεύθυνσης IP στη συσκευή δικτύου μας. για να παρέχουμε τη στατική IP στη συσκευή πρέπει να ορίσουμε τη διεύθυνση IP, τη διεύθυνση πύλης και τη μάσκα υποδικτύου.

Στην πρώτη ιστοσελίδα, ο χρήστης διαθέτει τα κουμπιά επιλογής για να επιλέξει μεταξύ των ρυθμίσεων DHCP και στατικής IP. Στην επόμενη ιστοσελίδα, πρέπει να παρέχουμε τις πληροφορίες που σχετίζονται με την IP για να προχωρήσουμε περαιτέρω.

Κώδικας HTML

Ο κώδικας HTML για ιστοσελίδες μπορεί να βρεθεί σε αυτό το αποθετήριο Github.

Μπορείτε να χρησιμοποιήσετε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου ή κειμένου όπως το Sublime ή το σημειωματάριο ++ για να δημιουργήσετε ιστοσελίδες HTML.

  • Πρώτα δημιουργήστε μια ιστοσελίδα HTML που περιέχει δύο κουμπιά επιλογής για να επιλέξετε μεταξύ DHCP και Στατικών ρυθμίσεων IP.
  • Τώρα δημιουργήστε το κουμπί για να υποβάλετε την απάντησή σας
  • Δώστε κάποιο όνομα στα κουμπιά επιλογής. Η κλάση διακομιστή Ιστού ESP θα λάβει αυτά τα ονόματα ως ορίσματα και θα λάβει την απάντηση των κουμπιών επιλογής χρησιμοποιώντας αυτά τα ορίσματα
  • Τώρα εισάγετε ένα κουμπί 'ΥΠΟΒΟΛΗ' για να στείλετε την απάντηση στη συσκευή.
  • Στις άλλες ιστοσελίδες, έχουμε πλαίσια κειμένου. Δώστε την τιμή ονόματος και τον τύπο εισαγωγής στο πλαίσιο κειμένου και προσθέστε ένα κουμπί υποβολής στην "ΥΠΟΒΟΛΗ" υποβολή της απάντησης.
  • Δημιουργήστε ένα κουμπί "ΕΠΑΝΑΦΟΡΑ" για να επαναφέρετε το περιεχόμενο του πεδίου κειμένου.

// Ρύθμιση DHCP κουμπιού ραδιοφώνου

Στατική ρύθμιση IP

// Εισαγωγή πλαισίων κειμένου

//Κουμπί υποβολής

εισαγωγή [type = "submit"] {background-color: #3498DB; / * Πράσινο */ περίγραμμα: κανένα; άσπρο χρώμα; επένδυση: 15px 48px; text-align: center; κείμενο-διακόσμηση: κανένα? οθόνη: inline-block? μέγεθος γραμματοσειράς: 16px; }

//Κουμπί επαναφοράς

εισαγωγή [type = "submit"] {background-color: #3498DB; / * Πράσινο */ περίγραμμα: κανένα; άσπρο χρώμα; επένδυση: 15px 48px; text-align: center; κείμενο-διακόσμηση: κανένα? οθόνη: inline-block? μέγεθος γραμματοσειράς: 16px; }

Βήμα 3: Λήψη της απόκρισης Ιστού από ιστοσελίδες στο ESP32

Λήψη της απόκρισης Ιστού από ιστοσελίδες στο ESP32
Λήψη της απόκρισης Ιστού από ιστοσελίδες στο ESP32

Η εξυπηρέτηση ιστοσελίδων από τη συσκευή ESP 32 είναι πολύ διασκεδαστική. Μπορεί να είναι οτιδήποτε από την εμφάνιση των δεδομένων θερμοκρασίας στην ιστοσελίδα, τη μετατροπή των οδηγήσεων από την προσαρμοσμένη ιστοσελίδα ή την αποθήκευση των διαπιστευτηρίων χρήστη WiFi μέσω μιας ιστοσελίδας. Για το σκοπό αυτό, το ESP 32 χρησιμοποιεί την κατηγορία WebServer για διακομιστές ιστοσελίδων.

  • Αρχικά, δημιουργήστε μια παρουσία της κλάσης WebServer στη θύρα 80 (θύρα
  • Τώρα ρυθμίστε τη συσκευή ESP ως softAP. Δώστε το SSID και το κλειδί πρόσβασης και εκχωρήστε μια στατική IP στη συσκευή.
  • Ξεκινήστε τον διακομιστή.

// ********* SSID και Pass για AP **************/

const char *ssidAP = "δώστε SSID"; const char *passAP = "κλειδί διέλευσης";

// ********* Static IP Config **************/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); "Configuring Soft AP": "Error in Configuration"); Serial.println (WiFi.softAPIP ());

// εκκίνηση του διακομιστή

server.begin ();

  • Δημιουργήστε και εμφανίστε τη διεύθυνση URL χρησιμοποιώντας διαφορετικές κλήσεις.
  • και χειριστείτε τον πελάτη ασύγχρονα χρησιμοποιώντας το 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 (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

Στατική διαμόρφωση IP
Στατική διαμόρφωση IP

Μέχρι στιγμής έχουμε καταλάβει πώς να συνδεθείτε στο AP και πώς να λάβετε τις τιμές από τα πεδία εισαγωγής της ιστοσελίδας

Σε αυτό το βήμα, θα διαμορφώσουμε τη στατική IP

  • Επιλέξτε τη Στατική ρύθμιση IP και κάντε κλικ στο κουμπί Υποβολή. Θα ανακατευθυνθείτε στην επόμενη σελίδα.
  • Στην επόμενη σελίδα, εισάγετε τη στατική διεύθυνση IP, τη διεύθυνση πύλης και τη μάσκα υποδικτύου. Αυτή η σελίδα θα προβάλλεται στο "/static", το οποίο χειρίζεται με χειροκίνητη μέθοδο στατικής επανάκλησης.
  • Λάβετε την τιμή των πεδίων κειμένου χρησιμοποιώντας τη μέθοδο server.arg ().

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

String gateway = String (server.arg ("gateway")); String subnet = String (server.arg ("subnet"));

  • Τώρα, αυτές οι τιμές ταξινομούνται σε μορφή JSON.
  • Στη συνέχεια, θα γράψουμε το JSON στο SPIFFS.

root ["statickey"] = "staticSet";

root ["staticIP"] = ipv4static;

root ["gateway"] = πύλη;

root ["subnet"] = υποδίκτυο;

Αρχείο αρχείουToWrite = 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

Σε αυτό το βήμα, θα διαμορφώσουμε τις ρυθμίσεις 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";

Αρχείο αρχείουToWrite = SPIFFS.open ("/ip_set.txt", FILE_WRITE);

if (root.printTo (fileToWrite)) {

Serial.println ("-Το αρχείο γράφτηκε"); }

  • Αυτή η διαμόρφωση αποθηκεύεται στο SPIFFS. Αργότερα, αυτές οι τιμές διαβάζονται από το SPIFFS.
  • Στη συνέχεια, οι τιμές IP 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

Αποθήκευση διαπιστευτηρίων WiFi
Αποθήκευση διαπιστευτηρίων WiFi

Προς το παρόν, έχουμε επιλέξει τη διαμόρφωση IP. Τώρα πρέπει να αποθηκεύσουμε τα διαπιστευτήρια wifi του Χρήστη. Για να λυθεί αυτή η κατάσταση. Ακολουθήσαμε αυτήν τη διαδικασία.

  • Έτσι, τώρα έχουμε τη ρύθμιση AP της συσκευής μας σε διαμόρφωση DHCP ή Static IP που είχαμε επιλέξει από την πύλη αιχμής που αναφέρθηκε στα τελευταία βήματα.
  • Ας υποθέσουμε ότι έχουμε επιλέξει Static IP configuration.
  • Θα διαμορφώσουμε ένα softAP σε αυτήν την IP.
  • Αφού διαβάσετε τις τιμές από το SPIFFS και αναλύσετε αυτές τις τιμές από το JSON. Θα διαμορφώσουμε το softAP σε αυτήν την IP.
  • Μετατρέψτε τη συμβολοσειρά IP σε Bytes.

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

// *************** Ανάλυση byte από συμβολοσειρά ******************

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

για (int i = 0; i <maxBytes; i ++) {

bytes = 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 = 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

Serial Peripheral Interface Flash File System, ή για συντομία SPIFFS. Είναι ένα ελαφρύ σύστημα αρχείων για μικροελεγκτές με τσιπ flash SPI. Το ενσωματωμένο τσιπ flash του ESP32 έχει άφθονο χώρο για τις ιστοσελίδες σας. Έχουμε επίσης αποθηκεύσει την ιστοσελίδα μας στο Flash System. Υπάρχουν μερικά βήματα που πρέπει να ακολουθήσουμε για να ανεβάσουμε δεδομένα σε spiffs

Κατεβάστε το εργαλείο μεταφόρτωσης δεδομένων ESP 32 SPIFFS:

  • Στον κατάλογό σας Arduino sketchbook, δημιουργήστε τον κατάλογο εργαλείων εάν δεν υπάρχει ακόμα
  • Αποσυσκευάστε το εργαλείο στον κατάλογο εργαλείων (η διαδρομή θα μοιάζει με /Arduino/tools/ESP32FS/tool/esp32fs.jar)
  • Επανεκκινήστε το Arduino IDE
  • Ανοίξτε ένα σκίτσο (ή δημιουργήστε ένα νέο και αποθηκεύστε το)
  • Μεταβείτε στον κατάλογο σκίτσων (επιλέξτε Sketch> Show Sketch Folder)
  • Δημιουργήστε έναν κατάλογο με όνομα δεδομένα και όποια αρχεία θέλετε στο σύστημα αρχείων εκεί. Έχουμε ανεβάσει τη σελίδα HTML μας με όνομα webform.html
  • Βεβαιωθείτε ότι έχετε επιλέξει έναν πίνακα, μια θύρα και μια κλειστή σειριακή οθόνη
  • Επιλέξτε Εργαλεία> ESP8266 Sketch Data Upload. Αυτό θα πρέπει να ξεκινήσει τη μεταφόρτωση των αρχείων στο σύστημα αρχείων flash 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.

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

String gateway = String (server.arg ("gateway")); String subnet = String (server.arg ("subnet")); root ["statickey"] = "staticSet"; root ["staticIP"] = ipv4static; root ["gateway"] = πύλη; root ["subnet"] = υποδίκτυο; String JSONStatic; char JSON [120]; root.printTo (Σειριακό); root.prettyPrintTo (JSONStatic); JSONStatic.toCharArray (JSON, sizeof (JSONStatic) +2); Αρχείο αρχείουToWrite = 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

Συνιστάται: