Vienkāršs veids, kā kontrolēt savu Arduino, izmantojot HTML/Javascript: 8 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:57

Šī apmācība parāda, kā kontrolēt arduino ar ajax zvanu no adafruit Huzzah, izmantojot tikai javascript funkcijas. Būtībā jūs varat izmantot javascript html lapā, kas ļaus jums viegli rakstīt html saskarnes ar vienkāršām javascript funkcijām, kas izmanto ajax atzvanīšanu. Lai ļautu ESP8266 sazināties ar arduino. Tāpēc visas tapas var iestatīt no javascript funkcijas. Tāpat mēs varam arī nolasīt vērtību no jebkuras tapas, izmantojot JavaScript funkciju. Es ceru, ka tas palīdz atvieglot iespēju kontrolēt arduino no html dokumenta. Es sapratu, ka tur ir daudz cilvēku, kuri var rakstīt html. Lielākā daļa no viņiem nevēlas apnikt, mēģinot izveidot mobilā tālruņa lietotni ar java vai xcode vai kādu citu sistēmu. Tas cilvēkiem padarīs to ļoti vienkāršu, jo viss, kas viņiem jādara, ir izmantot javascript funkciju, lai iestatītu un nolasītu vērtības no tapām. Piemēram, vai nav daudz vieglāk rakstīt

Ieslēdz

Lai ieslēgtu pogu. Skaistums ir tas, ka nav citas arduino programmēšanas, izņemot pinMode deklarēšanu (12, INPUT); Jūsu iestatīšanas funkcijā. Kamēr spraudīte ir deklarēta, javascript var izmantot visam pārējam.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

Tas ir viss, kas jums jādara, lai iegūtu analogās tapas 0 vērtību un atgrieztu rezultātu div. Tātad tam vajadzētu būt vienkāršam veidam, kā cilvēki var izveidot html lapas, kas kontrolē arduino. Kā arī izveidot saskarni, lai arduino tapas varētu iestatīt un lasīt, izmantojot javascript.

1. darbība. Kas jums būs nepieciešams

Es izveidoju šo projektu lietotājiem, kuri vēlas kontrolēt savu arduino, izmantojot ESP8266 html lapu. Šī projekta mērķis ir izveidot vienkāršu metodi arduino tapu vērtību iestatīšanai ar javascript funkciju. Piemēram, onclick = "SetPin (12, 1, 0)" jūsu arduino 12. tapu iestatīs uz Augsta.

Šai apmācībai jums būs nepieciešami šādi vienumi, lai precīzi sekotu līdzi. Tomēr es pieņemu, ka tam vajadzētu darboties lielākajā daļā arduino un ESP8266 kombināciju. Tomēr, lai sekotu līdzi tam, kas man ir šeit, jums būs nepieciešami šādi komponenti.

Arduino Uno - vajadzētu strādāt ar jebkuru saderīgu arduino, kuram ir sērijveida Rx TxAdafruit Huzzah Breakout Board no USB uz seriālo kabeli 4 mazjaudas gaismas diodes Analog Turpidity testeris - jebkurš analogais sensors, kas nodrošina analogo izeju, darbosies ar Wire Wifi maršrutētāja mobilo tālruni ar mobilo pārlūkprogrammu Arduino Libraries.

2. darbība: Arduino ID sagatavošana

Šim projektam ir nepieciešamas jaunas arduino bibliotēkas un zināma konfigurācija, un laika dēļ. Es neievietošu katra ekrāna ekrānuzņēmumu, un es tikai izskatīšu, kas jums būs nepieciešams, lai to konfigurētu un palaistu. Es centos to lietotājam padarīt pēc iespējas vieglāku.

Lai strādātu, kods izmanto vairākas bibliotēkas. Vispirms mēs koncentrēsimies uz arduino iestatīšanu ESP8266. Šajā piemērā es izmantoju Adafruit Huzzah, jo uzskatu, ka adafruit produkti ir visuzticamākie un tiem ir vislabākais atbalsts. Kamēr jūs nemēģināt saņemt atbalstu no Adafruit Discord servera. Jums daudz labāk veiksies, saņemot palīdzību atbalsta forumos.

Jebkurā gadījumā es ESP8266 izmantoju šādas bibliotēkas

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONT Šī nav apmācība par to, kā lejupielādēt un instalēt bibliotēkas, tomēr šīs ir bibliotēkas, kas tiek izmantotas ierīcē HUZZAH. Tāpēc, lūdzu, atrodiet tos un instalējiet. Jums būs jāinstalē arī HUZZAH tāfeles definīcijas, tādēļ, ja dodaties uz FILE> Preferences Lodziņā, kurā norādīts Papildu dēļu pārvaldnieka vietrāži URL, lūdzu, pievienojiet šo https://arduino.esp8266.com/stable/package_esp8266c… ja jums jau ir kaut ko šajā laukā, nekā pārliecinieties, ka tur pievienojat komatu, lai pievienotu papildu tāfeles URL. Lai to izdarītu, noklikšķiniet uz Labi

Rīki> Padome> Dēļu pārvaldnieks Nekā meklējiet ESP8266, nevis instalējiet ESP8266 by ESP8266 Community.

Lieliski tagad ļauj pārliecināties, ka mums ir viss nepieciešamais, lai arduino kods darbotos. Viens no arduino puses šajā arduino šai apmācībai izmanto tikai 2 bibliotēkas.

SoftwareSerialArduinoJSONKas jums jau vajadzētu būt.

3. darbība: ESP8266 sagatavošana

Tagad mēs ievietosim kodu ESP8266 (Adafruit HUZZAH) un sagatavosim to savienošanai ar Arduino. Izsaiņojiet HUZZAH kodu un atveriet skici. 11. un 12. rindā nomainiet SSID un paroli uz WIFI savienojuma vietējā tīklā. Jūs pamanīsit, ka skices failā un failā index.h ir 2 faili. Fails index.h ir vieta, kur tiek saglabāts html, kas tiks parādīts jūsu tālrunī.

Kad esat iestatījis pareizo SSID un paroli savam wifi, varat apkopot kodu un ielādēt to savā ESP8266. HUZZAH turiet nospiestu pogu GPIO0, pēc tam noklikšķiniet uz pārējās pogas, pēc tam atlaidiet pogu GPIO0, lai ieslēgtu mikroshēmu sāknēšanas ielādes režīmā. Ja mikroshēma ir veiksmīgi ieslēgta sāknēšanas ielādētāja režīmā, iedegsies sarkana gaisma, norādot, ka mikroshēma ir sāknēšanas ielādētāja režīmā.

Lai izveidotu savienojumu ar ESP8266, jums būs nepieciešams seriālais kabelis vai USB -seriālais adapteris vai FDTI mikroshēma. Šajā gadījumā es izmantoju adafruit kabeli, kā norādīts instrukcijās. Tomēr jūs varat pieslēgties mikroshēmai vairākos veidos, izmantojot TTL uz Tx un Rx tapām. Es ceru, ka cilvēki, kas to skatās, zina, kā pieslēgties mikroshēmai, lai tajā ielādētu kodu. Jebkurā gadījumā dodieties uz priekšu un zibspuldzi ar kodu, kas atrodas šim darbam pievienotajā zip failā.

4. solis: Arduino sagatavošana

Lai ielādētu kodu arduino, mainiet tāfeles definīciju uz Arduino/Genuino Uno. Izpakojiet šim darbam pievienoto failu. Augšupielādējiet to ardunio. Diezgan vienkārši, viss smagais darbs jūsu labā jau ir paveikts. Es jau esmu izmēģinājis kļūdu, tāpēc viss, kas jums jādara, ir augšupielādēt kodu.

5. solis: visu savienojiet kopā

Labi, tāpēc elektroinstalācijai man ir attēls, kas redzams šeit.

Pievienojiet Tx uz Huzzah ar Pin 2 uz arduino. Pievienojiet Rx uz Huzzah ar Pin 3 uz arduino. Es izveidoju vēl vienu sērijas ligzdu arduino 2. un 3. tapās, lai atbrīvotu noklusējuma sērijas konsoli.

Pievienojiet pin V+ un En ar 5v no arduino. - Adafruit Huzzah ir iebūvēts 3.3v sprieguma regulators, tāpēc, pieslēdzot šīs tapas, tas var nedarboties ar visiem ESP8266 moduļiem. Jums, iespējams, būs jāpievieno savs sprieguma regulators. Es iesaku izmantot Huzzah, ja vēlaties tikai viegli panākt lietas darbību. Pievienojiet GND arduino GND

12., 11., 9., 8. tapās uz jūsu gaismas diodes arduino stieples es šeit izmantoju mazjaudas gaismas diodes, jo tie, kas patērē pārāk daudz strāvas, var patērēt pārāk daudz enerģijas, lai šis eksperiments būtu vienkāršs.

Nekā ar A0 analogo Pin 0 uz arduino esmu pievienojis sava Turpitity tester izejas līniju. Tomēr jūs varat pievienot gandrīz jebkura sensora izeju, kas nodrošinās analogo rādījumu. Tas ir viss, kas jums jādara, lai to savienotu.

6. darbība. Piekļuve tīmekļa vietnei

Tagad, kad esat pievienojis arduino un viss ir ielādēts jūsu dēļos, mobilajā tālrunī ir jābūt iespējai apskatīt html. Tagad es vēlos, lai jūs izveidotu savienojumu ar to pašu wifi maršrutētāju, kuram Huzzah kodā esat iestatījis SSID un paroli. Jums ir nepieciešams noskaidrot, kāda IP adrese jūsu maršrutētājam ir piešķirta jūsu ierīcei. Parasti, ja piesakāties maršrutētāja konfigurācijā, vajadzētu būt klientu sarakstam. Tas parāda visu jūsu Wifi savienojumam pievienoto ierīču IP adreses. Tomēr, ja nevarat atrast šo IP adresi, varat to atvienot no arduino un atkal palaist ar seriālo kabeli. Ja ierīcē atverat seriālo konsoli, tā sērijas konsolē izdrukā ierīces IP adresi, ja nevarat to atrast citā veidā. Jebkurā gadījumā, kad esat izveidojis savienojumu ar to pašu Wifi tīklu ar savu mobilo tālruni. Pēc tam norādiet savu mobilo tīmekļa pārlūkprogrammu uz Huzzah ip adresi. Kas, iespējams, izskatās kaut kas līdzīgs šim. https://192.168.0.107 vai kaut kas ļoti līdzīgs. Tur es ievietoju pamata lapu, kas ļaus jums ieslēgt un izslēgt 4 gaismas diodes, kā arī nolasīt analogā sensora vērtību.

7. darbība: Javascipt izmantošana

Failā ar nosaukumu index.h ESP8266Code skicē tam vajadzētu parādīties kā atsevišķai cilnei arduino redaktorā. Šeit jūs varat redzēt pamata piemēru, ko es izveidoju. Būtībā tas darbojas šādi.

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

Tādējādi digitālās tapas 12 vērtība būs augsta

SetPin (4, 0, 0);

Tādējādi digitālās tapas 4 vērtība tiks iestatīta uz zemu

SetPin (A2, 439, 1) Tas iestatīs 2. analogās tapas vērtību uz 439

Tāpat funkcija GetJSON atgriež pieprasīto vērtību no tapas un ievieto to html elementā ar norādīto div ID.

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

Tas nosūtīs pieprasījumu arduino, lūdzot tai analogās tapas 0 vērtību un atgriezt rezultātu divos ar ID resp_iGetJSON (12, 0, 'mydiv'); Tas prasīs arduino iegūt digitālo tapu 0 vērtību un atgriezt rezultātu html elementā ar un my mydiv

8. solis: atbalsts

Es ceru, ka mans skripts palīdzēs tiem no jums, kuri vēlas to izmantot. Es šeit izmantoju ļoti vienkāršu html piemēru ar cerību, ka citi cilvēki izpētīs visas tā iespējas, ko es nevaru. Tomēr tam vajadzētu parādīt, kā ajax var izmantot, lai kontrolētu arduino bez html lapu ielādes un tamlīdzīgām lietām.

Ja jums ir kādi komentāri, lūdzu, jautājiet man, es darīšu visu iespējamo, lai atbildētu. Es vēlos vēl nedaudz paplašināt šīs funkcijas, taču man pietrūka laika un naudas. Tomēr es strādāju pie tā stingrākas ieviešanas, kurā faili tiek glabāti parastajā tīmekļa serverī, nevis ESP8266.

Paldies, ka veltījāt laiku mana koda skatīšanai.

Džons AndersonsE -pasts man

Vermontas interneta dizaina uzņēmums

www.vermontinternetdesign.com