Lengvas būdas valdyti „Arduino“naudojant HTML/„JavaScript“: 8 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:48

Ši pamoka parodo, kaip valdyti „arduino“naudojant „ajax“skambutį iš „adafruit Huzzah“naudojant tik „JavaScript“funkcijas. Iš esmės galite naudoti „javascript“html puslapyje, kuris leis jums lengvai rašyti html sąsajas su paprastomis „JavaScript“funkcijomis, naudojančiomis „ajax“atšaukimą. Kad ESP8266 galėtų bendrauti su arduino. Todėl visus kaiščius galima nustatyti naudojant „JavaScript“funkciją. Panašiai mes taip pat galime nuskaityti vertę iš bet kurio smeigtuko, naudodami „JavaScript“funkciją. Tikiuosi, kad tai padės lengviau valdyti arduino iš html dokumento. Supratau, kad yra daug žmonių, galinčių rašyti html. Dauguma jų nenori vargti bandydami sukurti mobiliojo telefono programą su „Java“ar „xcode“ar kokia nors kita sistema. Tai labai palengvins žmonėms, nes jiems tereikia naudoti „JavaScript“funkciją, kad būtų galima nustatyti ir skaityti vertes iš smeigtukų. Pavyzdžiui, rašyti nėra daug lengviau

Įjungti

Norėdami įjungti mygtuką. Smagu tai, kad nėra jokio kito arduino programavimo, išskyrus pinMode (12, INPUT) deklaravimą; Nustatymo funkcijoje. Kol smeigtukas yra deklaruotas, „JavaScript“galima naudoti viskam kitam.

document.onload = {

„GetJSON“(„A0“, 1 „return_json“)

}

Tai viskas, ką jums reikia padaryti, kad gautumėte analoginio kaiščio 0 reikšmę ir grąžintumėte rezultatą į div. Taigi tai turėtų būti lengvas būdas žmonėms sukurti html puslapius, valdančius arduino. Taip pat sukurkite sąsają, kad arduino kaiščius būtų galima nustatyti ir skaityti naudojant „javascript“.

1 žingsnis: ko jums reikės

Sukūriau šį projektą vartotojams, norintiems valdyti savo arduino naudojant HTML puslapį ESP8266. Šio projekto tikslas yra sukurti paprastą metodą, kaip nustatyti „arduino“kaiščių vertes naudojant „JavaScript“funkciją. Pavyzdžiui, onclick = "SetPin (12, 1, 0)" nustatys jūsų arduino 12 kaištį į aukštą.

Šiai pamokai jums reikės šių elementų, kad galėtumėte tiksliai sekti. Tačiau manau, kad jis turėtų veikti daugelyje arduino ir ESP8266 derinių. Tačiau norint sekti tai, ką čia turiu, jums reikės šių komponentų.

„Arduino Uno“- turėtų dirbti su bet kokiu „arduino“suderinamu įrenginiu, turinčiu nuoseklųjį „Rx TxAdafruit Huzzah Breakout Board“USB į nuoseklųjį kabelį 4 mažos galios šviesos diodų analoginio drumstumo testeris - bet kuris analoginis jutiklis, teikiantis analoginę išvestį, veiks „Wi -Fi“maršrutizatoriaus mobilusis telefonas su mobiliosios naršyklės „Arduino“bibliotekomis.

2 veiksmas: „Arduino ID“paruošimas

Šiam projektui reikalingos naujos arduino bibliotekos ir tam tikra konfigūracija. Aš neįdėsiu kiekvieno ekrano ekrano kopijos ir tiesiog peržiūrėsiu, ko jums reikės, kad tai sukonfigūruotumėte ir paleistumėte. Stengiausi, kad vartotojui tai būtų kuo lengviau.

Kodas naudoja daugybę bibliotekų, kad galėtų dirbti. Pirmiausia sutelksime dėmesį į „arduino“nustatymą ESP8266. Šiame pavyzdyje aš naudoju „Adafruit Huzzah“, nes manau, kad adafruit produktai yra patikimiausi ir turi geriausią palaikymą. Kol nebandysite gauti palaikymo iš „Adafruit Discord“serverio. Jums daug geriau seksis gauti pagalbos palaikymo forumuose.

Bet kokiu atveju, naudoju šias ESP8266 bibliotekas

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONTTai nėra pamoka, kaip atsisiųsti ir įdiegti bibliotekas, tačiau tai yra HUZZAH naudojamos bibliotekos. Taigi suraskite juos ir įdiekite. Taip pat turėsite įdiegti HUZZAH lentos apibrėžimus, taigi, jei einate į FILE> Preferences Lauke, kuriame sakoma „Papildomos lentų tvarkyklės URL“, pridėkite šį https://arduino.esp8266.com/stable/package_esp8266c… jei jau turite ką nors šioje srityje, tada būtinai pridėkite kablelį, kad pridėtumėte papildomą lentos URL. Spustelėkite „Gerai“

Įrankiai> Lenta> Lentų tvarkytuvė Ieškokite ESP8266, nei įdiekite ESP8266 pagal ESP8266 Community.

Puiku dabar leidžia įsitikinti, kad turime viską, ko reikia, kad „arduino“kodas veiktų. Vienas iš „arduino“pusės, pats „arduino“šiai pamokai naudoja tik 2 bibliotekas.

Programinė įrangaSerialArduinoJSONKą jau turėtumėte turėti.

3 žingsnis: ESP8266 paruošimas

Dabar mes įdėsime kodą į ESP8266 („Adafruit HUZZAH“) ir paruošime jį prisijungti prie „Arduino“. Išpakuokite HUZZAH kodą ir atidarykite eskizą. 11 ir 12 eilutėse pakeiskite SSID ir slaptažodį į WIFI ryšio vietiniame tinkle. Pastebėsite, kad eskizo failas ir index.h failas turi 2 failus. „Index.h“faile saugomas html, kuris bus rodomas jūsų telefone.

„Wi -Fi“nustatę teisingą SSID ir slaptažodį, galite surinkti kodą ir įkelti jį į savo ESP8266. „HUZZAH“laikykite nuspaudę mygtuką, pažymėtą GPIO0, tada spustelėkite poilsio mygtuką, tada paleiskite GPIO0 mygtuką, kad įjungtumėte lustą į įkrovos įkėlimo režimą. Jei lustas buvo sėkmingai įjungtas įkrovos įkėlimo režimu, užsidegs raudona lemputė, rodanti, kad lustas veikia įkrovos įkėlimo režimu.

Norėdami prisijungti prie ESP8266, jums reikės nuoseklaus kabelio arba USB į nuoseklųjį adapterį arba FDTI lusto. Šiuo atveju naudoju „Adafruit“kabelį, kaip nurodyta instrukcijose. Tačiau prie mikroschemos galite prisijungti keliais būdais, naudodami TTL ant Tx ir Rx kaiščių. Tikiuosi, kad tai peržiūrintys žmonės žino, kaip prisijungti prie lusto ir įkelti kodą. Bet kokiu atveju eikite į priekį ir mirksėkite mikroschema su kodu, esančiu ZIP faile, kuris pridedamas prie šio veiksmo.

4 žingsnis: „Arduino“paruošimas

Norėdami įkelti kodą į arduino, pakeiskite lentos apibrėžimą į Arduino/Genuino Uno. Išpakuokite failą, pridėtą prie šio veiksmo. Tada įkelkite jį į ardunio. Gana paprasta, visas sunkus darbas jau buvo atliktas už jus. Aš jau išbandžiau klaidą, todėl jums tereikia įkelti kodą.

5 žingsnis: prijunkite viską kartu

Gerai, todėl dėl laidų turiu nuotrauką aukščiau, ką turiu čia.

Prijunkite „Tx“prie „Huzzah“prie „arduino“2 kaiščio. Prijunkite „Rx“prie „Huzzah“prie „arduino“3 kaiščio. Aš sukūriau kitą serijinį lizdą ant 2 ir 3 kaiščių „arduino“, kad atlaisvintumėte numatytąją serijos konsolę.

Prijunkite kaištį V+ ir En prie 5v iš arduino. - „Adafruit Huzzah“turi įmontuotą 3,3 V įtampos reguliatorių, todėl prijungus šiuos kaiščius gali neveikti visi ESP8266 moduliai. Jums gali tekti prijungti savo įtampos reguliatorių. Rekomenduoju naudoti „Huzzah“, jei norite, kad viskas veiktų lengvai. Prijunkite GND prie arduino GND

Šviesos diodų 12, 11, 9, 8 kaiščių ant arduino vielos aš naudojau mažai energijos naudojančius šviesos diodus, nes tie, kurie per daug srovės, gali suvartoti per daug energijos, kad šis eksperimentas būtų paprastas.

Nei „Adu“analoginiame „0“kaištyje „arduino“prijungiau savo „Turpitity“testerio išvesties liniją. Tačiau galite prijungti iš esmės bet kurio jutiklio išvestį, kuri suteiks analoginį rodmenį. Tai viskas, ką jums reikia padaryti, kad tai padarytumėte.

6 veiksmas: prieiga prie tinklalapio

Dabar, kai „arduino“yra prijungtas ir viskas yra įkelta į lentas, turite turėti galimybę peržiūrėti html savo mobiliajame telefone. Dabar noriu, kad prisijungtumėte prie to paties „Wi -Fi“maršrutizatoriaus, kuriam „Huzzah“kode nurodėte SSID ir slaptažodį. Jums reikia išsiaiškinti, kokį IP adresą jūsų įrenginiui priskyrė jūsų maršrutizatorius. Paprastai, jei prisijungiate prie maršrutizatoriaus konfigūracijos, turėtų būti klientų sąrašas. Tai rodo visų prie „Wifi“ryšio prijungtų įrenginių IP adresus. Tačiau, jei nerandate šio IP adreso, galite jį atjungti nuo „arduino“ir vėl paleisti serijiniu kabeliu. Jei įrenginyje atidarysite serijinę konsolę, ji išspausdins serijinėje konsolėje esančio įrenginio IP adresą, jei jo nerasite kitu būdu. Bet kokiu atveju, kai būsite prisijungę prie to paties „Wi -Fi“tinklo su savo mobiliuoju telefonu. Tada nukreipkite savo interneto naršyklę į „Huzzah“IP adresą. Kas tikriausiai atrodo kažkas panašaus į tai. https://192.168.0.107 ar kažkas panašaus. Ten aš įdėjau pagrindinį puslapį, kuris leis jums įjungti ir išjungti 4 šviesos diodus, taip pat perskaityti analoginio jutiklio vertę.

7 žingsnis: „Javascipt“naudojimas

ESP8266Code eskizo faile, pavadintame index.h, jis turėtų atsirasti kaip atskiras skirtukas arduino redaktoriuje. Pagrindinį pavyzdį, kurį padariau, galite pamatyti čia. Iš esmės tai veikia taip.

„SetPin“(12, 1, 0); „SetPin“({PIN numeris}, {1 reikšmė aukšta 0 maža}, {IsAnalog 1 Taip 0 Ne})

Tai nustatys skaitmeninio kaiščio 12 reikšmę į aukštą

„SetPin“(4, 0, 0);

Tai nustatys 4 skaitmeninio kaiščio vertę žemai

SetPin (A2, 439, 1) Tai nustatys 2 analoginio kaiščio reikšmę iki 439

Panašiai funkcija GetJSON grąžins prašomą reikšmę iš kaiščio ir įdės ją į html elementą su nurodytu div ID.

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

Tai atsiųs užklausą arduino, prašydama analoginio kaiščio 0 vertės ir grąžins rezultatą į Div su ID resp_iGetJSON (12, 0, 'mydiv'); Tai paprašys arduino gauti skaitmeninio kaiščio 0 reikšmę ir grąžins rezultatą į html elementą su mydiv ir Id

8 žingsnis: palaikymas

Tikiuosi, kad mano scenarijus padės tiems iš jūsų, kurie nori jį naudoti. Čia panaudojau labai paprastą html pavyzdį su viltimi, kad kiti žmonės ištirs visas jo galimybes, kurių aš negaliu. Tačiau tai turėtų parodyti, kaip „ajax“gali būti naudojamas valdyti „arduino“be html puslapio įkėlimo ir tokio pobūdžio dalykų.

Jei turite kokių nors pastabų, nedvejodami klauskite manęs, aš padarysiu viską, ką galiu atsakyti. Norėčiau dar šiek tiek išplėsti šios funkcijos galimybes, tačiau pritrūko laiko ir pinigų. Tačiau aš stengiuosi tvirtiau įgyvendinti tai, kad failai būtų saugomi įprastame žiniatinklio serveryje, o ne ESP8266.

Dėkojame, kad skyrėte laiko mano kodui peržiūrėti.

John Anderson, parašykite man el

„Vermont Internet Design LLC“

www.vermontinternetdesign.com