Arduino/ESP Config veb -sahifangizni bulutdan yuklang: 7 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:27

Arduino / ESP (ESP8266 / ESP32) loyihasini yaratishda siz hamma narsani qattiq kodlashingiz mumkin. Lekin tez-tez biror narsa ro'y beradi va siz IOT-qurilmangizni IDE-ga qayta biriktirib qo'yasiz. Yoki sizda konfiguratsiyaga ko'proq odam kirdi va siz ichki ishlarni tushunishini kutishning o'rniga UI bilan ta'minlashni xohlaysiz.

Bu ko'rsatma sizga Arduino / ESP -ning o'rniga UI -ning ko'p qismini bulutga qanday qo'yish kerakligini aytadi. Shunday qilib, siz bo'sh joy va xotiradan foydalanishni tejaysiz. Bepul statik veb -sahifalarni taqdim etuvchi xizmat GitHub sahifalari kabi "bulut" sifatida mos keladi, lekin boshqa variantlar ham ishlaydi.

Veb -sahifani shu tarzda yaratish uchun foydalanuvchi brauzeri 4 bosqichdan o'tishi kerak:

1. Arduino / ESP -dan ildiz url -ni so'rang
2. Oddiy veb -sahifani oling, unga quyidagilarni aytib bering:
3. Bulutdan JavaScript faylini so'rang
4. Haqiqiy sahifani yaratadigan kodni oling

Ushbu ko'rsatma, shuningdek, sahifa yuqoridagi bosqichlarga muvofiq tayyor bo'lgach, Arduino / ESP bilan qanday ishlashni tushuntiradi.

Ushbu ko'rsatma bo'yicha yaratilgan kodni GitHub -da ham topish mumkin.

Old shartlar

Bu ko'rsatma sizga ma'lum materiallar va ba'zi oldingi ma'lumotlarga ega bo'lishni nazarda tutadi:

• Arduino (tarmoqqa kirish bilan) / ESP
• Yuqoridagilarni biriktirish uchun kompyuter
• Wi -Fi Internetga ulangan
• Arduino IDE o'rnatilgan (shuningdek, ESP32 uchun)
• Siz eskizni IoT-qurilmangizga qanday yuklashni bilasiz
• Siz Git & GitHub -dan qanday foydalanishni bilasiz

1 -qadam: Oddiy veb -server eskizidan boshlash

Biz iloji boricha sodda boshlaymiz va bu yerdan o'sishiga ruxsat beramiz.

#qo'shing

const char* ssid = "yourssid"; const char* password = "yourpasswd"; WiFiServer serveri (80); void setup () {// Serialni ishga tushiring va port ochilishini kuting: Serial.begin (115200); while (! Seriyali) {; // ketma -ket port ulanishini kuting. Faqat mahalliy USB port uchun kerak} WiFi.begin (ssid, parol); while (WiFi.status ()! = WL_CONNECTED) {kechiktirish (500); Serial.print ("."); } Serial.println ("Wi -Fi ulangan."); Serial.println ("IP -manzil:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// kiruvchi mijozlarni tinglang WiFiClient client = server.available (); // kiruvchi mijozlarni tinglang bool sendResponse = false; // agar biz javob yubormoqchi bo'lsak, rost qilib qo'ying String urlLine = ""; // so'ralgan URLni ushlab turish uchun satr yarating, agar (mijoz) // agar sizda mijoz bo'lsa, {Serial.println ("Yangi mijoz."); // xabarni ketma -ket portdan chiqaring String currentLine = ""; // mijozdan kiruvchi ma'lumotlarni ushlab turish uchun String qiling (client.connected ()) // mijoz ulanganda {if (client.available ()) // agar mijozdan o'qiladigan baytlar bo'lsa, {char c = client.read (); // baytni o'qing, agar (c == '\ n') // agar bayt yangi qatorli belgi bo'lsa {// agar joriy satr bo'sh bo'lsa, sizda ikkita yangi qatorli belgi bor. // bu mijozning HTTP so'rovining oxiri, shuning uchun javob yuboring: if (currentLine.length () == 0) {sendResponse = true; // hammasi yaxshi! tanaffus; // vaqt oralig'idan chiqib ketish} else // agar sizda yangi qator bo'lsa, u holda currentLine -ni tozalang: {if (currentLine.indexOf ("GET /")> = 0) // bu URL liniyasi bo'lishi kerak {urlLine = currentLine; // keyinroq ishlatish uchun saqlang} currentLine = ""; // currentLine String -ni asl holatiga qaytaring}} else if if (c! = '\ r') // agar sizda aravachani qaytarish belgisidan boshqa biror narsa bo'lsa, {currentLine += c; // uni currentLine oxiriga qo'shing}}} if (sendResponse) {Serial.print ("Mijoz so'ralgan"); Serial.println (urlLine); // HTTP sarlavhalari har doim javob kodidan boshlanadi (masalan, HTTP/1.1 200 OK) // va tarkib turi, shuning uchun mijoz nima bo'layotganini biladi, keyin bo'sh satr: client.println ("HTTP/1.1 200 OK"); client.println ("Kontent turi: matn/html"); mijoz.println (); if (urlLine.indexOf ("GET /")> = 0) // agar URL faqat " /" {// bo'lsa, HTTP javobining tarkibi sarlavhaga to'g'ri keladi: client.println ("Salom dunyo!"); } // HTTP javobi boshqa bo'sh satr bilan tugaydi: client.println (); } // ulanishni yoping: client.stop (); Serial.println ("Mijoz uzildi."); }}

Yuqoridagi kodni nusxa ko'chiring yoki GitHub -dagi majburiyatdan yuklab oling.

SSID va parolni tarmoqqa mos keladigan tarzda o'zgartirishni unutmang.

Ushbu eskizda mashhur Arduino ishlatiladi

sozlash()

va

pastadir ()

vazifalar. Ichida

sozlash()

IDE -ga ketma -ket ulanish va WiFi ham ishga tushiriladi. Wi -Fi SSID -ga ulangandan so'ng, IP -ni chop etish va veb -serverni ishga tushirish. Har bir iteratsiyada

pastadir ()

Veb -server ulangan mijozlar uchun tekshiriladi. Agar mijoz ulangan bo'lsa, so'rov o'qiladi va so'ralgan URL o'zgaruvchiga saqlanadi. Agar hamma narsa yaxshi bo'lsa, serverdan mijozga javob so'ralgan URL asosida amalga oshiriladi.

Ogohlantirish! Bu kod oddiy bo'lish uchun Arduino String sinfidan foydalanadi. String optimallashtirish bu ko'rsatmaga kirmaydi. Bu haqda Minimal Ram yordamida Arduino String manipulyatsiyasi bo'yicha ko'rsatmalarni o'qing.

2 -qadam: Masofaviy JavaScript -ni yaratish

Arduino / ESP tashrif buyuruvchilarga ushbu faylni yuklashni aytadi. Qolganlarning hammasi shu JavaScript kodi yordamida amalga oshiriladi.

Ushbu yo'riqnomada biz jQuery -dan foydalanamiz, bu juda zarur emas, lekin ishni osonlashtiradi.

Bu faylga Internetdan kirish kerak, bu ishni bajarish uchun statik sahifalar serveri etarli, masalan GitHub sahifalari. Shunday qilib, ehtimol siz yangi GitHub omborini yaratishni xohlaysiz va

gh-sahifalar

filial Quyidagi kodni a ga qo'ying

.js

faylni to'g'ri filialdagi omborga joylashtiring.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (funktsiya () {var skript = document.createElement ('skript'); // elementni yarating.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // src ni o'rnating = "" script.onload = function () // qayta qo'ng'iroq qilish funktsiyasi, jquery fayli yuklanganidan keyin chaqiriladi {$ = window.jQuery; // jQuery -ni global $ o'zgaruvchisi init (); // init funktsiyasini chaqirish}; hujjat. getElementsByTagName ('head') [0].appendChild (script); // hujjatga yaratilgan tegni qo'shing, bu jQuery lib yuklanishini boshlaydi)) (); init () funktsiyasi {// jQuery -ni yuklash tugadi, keyin bu erga kod qo'shiladi …}

Yuqoridagi kodni nusxa ko'chiring yoki GitHub -dagi majburiyatdan yuklab oling.

Faylingiz mavjudligini tekshiring. GitHub bo'lsa, sahifalarga o'ting https://username.github.io/repository/your-file.j… (almashtirish

foydalanuvchi nomi

,

ombor

va

sizning fayl.js

to'g'ri parametrlar uchun).

3 -qadam: Masofaviy JavaScript faylini tashrif buyuruvchilar brauzeriga yuklash

Endi bizda hamma narsa tayyor, veb -sahifani uzoqdan JavaScript faylini yuklash vaqti keldi.

Siz buni eskizning 88 -qatorini o'zgartirish orqali qilishingiz mumkin

client.println ("Salom dunyo!"); t

mijoz.println ("");

(o'zgartiring

src

O'zingizning JavaScript faylingizga ishora qilish uchun atribut). Bu kichik html veb -sahifasi, faqat tashrif buyuruvchilar brauzeriga JavaScript faylini yuklaydi.

O'zgartirilgan faylni GitHub -dagi tegishli majburiyatda ham topish mumkin.

Moslashtirilgan eskizni Arduino / ESP -ga yuklang.

4 -qadam: Sahifaga yangi elementlarni qo'shish

Bo'sh sahifa foydasiz, shuning uchun veb -sahifaga yangi element qo'shish vaqti keldi. Hozircha bu YouTube videosi bo'ladi, bu misolda buni amalga oshirish uchun ba'zi jQuery kodlari ishlatiladi.

Ga quyidagi kod qatorini qo'shing

init ()

funktsiya:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', ramka chegarasi: '0'}). css ({en: '608px', balandlik: '342px'}). AppendTo ('tana');

Bu yaratadi

iframe

element, to'g'ri sozlang

src

atribut va CSS yordamida o'lchamni o'rnating va elementni sahifaning tanasiga qo'shing.

jQuery bizga veb -sahifadagi elementlarni osongina tanlash va o'zgartirishga yordam beradi, ba'zi asosiy narsalarni bilish kerak:

• $ ("tana")

• mavjud elementni tanlaydi, boshqa CSS selektorlaridan ham foydalanish mumkin

• $(' ')

  yangisini yaratadi

• element (lekin uni hujjatga qo'shmaydi)

• .appendTo ('. asosiy')

• tanlangan/yaratilgan elementni "main" CSS klassi bo'lgan elementga qo'shadi

• Boshqa elementlarni qo'shish funktsiyasi

  .append ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .kiritmoq()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .dan keyin ()

  ,

  .dan oldin ()

Agar biror narsa aniq bo'lmasa, GitHub -dagi tegishli majburiyatni ko'rib chiqing.

5 -qadam: Interfaol elementlar

Video qiziqarli, lekin bu ko'rsatmaning maqsadi - Arduino / ESP bilan ishlash. Keling, videoni Arduino / ESP ga yuboradigan va javob kutadigan tugmachani almashtiramiz.

Bizga a kerak bo'ladi

$('')

sahifaga qo'shish va unga voqea tinglovchini biriktirish. Belgilangan voqea sodir bo'lganda, voqea tinglovchisi qayta qo'ng'iroq qilish funktsiyasini chaqiradi:

$ (''). matn ('a tugma'). ustida ('bosish', funksiya ()

{// bu erdagi kod tugma bosilganda bajariladi}). appendTo ('body');

Va qayta qo'ng'iroq qilish funktsiyasiga AJAX so'rovini qo'shing:

$.get ('/ajax', funktsiya (ma'lumotlar)

{// bu erdagi kod AJAX so'rovi bajarilganda bajariladi});

So'rov bajarilgandan so'ng, qaytarilgan ma'lumotlar sahifaga qo'shiladi:

$('

').text (ma'lumotlar). appendTo (' tana ');

Xulosa qilib aytganda, yuqoridagi kod tugma hosil qiladi, uni veb -sahifaga qo'shadi, tugma bosilganda so'rov yuboriladi va javob ham veb -sahifaga qo'shiladi.

Agar siz qayta qo'ng'iroqlarni birinchi marta ishlatayotgan bo'lsangiz, GitHub -dagi majburiyatni tekshirib ko'rishingiz mumkin.

6 -qadam: Interfaol elementga javob bering

Albatta, AJAX so'rovi javobni talab qiladi.

Uchun to'g'ri javobni yaratish uchun

/ajax

url -ga biz qo'shishimiz kerak bo'ladi

aks holda ()

if -ning yopilish qavsidan keyin darhol

/

url

aks holda (urlLine.indexOf ("Get /ajax")> = 0)

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

GitHub majburiyatida men brauzerga har bir so'rov noyob ekanligini ko'rsatish uchun hisoblagich qo'shdim.

7 -qadam: Xulosa

Bu ko'rsatmali darsning oxiri. Sizda Arduino / ESP kichik veb -sahifasi mavjud bo'lib, u tashrif buyuruvchining brauzeriga bulutdan JavaScript faylini yuklashni aytadi. JavaScript -ni yuklagandan so'ng, foydalanuvchi Arduino / ESP bilan aloqa o'rnatishi uchun foydalanuvchi interfeysini ta'minlaydigan veb -sahifaning qolgan qismini yaratadi.

Endi veb -sahifada ko'proq elementlar yaratish va sozlamalarni mahalliy ROM (EEPROM / NVS / etc) da saqlash sizning tasavvuringizga bog'liq.

O'qiganingiz uchun tashakkur va o'z fikringizni bildiring!