Përmbajtje:

Kontrollimi i Arduino -s tuaj me HTML/Javascript Mënyra e Lehtë: 8 Hapa
Kontrollimi i Arduino -s tuaj me HTML/Javascript Mënyra e Lehtë: 8 Hapa

Video: Kontrollimi i Arduino -s tuaj me HTML/Javascript Mënyra e Lehtë: 8 Hapa

Video: Kontrollimi i Arduino -s tuaj me HTML/Javascript Mënyra e Lehtë: 8 Hapa
Video: AI Assistant 🔥 What is the best AI Assistant for wordpress? 2024, Shtator
Anonim
Kontrollimi i Arduino -s tuaj me HTML/Javascript Mënyra e Lehtë
Kontrollimi i Arduino -s tuaj me HTML/Javascript Mënyra e Lehtë

Ky tutorial ju tregon se si të kontrolloni një arduino me një thirrje ajax nga një Huzzah adafruit duke përdorur vetëm funksione javascript. Në thelb ju mund të përdorni javascript në faqen html që do t'ju lejojë të shkruani me lehtësi ndërfaqe html me funksione të thjeshta javascript që përdorin një përgjigje ajax. Për të lejuar që ESP8266 të komunikojë me arduino. Prandaj, të gjitha kunjat mund të vendosen nga një funksion javascript. Po kështu, ne gjithashtu mund të lexojmë vlerën nga çdo pin duke përdorur një funksion javascript. Shpresoj që kjo të ndihmojë në lehtësimin e kontrollit të një arduino nga një dokument html. Kuptova se ka shumë njerëz atje që mund të shkruajnë html. Shumica e të cilëve nuk duan të shqetësohen duke u përpjekur të bëjnë një aplikacion të telefonit celular me java ose xcode ose ndonjë kornizë tjetër. Kjo do ta bëjë shumë të lehtë për njerëzit sepse gjithçka që ata duhet të bëjnë është të përdorin një funksion javascript për të vendosur dhe lexuar vlerat nga kunjat. Për shembull, nuk është shumë më e lehtë të shkruash

Ndez

Për të ndezur një buton. Bukuria është se nuk ka asnjë program tjetër arduino të përfshirë përveç deklarimit të pinMode (12, INPUT); Në funksionin tuaj të konfigurimit. Për sa kohë që pin është deklaruar, atëherë javascript mund të përdoret për gjithçka tjetër.

dokument.ngarkoj = {

GetJSON ('A0', 1 'return_json')

}

Kjo është gjithçka që duhet të bëni për të marrë vlerën e pinit analog 0 dhe për të kthyer rezultatin në div. Pra, kjo duhet të jetë një mënyrë e lehtë për njerëzit që të jenë në gjendje të krijojnë faqe html që kontrollojnë arduino. Si dhe krijoni një ndërfaqe në mënyrë që kunjat arduino të mund të vendosen dhe lexohen me javascript.

Hapi 1: Çfarë ju nevojitet

Unë e ndërtova këtë projekt për përdoruesit që duan të kontrollojnë arduino -n e tyre me një faqe html në një ESP8266. Qëllimi i këtij projekti është të krijojë një metodë të thjeshtë për vendosjen e vlerave të kunjave në arduino tuaj me një funksion javascript. Për examplate onclick = "SetPin (12, 1, 0)" do të vendosë Pin 12 në arduino tuaj në High.

Për këtë tutorial do t'ju duhen artikujt e mëposhtëm në mënyrë që të ndiqni saktësisht. Sidoqoftë, unë supozoj se duhet të funksionojë në shumicën e kombinimeve arduino dhe ESP8266. Sidoqoftë, për të ndjekur saktësisht atë që kam këtu do t'ju nevojiten përbërësit e mëposhtëm.

Arduino Uno - Duhet të punojë me çdo pajtueshmëri arduino që ka një serial Rx TxAdafruit Huzzah Breakout Board USB To Serial Cable 4 Testues Analog Turpidity të LED me fuqi të ulët - çdo sensor analog që siguron dalje analoge do të bëjë telefonin celular Wire Wifi Router Me Browser Mobile Arduino.

Hapi 2: Përgatitja e Arduino ID

Ky projekt kërkon një bibliotekë të re arduino dhe disa konfigurime dhe për hir të kohës. Unë nuk do të vendos një pamje të ekranit të çdo ekrani dhe unë thjesht do të kaloj nëpër atë që ju nevojitet për ta konfiguruar këtë dhe për ta vënë atë në punë. Unë u përpoqa ta bëja atë sa më të lehtë për përdoruesit.

Kodi përdor një numër bibliotekash për të punuar. Së pari ne do të përqëndrohemi në vendosjen e arduino për ESP8266 që unë jam duke përdorur Adafruit Huzzah në këtë shembull, sepse unë gjej që produktet adafruit janë më të besueshmet dhe kanë mbështetjen më të mirë. Për sa kohë që nuk përpiqeni të merrni mbështetje nga serveri Adafruit Discord. Do të keni fat shumë më të mirë duke marrë ndihmë në forume mbështetëse.

Gjithsesi, unë jam duke përdorur bibliotekat e mëposhtme në ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONT Ky nuk është një mësim se si të shkarkoni dhe instaloni biblioteka megjithatë, këto janë bibliotekat e përdorura në HUZZAH. Pra, ju lutemi gjeni ato dhe instaloni ato. Ju gjithashtu do të duhet të instaloni përkufizimet e tabelës për HUZZAH kështu që nëse shkoni te FILE> Preferencat Në kutinë që thotë URL të Menaxherëve të Bordeve shtesë, ju lutemi shtoni sa më poshtë https://arduino.esp8266.com/stable/package_esp8266c… nëse tashmë keni diçka në këtë fushë, sesa sigurohuni që të shtoni një presje atje për të shtuar një url shtesë të bordit. Kliko ok se shko

Mjetet> Bordi> Menaxherët e bordeve Se sa të kërkoni ESP8266 sesa të instaloni ESP8266 nga ESP8266 Community.

E shkëlqyeshme tani lejon të sigurohemi që kemi gjithçka që na nevojitet për të punuar kodin arduino. Njëra nga arduino Ana arduino vetë përdor vetëm 2 biblioteka për këtë tutorial.

SoftueriSerialArduinoJSONQë ju duhet ta keni tashmë.

Hapi 3: Përgatitja e ESP8266

Përgatitja e ESP8266
Përgatitja e ESP8266

Tani ne do të vendosim kodin në ESP8266 (Adafruit HUZZAH) dhe do ta përgatisim atë për t'u lidhur me Arduino. Zbërtheni kodin për HUZZAH dhe hapni skicën. Në rreshtat 11 dhe 12 ndryshoni ssid dhe fjalëkalimin në atë të lidhjes tuaj WIFI në rrjetin tuaj lokal. Ju do të vini re se ka 2 skedarë skedari skedik dhe skedari index.h. Skedari index.h është vendi ku ruhet html që do të shfaqet në telefonin tuaj.

Pasi të keni vendosur SSID -in dhe fjalëkalimin e duhur në wifi -n tuaj, mund të përpiloni kodin dhe ta ngarkoni në ESP8266 tuaj. Në HUZZAH ju duhet të mbani të shtypur butonin e etiketuar GPIO0 pastaj klikoni butonin e pushimit, sesa ta lini butonin GPIO0 për ta futur çipin në modalitetin e ngarkuesit. Nëse çipi është futur me sukses në modalitetin e nisjes, një dritë e kuqe do të ndizet duke treguar se çipi është në modalitetin e ngarkuesit të nisjes.

Për t'u lidhur me ESP8266 do t'ju duhet një kabllo serike ose përshtatës USB në Serial, ose çip FDTI. Në këtë rast unë jam duke përdorur kabllon e adafruit siç shënohet në udhëzimet. Sidoqoftë, mund të lidheni me çipin në disa mënyra, duke përdorur TTL në kunjat Tx dhe Rx. Unë shpresoj që njerëzit që e shikojnë këtë të dinë të lidhen me çipin për të ngarkuar kodin në të. Gjithsesi vazhdoni dhe ndizni çipin me kodin në skedarin zip që i është bashkangjitur këtij hapi.

Hapi 4: Përgatitja e Arduino

Për të ngarkuar kodin në arduino, ndryshoni përkufizimin e bordit tuaj në Arduino/Genuino Uno. Më pas hapni zinxhirin e skedarit që i është bashkangjitur këtij hapi. Se ta ngarkoni në ardunio. Me të vërtetë shumë e thjeshtë, e gjithë puna e vështirë është bërë për ju tashmë. Unë tashmë kam kaluar një proces gabimi në një provë, kështu që gjithçka që duhet të bëni është të ngarkoni kodin.

Hapi 5: Instaloni gjithçka së bashku

Instalimi i gjithçkaje së bashku
Instalimi i gjithçkaje së bashku

Ok kështu për instalimet elektrike kam një foto më lart të asaj që kam këtu.

Lidhni Tx në Huzzah me Pin 2 në arduino. Lidhni Rx në Huzzah me Pin 3 në arduino. Kam krijuar një prizë tjetër serike në kunjat 2 dhe 3 në arduino për të liruar tastierën seriale të paracaktuar.

Lidhni Pin V+ dhe En me 5v nga arduino. - Adafruit Huzzah ka një rregullator të integruar të tensionit 3.3v, kështu që lidhja e këtyre kunjave në këtë mënyrë mund të mos funksionojë me të gjitha modulet ESP8266. Ju mund të keni nevojë të lidhni rregullatorin tuaj të tensionit. Unë rekomandoj përdorimin e Huzzah -it nëse thjesht doni që puna të funksionojë me lehtësi. Lidhni GND me GND të arduino

Në kunjat 12, 11, 9, 8 në tela arduino në LED -të tuaj kam përdorur LED të fuqisë së ulët këtu sepse ato që tërheqin shumë rrymë mund të tërheqin shumë energji për hir të mbajtjes së thjeshtë të këtij eksperimenti.

Se në Pin 0 analog A0 në arduino kam lidhur linjën dalëse të kontrollorit tim Turpitity. Sidoqoftë, mund të lidhni daljen e çdo sensori që do t'ju japë një lexim analog. Kjo është gjithçka që duhet të bëni për ta rregulluar këtë.

Hapi 6: Qasja në Uebfaqe

Tani që arduino është lidhur dhe keni gjithçka të ngarkuar në dërrasat tuaja, duhet të jeni në gjendje të shikoni html në telefonin tuaj celular. Tani dua që ju të lidheni me të njëjtin ruter wifi për të cilin keni vendosur SSID dhe fjalëkalimin në kodin në Huzzah. Atëherë ju duhet të kuptoni se çfarë adresa IP që ruteri juaj i ka caktuar pajisjes tuaj. Zakonisht, nëse hyni në konfigurimin e ruterëve tuaj, duhet të ketë një listë klientësh. Kjo tregon adresat IP të të gjitha pajisjeve të lidhura me lidhjen tuaj Wifi. Sidoqoftë, nëse nuk mund ta gjeni këtë adresë IP, mund ta fikni nga arduino dhe ta ktheni përsëri me kabllin serik. Nëse hapni tastierën serike në pajisje, ajo do të printojë adresën IP të pajisjes në tastierën serike në rast se nuk mund ta gjeni në një mënyrë tjetër. Gjithsesi pasi të jeni lidhur me të njëjtin rrjet Wifi me celularin tuaj. Atëherë drejtojeni shfletuesin tuaj celular në internet në adresën IP të Huzzah. E cila ndoshta duket diçka e ngjashme me këtë. https://192.168.0.107 ose diçka shumë të ngjashme. Aty vendosa një faqe bazë që do t'ju lejojë të ndizni dhe fikni 4 Leds, si dhe të lexoni vlerën e sensorit analog.

Hapi 7: Përdorimi i Javascipt

Në skedarin e quajtur index.h në skicën ESP8266Code duhet të dalë si një skedë e veçantë në redaktorin arduino. Ju mund të shihni shembullin bazë që kam bërë këtu. Në thelb mënyra se si funksionon është si kjo.

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

Kjo do të vendosë vlerën e pinit dixhital 12 në të lartë

SetPin (4, 0, 0);

Kjo do të vendosë vlerën e pinit dixhital 4 në të ulët

SetPin (A2, 439, 1) Kjo do të vendosë vlerën e Analogut Pin 2 në 439

Po kështu, funksioni GetJSON do të kthejë një vlerë të kërkuar nga një kunj dhe do ta vendosë atë në një html të përzgjedhur me ID -në e specifikuar.

GetJSON ('A0', 1, 'resp_i') GetJSON ({Pin Number}, {IsAnalog 1 Po 0 Jo}, {Id Of HTML Element për të kthyer rezultatin})

Kjo do t'i dërgojë një kërkesë arduino -s duke i kërkuar vlerën e pinit analog 0 dhe ta kthejë rezultatin në Div me ID resp_iGetJSON (12, 0, 'mydiv'); Kjo do t'i kërkojë arduino të marrë vlerën e pinit dixhital 0 dhe ta kthejë rezultatin në një element html me dhe Id të mydiv

Hapi 8: Mbështetje

Shpresoj që skenari im të ndihmojë ata prej jush që duan ta përdorin atë. Kam përdorur një shembull shumë themelor html këtu me shpresën se njerëzit e tjerë do të eksplorojnë të gjitha aftësitë e tij që unë nuk mundem. Sidoqoftë, kjo duhet të demonstrojë sesi ajax mund të përdoret për të kontrolluar një arduino pa ngarkesa të faqeve html dhe gjëra të asaj natyre.

Nëse keni ndonjë koment ju lutem mos ngurroni të më pyesni se do të bëj më të mirën që mundem për t'iu përgjigjur. Unë do të doja të zgjeroja funksionalitetin e kësaj edhe më shumë, por më mbaruan koha dhe paratë. Sidoqoftë, unë jam duke punuar në një zbatim më të fuqishëm të kësaj, që ruan skedarët në një server të rregullt në internet sesa në ESP8266.

Faleminderit që morët kohë për të parë kodin tim.

John AndersonMail Me

Vermont Internet Design LLC

www.vermontinternetdesign.com

Recommended: