Sterowanie Arduino za pomocą HTML/Javascript w prosty sposób: 8 kroków

2025 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2025-01-23 15:03

Ten samouczek pokazuje, jak kontrolować arduino za pomocą wywołania zwrotnego ajax z adafruit Huzzah przy użyciu tylko funkcji javascript. Zasadniczo możesz używać javascript na stronie html, co pozwoli Ci łatwo pisać interfejsy html za pomocą prostych funkcji javascript, które wykorzystują wywołanie zwrotne ajax. Aby umożliwić ESP8266 komunikację z arduino. Dlatego wszystkie piny można ustawić za pomocą funkcji javascript. Podobnie możemy również odczytać wartość z dowolnego pinu za pomocą funkcji javascript. Mam nadzieję, że ułatwi to sterowanie arduino z dokumentu html. Doszedłem do wniosku, że jest wielu ludzi, którzy potrafią pisać w html. Większość z nich nie chce zawracać sobie głowy tworzeniem aplikacji na telefon komórkowy z java, xcode lub innym frameworkiem. Ułatwi to ludziom, ponieważ wszystko, co muszą zrobić, to użyć funkcji javascript do ustawiania i odczytywania wartości z pinów. Na przykład, czy nie jest o wiele łatwiej pisać?

Włączyć coś

Aby włączyć przycisk. Piękno polega na tym, że nie ma żadnego innego programowania arduino poza deklaracją pinMode(12, INPUT); W funkcji konfiguracji. Dopóki pin jest zadeklarowany, javascript może być używany do wszystkiego innego.

document.onload = {

GetJSON('A0', 1 'return_json')

}

To wszystko, co musisz zrobić, aby uzyskać wartość analogowego pinu 0 i zwrócić wynik do div. Powinno to być łatwy sposób, aby ludzie mogli tworzyć strony html, które kontrolują arduino. A także stworzyć interfejs, dzięki któremu piny arduino można ustawić i odczytać za pomocą javascript.

Krok 1: Czego będziesz potrzebować

Zbudowałem ten projekt dla użytkowników, którzy chcą kontrolować swoje arduino za pomocą strony html na ESP8266. Celem tego projektu jest stworzenie prostej metody ustawiania wartości pinów na twoim arduino za pomocą funkcji javascript. Na przykład onclick="SetPin(12, 1, 0)" ustawi pin 12 na twoim arduino na wysoki.

W tym samouczku będziesz potrzebować następujących elementów, aby dokładnie śledzić. Zakładam jednak, że powinien działać na większości kombinacji arduino i ESP8266. Jednak, aby śledzić dokładnie to, co mam tutaj, będziesz potrzebować następujących komponentów.

Arduino Uno - Powinien działać z dowolnym kompatybilnym arduino, który ma szeregowy Rx TxAdafruit Huzzah Breakout Board Kabel USB do kabla szeregowego 4 diody LED o niskiej mocy Analog Turpidity tester - każdy czujnik analogowy, który zapewnia wyjście analogowe, wykona Wifi Router Telefon komórkowy z mobilną przeglądarką Arduino Libraries.

Krok 2: Przygotowanie Arduino ID

Ten projekt wymaga nowych bibliotek arduino i pewnej konfiguracji i ze względu na czas. Nie będę umieszczał zrzutów ekranu z każdego ekranu i zamierzam tylko przejrzeć, co będzie potrzebne, aby to skonfigurować i uruchomić. Starałem się, aby było to jak najłatwiejsze dla użytkownika.

Kod używa wielu bibliotek, aby zacząć działać. Najpierw skupimy się na konfiguracji arduino dla ESP8266. W tym przykładzie używam Adafruit Huzzah, ponieważ uważam, że produkty adafruit są najbardziej niezawodne i mają najlepsze wsparcie. O ile nie próbujesz uzyskać wsparcia z serwera Adafruit Discord. Dużo więcej szczęścia będziesz mieć, gdy uzyskasz pomoc na forach wsparcia.

W każdym razie używam następujących bibliotek na ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONTo nie jest samouczek dotyczący pobierania i instalowania bibliotek, jednak są to biblioteki używane na HUZZAH. Znajdź je i zainstaluj. Będziesz także musiał zainstalować definicje płyt dla HUZZAH, więc jeśli przejdziesz do PLIK> Preferencje W polu z napisem Dodatkowe adresy URL menedżera płyt dodaj następujący https://arduino.esp8266.com/stable/package_esp8266c… jeśli już masz coś w tym polu, niż upewnij się, że dodałeś tam przecinek, aby dodać dodatkowy adres URL tablicy. Kliknij ok, to idź

Narzędzia>Płyta>Menedżer tablic Następnie wyszukaj ESP8266 i zainstaluj ESP8266 przez społeczność ESP8266.

Świetnie, teraz upewnijmy się, że mamy wszystko, czego potrzebujemy, aby kod arduino działał. Po stronie arduino, samo arduino używa tylko 2 bibliotek do tego samouczka.

SoftwareSerialArduinoJSONKtóre powinieneś już mieć.

Krok 3: Przygotowanie ESP8266

Teraz umieścimy kod na ESP8266 (Adafruit HUZZAH) i przygotujemy go do połączenia z Arduino. Rozpakuj kod HUZZAH i otwórz szkic. Na liniach 11 i 12 zmień SSID i hasło na połączenie WIFI w sieci lokalnej. Zauważysz, że istnieją 2 pliki: plik szkicu i plik index.h. Plik index.h to miejsce, w którym przechowywany jest kod html, który będzie wyświetlany w telefonie.

Po ustawieniu prawidłowego SSID i hasła do Wi-Fi możesz skompilować kod i załadować go na ESP8266. Na HUZZAH musisz przytrzymać przycisk oznaczony GPIO0, a następnie kliknąć przycisk odpoczynku, a następnie puścić przycisk GPIO0, aby przełączyć układ w tryb bootloadera. Jeśli chip został pomyślnie przełączony w tryb bootloadera, zaświeci się czerwone światło wskazujące, że chip jest w trybie bootloadera.

Aby połączyć się z ESP8266 potrzebujesz kabla szeregowego lub adaptera USB na szeregowy lub układu FDTI. W tym przypadku korzystam z kabla adafruit zgodnie z instrukcją. Możesz jednak podłączyć się do chipa na kilka sposobów, używając TTL na pinach Tx i Rx. Mam nadzieję, że ludzie, którzy to oglądają, wiedzą, jak podłączyć się do chipa, aby załadować na niego kod. W każdym razie idź dalej i sflashuj chip z kodem w pliku zip, który jest dołączony do tego kroku.

Krok 4: Przygotowanie Arduino

Aby załadować kod na arduino, zmień definicję płytki na Arduino/Genuino Uno. Następnie rozpakuj plik dołączony do tego kroku. Następnie wgraj go na ardunio. Naprawdę proste, cała ciężka praca została już dla ciebie wykonana. Przeszedłem już próbny proces błędu, więc wszystko, co musisz zrobić, to przesłać kod.

Krok 5: Połącz wszystko razem

Ok, więc dla okablowania mam zdjęcie powyżej tego, co mam tutaj.

Podłącz Tx na Huzzah do Pin 2 na arduino. Podłącz Rx na Huzzah do Pin 3 na arduino. Utworzyłem kolejne gniazdo szeregowe na pinach 2 i 3 na arduino, aby zwolnić domyślną konsolę szeregową.

Podłącz Pin V+ i En do 5v z arduino. - Adafruit Huzzah ma wbudowany regulator napięcia 3.3V, więc podłączenie tych pinów w ten sposób może nie działać ze wszystkimi modułami ESP8266. Może być konieczne podłączenie własnego regulatora napięcia. Polecam korzystanie z Huzzah, jeśli chcesz po prostu sprawić, by coś działało łatwo. Podłącz GND do GND arduino

Na pinach 12, 11, 9, 8 na przewodzie arduino w twoich diodach LED użyłem tutaj diod LED o małej mocy, ponieważ te, które pobierają zbyt dużo prądu, mogą pobierać zbyt dużo energii, aby ten eksperyment był prosty.

Następnie na analogowym Pin 0 A0 na arduino podłączyłem linię wyjściową mojego testera Turpitity. Możesz jednak podłączyć wyjście praktycznie każdego czujnika, który da ci odczyt analogowy. To wszystko, co musisz zrobić, aby to połączyć.

Krok 6: Dostęp do strony internetowej

Teraz, gdy masz już podłączone arduino i masz wszystko załadowane na swoje tablice, musisz mieć możliwość przeglądania html na telefonie komórkowym. Teraz chcę, żebyś łączył się z tym samym routerem Wi-Fi, dla którego ustawiłeś SSID i hasło w kodzie na Huzzah. Następnie musisz dowiedzieć się, jaki adres IP router przypisał Twojemu urządzeniu. Zwykle, jeśli logujesz się do konfiguracji routerów, powinna pojawić się lista klientów. To pokazuje adresy IP wszystkich urządzeń podłączonych do twojego połączenia Wi-Fi. Jeśli jednak nie możesz znaleźć tego adresu IP, możesz odłączyć go od arduino i ponownie uruchomić za pomocą kabla szeregowego. Jeśli otworzysz konsolę szeregową na urządzeniu, adres IP zostanie wydrukowany na urządzeniu w konsoli szeregowej na wypadek, gdybyś nie mógł znaleźć go w inny sposób. W każdym razie, gdy połączysz się z tą samą siecią Wi-Fi z telefonem komórkowym. Następnie skieruj przeglądarkę mobilną na adres IP Huzzah. Co prawdopodobnie wygląda podobnie do tego. https://192.168.0.107 lub coś bardzo podobnego. Tam umieściłem podstawową stronę, która pozwoli ci włączać i wyłączać 4 diody oraz odczytywać wartość czujnika analogowego.

Krok 7: Korzystanie z języka Javascipt

W pliku o nazwie index.h w szkicu ESP8266Code powinien pojawić się jako osobna zakładka w edytorze arduino. Możesz zobaczyć podstawowy przykład, który zrobiłem tutaj. Zasadniczo działa to tak.

UstawPin(12, 1, 0); SetPin({Numer PIN}, {Wartość 1 Wysoka 0 Niska}, {IsAnalog 1 Tak 0 Nie})

To ustawi wartość cyfrowego pinu 12 na wysoką

UstawPin(4, 0, 0);

To ustawi wartość cyfrowego pinu 4 na niską

SetPin(A2, 439, 1) Ustawia wartość pinu analogowego 2 na 439

Podobnie funkcja GetJSON zwróci żądaną wartość z pinu i umieści ją w html z określonym identyfikatorem div.

GetJSON('A0', 1, 'resp_i') GetJSON({Numer PIN}, {IsAnalog 1 Tak 0 Nie}, {Id elementu HTML zwracającego wynik})

Spowoduje to wysłanie żądania do arduino z prośbą o podanie wartości analogowego pinu 0 i zwrócenie wyniku do Div z identyfikatorem resp_iGetJSON(12, 0, 'mydiv'); Spowoduje to poproszenie arduino o uzyskanie wartości cyfrowego pinu 0 i zwrócenie wyniku do elementu html z identyfikatorem mydiv i identyfikatorem mydiv

Krok 8: Wsparcie

Mam nadzieję, że mój skrypt pomoże tym z Was, którzy chcą z niego korzystać. Użyłem tutaj bardzo prostego przykładu html z nadzieją, że inni ludzie odkryją wszystkie jego możliwości, których ja nie mogę. Powinno to jednak pokazać, jak ajax może być używany do kontrolowania arduino bez ładowania strony html i innych tego typu rzeczy.

Jeśli masz jakieś uwagi, nie krępuj się pytać, zrobię co w mojej mocy, aby odpowiedzieć. Chciałbym jeszcze bardziej rozszerzyć funkcjonalność tego, ale zabrakło mi czasu i pieniędzy. Jednak pracuję nad bardziej solidną implementacją tego, która przechowuje pliki na zwykłym serwerze WWW, a nie na ESP8266.

Dziękuję za poświęcenie czasu na zapoznanie się z moim kodem.

John AndersonWyślij e-mail do mnie

Vermont Internet Design LLC

www.vermontinternetdesign.com