Mündəricat:

Arduino -nu HTML/Javascript ilə idarə etməyin asan yolu: 8 addım
Arduino -nu HTML/Javascript ilə idarə etməyin asan yolu: 8 addım

Video: Arduino -nu HTML/Javascript ilə idarə etməyin asan yolu: 8 addım

Video: Arduino -nu HTML/Javascript ilə idarə etməyin asan yolu: 8 addım
Video: Arduino Bluetooth Controlled Robot Car 2024, Noyabr
Anonim
Arduino -nu HTML/Javascript ilə idarə etməyin asan yolu
Arduino -nu HTML/Javascript ilə idarə etməyin asan yolu

Bu təlimat, yalnız javascript funksiyalarından istifadə edərək bir adafruit Huzzahdan bir ajax zəng ilə bir arduino idarə etməyi göstərir. Əsasən javascriptdən html səhifəsində istifadə edə bilərsiniz ki, bu da ajax geri çağırışından istifadə edən sadə javascript funksiyaları ilə html interfeyslərini asanlıqla yazmağa imkan verəcəkdir. ESP8266 -nın arduino ilə ünsiyyət qurmasına icazə vermək. Buna görə, bütün sancaqlar bir JavaScript funksiyasından təyin edilə bilər. Eyni şəkildə, JavaScript funksiyasından istifadə edərək hər hansı bir pindən də dəyər oxuya bilərik. Ümid edirəm ki, bu, bir html sənədindən bir arduino idarə etməyi asanlaşdırmağa kömək edir. Orada html yaza biləcək bir çox insanın olduğunu anladım. Bir çoxu java və ya xcode və ya başqa bir çərçivə ilə bir cib telefonu tətbiq etməkdə çətinlik çəkmək istəmir. Bu, insanları çox asanlaşdıracaq, çünki etməli olduqları şey sancaqlardakı dəyərləri təyin etmək və oxumaq üçün bir JavaScript funksiyasından istifadə etməkdir. Məsələn, yazmaq o qədər də asan deyil

Yandırmaq

Bir düyməni açmaq üçün. PinMode (12, INPUT) elan etməkdən başqa başqa bir arduino proqramlaşdırmasının olmaması gözəllikdir; Quraşdırma funksiyanızda. Pin elan edildiyi müddətdə, JavaScript hər şey üçün istifadə edilə bilər.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

0 analog pininin dəyərini əldə etmək və nəticəni div -ə qaytarmaq üçün etməlisiniz. Bu, insanların arduinoya nəzarət edən html səhifələri yarada bilmələri üçün asan bir yol olmalıdır. Arduino pinlərinin JavaScript ilə qurulub oxunması üçün bir interfeys yaradın.

Addım 1: Nə lazımdır

Bu layihəni ESP8266 üzərindəki html səhifəsi ilə arduino sisteminə nəzarət etmək istəyən istifadəçilər üçün hazırladım. Bu layihənin məqsədi, javascript funksiyası ilə arduino üzərindəki sancaqlar dəyərlərini təyin etmək üçün sadə bir üsul yaratmaqdır. Məsələn onclick = "SetPin (12, 1, 0)", arduino -da Pin 12 -ni Yüksək olaraq təyin edəcək.

Bu təlimat üçün tam olaraq davam etmək üçün aşağıdakı maddələrə ehtiyacınız olacaq. Bununla birlikdə, əksər arduino və ESP8266 birləşmələrində işləməli olduğunu düşünürəm. Ancaq burada olanları tam olaraq izləmək üçün aşağıdakı komponentlərə ehtiyacınız olacaq.

Arduino Uno - Rx TxAdafruit Huzzah Breakout Board USB -dən Serial Kabelə 4 aşağı gücə malik LED -in Analog Bulanıklığı test cihazı olan hər hansı bir arduino ilə işləməlidir - analoq çıxışı təmin edən hər hansı bir analoq, Mobil Tarayıcı Arduino Kitabxanaları ilə Wifi Wifi Router Cib Telefonu edəcək.

Addım 2: Arduino ID -nin hazırlanması

Bu layihə yeni bir arduino kitabxanaları və bəzi konfiqurasiyalara ehtiyac duyur. Hər ekranın ekran görüntüsünü çəkməyəcəyəm və bunu konfiqurasiya etmək və işə salmaq üçün lazım olanı keçəcəyəm. İstifadəçi üçün mümkün qədər asanlaşdırmağa çalışdım.

Kod işləmək üçün bir çox kitabxanadan istifadə edir. Əvvəlcə bu nümunədə Adafruit Huzzah istifadə etdiyim ESP8266 üçün arduino qurmağa diqqət edəcəyik, çünki adafruit məhsullarını ən etibarlı və ən yaxşı dəstəyə sahib olduğumu görürəm. Adafruit Discord serverindən dəstək almağa çalışmadığınız müddətcə. Dəstək forumlarında kömək almaqdan daha çox şans qazanacaqsınız.

Hər halda, ESP8266 -da aşağıdakı kitabxanalardan istifadə edirəm

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONBu kitabxanaların necə yüklənib qurulacağına dair bir dərs deyildir, lakin bunlar HUZZAH -da istifadə olunan kitabxanalardır. Buna görə də onları tapın və quraşdırın. HUZZAH üçün lövhə təriflərini də quraşdırmalısınız, buna görə də FILE> Tercihlər bölməsinə keçsəniz Əlavə Panolar Menecer URL -lərini yazan qutuya aşağıdakıları əlavə edin https://arduino.esp8266.com/stable/package_esp8266c… bu sahədə bir şey, əlavə bir lövhə url əlavə etmək üçün orada vergül əlavə etməyinizə əmin olun. Tamam vurun gedin

Alətlər> İdarə Heyəti> Lövhələr Meneceri ESP8266 Birliyi tərəfindən ESP8266 qurmaqdan daha çox ESP8266 axtarışından daha çoxdur.

Əla indi arduino kodunun işləməsi üçün lazım olan hər şeyə sahib olduğumuzdan əmin olun. Arduino -dan biri arduino -nun özü bu dərs üçün yalnız 2 kitabxanadan istifadə edir.

SoftwareSerialArduinoJSONHələ də sahib olmalısınız.

Addım 3: ESP8266 -nın hazırlanması

ESP8266 hazırlanır
ESP8266 hazırlanır

İndi kodu ESP8266 (Adafruit HUZZAH) üzərinə qoyub Arduinoya qoşulmaq üçün hazırlayacağıq. HUZZAH kodunu açın və eskizi açın. 11 və 12 -ci sətirlərdə ssid və şifrənizi yerli şəbəkənizdəki WIFI bağlantınızın şifrəsinə dəyişdirin. Eskiz faylı və index.h faylında 2 fayl olduğunu görəcəksiniz. İndex.h faylı telefonunuzda görünəcək html -in saxlanıldığı yerdir.

Wi -Fi -ya düzgün SSID və şifrəni təyin etdikdən sonra kodu tərtib edib ESP8266 -ya yükləyə bilərsiniz. HUZZAH -da, GPIO0 etiketli Düyməni basıb saxlamalısınız, sonra çipi yükləyici rejiminə keçirmək üçün GPIO0 düyməsini buraxmaqdansa, qalan düyməni sıxmalısınız. Çip uğurla yükləyici rejiminə keçirilərsə, çipin yükləyici rejimində olduğunu göstərən qırmızı işıq yanacaq.

ESP8266 -ya qoşulmaq üçün seriyalı kabel və ya USB -dən Serial adapterə və ya FDTI çipinə ehtiyacınız olacaq. Bu vəziyyətdə təlimatlarda qeyd edildiyi kimi adafruit kabelindən istifadə edirəm. Bununla birlikdə, Tx və Rx pinlərində TTL istifadə edərək çipə bir neçə yolla qoşula bilərsiniz. Ümid edirəm ki, buna baxan insanlar kodu yükləmək üçün çipə necə bağlanacaqlarını bilirlər. Hər halda davam edin və bu addıma əlavə edilmiş zip sənədindəki kodu olan çipi yandırın.

Addım 4: Arduino hazırlayın

Kodu arduinoya yükləmək üçün lövhənizin tərifini Arduino/Genuino Uno olaraq dəyişdirin. Bu addıma əlavə edilmiş faylı açın. Ardunio -ya yükləyin. Həqiqətən də olduqca sadə, bütün ağır işlər artıq sizin üçün edilmişdir. Mən artıq sınaq prosesində bir səhv prosesindən keçmişəm, buna görə də kodu yükləmək kifayətdir.

Addım 5: Hər şeyi birlikdə birləşdirin

Hər şeyi Birlikdə Kabelləşdirmək
Hər şeyi Birlikdə Kabelləşdirmək

Yaxşı, kabellər üçün burada olanların yuxarıda bir şəkli var.

Huzzahdakı Tx'yi arduino'ya 2 Pin'e bağlayın. Arzuino'da Pin 3'ü Huzza'daki Rx'e bağlayın. Varsayılan Serial Konsolunu boşaltmaq üçün arduinoda 2 və 3 pinlərdə başqa bir serial yuvası yaratdım.

Pin V+ və En -i arduinodan 5v -ə qoşun. - Adafruit Huzzah, 3,3v gərginlikli bir tənzimləyiciyə malikdir, buna görə də bu pinləri bu şəkildə bağlamaq bütün ESP8266 modulları ilə işləməyə bilər. Öz gərginlik tənzimləyicinizə tel bağlamağınız lazım ola bilər. Bir şeyi asanlıqla işlətmək istəyirsinizsə, Huzzahdan istifadə etməyi məsləhət görürəm. GND -ni arduinonun GND -yə bağlayın

LEDlərinizdəki arduino telindəki 12, 11, 9, 8 sancaqlarında burada aşağı enerjili LED -lərdən istifadə etdim, çünki çox cərəyan çəkənlər bu təcrübəni sadə saxlamaq üçün çox güc çəkə bilər.

Arduino üzərindəki A0 analog Pin 0 -dan daha çox Turpitity test cihazımın çıxış xəttinə qoşdum. Bununla birlikdə, analoq oxu verəcək hər hansı bir sensorun çıxışını qoşa bilərsiniz. Bunu bağlamaq üçün etməli olduğunuz şey budur.

Addım 6: Veb səhifəsinə daxil olmaq

Arduino -nu bağladığınıza və hər şeyi lövhələrinizə yüklədiyinizə görə, cib telefonunuzdakı html -ni görmək üçün lazımdır. İndi Huzzahdakı kodda SSID və şifrənizi təyin etdiyiniz eyni wifi routerə qoşulmanızı istəyirəm. Routerinizin cihazınıza hansı IP ünvanını təyin etdiyini başa düşməlisiniz. Adətən, marşrutlaşdırıcıların konfiqurasiyasına daxil olsanız, müştəri siyahısı olmalıdır. Wi -Fi bağlantınıza qoşulmuş bütün cihazların IP ünvanlarını göstərir. Ancaq bu IP ünvanını tapa bilmirsinizsə, onu arduinodan ayırıb serial kabel ilə yenidən işlədə bilərsiniz. Cihazdakı serial konsolunu açarsanız, başqa bir şəkildə tapa bilməyəcəyiniz halda, IP ünvanını serial konsolda cihaza yazdıracaq. Hər halda cib telefonunuzla eyni Wifi şəbəkəsinə qoşulduqda. Mobil veb brauzerinizi Hüzzahın ip ünvanına işarə edin. Hansı ki, yəqin buna bənzəyir. https://192.168.0.107 və ya çox oxşar bir şey. Orada 4 Led -i yandırıb söndürməyinizə, analoq sensorun dəyərini oxumağınıza imkan verəcək bir əsas səhifə qoydum.

Addım 7: Javascipt istifadə edin

ESP8266Code eskizində index.h adlanan faylda, arduino redaktorunda ayrı bir sekmə kimi görünməlidir. Burada hazırladığım əsas nümunəni görə bilərsiniz. Əsasən işləmə üsulu belədir.

SetPin (12, 1, 0); SetPin ({Pin nömrəsi}, {Dəyər 1 Yüksək 0 Aşağı}, {IsAnalog 1 Bəli 0 Xeyr})

Bu rəqəmsal pin 12 -nin dəyərini yüksək olaraq təyin edəcək

SetPin (4, 0, 0);

Bu rəqəmsal pin 4 -ün dəyərini aşağıya qoyacaq

SetPin (A2, 439, 1) Bu, Analog Pin 2 -nin dəyərini 439 olaraq təyin edəcək

Eyni şəkildə, GetJSON funksiyası bir pindən tələb olunan bir dəyəri qaytaracaq və onu müəyyən div Id ilə silinmiş html -ə yerləşdirəcək.

GetJSON ('A0', 1, 'resp_i') GetJSON ({Pin nömrəsi}, {IsAnalog 1 Bəli 0 Xeyr}, Nəticəni qaytarmaq üçün HTML Elementi})

Bu, arduino -ya 0 analoq pininin dəyərini soruşmaq və nəticəni resp_iGetJSON ID ilə Div -ə qaytarmaq üçün bir sorğu göndərəcək (12, 0, 'mydiv'); Bu, arduino -dan rəqəmsal pin 0 dəyərini əldə etməsini və nəticəni mydiv və Id ilə html elementinə qaytarmasını istəyəcək.

Addım 8: Dəstək

Ümid edirəm ssenarim istifadə etmək istəyənlərə kömək edəcək. Başqa insanların bacarmadığım bütün imkanları araşdıracaqları ümidi ilə burada çox sadə bir html nümunəsi istifadə etdim. Bununla birlikdə, bu, ajaxın html səhifə yükləmələri və bu xarakterli şeylər olmadan bir arduino idarə etmək üçün necə istifadə olunacağını nümayiş etdirməlidir.

Hər hansı bir şərhiniz varsa, xahiş edirəm məndən soruşun, cavablandırmaq üçün əlimdən gələni edəcəyəm. Bunun funksionallığını daha da genişləndirmək istərdim, amma vaxtım və pulum tükəndi. Bununla birlikdə, faylları ESP8266 -da deyil, adi bir veb serverində saxlayan daha güclü bir tətbiq üzərində işləyirəm.

Kodumu görmək üçün vaxt ayırdığınız üçün təşəkkür edirəm.

John Anderson Mənə E -poçt göndər

Vermont İnternet Dizayn MMC

www.vermontinternetdesign.com

Tövsiyə: