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

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:37

Ovaj vodič vam pokazuje kako kontrolirati arduino uz ajax povratni poziv s 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 povratni poziv ajaxa. Omogućiti ESP8266 komunikaciju s arduinom. Stoga se svi pinovi mogu postaviti iz javascript funkcije. Isto tako, vrijednost možemo očitati i iz bilo kojeg pina pomoću javascript funkcije. Nadam se da će ovo pomoći u olakšavanju kontrole arduina iz html dokumenta. Zaključio sam da postoji mnogo ljudi koji mogu pisati html. Većina njih ne želi se truditi napraviti aplikaciju za mobitel s javom ili xcodeom ili nekim drugim okvirom. To će ljudima jako olakšati jer sve što trebaju učiniti je koristiti funkciju JavaScript za postavljanje i čitanje vrijednosti iz pinova. Na primjer, nije li lakše pisati

Upaliti

Da biste uključili gumb. Ljepota je u tome što nema drugog arduino programiranja osim deklariranja 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: Ono što će vam trebati

Ovaj sam projekt izgradio 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)" postavit će 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 točno 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 razbojnu ploču USB na serijski kabel 4 Analogni ispitivač zamućenosti LED -a male snage - svaki analogni senzor koji pruža analogni izlaz poslužit će putem žičanog mobitela Wi -Fi usmjerivača s Arduino knjižnicama mobilnog preglednika.

Korak 2: Priprema Arduino ID -a

Ovaj projekt zahtijeva nove arduino knjižnice i određenu konfiguraciju, a radi vremena. Neću stavljati snimak svakog zaslona na ekran i samo ću proći kroz ono što vam je potrebno da ga konfigurirate i pokrenete. Pokušao sam maksimalno olakšati korisniku.

Kôd koristi brojne knjižnice za rad. Prvo ćemo se usredotočiti na postavljanje arduina za ESP8266. U ovom primjeru koristim Adafruit Huzzah, jer smatram da su proizvodi od adafruta najpouzdaniji i imaju najbolju podršku. Sve dok ne pokušavate dobiti podršku s poslužitelja Adafruit Discord. Imat ćete mnogo više sreće ako dobijete pomoć na forumima za podršku.

U svakom slučaju, koristim sljedeće knjižnice na ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONTOvo nije vodič za preuzimanje i instaliranje knjižnica, međutim, to su knjižnice 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ćehttps://arduino.esp8266.com/stable/package_esp8266c…ako već imate nešto u ovom polju, pa svakako unesite zarez kako biste dodali dodatni url ploče. Pritisnite u redu pa idite

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

Odlično sada, provjerimo imamo li sve što je potrebno za rad arduino koda. Jedna arduino strana Arduino koristi samo 2 knjižnice 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 lokalnoj mreži. Primijetit ćete da postoje 2 datoteke datoteka skice i datoteka index.h. 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 s oznakom GPIO0, zatim pritisnuti gumb za odmor, a zatim pustiti tipku GPIO0 da biste prebacili čip u način podizanja sustava. Ako je čip uspješno premješten 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 gledaju ovo znati spojiti se na čip kako bi na njega učitali kôd. U svakom slučaju, nastavite i bljeskajte čip s kodom u zip datoteci koji je priložen ovom koraku.

Korak 4: Priprema Arduina

Za učitavanje koda 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 za vas je već obavljen. Već sam prošao proces pokušaja pogreške pa sve što trebate učiniti je učitati kôd.

Korak 5: Ožičite sve zajedno

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

Spojite Tx na Huzzi na Pin 2 na arduinu. Spojite Rx na Huzzi na 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 Huzzaha samo ako želite da stvar radi bez problema. 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 crpe 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

Sad kad ste arduino ožičili i sve imate učitano na ploče, potrebno je da možete vidjeti html na svom mobilnom telefonu. Sada želim da se povežete na isti WiFi usmjerivač za koji ste postavili SSID i lozinku za kôd na Huzzi. Zatim morate shvatiti koju je IP adresu usmjerivač dodijelio vašem uređaju. Obično, ako se prijavite u konfiguraciju usmjerivača, trebao bi postojati popis 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 ponovno pokrenuti serijskim kabelom. Ako otvorite serijsku konzolu na uređaju, ispisat će IP adresu uređaja u serijskoj konzoli u slučaju da je ne možete pronaći na drugi način. U svakom slučaju, kad se s mobitelom povežete na istu Wifi mrežu. Zatim usmjerite svoj mobilni web preglednik na IP adresu Huzzaha. Što vjerojatno izgleda nešto slično ovome. 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: Korištenje 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 radi je ovakav.

SetPin (12, 1, 0); SetPin ({PIN broj}, {Vrijednost 1 visoka 0 niska}, {IsAnalog 1 Da 0 Ne})

Time će se vrijednost digitalnog pina 12 postaviti na visoku

SetPin (4, 0, 0);

Time će se vrijednost digitalnog pina 4 postaviti na nisku

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

Slično, funkcija GetJSON vratit će traženu vrijednost iz pina i smjestiti je u html elemted s 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

Korak 8: Podrška

Nadam se da će moj scenarij pomoći onima od vas koji ga žele koristiti. Ovdje sam koristio vrlo osnovni html primjer s nadom 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, učinit ću sve što mogu da odgovorim. Htio bih ovo još proširiti, ali ostalo mi je vremena i novca. Međutim, radim na robusnijoj implementaciji ovoga koja pohranjuje datoteke na običnom web poslužitelju, a ne na ESP8266.

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

John AndersonPošaljite mi e -poruku

Vermont Internet dizajn LLC

www.vermontinternetdesign.com