Arduinon hallinta HTML/Javascriptin avulla helposti: 8 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:03

Tämä opetusohjelma näyttää, kuinka voit hallita arduinoa ajax -soittamalla takaisin adafruit Huzzahista käyttämällä vain javascript -toimintoja. Pohjimmiltaan voit käyttää javascriptiä html -sivulla, jonka avulla voit helposti kirjoittaa html -käyttöliittymiä yksinkertaisilla javascript -toiminnoilla, jotka käyttävät ajax -takaisinsoittoa. Jotta ESP8266 voisi kommunikoida arduinon kanssa. Siksi kaikki nastat voidaan asettaa javascript -toiminnolla. Samoin voimme myös lukea arvon mistä tahansa nastasta käyttämällä javascript -toimintoa. Toivon, että tämä auttaa helpottamaan arduinon hallintaa html -asiakirjasta. Ajattelin, että siellä on paljon ihmisiä, jotka voivat kirjoittaa html -tiedostoja. Suurin osa heistä ei halua vaivautua tekemään matkapuhelinsovellusta, jossa on Java- tai xcode -koodi tai jokin muu kehys. Tämä tekee siitä erittäin helpon ihmisille, koska heidän tarvitsee vain käyttää JavaScript -toimintoa arvojen asettamiseen ja lukemiseen nastoista. Esimerkiksi kirjoittaminen ei ole paljon helpompaa

Kiihottua

Painikkeen kytkemiseksi päälle. Kaunista on, että ei ole muita arduino -ohjelmointeja kuin pinMode -ilmoituksen (12, INPUT); Asetustoiminnossa. Niin kauan kuin nasta on ilmoitettu, javascriptiä voidaan käyttää kaikkeen muuhun.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Tämä on kaikki mitä sinun tarvitsee tehdä saadaksesi analogisen nastan 0 arvon ja palauttaa tuloksen div. Joten tämän pitäisi olla helppo tapa, jolla ihmiset voivat luoda hdml -sivuja, jotka ohjaavat arduinoa. Luo käyttöliittymä, jotta arduino -nastat voidaan asettaa ja lukea javascriptilla.

Vaihe 1: Mitä tarvitset

Rakensin tämän projektin käyttäjille, jotka haluavat hallita arduinoaan ESP8266: n html -sivulla. Tämän projektin tavoitteena on luoda yksinkertainen tapa asettaa arduino -nastasi arvot javascript -toiminnolla. Esimerkki onclick = "SetPin (12, 1, 0)" asettaa arduino -nastasi 12 korkeaksi.

Tätä opetusohjelmaa varten tarvitset seuraavat kohteet seurataksesi tarkasti. Oletan kuitenkin, että sen pitäisi toimia useimmilla arduino- ja ESP8266 -yhdistelmillä. Tarvitset kuitenkin seuraavia osia seurataksesi sitä, mitä minulla on täällä.

Arduino Uno - Pitäisi toimia kaikkien sellaisten arduino -yhteensopivien laitteiden kanssa, joissa on sarjaliitäntä Rx TxAdafruit Huzzah Breakout Board USB -sarjakaapeliin 4 pienitehoinen LED: n analoginen turpiditystesti - mikä tahansa analoginen anturi, joka tarjoaa analogisen lähdön, toimii langattoman Wifi -reitittimen matkapuhelimessa Arduino -kirjastojen kanssa.

Vaihe 2: Arduino -tunnuksen valmistelu

Tämä projekti vaatii uusia arduino -kirjastoja ja jonkin verran kokoonpanoa ja ajan vuoksi. En aio ottaa kuvakaappausta jokaisesta näytöstä, ja aion vain käydä läpi, mitä tarvitset tämän määrittämiseen ja käynnistämiseen. Yritin tehdä siitä mahdollisimman helppoa käyttäjälle.

Koodi käyttää useita kirjastoja päästäkseen töihin. Ensin keskitymme arduinon määrittämiseen ESP8266: lle. Käytän tässä esimerkissä Adafruit Huzzahia, koska mielestäni adafruit -tuotteet ovat luotettavimpia ja niillä on paras tuki. Niin kauan kuin et yritä saada tukea Adafruit Discord -palvelimelta. Sinulla on paljon parempi onni saada apua tukifoorumeilla.

Käytän joka tapauksessa seuraavia ESP8266 -kirjastoja

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONTTämä ei ole opetusohjelma kirjastojen lataamisesta ja asentamisesta, mutta nämä ovat HUZZAH: ssa käytettyjä kirjastoja. Joten etsi ne ja asenna ne. Sinun on myös asennettava HUZZAH -levyn määritelmät, joten jos siirryt kohtaan TIEDOSTO> Asetukset Lisäkorttien hallinnan URL -osoitteet -kenttään lisää seuraava https://arduino.esp8266.com/stable/package_esp8266c… jos sinulla on jo jotain tällä alalla, varmista, että lisäät pilkun sinne lisätäksesi ylimääräisen taulun URL -osoitteen. Napsauta OK

Työkalut> Hallitus> Taulut Hallinnoi Etsi ESP8266 kuin asenna ESP8266 by ESP8266 Community.

Suuri nyt varmistaa, että meillä on kaikki mitä tarvitsemme saadaksesi arduino -koodin toimimaan. Yksi arduino -puolelta arduino itse käyttää vain 2 kirjastoa tähän opetusohjelmaan.

OhjelmistoSerialArduinoJSONMikä sinulla jo pitäisi olla.

Vaihe 3: ESP8266: n valmistelu

Nyt aiomme laittaa koodin ESP8266: een (Adafruit HUZZAH) ja valmistella sen muodostamaan yhteyden Arduinoon. Pura HUZZAH: n koodi ja avaa luonnos. Vaihda riveillä 11 ja 12 SSID ja salasana paikallisen verkon WIFI -yhteyden salasanaksi. Huomaat, että luonnos- ja index.h -tiedostossa on kaksi tiedostoa. Index.h -tiedostoon tallennetaan puhelimessasi näkyvä html -tiedosto.

Kun olet asettanut wifi -laitteellesi oikean SSID -tunnuksen ja salasanan, voit koota koodin ja ladata sen ESP8266 -laitteeseesi. HUZZAH -laitteessa sinun on pidettävä painettuna GPIO0 -painiketta ja napsautettava sitten lepopainiketta, ennen kuin päästettävä irti GPIO0 -painikkeesta, jotta siru siirtyy käynnistyslataustilaan. Jos siru on onnistuneesti asetettu käynnistyslataustilaan, punainen valo syttyy, mikä osoittaa, että siru on käynnistyslataustilassa.

Yhteyden muodostamiseen ESP8266 -laitteeseen tarvitset sarjakaapelin tai USB -sarja -sovittimen tai FDTI -sirun. Tässä tapauksessa käytän Adafruit -kaapelia ohjeiden mukaisesti. Voit kuitenkin kytkeä sirun useilla tavoilla käyttämällä TTL: ää Tx- ja Rx -nastoissa. Toivon, että ihmiset, jotka katsovat tätä, tietävät, miten kytkeä siru ladatakseen sen koodin. Joka tapauksessa, mene eteenpäin ja vilkaise siru koodilla tämän vaiheen liitteenä olevassa zip -tiedostossa.

Vaihe 4: Arduinon valmistelu

Jos haluat ladata koodin arduinoon, vaihda kortin määritelmäksi Arduino/Genuino Uno. Pura sitten tähän vaiheeseen liitetty tiedosto. Lataa se ardunioon. Todella yksinkertaista, kaikki kova työ on jo tehty puolestasi. Olen jo käynyt läpi kokeilu -virheprosessin, joten sinun tarvitsee vain ladata koodi.

Vaihe 5: Johdotus kaikki yhteen

Ok, joten johdotuksessa minulla on kuva yllä, mitä minulla on täällä.

Liitä Huxan Tx arduinon nastaan 2 ja Huzzahin Rx arduinon nastaan 3. Luin toisen sarjaliitännän arduinon nastoihin 2 ja 3 vapauttaaksesi oletusarvoisen sarjakonsolin.

Liitä nasta V+ ja En 5 V: iin arduinosta. - Adafruit Huzzahissa on sisäänrakennettu 3,3 voltin jännitesäädin, joten näiden nastojen liittäminen ei ehkä toimi kaikkien ESP8266 -moduulien kanssa. Sinun on ehkä johdotettava oma jännitesäädin. Suosittelen Huzzahin käyttöä, jos haluat vain saada asian toimimaan helposti. Liitä GND arduinon GND: hen

LEDien arduino -johdon nastoissa 12, 11, 9, 8 käytin täällä pienitehoisia LED -valoja, koska ne, jotka vetävät liikaa virtaa, voivat kuluttaa liikaa virtaa tämän kokeilun yksinkertaisuuden vuoksi.

Kuin Adu -analogisella nastalla 0 arduinossa, olen kytkenyt Turpitity -testerin ulostulolinjan. Voit kuitenkin kytkeä lähtökohtaisesti minkä tahansa anturin, joka antaa sinulle analogisen lukeman. Se on kaikki mitä sinun tarvitsee tehdä tämän johtamiseksi.

Vaihe 6: Verkkosivun käyttäminen

Nyt kun arduino on kytketty ja olet ladannut kaiken levyllesi, sinun on voitava katsella html -tiedostoa matkapuhelimellasi. Nyt haluan sinun muodostavan yhteyden samaan wifi -reitittimeen, jolle asetit SSID: n ja salasanan Huzzahin koodissa. Sinun on selvitettävä, minkä IP -osoitteen reititin on määrittänyt laitteellesi. Yleensä, jos kirjaudut reitittimen kokoonpanoon, pitäisi olla asiakasluettelo. Se näyttää kaikkien Wifi -yhteyteesi yhdistettyjen laitteiden IP -osoitteet. Jos et kuitenkaan löydä tätä IP -osoitetta, voit irrottaa sen arduinosta ja käyttää sitä sarjakaapelilla uudelleen. Jos avaat laitteen sarjakonsolin, se tulostaa IP -osoitteen sarjakonsolin laitteelle, jos et löydä sitä muulla tavalla. Joka tapauksessa, kun olet muodostanut yhteyden samaan Wifi -verkkoon matkapuhelimesi kanssa. Osoita mobiiliverkkoselaimesi Huzzahin IP -osoitteeseen. Mikä luultavasti näyttää tältä. https://192.168.0.107 tai jotain vastaavaa. Siellä laitoin perussivun, jonka avulla voit kytkeä päälle ja pois päältä 4 lediä ja lukea analogisen anturin arvon.

Vaihe 7: Javasciptin käyttö

ESP8266Code -luonnoksen index.h -nimisessä tiedostossa sen pitäisi näkyä erillisenä välilehdenä arduino -editorissa. Voit nähdä tekemäni perusesimerkin täältä. Pohjimmiltaan se toimii näin.

SetPin (12, 1, 0); SetPin ({PIN -numero}, {Arvo 1 Korkea 0 Matala}, {IsAnalog 1 Kyllä 0 Ei})

Tämä asettaa digitaalisen nastan 12 arvon suureksi

SetPin (4, 0, 0);

Tämä asettaa digitaalisen nastan 4 arvon matalaksi

SetPin (A2, 439, 1) Tämä asettaa analogisen nastan 2 arvoksi 439

Samoin funktio GetJSON palauttaa pyydetyn arvon nastalta ja sijoittaa sen html -elementtiin, jolla on määritetty div -tunnus.

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

Tämä lähettää arduinoon pyynnön, jossa se pyytää analogisen nastan 0 arvoa ja palauttaa tuloksen Div -tunnukseen tunnuksella resp_iGetJSON (12, 0, 'mydiv'); Tämä pyytää arduinoa saamaan digitaalisen nastan 0 arvon ja palauttamaan tuloksen html -elementtiin ja mydiv -tunnuksella

Vaihe 8: Tuki

Toivon, että skriptini auttaa niitä teistä, jotka haluavat käyttää sitä. Käytin täällä hyvin yksinkertaista html -esimerkkiä toivoen, että muut ihmiset tutkivat kaikki sen ominaisuudet, joita en voi. Tämän pitäisi kuitenkin osoittaa, kuinka ajaxia voidaan käyttää arduinon hallintaan ilman html -sivujen lataamista ja vastaavia asioita.

Jos sinulla on kommentteja, kysy rohkeasti, yritän parhaani mukaan vastata. Haluaisin laajentaa tämän toiminnallisuutta vielä jonkin verran, mutta aika ja raha loppuivat. Pyrin kuitenkin toteuttamaan tätä tehokkaammin, jolloin tiedostot tallennetaan tavalliseen verkkopalvelimeen ESP8266: n sijaan.

Kiitos, että käytit aikaa koodini katsomiseen.

John AndersonSähköposti minulle

Vermont Internet Design LLC

www.vermontinternetdesign.com