Portal przechwytujący ESP32 do konfiguracji ustawień statycznych i DHCP IP: 8 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:30

ESP 32 to urządzenie ze zintegrowanym WiFi i BLE. To swego rodzaju dobrodziejstwo dla projektów IoT. Po prostu podaj swój identyfikator SSID, hasło i konfigurację IP i zintegruj rzeczy z chmurą. Jednak zarządzanie ustawieniami IP i poświadczeniami użytkownika może być dla użytkownika problemem.

Co jeśli Użytkownik chce zmienić dane logowania do WiFi?

Co zrobić, jeśli użytkownik chce zmienić ustawienia DHCP/Statycznego IP?

Flashowanie ESP32 za każdym razem nie jest niezawodne, a nawet nie jest rozwiązaniem tych problemów. Tutaj w tej instrukcji będziemy demonstrować.

• Jak stworzyć portal przechwytujący.
• Hosting formularza internetowego z ESP32.
• Czytanie i pisanie z SPIFFS ESP32.
• Tworzenie Soft Access Point i łączenie ze stacją

Krok 1: Specyfikacja sprzętu i oprogramowania

Specyfikacja sprzętu

• ESP32 WiFi/BLE
• Bezprzewodowy czujnik temperatury i wilgotności

Specyfikacja oprogramowania

IDE Arduino

Krok 2: Tworzenie portalu przechwytującego

Portal przechwytujący to strona internetowa, która jest wyświetlana nowo podłączonym użytkownikom, zanim uzyskają szerszy dostęp do zasobów sieciowych. Tutaj obsługujemy trzy strony internetowe do wyboru między ustawieniami DHCP i Statycznego IP. możemy zdefiniować adres IP do ESP na dwa sposoby.

• Adres IP DHCP – jest to sposób na dynamiczne przypisanie adresu IP do urządzenia. Domyślny adres IP ESP to 192.168.4.1
• Statyczny adres IP – przypisanie stałego adresu IP do naszego urządzenia sieciowego. aby zapewnić urządzeniu statyczny adres IP, musimy zdefiniować adres IP, adres bramy i maskę podsieci.

Na pierwszej stronie internetowej Użytkownik otrzymuje przyciski opcji do wyboru pomiędzy ustawieniami DHCP i Statycznego IP. Na następnej stronie musimy podać informacje dotyczące adresu IP, aby przejść dalej.

Kod HTML

Kod HTML dla stron internetowych można znaleźć w tym repozytorium Github.

Możesz użyć dowolnego IDE lub edytora tekstu, takiego jak Sublime lub notepad++, do tworzenia stron internetowych HTML.

• Najpierw utwórz stronę HTML zawierającą dwa przyciski opcji, aby wybrać pomiędzy DHCP i Statycznym IP.
• Teraz utwórz przycisk, aby przesłać swoją odpowiedź
• Nadaj nazwę przyciskom radiowym. Klasa serwera WWW ESP przyjmie te nazwy jako argumenty i otrzyma odpowiedź przycisków radiowych za pomocą tych argumentów
• Teraz wstaw przycisk „WYŚLIJ”, aby wysłać odpowiedź do urządzenia.
• Na innych stronach internetowych mamy pola tekstowe. Podaj wartość nazwy i typ danych wejściowych w polu tekstowym i dodaj przycisk przesyłania, aby „ PRZEŚLIJ” przesłać odpowiedź.
• Utwórz przycisk „RESETUJ”, aby zresetować zawartość pola tekstowego.

//Ustawienie DHCP przycisku radiowego

Ustawienie statycznego adresu IP

//Wprowadzanie pól tekstowych

//Wyślij przycisk

input[type="prześlij"]{ kolor tła: #3498DB; /* Zielony */ obramowanie: brak; kolor biały; wypełnienie: 15px 48px; wyrównanie tekstu: środek; dekoracja tekstu: brak; wyświetlacz: inline-block; rozmiar czcionki: 16px; }

//Przycisk reset

input[type="prześlij"]{ kolor tła: #3498DB; /* Zielony */ obramowanie: brak; kolor biały; wypełnienie: 15px 48px; wyrównanie tekstu: środek; dekoracja tekstu: brak; wyświetlacz: inline-block; rozmiar czcionki: 16px; }

Krok 3: Uzyskanie odpowiedzi sieciowej ze stron internetowych na ESP32

Serwowanie stron internetowych z urządzenia ESP 32 to świetna zabawa. Może to być wszystko, od pokazywania danych temperatury na stronie internetowej, włączania diod LED na niestandardowej stronie internetowej lub przechowywania danych logowania użytkownika WiFi za pośrednictwem strony internetowej. W tym celu ESP 32 używa klasy WebServer do serwera stron internetowych.

• Najpierw utwórz instancję klasy WebServer na porcie 80 (port
• Teraz skonfiguruj urządzenie ESP jako softAP. Podaj identyfikator SSID i klucz dostępu oraz przypisz statyczny adres IP do urządzenia.
• Uruchom serwer.

//**********SSID i przepustka do AP**************/

const char *ssidAP = "podaj SSID"; const char *passAP = "klucz dostępu";

//**********Konfiguracja statycznego adresu IP**************/AdresIP ap_local_IP(192, 168, 1, 77); Adres IP ap_gateway(192, 168, 1, 254); AdresIP ap_subnet(255, 255, 255, 0);

//**********Konfiguracja SoftAP***************/

tryb WiFi (WIFI_AP);

Serial.println(WiFi.softAP(ssidAP, passAP) ? "soft-AP setup": "Nie udało się połączyć");

opóźnienie (100); Serial.println(WiFi.softAPConfig(ap_local_IP, ap_gateway, ap_subnet)? "Konfigurowanie Soft AP": "Błąd w konfiguracji"); Serial.println(WiFi.softAPIP());

//rozpocznij serwer

serwer.początek();

• Utwórz i wyświetlaj adres URL za pomocą różnych wywołań zwrotnych.
• i obsłużyć klienta asynchronicznie przy użyciu handleClient.

server.on("/", handleRoot);

server.on("/dhcp", handleDHCP); server.on("/static", handleStatic); // obsłuż odpowiedzi server.handleClient();

• Aby uzyskać dostęp do stron internetowych. Połącz się z właśnie utworzonym punktem dostępu, który znajduje się na liście w sieciach Wi-Fi. Teraz przejdź do przeglądarki, wprowadź adres IP skonfigurowany przez Ciebie w ostatnim kroku i wejdź na stronę internetową.
• Klasa serwera WWW przyjmuje jako argument nazwę nadaną input('text', 'button', 'radiobutton'etc.). Zapisuje odpowiedzi tych danych wejściowych jako argumenty i możemy uzyskać wartości lub je sprawdzić za pomocą metod args, arg, hasArg.

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

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

}

if(server.hasArg("ipv4static") && server.hasArg("brama") && server.hasArg("podsieć")){ staticSet(); }else if(server.arg("ipv4")!= ""){ dhcpSetManual(); }else{ dhcpSetDefault(); }

Krok 4: Konfiguracja statycznego adresu IP

Do tej pory zrozumieliśmy, jak połączyć się z AP i jak uzyskać wartości z pól wejściowych strony internetowej

W tym kroku skonfigurujemy statyczny adres IP

• Wybierz ustawienie statycznego adresu IP i kliknij przycisk Prześlij. Zostaniesz przekierowany na następną stronę.
• Na następnej stronie wprowadź statyczny adres IP, adres bramy i maskę podsieci. Ta strona będzie obsługiwana w "/static", co jest obsługiwane przez metodę statycznego wywołania zwrotnego handle.
• Uzyskaj wartość pól tekstowych za pomocą metody server.arg().

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

Brama string = String(server.arg("brama")); String podsieć = String(server.arg("podsieć"));

• Teraz te wartości są serializowane do formatu JSON.
• Następnie napiszemy JSON do SPIFFS.

root["klucz statyczny"]="zestaw statyczny";

root["statycznyIP"] = ipv4static;

root["brama"] = brama;

root["podsieć"] = podsieć;

Plik fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE);

if(root.printTo(fileToWrite)){

Serial.println("--Plik napisany"); }

• Ta konfiguracja jest zapisywana w SPIFFS. Później te wartości są odczytywane z SPIFFS.
• Wartości statycznego adresu IP są następnie analizowane z formatu JSON.

Plik pliku = SPIFFS.open("/ip_set.txt", "r");

while(plik.dostępny()){

debugLogData += char(plik.odczyt()); }

if(debugLogData.length()>5){

JsonObject& readRoot =jsonBuffer.parseObject(debugLogData);

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

String ipStaticValue= readRoot["staticIP"];

String gatewayValue = readRoot["brama"];

String wartość podsieci = readRoot["podsieć"];

Krok 5: Ustawienia DHCP

W tym kroku skonfigurujemy ustawienia DHCP

Wybierz ustawienia DHCP ze strony indeksu i kliknij „Prześlij”

• Zostaniesz przekierowany na następną stronę. Na kolejnej stronie wprowadź adres IP lub wybierz wybierz domyślny i kliknij przycisk „Prześlij”, aby przesłać odpowiedź. Ta strona będzie obsługiwana w "/dhcp", który jest obsługiwany przez metodę wywołania zwrotnego handleDHCP. Uzyskaj wartość pól tekstowych za pomocą metody server.arg(). Po kliknięciu wybierz domyślne pole wyboru. IP 192.168.4.1 zostanie nadany urządzeniu.
• Teraz te wartości są serializowane do formatu JSON.
• Następnie napiszemy JSON do SPIFFS.

JsonObject& root =jsonBuffer.createObject();

root["dhcpManual"]="dhcpManual";

root["dhcpIP"] = "192.168.4.1";

Plik fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE);

if(root.printTo(fileToWrite)){

Serial.println("--Plik napisany"); }

• Ta konfiguracja jest zapisywana w SPIFFS. Później te wartości są odczytywane z SPIFFS.
• Wartości IP DHCP są następnie analizowane z formatu JSON.

Plik plik = 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")){

Ciąg ipdhcpValue= readRoot["dhcpIP"];

Serial.println(ipdhcpValue);

dhcpAPConfig();}

Krok 6: Zapisywanie poświadczeń Wi-Fi

Na razie wybraliśmy konfigurację IP. Teraz musimy zapisać dane uwierzytelniające Wi-Fi Użytkownika. Aby rozwiązać tę sytuację. Postępowaliśmy zgodnie z tą procedurą.

• Więc teraz mamy konfigurację naszego urządzenia AP w konfiguracji DHCP lub statycznego adresu IP, którą wybraliśmy z portalu przechwytującego wspomnianego w ostatnich krokach.
• Załóżmy, że wybraliśmy konfigurację statycznego adresu IP.
• Skonfigurujemy softAP pod tym adresem IP.
• Po odczytaniu wartości z SPIFFS i przeanalizowaniu tych wartości z JSON. Skonfigurujemy softAP pod tym adresem IP.
• Przekształć ciąg IP na bajty.

bajt 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];

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

//***************Przetwarzaj bajty z ciągu ******************//

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

for (int i = 0; i < maxbajtów; i++) {

bajty = strtoul(str, NULL, podstawa);

str = strchr(str, wrz);

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

przerwa;

}

str++;

}}

Teraz skonfigurujemy softAP na tym IP

Serial.println(WiFi.softAPConfig(ap_localWeb_IP, ap_gate, ap_net) ? "Konfigurowanie softAP": "niepodłączony"); Serial.println(WiFi.softAPIP());

• Teraz uruchom serwer sieciowy i obsługuj stronę internetową pod tym adresem IP. Aby wprowadzić dane logowania WiFi użytkownika.
• Strona internetowa składa się z dwóch pól tekstowych do wprowadzenia identyfikatora SSID i hasła.
• handleStaticForm to metoda wywołania zwrotnego, która obsługuje stronę internetową.
• server.handleClient() zajmuje się żądaniem i odpowiedziami do i ze strony internetowej.

serwer.początek();

server.on("/", handleStaticForm);

server.onNotFound(handleNotFound);

STimer = mili();

while(millis()-STimer<= SInterwał) {

server.handleClient(); }

Formularz HTML jest zapisywany w SPIFFS. sprawdzamy odpowiednie argumenty za pomocą server.arg(). aby uzyskać wartość SSID i hasła

Plik pliku = SPIFFS.open("/WiFi.html", "r");

server.streamFile(plik, "text/html");

plik.zamknij();

Krok 7: Czytaj i pisz z SPIFFS

SPIFF

Serial Peripheral Interface Flash File System, w skrócie SPIFFS. Jest to lekki system plików dla mikrokontrolerów z układem flash SPI. Wbudowany układ flash w ESP32 ma dużo miejsca na Twoje strony internetowe. Zapisaliśmy również naszą stronę internetową w systemie Flash. Jest kilka kroków, które musimy wykonać, aby przesłać dane do spiffów

Pobierz narzędzie do przesyłania danych ESP 32 SPIFFS:

• W katalogu szkicownika Arduino utwórz katalog narzędzi, jeśli jeszcze nie istnieje
• Rozpakuj narzędzie do katalogu tools (ścieżka będzie wyglądać jak /Arduino/tools/ESP32FS/tool/esp32fs.jar)
• Zrestartuj Arduino IDE
• Otwórz szkic (lub utwórz nowy i zapisz)
• Przejdź do katalogu szkiców (wybierz Szkic > Pokaż folder szkicu)
• Utwórz katalog o nazwie data i dowolne pliki, które chcesz tam umieścić w systemie plików. Przesłaliśmy naszą stronę HTML o nazwie webform.html
• Upewnij się, że wybrałeś kartę, port i zamknięty monitor szeregowy
• Wybierz opcję Narzędzia > Przesyłanie danych szkicu ESP8266. Powinno to rozpocząć przesyłanie plików do systemu plików flash ESP8266. Po zakończeniu pasek stanu IDE wyświetli komunikat SPIFFS Image Uploaded.

void handleDHCP(){ Plik plik = SPIFFS.open("/page_dhcp.html", "r"); server.streamFile(plik, "text/html"); plik.zamknij();}

void handleStatic(){

Plik plik = SPIFFS.open("/page_static.html", "r"); server.streamFile(plik, "text/html"); plik.zamknij();}

Pisanie do SPIFFS

Tutaj zapisujemy zapisane ustawienie w SPIFFS, aby użytkownicy nie musieli wykonywać tych kroków przy każdym zresetowaniu urządzenia.

• Konwertuj argumenty otrzymane ze strony internetowej na obiekty JSON
• Zapisz ten JSON w pliku.txt zapisanym w SPIFFS.

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

Brama string = String(server.arg("brama")); String podsieć = String(server.arg("podsieć")); root["klucz statyczny"]="zestaw statyczny"; root["statycznyIP"] = ipv4static; root["brama"] = brama; root["podsieć"] = podsieć; Ciąg znaków JSONStatyczny; znak JSON[120]; root.printTo(Serial); root.prettyPrintTo(JSONStatic); JSONStatic.toCharArray(JSON; sizeof(JSONStatic)+2); Plik fileToWrite = SPIFFS.open("/ip_set.txt", FILE_WRITE); if(!fileToWrite){ Serial.println("Błąd otwierania SPIFFS"); } if(fileToWrite.print(JSON)){ Serial.println("--Plik napisany"); }else{ Serial.println("--Plik zapisu błędów"); } fileToWrite.close();

Krok 8: Ogólny kod

Kod Over dla HTML i ESP32 można znaleźć w tym repozytorium Github