Upravljanje Arduinom s HTML/Javascriptom na jednostavan način: 8 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:08

Ovaj vodič vam pokazuje kako kontrolirati arduino uz ajax povratni poziv sa adafruit Huzze koristeći samo javascript funkcije. U osnovi možete koristiti javascript na html stranici koja će vam omogućiti jednostavno pisanje html sučelja s jednostavnim javascript funkcijama koje koriste ajax povratni poziv. Omogućiti ESP8266 komunikaciju s arduinom. Stoga se svi pinovi mogu postaviti iz javascript funkcije. Slično, vrijednost možemo očitati i sa bilo kojeg pina pomoću funkcije javascript. Nadam se da će ovo pomoći da se olakša kontrola arduina iz html dokumenta. Zaključio sam da postoji mnogo ljudi koji mogu pisati html. Većina njih se ne želi truditi pokušavajući napraviti aplikaciju za mobitel s javom ili xcode -om ili nekim drugim okvirom. To će ljudima biti vrlo jednostavno jer sve što trebaju učiniti je koristiti funkciju JavaScript za postavljanje i čitanje vrijednosti iz pinova. Na primjer, nije li lakše pisati

Uključi

Da biste uključili dugme. Ljepota je u tome što nema drugog arduino programiranja osim za deklarisanje pinMode (12, INPUT); U vašoj funkciji postavljanja. Sve dok je pin deklariran, javascript se može koristiti za sve ostalo.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Ovo je sve što trebate učiniti da biste dobili vrijednost analognog pina 0 i vratili rezultat u div. Dakle, ovo bi trebao biti jednostavan način da ljudi mogu stvoriti html stranice koje kontroliraju arduino. Kao i stvoriti sučelje tako da se arduino pinovi mogu postaviti i čitati pomoću javascripta.

Korak 1: Šta će vam trebati

Napravio sam ovaj projekt za korisnike koji žele kontrolirati svoj arduino pomoću html stranice na ESP8266. Cilj ovog projekta je stvoriti jednostavnu metodu za postavljanje vrijednosti pinova na vašem arduinu s funkcijom javascript. Za primjer onclick = "SetPin (12, 1, 0)" će postaviti Pin 12 na vašem arduinu na Visoko.

Za ovaj vodič trebat će vam sljedeće stavke kako biste ih točno slijedili. Međutim, pretpostavljam da bi trebao raditi na većini arduino i ESP8266 kombinacija. Međutim, da biste slijedili ono što imam ovdje, trebat će vam sljedeće komponente.

Arduino Uno - Trebao bi raditi sa bilo kojim kompatibilnim s arduinom koji ima serijski Rx TxAdafruit Huzzah razvodnu ploču USB na serijski kabel 4 Analogni test prozirnosti LED -a male snage - svaki analogni senzor koji pruža analogni izlaz bit će spojen na bežični Wi -Fi usmjerivač mobitela s Arduino bibliotekama mobilnog preglednika.

Korak 2: Priprema Arduino ID -a

Ovaj projekt zahtijeva nove arduino biblioteke i određenu konfiguraciju, a radi vremena. Neću stavljati snimak svakog ekrana i samo ću proći kroz ono što vam je potrebno da ga konfigurirate i pokrenete. Pokušao sam olakšati korisniku što je moguće lakše.

Kod koristi brojne biblioteke za rad. Prvo ćemo se usredotočiti na postavljanje arduina za ESP8266. U ovom primjeru koristim Adafruit Huzzah, jer smatram da su adafruit proizvodi najpouzdaniji i imaju najbolju podršku. Sve dok ne pokušavate dobiti podršku od Adafruit Discord servera. Imat ćete mnogo više sreće ako dobijete pomoć na forumima za podršku.

U svakom slučaju, koristim sljedeće biblioteke na ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONTOvo nije vodič za preuzimanje i instaliranje biblioteka, međutim, to su biblioteke koje se koriste na HUZZAH -u. Zato ih pronađite i instalirajte. Također ćete morati instalirati definicije ploče za HUZZAH pa ako odete na FILE> Preferences U okvir s dodatnim URL -ovima upravitelja ploča, dodajte sljedeće: //arduino.esp8266.com/stable/package_esp8266c…ako već imate nešto u ovom polju, pa svakako unesite zarez da biste dodali dodatni url ploče. Kliknite OK to go

Alati> Ploča> Upravitelj ploča Zatim potražite ESP8266 nego instalirajte ESP8266 od strane zajednice ESP8266.

Odlično sada, provjerite imamo li sve što je potrebno za rad arduino koda. Jedna arduino strana Arduino koristi samo 2 biblioteke za ovaj vodič.

SoftwareSerialArduinoJSONŠto ste već trebali imati.

Korak 3: Priprema ESP8266

Sada ćemo kôd staviti na ESP8266 (Adafruit HUZZAH) i pripremiti ga za povezivanje s Arduinom. Raspakirajte kôd za HUZZAH i otvorite skicu. Na linijama 11 i 12 promijenite ssid i lozinku u lozinku vaše WIFI veze na vašoj lokalnoj mreži. Primijetit ćete da postoje 2 datoteke skica i index.h datoteka. Indeks.h datoteka je mjesto gdje je pohranjen html koji će biti prikazan na vašem telefonu.

Nakon što postavite ispravni SSID i lozinku za svoju WiFi mrežu, možete sastaviti kôd i učitati ga na svoj ESP8266. Na HUZZAH -u morate držati pritisnutu tipku označenu sa GPIO0, zatim pritisnuti tipku za odmor, zatim pustiti tipku GPIO0 da biste prebacili čip u način pokretanja. Ako je čip uspješno prebačen u način pokretanja pokretačkog programa, upalit će se crveno svjetlo koje označava da je čip u načinu pokretanja pokretačkog programa.

Za spajanje na ESP8266 trebat će vam serijski kabel ili USB na serijski adapter ili FDTI čip. U ovom slučaju koristim adafruit kabel kako je navedeno u uputama. Međutim, čip možete spojiti na nekoliko načina, koristeći TTL na Tx i Rx pinovima. Nadam se da će ljudi koji ovo gledaju znati kako se spojiti na čip kako bi na njega učitali kôd. U svakom slučaju, nastavite i bljeskajte čip sa kodom u zip datoteci koji je priložen ovom koraku.

Korak 4: Priprema Arduina

Da biste učitali kôd na arduino, promijenite definiciju ploče na Arduino/Genuino Uno. Zatim raspakirajte datoteku koja je priložena ovom koraku. Zatim ga prenesite na ardunio. Zaista prilično jednostavno, sav naporan posao je već obavljen za vas. Već sam prošao probni proces greške pa sve što trebate učiniti je učitati kôd.

Korak 5: Sve spojite zajedno

U redu, za ožičenje imam gornju sliku onoga što imam ovdje.

Spojite Tx na Huzzi sa Pin 2 na arduinu. Povežite Rx na Huzzi sa Pin 3 na arduinu. Napravio sam još jednu serijsku utičnicu na pinovima 2 i 3 na arduinu kako bih oslobodio zadanu serijsku konzolu.

Spojite Pin V+ i En na 5v s arduina. - Adafruit Huzzah ima ugrađeni regulator napona 3.3v, pa tako priključivanje ovih pinova možda neće raditi sa svim ESP8266 modulima. Možda ćete morati spojiti vlastiti regulator napona. Preporučujem korištenje Huzze ako samo želite da stvar radi lako. Spojite GND na GND arduina

Na pinovima 12, 11, 9, 8 na arduino žici u vašim LED diodama ovdje sam koristio LED sa slabim napajanjem jer oni koji vuku previše struje mogu povući previše energije kako bi ovaj eksperiment bio jednostavan.

Nego na A0 analogni pin 0 na arduinu priključio sam izlaznu liniju svog Turpitity testera. Međutim, možete priključiti izlaz u osnovi bilo kojeg senzora koji će vam dati analogno očitanje. To je sve što trebate učiniti da ovo povežete.

Korak 6: Pristup web stranici

Sada kada ste povezali arduino i sve imate učitano na ploče, morate biti u mogućnosti vidjeti html na svom mobilnom telefonu. Sada želim da se povežete na isti WiFi ruter za koji ste postavili SSID i lozinku u kodu na Huzzi. Zatim morate saznati koju je IP adresu vaš usmjerivač dodijelio vašem uređaju. Obično, ako se prijavite u konfiguraciju usmjerivača, trebala bi postojati lista klijenata. To prikazuje IP adrese svih uređaja povezanih na vašu WiFi vezu. Međutim, ako ne možete pronaći ovu IP adresu, možete je isključiti iz arduina i ponovo pokrenuti serijskim kabelom. Ako otvorite serijsku konzolu na uređaju, ona će ispisati IP adresu uređaja u serijskoj konzoli u slučaju da ne možete pronaći drugi način. U svakom slučaju, kada se povežete na istu Wifi mrežu sa svojim mobilnim telefonom. Zatim usmjerite svoj mobilni web preglednik na IP adresu Huzzaha. Što vjerovatno izgleda slično. https://192.168.0.107 ili nešto vrlo slično. Tamo sam stavio osnovnu stranicu koja će vam omogućiti uključivanje i isključivanje 4 LED -a, kao i očitavanje vrijednosti analognog senzora.

Korak 7: Upotreba Javascipta

U datoteci pod nazivom index.h na skici ESP8266Code trebala bi se pojaviti kao zasebna kartica u arduino uređivaču. Ovdje možete vidjeti osnovni primjer koji sam napravio. U osnovi, način na koji funkcionira je ovakav.

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

Ovo će postaviti vrijednost digitalnog pina 12 na visoku

SetPin (4, 0, 0);

Ovo će postaviti vrijednost digitalnog pina 4 na nisku

SetPin (A2, 439, 1) Ovo će postaviti vrijednost analognog pina 2 na 439

Slično, funkcija GetJSON će vratiti traženu vrijednost iz pina i smjestiti je u html označen sa navedenim div ID -om.

GetJSON ('A0', 1, 'resp_i') GetJSON ({PIN broj}, {IsAnalog 1 Da 0 Ne}, {Id HTML elementa za vraćanje rezultata})

Ovo će poslati zahtjev arduinu tražeći od njega vrijednost analognog pina 0 i vratiti rezultat u Div s ID -om resp_iGetJSON (12, 0, 'mydiv'); Ovo će tražiti od arduina da dobije vrijednost digitalnog pina 0 i vrati rezultat u html element sa i ID -om mydiv -a

Korak 8: Podrška

Nadam se da će moj skript pomoći onima od vas koji ga žele koristiti. Ovdje sam koristio vrlo osnovni html primjer u nadi da će drugi ljudi istražiti sve njegove mogućnosti koje ja ne mogu. Međutim, ovo bi trebalo pokazati kako se ajax može koristiti za kontrolu arduina bez učitavanja html stranica i stvari takve prirode.

Ako imate bilo kakvih komentara, slobodno me pitajte, dat ću sve od sebe da odgovorim. Htio bih još proširiti funkcionalnost ovoga, ali ostalo mi je vremena i novca. Međutim, radim na robusnijoj implementaciji ovoga koja čuva datoteke na običnom web serveru, a ne na ESP8266.

Hvala vam što ste odvojili vrijeme da vidite moj kôd.

John AndersonEmail Me

Vermont Internet Design LLC

www.vermontinternetdesign.com