Upravljanje vašega Arduina s HTML/Javascript na enostaven način: 8 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:07

Ta vadnica vam prikazuje, kako upravljati arduino z povratnim klicem ajax iz adafruit Huzze z uporabo samo funkcij javascript. V bistvu lahko uporabite stran javascript na strani html, ki vam omogoča enostavno pisanje vmesnikov html s preprostimi funkcijami javascript, ki uporabljajo povratni klic ajax. Omogočiti komunikacijo ESP8266 z arduinom. Zato lahko vse zatiče nastavite iz funkcije javascript. Podobno lahko vrednost preberemo tudi s katerega koli zatiča s funkcijo javascript. Upam, da bo to olajšalo nadzor nad arduinom iz dokumenta html. Ugotovil sem, da obstaja veliko ljudi, ki lahko pišejo html. Večina jih se ne želi truditi, da bi naredila aplikacijo za mobilni telefon z javo ali xcode ali kakšnim drugim ogrodjem. To bo ljudem zelo olajšalo, saj za nastavitev in branje vrednosti iz zatičev uporabljajo le funkcijo javascript. Na primer, ni veliko lažje pisati

Vklopiti

Če želite vklopiti gumb. Lepota je v tem, da razen deklariranja pinMode (12, INPUT) ni drugega arduino programiranja; V nastavljeni funkciji. Dokler je pin deklariran, se lahko za vse ostalo uporabi javascript.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

To je vse, kar morate storiti, da dobite vrednost analognega zatiča 0 in rezultat vrnete v div. Torej bi to moral biti preprost način, da bi ljudje lahko ustvarili strani html, ki nadzorujejo arduino. Pa tudi ustvarite vmesnik, tako da lahko zatiče arduino nastavite in preberete z javascript.

Korak: Kaj boste potrebovali

Ta projekt sem zgradil za uporabnike, ki želijo nadzirati svoj arduino s html stranjo na ESP8266. Cilj tega projekta je ustvariti preprosto metodo za nastavitev vrednosti zatičev na vašem arduinu s funkcijo javascript. Za primer onclick = "SetPin (12, 1, 0)" bo Pin 12 na vašem arduinu nastavil na High.

Za to vadnico boste potrebovali naslednje elemente, če želite natančno slediti. Predvidevam pa, da bi moral delovati na večini kombinacij arduino in ESP8266. Če pa želite slediti točno temu, kar imam tukaj, boste potrebovali naslednje komponente.

Arduino Uno - Moral bi delovati s katerim koli združljivim arduinom, ki ima serijski Rx TxAdafruit Huzzah Breakout Board USB na zaporedni kabel 4 Analogni preskus motnosti LED z nizko porabo LED - vsak analogni senzor, ki omogoča analogni izhod, bo deloval z mobilnim telefonom Wi -Fi usmerjevalnik z mobilnimi brskalniki Arduino Knjižnice.

2. korak: Priprava ID -ja Arduino

Ta projekt zahteva nove knjižnice arduino in nekaj konfiguracije ter zaradi časa. Ne bom posnela posnetka vsakega zaslona na srečo, ampak bom samo pregledala, kaj boste potrebovali, da to konfigurirate in zaženete. Poskušal sem uporabniku čim bolj olajšati.

Koda uporablja številne knjižnice za delo. Najprej se bomo osredotočili na nastavitev arduina za ESP8266, v tem primeru uporabljam Adafruit Huzzah, ker se mi zdijo izdelki iz adafruta najbolj zanesljivi in imajo najboljšo podporo. Dokler ne poskušate dobiti podpore s strežnika Adafruit Discord. Na forumih za podporo boste imeli veliko več sreče pri pomoči.

Kakorkoli, uporabljam naslednje knjižnice na ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONTTo ni vadnica o tem, kako prenesti in namestiti knjižnice, vendar so to knjižnice, ki se uporabljajo na HUZZAH. Zato jih poiščite in namestite. Prav tako boste morali namestiti definicije plošč za HUZZAH, zato, če odprete FILE> Preferences V polje z dodatnimi URL -ji upravitelja plošč, dodajte naslednje: //arduino.esp8266.com/stable/package_esp8266c…, če že imate nekaj na tem področju, nato pa dodajte vejico, da dodate dodaten URL deske. Kliknite V redu in pojdite

Orodja> Plošča> Upravitelj plošč Potem poiščite ESP8266 in namestite ESP8266 s strani skupnosti ESP8266.

Odlično, poskrbimo, da imamo vse, kar potrebujemo za delovanje arduino kode. Na eni strani arduino arduino za to vadbo uporablja le 2 knjižnici.

SoftwareSerialArduinoJSONKoje bi morali že imeti.

3. korak: Priprava ESP8266

Zdaj bomo kodo dali na ESP8266 (Adafruit HUZZAH) in jo pripravili za povezavo z Arduinom. Razpakirajte kodo za HUZZAH in odprite skico. V vrsticah 11 in 12 spremenite ssid in geslo na geslo vaše povezave WIFI v vašem lokalnem omrežju. Opazili boste, da sta dve datoteki skica in datoteka index.h. Datoteka index.h je tam, kjer je shranjen html, ki bo prikazan v telefonu.

Ko nastavite pravilen SSID in geslo za wifi, lahko sestavite kodo in jo naložite na svoj ESP8266. Na HUZZAH -u morate pritisniti gumb z oznako GPIO0, nato kliknite gumb za počitek, nato pa spustite gumb GPIO0, da preklopite čip v način zagona. Če je bil čip uspešno preklopljen v način zagona, se prižge rdeča lučka, ki označuje, da je čip v načinu zagonskega nalagalnika.

Za povezavo z ESP8266 potrebujete serijski kabel ali USB -v -serijski adapter ali čip FDTI. V tem primeru uporabljam adafruit kabel, kot je navedeno v navodilih. Lahko pa se na čip povežete na več načinov, z uporabo TTL na zatičih Tx in Rx. Upam, da se bodo ljudje, ki si to ogledujejo, priklopili na čip, da bodo nanj naložili kodo. Kakorkoli že, nadaljujte in utripajte čip s kodo v datoteki zip, ki je priložena temu koraku.

4. korak: Priprava Arduina

Če želite naložiti kodo na arduino, spremenite definicijo plošče v Arduino/Genuino Uno. Nato razpakirajte datoteko, ki je priložena temu koraku. Nato ga naložite na ardunio. Res preprosto, vse trdo delo je bilo že opravljeno za vas. Sem že šel skozi poskusno napako, zato morate le naložiti kodo.

5. korak: Ožičenje vsega skupaj

V redu, tako da za ožičenje imam zgornjo sliko tega, kar imam tukaj.

Priključite Tx na Huzzi na Pin 2 na arduinu, Rx na Huzzi povežite s Pin 3 na arduinu. Ustvaril sem še eno serijsko vtičnico na nožicah 2 in 3 na arduinu, da sprostim privzeto serijsko konzolo.

Pin V+ in En priključite na 5v iz arduina. - Adafruit Huzzah ima vgrajen regulator napetosti 3.3v, zato tako priključitev teh zatičev morda ne bo delovala z vsemi moduli ESP8266. Morda boste morali priključiti svoj regulator napetosti. Priporočam uporabo Huzzaha, če želite le, da stvar z lahkoto deluje. Povežite GND z GND arduina

Na zatičih 12, 11, 9, 8 na arduino žici v vaših LED sem tukaj uporabil LED z nizko porabo, ker lahko tisti, ki črpajo preveč toka, porabijo preveč energije, da bi bil ta poskus preprost.

Kot na A0 analogni pin 0 na arduinu sem priključil izhodno linijo svojega testerja Turpitity. Lahko pa priključite izhod skoraj vsakega senzorja, ki vam bo omogočil analogno odčitavanje. To je vse, kar morate storiti, da to povežete.

6. korak: Dostop do spletne strani

Zdaj, ko imate arduino ožičen in imate vse naložene na plošče, morate videti html na svojem mobilnem telefonu. Zdaj želim, da se povežete z istim usmerjevalnikom WiFi, za katerega ste nastavili SSID in geslo v kodi na Huzzi. Nato morate ugotoviti, kateri naslov IP je usmerjevalnik dodelil vaši napravi. Običajno mora biti, če se prijavite v konfiguracijo usmerjevalnikov, odjemalec. To prikazuje naslove IP vseh naprav, povezanih z vašo povezavo Wifi. Če pa tega naslova IP ne najdete, ga lahko odklopite iz arduina in znova zaženete s serijskim kablom. Če na napravi odprete serijsko konzolo, bo natisnila naslov IP na napravi v serijski konzoli, če je ne najdete drugače. Kakorkoli že, ko ste povezani z istim omrežjem Wifi s svojim mobilnim telefonom. Nato usmerite svoj mobilni brskalnik na IP -naslov Huzzah. Kar je verjetno podobno temu. https://192.168.0.107 ali kaj zelo podobnega. Tam sem vstavil osnovno stran, ki vam bo omogočila vklop in izklop 4 LED, pa tudi branje vrednosti analognega senzorja.

7. korak: Uporaba Javascipta

V datoteki, imenovani index.h, na skici ESP8266Code bi morala biti prikazana kot ločen zavihek v urejevalniku arduino. Osnovni primer, ki sem ga naredil, si lahko ogledate tukaj. Načeloma deluje takole.

SetPin (12, 1, 0); SetPin ({Pin Number}, {Value 1 High 0 Low}, {IsAnalog 1 Yes 0 No})

S tem se vrednost digitalnega zatiča 12 nastavi na visoko

SetPin (4, 0, 0);

S tem se vrednost digitalnega zatiča 4 nastavi na nizko

SetPin (A2, 439, 1) S tem se vrednost analognega pina 2 nastavi na 439

Podobno bo funkcija GetJSON vrnila zahtevano vrednost iz zatiča in jo postavila v html, izbrano z določenim ID -jem div.

GetJSON ('A0', 1, 'resp_i') GetJSON ({Številka PIN}, {IsAnalog 1 Da 0 Ne}, {Id elementa HTML za vrnitev rezultata})

Ta bo na arduino poslal zahtevo, ki zahteva vrednost analognega pin -a 0 in vrne rezultat v Div z ID -jem resp_iGetJSON (12, 0, 'mydiv'); To bo od arduina zahtevalo, da dobi vrednost digitalnega pin -a 0 in vrne rezultat v element html z in id mydiv

8. korak: Podpora

Upam, da bo moj scenarij v pomoč tistim, ki ga želite uporabiti. Tukaj sem uporabil zelo preprost primer html v upanju, da bodo drugi ljudje raziskali vse njegove zmogljivosti, ki jih jaz ne morem. Vendar pa bi to moralo pokazati, kako je mogoče ajax uporabiti za nadzor arduina brez nalaganja strani html in podobnih stvari.

Če imate kakršne koli pripombe, me vprašajte, naredil bom vse, kar je v moji moči, da odgovorim. Rad bi še razširil funkcionalnost tega, vendar mi je zmanjkalo časa in denarja. Delam pa na močnejši izvedbi tega, ki datoteke shranjuje na običajnem spletnem strežniku in ne na ESP8266.

Hvala, ker ste si vzeli čas za ogled moje kode.

John Anderson Pošlji mi e -pošto

Vermont Internet Design LLC

www.vermontinternetdesign.com