Pagkontrol sa Iyong Arduino Sa HTML / Javascript ang Madaling Daan: 8 Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:14

Ipinapakita sa iyo ng tutorial na ito kung paano makontrol ang isang arduino gamit ang isang ajax na tawag pabalik mula sa isang adafruit Huzzah na gumagamit lamang ng mga javascript function. Karaniwan maaari kang gumamit ng javascript sa pahina ng html na magpapahintulot sa iyo na madaling magsulat ng mga interface ng html na may mga simpleng pag-andar ng javascript na gumagamit ng isang ajax callback. Upang payagan ang ESP8266 na makipag-usap sa arduino. Samakatuwid, ang lahat ng mga pin ay maaaring itakda mula sa isang javascript function. Gayundin, maaari din nating basahin ang halaga mula sa anumang pin gamit ang isang javascript function. Inaasahan kong makakatulong ito upang mas madali itong makontrol ang isang arduino mula sa isang html na dokumento. Naisip ko na maraming mga tao doon na maaaring sumulat ng html. Karamihan sa kanino ay ayaw mag-abala sa pagsubok na gumawa ng isang cell phone app na may java o xcode o ilang iba pang balangkas. Napakadali nito para sa mga tao dahil ang kailangan lamang nilang gawin ay ang paggamit ng isang javascript function upang maitakda at basahin ang mga halaga mula sa mga pin. Halimbawa, hindi ba mas madaling magsulat

Buksan

Upang mai-on ang isang pindutan. Ang kagandahan ay wala nang ibang kasamang arduino program na kasangkot bukod sa ideklara ang pinMode (12, INPUT); Sa iyong pag-set up na pag-andar. Hangga't ang pin ay ipinahayag kaysa sa javascript ay maaaring magamit para sa lahat ng iba pa.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Ito lang ang kailangan mong gawin upang makuha ang halaga ng analog pin 0 at ibalik ang resulta sa div. Kaya't ito ay dapat na isang madaling paraan para makalikha ang mga tao ng mga pahina ng html na kumokontrol sa arduino. Pati na rin lumikha ng isang interface upang ang mga arduino pin ay maaaring itakda at basahin gamit ang javascript.

Hakbang 1: Ano ang Kakailanganin Mo

Itinayo ko ang proyektong ito para sa mga gumagamit na nais makontrol ang kanilang arduino gamit ang isang pahina ng html sa isang ESP8266. Ang layunin ng proyektong ito ay upang lumikha ng isang simpleng pamamaraan para sa pagtatakda ng mga halaga ng mga pin sa iyong arduino na may isang javascript function. Para sa halimbawang onclick = "SetPin (12, 1, 0)" itatakda ang Pin 12 sa iyong arduino sa Mataas.

Para sa tutorial na ito kakailanganin mo ang mga sumusunod na item upang sumunod nang eksakto. Gayunpaman, ipinapalagay ko na dapat itong gumana sa karamihan ng mga kumbinasyon ng arduino at ESP8266. Gayunpaman, upang sundin kasama ang eksaktong mayroon ako dito kakailanganin mo ang mga sumusunod na sangkap.

Arduino Uno - Dapat na gumana sa anumang arduino compatiable na mayroong isang serial Rx TxAdafruit Huzzah Breakout Board USB To Serial Cable 4 low power LED's Analog Turpidity testor - anumang analog sensor na nagbibigay ng analog output ay gagawin Wire Wifi Router Cell Phone With Mobile Browser Arduino Library.

Hakbang 2: Paghahanda ng Arduino ID

Ang proyektong ito ay nangangailangan ng isang bagong arduino library at ilang pagsasaayos at alang-alang sa oras. Hindi ako maglalagay ng isang sreenshot ng bawat screen at tatakbo lamang ako sa kung ano ang kakailanganin mong i-configure ito at patakbuhin ito. Sinubukan kong gawin itong kasing dali para sa gumagamit.

Gumagamit ang code ng isang bilang ng mga aklatan upang makapagtrabaho. Una ay magtutuon kami sa pag-set up ng arduino para sa ESP8266 na ginagamit ko ang Adafruit Huzzah sa halimbawang ito, sapagkat nakikita ko ang mga produktong adafruit na pinaka maaasahan at may pinakamahusay na suporta. Hangga't hindi mo sinusubukan na makakuha ng suporta mula sa server ng Adafruit Discord. Magkakaroon ka ng mas mahusay na swerte sa pagkuha ng tulong sa mga forum ng suporta.

Anyways, gumagamit ako ng mga sumusunod na aklatan sa ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONHindi ito isang tutorial sa kung paano mag-download at mag-install ng mga aklatan gayunpaman, ito ang mga silid aklatan na ginamit sa HUZZAH. Kaya mangyaring hanapin ang mga ito at i-install ang mga ito. Kakailanganin mo ring i-install ang mga kahulugan ng board para sa HUZZAH kaya kung pupunta ka sa FILE> Mga Kagustuhan Sa kahon na nagsasabing Mga karagdagang Boards Manager URL mangyaring idagdag ang sumusunodhttps://arduino.esp8266.com/stable/package_esp8266c… kung mayroon ka na isang bagay sa patlang na ito, kaysa tiyakin na magdagdag ka ng isang kuwit doon upang magdagdag ng isang karagdagang url ng board. Mag-click ok na go

Mga tool> Lupon> Mga Tagapamahala ng Lupon Kaysa sa paghahanap para sa ESP8266 kaysa i-install ang ESP8266 ng ESP8266 Komunidad.

Mahusay ngayon hinahayaan siguraduhin na mayroon tayo ng lahat ng kailangan natin upang mabuhay ang code ng arduino. Isa sa Arduino Side ang arduino mismo ay gumagamit lamang ng 2 mga aklatan para sa tutorial na ito.

SoftwareSerialArduinoJSONNaong dapat mo na magkaroon.

Hakbang 3: Paghahanda ng ESP8266

Ngayon ay ilalagay namin ang code sa ESP8266 (Adafruit HUZZAH) at ihanda ito para sa pagkonekta sa Arduino. I-zip ang code para sa HUZZAH at buksan ang sketch. Sa mga linya 11 at 12 palitan ang ssid at password sa iyong koneksyon sa WIFI sa iyong lokal na network. Mapapansin mo na mayroong 2 mga file ang sketch file at ang index.h file. Ang file ng index.h ay kung saan naka-imbak ang html na ipapakita sa iyong telepono.

Matapos mong maitakda ang tamang SSID at password sa iyong wifi maaari mong isulat ang code at mai-load ito sa iyong ESP8266. Sa HUZZAH dapat mong pindutin nang matagal ang Button na may label na GPIO0 pagkatapos ay i-click ang rest button, kaysa bitawan ang pindutan ng GPIO0 upang ilagay ang chip sa bootloader mode. Kung ang chip ay matagumpay na inilagay sa mode ng bootloader isang pulang ilaw ay bubuksan na nagpapahiwatig na ang chip ay nasa boot loader mode.

Upang kumonekta sa ESP8266 kakailanganin mo ang isang serial cable o USB sa Serial adapter, o FDTI chip. Sa kasong ito gumagamit ako ng cable ng adafruit tulad ng nabanggit sa mga tagubilin. Gayunpaman, maaari kang mag-hook hanggang sa maliit na tilad ng maraming paraan, gamit ang TTL sa mga Tx at Rx pin. Alin ang inaasahan kong alam ng mga taong tumitingin dito kung paano mag-hook up sa chip upang mai-load ang code dito. Kahit papaano magpatuloy at i-flash ang chip na may code sa zip file na naka-attach sa hakbang na ito.

Hakbang 4: Paghahanda ng Arduino

Upang mai-load ang code sa arduino, baguhin ang kahulugan ng iyong board sa Arduino / Genuino Uno. Kaysa sa i-unzip ang file na naka-attach sa hakbang na ito. Kaysa i-upload ito sa ardunio. Medyo simple talaga, lahat ng pagsusumikap ay nagawa na para sa iyo. Naranasan ko na ang isang pagsubok ng isang proseso ng error kaya ang kailangan mo lang gawin ay i-upload ang code.

Hakbang 5: Magkabit ng Lahat ng Magkasama

Ok kaya para sa mga kable mayroon akong larawan sa itaas ng kung ano ang mayroon ako dito.

Ikonekta ang Tx sa Huzzah sa Pin 2 sa arduino. Ikonekta ang Rx sa Huzzah sa Pin 3 sa arduino. Lumikha ako ng isa pang serial socket sa mga pin 2 at 3 sa arduino upang palayain ang default na Serial Console.

Ikonekta ang Pin V + at En sa 5v mula sa arduino. - Ang adafruit Huzzah ay may built in voltage na 3.3v regulator kaya ang pag-plug ng mga pin na katulad nito ay maaaring hindi gumana sa lahat ng mga module ng ESP8266. Maaaring kailanganin mong mag-wire sa iyong sariling boltahe regulator. Inirerekumenda ko ang paggamit ng Huzzah kung nais mo lamang makuha ang bagay na gumana nang madali. Ikonekta ang GND sa GND ng arduino

Sa mga pin 12, 11, 9, 8 sa arduino wire sa iyong mga LED ginamit ko dito ang mga low powered LED dahil ang mga nakakakuha ng sobrang kasalukuyang ay maaaring gumuhit ng sobrang lakas para sa kapakanan ng pagpapanatiling simple ng eksperimentong ito.

Kaysa sa A0 analog Pin 0 sa arduino na naka-plug ako sa linya ng output ng aking Turpitity tester. Gayunpaman, maaari mong i-plug ang output ng karaniwang anumang sensor na magbibigay sa iyo ng isang pagbasa ng analog. Iyon lang ang kailangan mong gawin upang mai-wire ito.

Hakbang 6: Pag-access sa Webpage

Ngayon na mayroon ka ng arduino wired up at mayroon ka ng lahat ng na-load sa iyong mga board kailangan mo upang matingnan ang html sa iyong mobile phone. Ngayon gusto kong kumonekta ka sa parehong router ng wifi na itinakda mo ang SSID at password para sa code sa Huzzah. Kaysa kailangan mong malaman kung anong IP address na itinalaga ng iyong router sa iyong aparato. Karaniwan, kung nag-log in ka sa iyong pagsasaayos ng mga router dapat mayroong isang listahan ng kliyente. Ipinapakita nito ang mga IP address ng lahat ng mga aparato na nakakonekta sa iyong koneksyon sa Wifi. Gayunpaman, kung hindi mo mahahanap ang IP address na ito kaysa sa maaari mong i-un plug ito mula sa arduino at patakbuhin ito gamit muli ang serial cable. Kung bubuksan mo ang serial console sa aparato mai-print nito ang IP address sa aparato sa serial console kung sakaling hindi mo ito makita sa ibang paraan. Anyways kapag nakakonekta ka sa parehong network ng Wifi sa iyong cell phone. Kaysa ituro ang iyong mobile web browser sa ip address ng Huzzah. Na marahil ay mukhang isang bagay na katulad nito. https://192.168.0.107 o isang bagay na magkatulad. Doon inilagay ko sa isang pangunahing pahina na magpapahintulot sa iyo na i-on at i-off ang 4 Leds pati na rin basahin ang halaga ng analog sensor.

Hakbang 7: Paggamit ng Javascipt

Sa file na tinatawag na index.h sa sketch ng ESP8266Code dapat itong lumabas bilang isang hiwalay na tab sa arduino editor. Maaari mong makita ang pangunahing halimbawa na ginawa ko rito. Karaniwan ang paraan ng paggana nito ay ganito.

SetPin (12, 1, 0); SetPin ({Pin Number}, {Halaga ng 1 Mataas 0 Mababa}, {IsAnalog 1 Oo 0 Hindi})

Itatakda nito ang halaga ng digital pin 12 hanggang mataas

SetPin (4, 0, 0);

Itatakda nito ang halaga ng digital pin 4 sa mas mababa

SetPin (A2, 439, 1) Itatakda nito ang halaga ng Analog Pin 2 hanggang 439

Gayundin, ang pagpapaandar na GetJSON ay magbabalik ng isang hiniling na halaga mula sa isang pin at ilagay ito sa isang html na elemted kasama ang tinukoy na div Id.

GetJSON ('A0', 1, 'resp_i') GetJSON ({Pin Number}, {IsAnalog 1 Oo 0 Hindi}, {Id Ng Elementong HTML na ibabalik ang resulta})

Magpadala ito ng isang kahilingan sa arduino na hinihiling ito para sa halaga ng analog pin 0 at ibalik ang resulta sa Div na may ID resp_iGetJSON (12, 0, 'mydiv'); Hihilingin nito sa arduino na makuha ang halaga ng digital pin 0 at ibalik ang resulta sa isang elemento ng html na may at Id ng mydiv

Hakbang 8: Suporta

Inaasahan ko na ang aking script ay makakatulong sa iyong nais na gamitin ito. Gumamit ako ng isang napaka-pangunahing halimbawa ng html dito na may pag-asang matutuklasan ng ibang mga tao ang lahat ng mga kakayahan nito na hindi ko magawa. Gayunpaman, dapat itong ipakita kung paano maaaring gamitin ang ajax upang makontrol ang isang arduino nang walang mga pag-load ng pahina ng html at mga bagay na likas na katangian.

Kung mayroon kang anumang mga puna mangyaring huwag mag-atubiling magtanong sa akin gagawin ko ang makakaya upang masagot. Gusto kong palawakin ang pag-andar ng ito nang higit pa, ngunit naubusan ako ng oras at pera. Gayunpaman, nagtatrabaho ako sa isang mas matatag na pagpapatupad nito, na nag-iimbak ng mga file sa isang regular na webserver kaysa sa ESP8266.

Salamat sa paglalaan ng oras upang makita ang aking code.

John AndersonEmail Me

Vermont Internet Design LLC

www.vermontinternetdesign.com