Ovládanie Arduina pomocou HTML/Javascriptu jednoduchým spôsobom: 8 krokov

2025 Autor: John Day | [email protected]. Naposledy zmenené: 2025-01-23 15:06

Tento tutoriál vám ukáže, ako ovládať arduino ajaxovým volaním z adafruit Huzzah pomocou iba funkcií JavaScriptu. V zásade môžete na stránke html použiť javascript, ktorý vám umožní ľahko písať rozhrania html s jednoduchými funkciami javascriptu, ktoré využívajú spätné volanie ajax. Umožniť ESP8266 komunikovať s arduino. Preto je možné všetky piny nastaviť pomocou funkcie JavaScript. Rovnako tak môžeme tiež prečítať hodnotu z akéhokoľvek pinu pomocou funkcie javascript. Dúfam, že to pomôže uľahčiť ovládanie arduina z html dokumentu. Prišiel som na to, že je tam veľa ľudí, ktorí vedia písať html. Väčšina z nich sa nechce obťažovať pokusom vytvoriť aplikáciu pre mobilný telefón s jazykom java alebo xcode alebo iným rámcom. To bude pre ľudí veľmi jednoduché, pretože všetko, čo musia urobiť, je použiť funkciu JavaScript na nastavenie a čítanie hodnôt z pinov. Napríklad nie je oveľa jednoduchšie písať

Zapnúť

Ak chcete zapnúť tlačidlo. Krása je, že okrem deklarovania režimu pinMode (12, INPUT) nie je zahrnuté žiadne ďalšie programovanie arduina; Vo vašej nastavovacej funkcii. Pokiaľ je kolík deklarovaný, je možné na všetko ostatné použiť javascript.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

To je všetko, čo musíte urobiť, aby ste získali hodnotu analógového pinu 0 a vrátili výsledok do div. Toto by teda mal byť jednoduchý spôsob, ako môžu ľudia vytvárať html stránky ovládajúce arduino. Rovnako ako vytvorte rozhranie, aby bolo možné arduino piny nastavovať a čítať pomocou JavaScriptu.

Krok 1: Čo budete potrebovať

Tento projekt som postavil pre používateľov, ktorí chcú ovládať svoje arduino pomocou html stránky na ESP8266. Cieľom tohto projektu je vytvoriť jednoduchú metódu na nastavenie hodnôt pinov na vašom arduine pomocou funkcie javascript. Pre napríklad onclick = „SetPin (12, 1, 0)“nastaví pin 12 na vašom arduine na High.

Na tento tutoriál budete potrebovať nasledujúce položky, aby ste ich mohli presne dodržiavať. Predpokladám však, že by to malo fungovať na väčšine kombinácií arduino a ESP8266. Na to, aby ste dodržali presne to, čo tu mám, však budete potrebovať nasledujúce komponenty.

Arduino Uno - Malo by fungovať s akýmkoľvek kompatibilným arduinom, ktoré má sériový Rx TxAdafruit Huzzah Breakout Board USB na sériový kábel 4 nízkoenergetické LED analógové testery zákalu - akýkoľvek analógový senzor, ktorý poskytuje analógový výstup, bude fungovať ako drôtový Wifi router mobilný telefón s mobilným prehliadačom Knižnice Arduino.

Krok 2: Príprava Arduino ID

Tento projekt vyžaduje nové arduino knižnice a určitú konfiguráciu, a to z dôvodu času. Nebudem uvádzať snímku obrazovky každej obrazovky a len sa pozriem na to, čo budete potrebovať na jej konfiguráciu a spustenie. Snažil som sa to používateľovi čo najviac uľahčiť.

Kód používa na prácu niekoľko knižníc. Najprv sa zameriame na nastavenie arduina pre ESP8266, ktorý v tomto prípade používam Adafruit Huzzah, pretože považujem výrobky adafruit za najspoľahlivejšie a majú najlepšiu podporu. Pokiaľ sa nepokúšate získať podporu zo servera Adafruit Discord. Budete mať oveľa väčšie šťastie, ak sa vám dostane pomoci vo fórach podpory.

V každom prípade používam na ESP8266 nasledujúce knižnice

Wi -Fi klient ESP8266WiServer ESP8266WebServer ArduinoJSON Toto nie je návod, ako sťahovať a inštalovať knižnice, ale ide o knižnice používané v HUZZAH. Preto ich prosím nájdite a nainštalujte. Budete tiež musieť nainštalovať definície dosky pre HUZZAH, takže ak prejdete na SÚBOR> Predvoľby Do poľa, ktoré hovorí, že adresy URL dodatočného správcu dosiek, zadajte nasledujúci https://arduino.esp8266.com/stable/package_esp8266c… ak už máte niečo v tomto poli, potom sa uistite, že ste tam pridali čiarku a pridali tak ďalšiu adresu URL nástenky. Kliknite na tlačidlo OK

Nástroje> Doska> Správca dosiek Než vyhľadáte ESP8266, nainštalujte ESP8266 od komunity ESP8266.

Skvelé, teraz sa uistite, že máme všetko, čo potrebujeme, aby kód arduino fungoval. Jedna arduino Strana arduino používa na tento tutoriál iba 2 knižnice.

SoftwareSerialArduinoJSON, ktorý by ste už mali mať.

Krok 3: Príprava ESP8266

Teraz vložíme kód do ESP8266 (Adafruit HUZZAH) a pripravíme ho na pripojenie k Arduinu. Rozbaľte kód pre HUZZAH a otvorte náčrt. Na riadkoch 11 a 12 zmeňte ssid a heslo na heslo vášho WIFI pripojenia vo vašej miestnej sieti. Všimnite si, že existujú 2 súbory, súbor skici a súbor index.h. V súbore index.h je uložený html, ktorý sa zobrazí vo vašom telefóne.

Potom, čo ste na svoju wifi nastavili správny SSID a heslo, môžete kód skompilovať a načítať do svojho ESP8266. Na HUZZAH musíte podržať tlačidlo označené GPIO0, potom kliknúť na tlačidlo zvyšku a potom pustiť tlačidlo GPIO0, aby sa čip prepol do režimu bootloadera. Ak bol čip úspešne vložený do režimu bootloadera, rozsvieti sa červená kontrolka, ktorá indikuje, že je čip v režime zavádzača.

Na pripojenie k ESP8266 budete potrebovať sériový kábel alebo adaptér USB na sériový port alebo čip FDTI. V tomto prípade používam kábel adafruit, ako je uvedené v pokynoch. K čipu sa však môžete pripojiť niekoľkými spôsobmi pomocou TTL na kolíkoch Tx a Rx. Dúfam, že ľudia, ktorí to pozerajú, vedia, ako sa pripojiť k čipu a načítať naň kód. V každom prípade pokračujte a načítajte čip s kódom v súbore zip, ktorý je pripojený k tomuto kroku.

Krok 4: Príprava Arduina

Ak chcete načítať kód do arduina, zmeňte definíciu dosky na Arduino/Genuino Uno. Potom rozbaľte súbor, ktorý je pripojený k tomuto kroku. Potom ho nahrajte na ardunio. Je to celkom jednoduché, všetka tvrdá práca už bola pre vás vykonaná. Už som prešiel procesom pokus - omyl, takže stačí nahrať kód.

Krok 5: Zapojenie všetkého dohromady

Ok, takže pre zapojenie mám vyššie uvedený obrázok toho, čo tu mám.

Pripojte Tx na Huzzah k Pin 2 na arduino. Pripojte Rx na Huzzah k Pin 3 na arduino. Vytvoril som ďalšiu sériovú zásuvku na kolíkoch 2 a 3 na arduine, aby som uvoľnil predvolenú sériovú konzolu.

Pripojte pin V+ a En k 5v z arduina. - Adafruit Huzzah má vstavaný regulátor napätia 3,3 V, takže zapojenie týchto pinov týmto spôsobom nemusí fungovať so všetkými modulmi ESP8266. Možno budete musieť zapojiť vlastný regulátor napätia. Huzzah odporúčam použiť, ak chcete, aby vec jednoducho fungovala. Pripojte GND k GND arduina

Na piny 12, 11, 9, 8 na arduino vodiči vo vašich diódach LED som použil diódy LED s nízkym výkonom, pretože tie, ktoré odoberajú príliš veľa prúdu, môžu čerpať príliš veľa energie, aby bol tento experiment jednoduchý.

Potom ako na analógovom A0 Pin 0 na arduine som zapojil výstupný riadok môjho testera turpitity. Môžete však pripojiť výstup v podstate akéhokoľvek senzora, ktorý vám poskytne analógové čítanie. To je všetko, čo musíte urobiť, aby ste to prepojili.

Krok 6: Prístup na webovú stránku

Teraz, keď máte arduino zapojené a máte všetko nahraté na svojich doskách, potrebujete mať možnosť zobraziť html vo svojom mobilnom telefóne. Teraz chcem, aby ste sa pripojili k rovnakému routeru wifi, pre ktorý ste v kóde na Huzzah nastavili SSID a heslo. Potom musíte zistiť, akú adresu IP priradil váš smerovač vášmu zariadeniu. Ak sa prihlásite do konfigurácie smerovačov, spravidla by mal existovať zoznam klientov. To zobrazuje adresy IP všetkých zariadení pripojených k vášmu pripojeniu Wifi. Ak však nemôžete nájsť túto adresu IP, môžete ju odpojiť od arduina a znova spustiť pomocou sériového kábla. Ak v zariadení otvoríte sériovú konzolu, v prípade, že ju nemôžete nájsť iným spôsobom, vytlačí IP adresu zariadeniu v sériovej konzole. V každom prípade však budete po pripojení k rovnakej sieti Wi -Fi pomocou svojho mobilného telefónu. Potom nasmerujte svoj webový prehliadač na ip adresu Huzzah. Čo asi vyzerá podobne ako toto. https://192.168.0.107 alebo niečo veľmi podobné. Vložil som tam základnú stránku, ktorá vám umožní zapnúť a vypnúť 4 LED diódy a prečítať hodnotu analógového senzora.

Krok 7: Použitie Javasciptu

V súbore s názvom index.h v náčrte ESP8266Code by sa mal objaviť ako samostatná karta v editore arduino. Tu môžete vidieť základný príklad, ktorý som uviedol. V zásade to funguje takto.

SetPin (12, 1, 0); SetPin ({Pin Number}, {hodnota 1 vysoká 0 nízka}, {IsAnalog 1 áno 0 nie})

Nastaví sa hodnota digitálneho pinu 12 na vysokú

SetPin (4, 0, 0);

Hodnota digitálneho kolíka 4 sa nastaví na nízku hodnotu

SetPin (A2, 439, 1) Nastaví hodnotu analógového pinu 2 na 439

Podobne funkcia GetJSON vráti požadovanú hodnotu z pinu a umiestni ju do html, ktorý je vybavený zadaným identifikátorom div.

GetJSON ('A0', 1, 'resp_i') GetJSON ({Pin Number}, {IsAnalog 1 Yes 0 No}, {Id Of HTML Element to return result})

To pošle požiadavku na arduino, ktorá ho požiada o hodnotu analógového pinu 0 a vráti výsledok do Div s ID resp_iGetJSON (12, 0, 'mydiv'); To arduino požiada, aby získal hodnotu digitálneho pinu 0 a vrátil výsledok do html prvku pomocou a Id mydiv

Krok 8: Podpora

Dúfam, že môj skript pomôže tým z vás, ktorí ho chcú použiť. Použil som tu veľmi základný príklad html s nádejou, že ostatní ľudia preskúmajú všetky jeho možnosti, ktoré ja nemôžem. Toto by však malo demonštrovať, ako sa dá ajax použiť na ovládanie arduina bez načítania stránok html a podobných vecí.

Ak máte nejaké pripomienky, neváhajte sa ma opýtať, urobím všetko, čo bude v mojich silách, aby som odpovedal. Chcel by som ešte rozšíriť funkčnosť tohto, ale došiel mi čas a peniaze. Pracujem však na jeho robustnejšej implementácii, ktorá ukladá súbory na bežný webový server, a nie na ESP8266.

Ďakujem, že ste si našli čas na zobrazenie môjho kódu.

John Anderson Pošlite mi e -mail

Vermont Internet Design LLC

www.vermontinternetdesign.com