Spisu treści:
2025 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2025-01-13 06:58
Mój projekt ma Nodemcu ESP8266, który steruje 7-segmentowym wyświetlaczem przez serwer http za pomocą formularza html.
Krok 1: O TYM PROJEKCIE
Jest to projekt IOT opracowany przy użyciu modułu Wi-Fi ESP8266 (NodeMCU). Motywem projektu jest stworzenie na module serwera WWW, który może obsługiwać wielu klientów przez sieć. Tutaj potrzebna jest podstawowa znajomość html i javaScript, aby zrozumieć mój projekt. Niektóre zaawansowane tematy, które omówię tutaj dotyczące ESP8266 i javaScript to:
1. Przesyłanie plików na SPIFFS ESP8266, aby efektywniej korzystać z tych plików w naszym kodzie arduino.
2. Przechowywanie w sieci za pomocą javaScript
SPIFF
Do tej pory zawsze dołączaliśmy kod HTML naszych stron internetowych jako literały ciągu w naszym szkicu. To sprawia, że nasz kod jest bardzo trudny do odczytania i dość szybko zabraknie pamięci.
SPIFFS to lekki system plików dla mikrokontrolerów z układem flash SPI. Wbudowany układ flash w ESP8266 ma dużo miejsca na twoje strony internetowe, zwłaszcza jeśli masz wersję 1 MB, 2 MB lub 4 MB. Możesz zrozumieć, jak dodawać narzędzia w oprogramowaniu arduino do przesyłania plików do SPIFFS, klikając link:
W tym projekcie mam 2 pliki html i plik javascript. Wszystkie te pliki są przesyłane do SPIFFS oddzielone od szkicu, dzięki czemu zmiana w tych plikach jest niezależna od głównego szkicu.
Oba pliki html są pobierane przez metodę PrepareFile(), jak pokazano poniżej:
void przygotujPlik(){
bool ok = SPIFFS.początek(); if (ok) { Plik f = SPIFFS.open("/index.html", "r"); Plik f1=SPIFFS.open("/index1.html", "r"); dane = f.odczytajString(); dane1=f1.odczytajString(); f.zamknij(); f1.zamknij(); } else Serial.println("Nie znaleziono takiego pliku."); }
podczas gdy plik javascript jest odczytywany za pomocą loadScript(), jak pokazano poniżej:
void loadScript(String path, String type){
if(SPIFFS.exists(ścieżka)){ Plik plik=SPIFFS.open(ścieżka, "r"); server.streamFile(plik, typ); } }
LOKALNE PRZECHOWYWANIE APLIKACJI INTERNETOWYCH
Możesz zrozumieć, jak korzystać z różnych obiektów i metod lokalnego przechowywania w HTML5 za pomocą javascript z następującego artykułu: https://diveintohtml5.info/storage.html. Omówię wykorzystanie pamięci lokalnej w moim projekcie w dziale roboczym.
Krok 2: Wymagany sprzęt
Moduł NodeMCU ESP8266 12E Wifi
Płytka stykowa bez lutowania
Przewód połączeniowy
Wyświetlacz 7-segmentowy (wspólna katoda)
Rezystor 1K ohm
Kabel Micro-USB (do połączenia NodeMCU z komputerem)
Krok 3: Obwód i połączenia
Połączenia są naprawdę łatwe. Na powyższym schemacie styki węzła nodemcu są połączone w następujący sposób:
D1
B D2
C D3
D D4
E D6
F D7
G D8
gdzie A, B, C, D, E i F są segmentami wyświetlacza 7-segmentowego
. Zignoruj DP 7-segmentowego wyświetlacza. Nie łącz go z pinem D5 ESP
Krok 4: PRACA
Jak wspomniano wcześniej, mamy dwa pliki html. Jednym z nich jest główna strona html wywoływana, gdy serwer ESP8266 odbierze "/", tj. Jeśli zażądano URI "/", serwer powinien odpowiedzieć kodem statusu HTTP 200 (Ok), a następnie wysłać odpowiedź z "indeksem. html".
Drugi plik html zostanie wysłany, gdy klient zażąda ze strony głównej, przesyłając dane wejściowe w formularzu. Gdy tylko serwer otrzyma dane wejściowe POSTED z formularza, porównuje je z ustaloną wartością ciągu i wysyła w odpowiedzi drugą stronę html.
if(server.arg("nam") == "0") { server.send(200, "text/html", data1); siedemSeg(0); }
Ponieważ html dla drugiej strony nie jest zdefiniowany w szkicu, więc tutaj odwołujemy się do "data1", która jest już odczytywana z kodów html za pomocą SPIFFS.readString()
Plik f1=SPIFFS.open("/index1.html", "r");data1=f1.readString();
Tutaj sevenSeg() jest również wywoływana z argumentem „0”, dzięki czemu może być używana do wyświetlania „0” przez włączanie i wyłączanie różnych segmentów. Tutaj uczyniłem nazwę funkcji samoobjaśniającą, tzn. onA() włączy segment A 7 segmentów na płytce prototypowej, podobnie offA wyłączy go.
Tak więc w tym przypadku, aby wyświetlić "0", musimy przełączyć wszystkie segmenty poza G (DP jest ignorowane, ponieważ nie jest podłączone do żadnego pinu ESP8266). Więc moja funkcja wygląda tak:
jeśli(liczba==0){ naA(); naB(); naC(); naD(); jeden(); onF(); offG(); }
Krok 5: KOD HTML I JAVASCRIPT
Indeks.html ma płótno z 7-segmentowym wyświetlaczem w trybie wyłączenia i formularzem poniżej. Oto, co widzisz po otwarciu:
Jeśli chcemy korzystać z naszej strony bez ESP8266, będzie to możliwe poprzez zmianę linku w atrybucie działania formularza. Obecnie jest to link w akcji:
Tutaj możesz zobaczyć, że łącze w akcji jest tym samym adresem IP, który jest przydzielony do twojego nodeMCU po połączeniu się z dowolnym Wi-Fi (lub hotspotem). Znacznik formularza po dostosowaniu wygląda następująco:
Tutaj używam strony internetowej przeglądarki do przechowywania wartości wejściowej użytkownika, tak aby wartość wprowadzona w index.html była przechowywana lokalnie w przeglądarce (jak cookie). Ta wartość jest pobierana przez index1.html, a liczba jest wyświetlana na 7-segmentowym wyświetlaczu na kanwie html. Możesz zrozumieć tę procedurę, postępując zgodnie z filmem:
video_attach
Krok 6: KLUCZOWE UWAGI
Ten projekt będzie działał z twoim nodemcu, jeśli zadbasz o następujące punkty:
1. Link w atrybucie działania głównego pliku html powinien mieć postać „https://(IP na monitorze szeregowym lub adres IP przydzielony do twojego ESP)/submit”.
2. Użyj najnowszej wersji przeglądarki obsługującej HTML5 oraz nowe tagi i funkcje.
3. SPIFFS będzie działać tylko wtedy, gdy index.html, index1.html i main.js zostaną umieszczone w folderze danych. Możesz sklonować plik kodu z mojego github
Krok 7: KOD
To jest link do repozytorium kodu mojego projektu. Jeśli pracujesz z SPIFFS w ESP8266, możesz zrozumieć, dlaczego umieściłem pliki html i javascript w folderze danych. Użyj tego tak, jak jest.
Link do repozytorium GitHub
Krok 8: Samouczek wideo
Jeśli to pomoże, zasubskrybuj