Arduino/ESP Config veb səhifənizi buluddan yükləyin: 7 addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:47

Bir Arduino / ESP (ESP8266 / ESP32) layihəsi yaradarkən, sadəcə hər şeyi kodlaşdıra bilərsiniz. Ancaq tez-tez bir şey baş verir və IoT cihazınızı IDE-yə yenidən bağlayacaqsınız. Ya da daha çox insanın konfiqurasiyasına daxil oldunuz və daxili işlərini başa düşməsini gözləmək əvəzinə bir UI təmin etmək istəyirsiniz.

Bu təlimat, Arduino / ESP -də deyil, çox istifadəçi interfeysini buludda necə yerləşdirəcəyinizi sizə xəbər verəcəkdir. Bu şəkildə etmək yerdən və yaddaşdan qənaət edəcək. Pulsuz statik veb səhifələr təqdim edən bir xidmət GitHub Səhifələri kimi "bulud" olaraq xüsusilə uyğundur, lakin digər variantlar da işləyə bilər.

Veb səhifəni bu şəkildə qurmaq üçün istifadəçinin brauzerinin 4 addımdan keçməsini tələb edir:

1. Arduino / ESP -dən kök url tələb edin
2. Çox sadə bir veb səhifəsi alın və bunları söyləyin:
3. Buluddan JavaScript faylı tələb edin
4. Həqiqi səhifəni quran kodu alın

Bu Təlimat, səhifə yuxarıda göstərilən addımlara uyğun olaraq hazır olduqdan sonra Arduino / ESP ilə necə əlaqə quracağınızı da izah edəcək.

Bu təlimatda yaradılan kodu GitHub -da da tapa bilərsiniz.

Ön şərtlər

Bu təlimat, müəyyən materiallara və bəzi əvvəlki məlumatlara daxil olduğunuzu ehtimal edir:

• Bir Arduino (şəbəkə girişi ilə) / ESP
• Yuxarıdakıları bağlamaq üçün bir kompüter
• Wi -Fi internetə qoşulub
• Arduino IDE quraşdırılmışdır (ESP32 üçün də)
• IoT cihazınıza bir eskiz yükləməyi bilirsiniz
• Git & GitHub -dan necə istifadə edəcəyinizi bilirsiniz

Addım 1: Sadə bir Web Server Sketch ilə Başlayın

Mümkün qədər sadə başlayacağıq və buradan böyüməsinə icazə verək.

#daxil edin

const char* ssid = "yourssid"; const char* parol = "yourpasswd"; WiFiServer serveri (80); void setup () {// Serialı işə salın və portun açılmasını gözləyin: Serial.begin (115200); while (! Serial) {; // serial portunun bağlanmasını gözləyin. Yalnız yerli USB portu üçün lazımdır} WiFi.begin (ssid, parol); while (WiFi.status ()! = WL_CONNECTED) {gecikmə (500); Serial.print ("."); } Serial.println ("WiFi bağlıdır."); Serial.println ("IP ünvanı:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// daxil olan müştəriləri dinləyin WiFiClient client = server.available (); // gələn müştəriləri dinləyin bool sendResponse = false; // cavab göndərmək istəsək doğru olaraq təyin edirik String urlLine = ""; // tələb olunan URL -ni tutmaq üçün bir String yaradın, əgər (müştəri) // bir müştəri alırsınızsa, {Serial.println ("Yeni Müştəri."); // String currentLine = "" serial portundan bir mesaj yazdırın; // müştəri bağlı olarkən müştəridən daxil olan məlumatları tutmaq üçün bir String yaradın (client.connected ()) // döngə müştəri bağlı olduqda {if (client.available ()) // müştəridən oxumaq üçün bayt varsa, {char c = client.read (); // bir bayt oxuyun, sonra (c == '\ n') // əgər bayt yeni sətir xarakteridirsə {// cari sətir boşdursa, bir sıra iki yeni sətir simvolu əldə edirsiniz. // bu, müştəri HTTP sorğusunun sonudur, buna görə cavab göndərin: if (currentLine.length () == 0) {sendResponse = true; // hər şey yaxşıdır! fasilə; // hal döngəsindən çıxın} başqa // yeni bir sətir əldə etmisinizsə, currentLine silin: {if (currentLine.indexOf ("GET /")> = 0) // bu URL xətti olmalıdır {urlLine = currentLine; // sonradan istifadə üçün saxla} currentLine = ""; // cariLine Stringini yenidən qurun}} else if (c! = '\ r') // əgər başqa bir şey əldə etmisinizsə, geri dönmə xarakterindən başqa, {currentLine += c; // cari Xəttin sonuna əlavə edin}}} if (sendResponse) {Serial.print ("Müştəri istədi"); Serial.println (urlLine); // HTTP başlıqları həmişə cavab kodu ilə başlayır (məsələn, HTTP/1.1 200 OK) // və məzmun növü ilə müştəri nəyin gəldiyini bilir, sonra boş bir sətir: client.println ("HTTP/1.1 200 OK"); client.println ("Məzmun növü: mətn/html"); müştəri.println (); if (urlLine.indexOf ("GET /")> = 0) // URL yalnız " /" {// olarsa HTTP cavabının məzmunu başlığı izləyir: client.println ("Salam dünya!"); } // HTTP cavabı başqa bir boş sətirlə bitir: client.println (); } // əlaqəni bağlayın: client.stop (); Serial.println ("Müştəri Bağlandı."); }}

Yuxarıdakı kodu kopyalayın və ya GitHub üzərindən götürün.

SSID və şifrənizi şəbəkənizə uyğun olaraq dəyişdirməyi unutmayın.

Bu eskizdə məşhur Arduino istifadə olunur

qurmaq()

və

döngə ()

funksiyalar. İçində

qurmaq()

IDE ilə serial bağlantısı işə salınır və WiFi də. WiFi sözügedən SSID -ə qoşulduqdan sonra IP çap olunur və veb -server işə salınır. Hər bir təkrarlamada

döngə ()

Veb serveri bağlı müştərilər üçün yoxlanılır. Bir müştəri bağlıdırsa, tələb oxunur və tələb olunan URL dəyişəndə saxlanılır. Hər şey qaydasındadırsa, serverdən müştəriyə cavab tələb olunan URL əsasında aparılır.

XƏBƏRDARLIQ! Bu kod, sadə saxlamaq üçün Arduino String sinifindən istifadə edir. String optimallaşdırmaları bu təlimatlandırma çərçivəsində deyil. Minimum Ram istifadə edərək Arduino String Manipulyasiyası haqqında təlimat verən bu barədə daha çox oxuyun.

Addım 2: Uzaqdan JavaScript yaratmaq

Arduino / ESP, ziyarətçilərə bu faylı yükləmələrini söyləyəcək. Qalan hər şey bu JavaScript kodu ilə ediləcək.

Bu təlimatda jQuery -dən istifadə edəcəyik, bu çox vacib deyil, amma işləri asanlaşdıracaq.

Bu faylı internetdən əldə etmək lazımdır, statik səhifələr serveri bu işi görmək üçün kifayətdir, məsələn GitHub səhifələri. Beləliklə, ehtimal ki, yeni bir GitHub deposu etmək və bir

gh-səhifələr

filial Aşağıdakı kodu a daxil edin

.js

faylını doğru filialdakı depoda saxlayın.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // bir element yaradın script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // src = "" qurun atribut script.onload = function () // jquery faylı yükləndikdən sonra çağırılan {$ = window.jQuery; // jQuery -ni qlobal $ dəyişən init (); // init funksiyasını çağırmaq}; getElementsByTagName ('head') [0].appendChild (script); // yaradılan etiketi sənədə əlavə edin, bu jQuery lib yüklənməyə başlayacaq}) (); init () funksiyası {// JQuery yüklənmə bitdi, daha sonra bura kod əlavə edəcək…}

Yuxarıdakı kodu kopyalayın və ya GitHub üzərindən götürün.

Faylınızın əlçatan olub olmadığını yoxlayın. GitHub səhifələrində https://username.github.io/repository/your-file.j… ünvanına daxil olun (dəyişdirin

istifadəçi adı

,

depo

və

Sizin fayl.js

düzgün parametrlər üçün).

Addım 3: Uzaqdan JavaScript Faylını Ziyarətçilər Brauzerinə Yükləyin

İndi hər şeyi hazırladıqdan sonra veb səhifəni uzaqdan JavaScript faylını yükləməyin vaxtı gəldi.

Eskizin 88 -ci sətrini dəyişərək bunu edə bilərsiniz

client.println ("Salam dünya!"); t

müştəri.println ("");

(dəyişdirin

src

öz JavaScript faylınızı göstərmək üçün atribut). Bu kiçik bir html veb səhifəsidir, yalnız ziyarətçilərin brauzerinə JavaScript faylını yükləməkdir.

Dəyişdirilmiş faylı GitHub -dakı müvafiq öhdəlikdə də tapa bilərsiniz.

Düzəldilmiş eskizi Arduino / ESP -yə yükləyin.

Addım 4: Səhifəyə yeni elementlər əlavə edin

Boş bir səhifə faydasızdır, buna görə veb səhifəsinə yeni bir element əlavə etməyin vaxtı gəldi. Hələlik bu bir YouTube videosu olacaq. Bu nümunədə bunu yerinə yetirmək üçün bəzi jQuery kodları istifadə ediləcək.

Aşağıdakı kod satırını

içində()

funksiya:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({en: '608px', hündürlük: '342px'}). AppendTo ('bədən');

Bu bir yaradacaq

iframe

elementi düzgün təyin edin

src

atribut və css istifadə edərək ölçüsü təyin edin və elementi səhifənin gövdəsinə əlavə edin.

jQuery, veb səhifədəki elementləri asanlıqla bilməyimizə və dəyişdirməyimizə kömək edir, bəzi əsas şeylər:

• $ ('bədən')

• artıq mövcud olan hər hansı bir elementi seçir, digər css seçiciləri də istifadə edilə bilər

• $(' ')

  yenisini yaradır

• element (lakin sənədə əlavə etmir)

• .appendTo ('. main')

• seçilmiş/yaradılmış elementi 'main' css sinfi olan bir elementə əlavə edir

• Element əlavə etmək üçün digər funksiyalar var

  . əlavə et ()

  ,

  .preend ()

  ,

  .prependTo ()

  ,

  .insert ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .dən sonra ()

  ,

  . əvvəl ()

Bir şey aydın deyilsə, GitHub üzərindəki müvafiq öhdəliyə baxın.

Addım 5: İnteraktiv elementlər

Bir video əyləncəlidir, amma bu təlimatın məqsədi Arduino / ESP ilə qarşılıqlı əlaqə yaratmaqdır. Arduino / ESP -ə məlumat göndərən və cavab gözləyən bir düyməni əvəz edək.

A -ya ehtiyacımız olacaq

$('')

səhifəyə əlavə etmək və ona hadisə dinləyicisi əlavə etmək. Göstərilən hadisə baş verdikdə hadisə dinləyicisi geri çağırma funksiyasını çağıracaq:

$ (''). text ('a button'). on ('click', function ()

{// buradakı kod düyməyə tıklandıqda icra olunacaq}). appendTo ('body');

Və geri çağırma funksiyasına AJAX sorğusu əlavə edin:

$.get ('/ajax', funksiya (data)

{// buradakı kod AJAX sorğusu bitdikdə icra olunacaq});

İstək tamamlandıqdan sonra geri qaytarılmış məlumatlar səhifəyə əlavə olunacaq:

$('

').text (data). appendTo (' body ');

Xülasə olaraq, yuxarıdakı kod bir düymə yaradır, onu veb səhifəsinə əlavə edir, düyməni basdıqda bir sorğu göndəriləcək və cavab da veb səhifəsinə əlavə olunacaq.

İlk dəfə geri zənglər istifadə edirsinizsə, hər şeyin necə iç içə olduğunu görmək üçün GitHub üzərindəki öhdəliyi yoxlamaq istəyə bilərsiniz.

Addım 6: İnteraktiv elementə cavab verin

Əlbəttə ki, AJAX tələbi cavab tələb edir.

Üçün düzgün cavab yaratmaq

/ajax

url əlavə etməliyik

başqa əgər ()

if ifadəsinin bağlanma mötərizəsindən dərhal sonra

/

url.

başqa (urlLine.indexOf ("GET /ajax")> = 0)

{client.print ("Salam!"); }

GitHub üzərindəki öhdəlikdə, hər bir istəyin unikal olduğunu göstərmək üçün sayğac əlavə etdim.

Addım 7: Nəticə

Bu təlimatlandırmanın sonu budur. İndi ziyarətçinin brauzerinə buluddan JavaScript faylı yükləməsini bildirən kiçik bir veb səhifəsinə xidmət edən bir Arduino / ESP var. JavaScript yükləndikdən sonra istifadəçinin Arduino / ESP ilə ünsiyyət qurması üçün istifadəçi interfeysi təmin edən veb səhifənin qalan məzmununu qurur.

İndi veb səhifədə daha çox element yaratmaq və parametrləri yerli olaraq bir növ ROMda (EEPROM / NVS / və s.) Saxlamaq təsəvvürünüzə bağlıdır.

Oxuduğunuz üçün təşəkkür edirəm və zəhmət olmasa bir az geribildirim verin!