Załaduj stronę konfiguracyjną Arduino/ESP z chmury: 7 kroków

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

Podczas tworzenia projektu Arduino / ESP (ESP8266/ESP32) można było po prostu wszystko zakodować na sztywno. Ale najczęściej coś się pojawia i w końcu ponownie podłączasz swoje urządzenie IoT do swojego IDE. Lub po prostu masz więcej osób uzyskujących dostęp do konfiguracji i chcesz zapewnić interfejs użytkownika, zamiast oczekiwać, że zrozumieją wewnętrzne działanie.

Ta instrukcja powie Ci, jak umieścić większość interfejsu użytkownika w chmurze zamiast na Arduino / ESP. W ten sposób zaoszczędzisz miejsce i zużycie pamięci. Usługa zapewniająca bezpłatne statyczne strony internetowe jest szczególnie odpowiednia jako „chmura”, jak GitHub Pages, ale inne opcje prawdopodobnie również będą działać.

Utworzenie strony w ten sposób wymaga, aby przeglądarka użytkownika wykonała 4 kroki:

1. Poproś o główny adres URL z Arduino / ESP
2. Otrzymaj bardzo prostą stronę internetową, mówiącą do:
3. Poproś o plik JavaScript z chmury
4. Odbierz kod, który tworzy rzeczywistą stronę

Ta instrukcja wyjaśnia również, jak wchodzić w interakcję z Arduino / ESP, gdy strona jest gotowa zgodnie z powyższymi krokami.

Kod utworzony w tej instrukcji można również znaleźć na GitHub.

Warunki wstępne

Ta instrukcja zakłada, że masz dostęp do pewnych materiałów i pewnej wcześniejszej wiedzy:

• Arduino (z dostępem do sieci) / ESP
• Komputer do podłączenia powyższego do
• Dostęp do Wi-Fi podłączony do internetu
• Zainstalowane Arduino IDE (również dla ESP32)
• Wiesz, jak przesłać szkic do swojego urządzenia IoT
• Wiesz, jak korzystać z Git i GitHub

Krok 1: Rozpoczęcie od prostego szkicu serwera WWW

Zaczniemy tak prosto, jak to tylko możliwe i od teraz niech się rozwija.

#włączać

const char* ssid = "twójsid"; const char* hasło = "twoje hasło"; Serwer WiFiServer(80); void setup() { //Zainicjuj serial i poczekaj na otwarcie portu: Serial.begin(115200); while(!Serial) {; // czekaj na połączenie portu szeregowego. Wymagane tylko dla natywnego portu USB } WiFi.begin(ssid, hasło); while(WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println("Połączenie WiFi."); Serial.println("adres IP: "); Serial.println(WiFi.localIP()); serwer.początek(); } void loop() { // nasłuchuj przychodzących klientów Klient WiFiClient = server.available(); // nasłuchuj przychodzących klientów bool sendResponse = false; // ustaw na true jeśli chcemy wysłać odpowiedź String urlLine = ""; // utwórz ciąg do przechowywania żądanego adresu URL if(client) // jeśli masz klienta, { Serial.println("Nowy klient."); // wypisz komunikat na porcie szeregowym String currentLine = ""; // utwórz ciąg do przechowywania danych przychodzących od klienta while(client.connected()) // pętla, gdy klient jest połączony { if(client.available()) // jeśli są bajty do odczytania z klienta, { char c = klient.odczyt(); // odczytaj bajt, a następnie if(c == '\n') // jeśli bajt jest znakiem nowej linii { // jeśli bieżąca linia jest pusta, otrzymasz dwa znaki nowej linii z rzędu. // to koniec żądania HTTP klienta, więc wyślij odpowiedź: if(currentLine.length() == 0) { sendResponse = true; // wszystko w porządku! przerwa; // wyrwij się z pętli while } else // jeśli masz znak nowej linii, wyczyść currentLine: { if(currentLine.indexOf("GET /") >= 0) // to powinien być wiersz adresu URL { urlLine = currentLine; // zachowaj do późniejszego wykorzystania } currentLine = ""; // zresetuj bieżący ciąg wiersza } } else if(c != '\r') // jeśli masz cokolwiek innego niż znak powrotu karetki, { currentLine += c; // dodaj go na końcu bieżącego wiersza } } } if(sendResponse) { Serial.print("Klient zażądał"); Serial.println(urlLine); // Nagłówki HTTP zawsze zaczynają się kodem odpowiedzi (np. HTTP/1.1 200 OK) // i typem treści, aby klient wiedział, co nadchodzi, a następnie pustą linią: client.println("HTTP/1.1 200 OK"); client.println("Typ-treści:tekst/html"); klient.println(); if(urlLine.indexOf("GET / ") >= 0) // jeśli URL to tylko "/" { // treść odpowiedzi HTTP następuje po nagłówku: client.println("Witaj świecie!"); } // Odpowiedź HTTP kończy się kolejną pustą linią: client.println(); } // zamknięcie połączenia: client.stop(); Serial.println("Klient odłączony."); } }

Skopiuj powyższy kod lub pobierz go z zatwierdzenia na GitHub.

Nie zapomnij zmienić identyfikatora SSID i hasła, aby pasowały do Twojej sieci.

Ten szkic wykorzystuje dobrze znane Arduino

Ustawiać()

oraz

pętla()

Funkcje. w

Ustawiać()

funkcja połączenie szeregowe z IDE jest inicjowane, podobnie jak WiFi. Po połączeniu Wi-Fi ze wspomnianym identyfikatorem SSID adres IP jest drukowany i uruchamiany jest serwer WWW. W każdej iteracji

pętla()

funkcja serwer WWW jest sprawdzany pod kątem podłączonych klientów. Jeśli klient jest podłączony, żądanie jest odczytywane, a żądany adres URL jest zapisywany w zmiennej. Jeśli wszystko wydaje się w porządku, odpowiedź z serwera do klienta jest wykonywana na podstawie żądanego adresu URL.

OSTRZEŻENIE! Ten kod używa klasy Arduino String, aby zachować prostotę. Optymalizacje ciągów nie są objęte zakresem tej instrukcji. Przeczytaj więcej na ten temat w instrukcji dotyczącej manipulacji ciągami Arduino przy użyciu minimalnej pamięci RAM.

Krok 2: Tworzenie zdalnego JavaScript

Arduino / ESP poinformuje przeglądarkę odwiedzających, aby załadować ten jeden plik. Cała reszta zostanie wykonana przez ten kod JavaScript.

W tym Instructable użyjemy jQuery, nie jest to absolutnie konieczne, ale ułatwi to.

Ten plik musi być dostępny z sieci, wystarczy serwer stron statycznych, aby to zadziałało, na przykład strony GitHub. Więc prawdopodobnie będziesz chciał stworzyć nowe repozytorium GitHub i utworzyć

gh-strony

Oddział. Umieść następujący kod w a

.js

plik w repozytorium w odpowiedniej gałęzi.

Skopiuj powyższy kod lub pobierz go z zatwierdzenia na GitHub.

Sprawdź, czy Twój plik jest dostępny. W przypadku stron GitHub przejdź do https://username.github.io/repository/your-file.j… (zastąp

Nazwa Użytkownika

,

magazyn

oraz

twój-plik.js

dla poprawnych parametrów).

Krok 3: Ładowanie zdalnego pliku JavaScript do przeglądarki odwiedzających

Teraz, gdy mamy już wszystko skonfigurowane, nadszedł czas, aby strona internetowa załadowała zdalny plik JavaScript.

Możesz to zrobić zmieniając linię 88 szkicu z

client.println("Witaj świecie!"); T

klient.println("");

(zmienić

src

atrybut wskazujący na Twój własny plik JavaScript). Jest to mała strona internetowa w formacie HTML, która jedynie ładuje plik JavaScript do przeglądarki odwiedzających.

Zmieniony plik można również znaleźć w odpowiednim zatwierdzeniu na GitHub.

Prześlij dostosowany szkic do swojego Arduino / ESP.

Krok 4: Dodawanie nowych elementów do strony

Pusta strona jest bezużyteczna, więc nadszedł czas, aby dodać nowy element do strony. Na razie będzie to film z YouTube. W tym przykładzie zostaną użyte do tego niektóre kody jQuery.

Dodaj następujący wiersz kodu do

w tym()

funkcjonować:

$('').prop({ src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0' }).css({szerokość: '608px', wysokość: '342px' }).appendTo('ciało');

Spowoduje to

iframe

element, ustaw poprawny

src

atrybut i ustaw rozmiar za pomocą css i dodaj element do treści strony.

jQuery pomaga nam łatwo wybierać i zmieniać elementy na stronie, kilka podstawowych rzeczy, o których warto wiedzieć:

• $('ciało')

• wybiera dowolny już istniejący element, można również użyć innych selektorów css

• $(' ')

  tworzy nowy

• element (ale nie dodaje go do dokumentu)

• .appendTo('.main')

• dołącza wybrany/utworzony element do elementu z klasą css 'main'

• Inną funkcją dodawania elementów są

  .dodać()

  ,

  .prepend()

  ,

  .prependTo()

  ,

  .wstawić()

  ,

  .wstawPo()

  ,

  .insertBefore()

  ,

  .po()

  ,

  .przed()

Spójrz na odpowiednie zatwierdzenie na GitHub, jeśli coś jest niejasne.

Krok 5: Elementy interaktywne

Film jest zabawny, ale celem tej instrukcji jest interakcja z Arduino / ESP. Zamieńmy wideo na przycisk, który wysyła informacje do Arduino / ESP, a także czeka na odpowiedź.

będziemy potrzebować

$('')

dodać do strony i dołączyć do niej detektor zdarzeń. Eventlistener wywoła funkcję zwrotną, gdy wystąpi określone zdarzenie:

$('').text('przycisk').on('klik', function()

{ // kod tutaj zostanie wykonany po kliknięciu przycisku }).appendTo('body');

I dodaj żądanie AJAX do funkcji zwrotnej:

$.get('/ajax', funkcja(dane)

{ // kod tutaj zostanie wykonany po zakończeniu żądania AJAX });

Po zakończeniu żądania zwrócone dane zostaną dodane do strony:

$('

').text(dane).appendTo('ciało');

Podsumowując, powyższy kod tworzy przycisk, dodaje go do strony internetowej, po kliknięciu przycisku zostanie wysłane żądanie, a odpowiedź zostanie również dodana do strony internetowej.

Jeśli po raz pierwszy używasz wywołań zwrotnych, możesz sprawdzić zatwierdzenie na GitHub, aby zobaczyć, jak wszystko jest zagnieżdżone.

Krok 6: Odpowiedz na element interaktywny

Oczywiście żądanie AJAX wymaga odpowiedzi.

Aby utworzyć poprawną odpowiedź dla

/ajax

URL, który musimy dodać

w przeciwnym razie jeśli ()

zaraz po nawiasie zamykającym instrukcji if, która sprawdza

/

adres URL.

else if(urlLine.indexOf("GET /ajax ") >= 0)

{ klient.print("Cześć!"); }

W commicie na GitHub dodałem również licznik, który pokazuje przeglądarce, że każde żądanie jest unikalne.

Krok 7: Wniosek

To już koniec tej instrukcji. Masz teraz Arduino / ESP obsługujące małą stronę internetową, która mówi przeglądarce odwiedzającego, aby załadowała plik JavaScript z chmury. Po załadowaniu JavaScript buduje pozostałą zawartość strony internetowej, zapewniając interfejs użytkownika do komunikacji z Arduino / ESP.

Teraz od Twojej wyobraźni zależy tworzenie kolejnych elementów na stronie i zapisywanie ustawień lokalnie na jakimś ROM-ie (EEPROM/NVS/itp.).

Dziękujemy za przeczytanie i prosimy o przesłanie opinii!