Arduino/ESP Config вэб хуудсаа үүлнээс ачаална уу: 7 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:04

Arduino / ESP (ESP8266 / ESP32) төслийг бүтээхдээ та бүх зүйлийг хатуу кодлох боломжтой. Гэхдээ ихэнхдээ ямар нэгэн зүйл эргэж ирдэг бөгөөд та IoT төхөөрөмжөө IDE-д дахин залгах болно. Эсвэл та тохиргоонд илүү олон хүн хандаж байгаа бөгөөд дотоод ажлыг ойлгохыг хүлээхийн оронд UI өгөхийг хүсч байна.

Энэхүү зааварчилгаа нь UU -ийн ихэнх хэсгийг Arduino / ESP дээр биш үүлэн дээр хэрхэн оруулахыг танд хэлэх болно. Үүнийг ингэж хийснээр зай болон санах ойн хэрэглээг хэмнэх болно. Үнэгүй статик вэб хуудсуудыг үзүүлэх үйлчилгээ нь GitHub Pages шиг "үүл" хэлбэрээр тохиромжтой боловч бусад сонголтууд бас ажиллах болно.

Вэб хуудсыг ингэж бүрдүүлэхийн тулд хэрэглэгчийн хөтөч 4 үе шатыг давах шаардлагатай болдог.

1. Arduino / ESP -ээс root url хүснэ үү
2. Маш энгийн вэб хуудсыг хүлээн авч дараахь зүйлийг хэлээрэй.
3. Үүлээс JavaScript файл хүсэх
4. Бодит хуудсыг бүтээдэг кодыг хүлээн авна уу

Энэхүү зааварчилгаа нь дээрх алхамуудын дагуу хуудас бэлэн болсны дараа Arduino / ESP -тэй хэрхэн харьцах талаар тайлбарлах болно.

Энэхүү заавар дээр бүтээсэн кодыг GitHub дээрээс олж болно.

Урьдчилсан нөхцөл

Энэхүү зааварчилгаа нь танд тодорхой материал, зарим урьдчилсан мэдлэгийг олж авсан гэж үзэж байна.

• Arduino (сүлжээнд нэвтрэх боломжтой) / ESP
• Дээрхийг хавсаргах компьютер
• WiFi холболт интернетэд холбогдсон байна
• Arduino IDE суулгасан (мөн ESP32 -д зориулагдсан)
• Та ноорогоо IoT төхөөрөмждөө хэрхэн байршуулахаа мэддэг
• Та Git & GitHub -ийг хэрхэн ашиглахаа мэддэг

Алхам 1: Энгийн вэбсерверийн ноорог ашиглан эхлүүлэх

Бид аль болох энгийнээр эхэлж, эндээс эхлэн хөгжүүлээрэй.

#оруулах

const char* ssid = "yourssid"; const char* password = "yourpasswd"; WiFiServer сервер (80); void setup () {// Цувралыг эхлүүлж, порт нээгдэхийг хүлээнэ үү: Serial.begin (115200); while (! Цуваа) {; // цуваа порт холбогдохыг хүлээнэ үү. Зөвхөн эх USB портод хэрэгтэй} WiFi.begin (ssid, password); while (WiFi.status ()! = WL_CONNECTED) {саатал (500); Serial.print ("."); } Serial.println ("WiFi холбогдсон."); Serial.println ("IP хаяг:"); Serial.println (WiFi.localIP ()); server.begin (); } void loop () {// ирж буй үйлчлүүлэгчдийг сонсох WiFiClient client = server.available (); // ирж буй үйлчлүүлэгчдийг сонсох bool sendResponse = false; // хэрэв бид хариу илгээхийг хүсвэл true гэж тохируулаарай String urlLine = ""; // хэрэв (клиент) // хэрэв та үйлчлүүлэгчтэй бол {Serial.println ("Шинэ үйлчлүүлэгч.") хүссэн URL -г хадгалах мөр үүсгэх. // цуваа порт String currentLine = "" дээр зурвас хэвлэх; // үйлчлүүлэгч холбогдсон байх үед клиентээс ирж буй өгөгдлийг хадгалах String хийх = client.read (); // байтыг уншина уу, хэрэв (c == '\ n') // хэрэв байт нь шинэ мөрийн тэмдэгт бол {// хэрэв одоогийн мөр хоосон байвал та хоёр шинэ мөрийн мөрийг дараалан авсан болно. // энэ бол үйлчлүүлэгчийн HTTP хүсэлтийн төгсгөл юм, тиймээс хариу илгээнэ үү: if (currentLine.length () == 0) {sendResponse = true; // бүх зүйл зүгээр! завсарлага; // while давталтаас гарах} өөр // хэрэв та шинэ мөр авсан бол currentLine -ийг арилга: {if (currentLine.indexOf ("GET /")> = 0) // энэ нь URL мөр байх ёстой {urlLine = currentLine; // дараа ашиглахаар хадгална} currentLine = ""; // currentLine String -ийг дахин тохируулна уу}} if if (c! = '\ r') // хэрэв танд тэрэг буцах тэмдэгтээс өөр зүйл байгаа бол {currentLine += c; // үүнийг currentLine -ийн төгсгөлд нэмж оруулаарай}}} if (sendResponse) {Serial.print ("Үйлчлүүлэгч хүссэн"); Serial.println (urlLine); // HTTP толгой нь үргэлж хариултын код (жишээ нь HTTP/1.1 200 OK) // болон агуулгын төрлөөр эхэлдэг бөгөөд ингэснээр үйлчлүүлэгч юу ирж байгааг мэддэг, дараа нь хоосон мөр: client.println ("HTTP/1.1 200 OK"); client.println ("Агуулгын төрөл: текст/html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // хэрэв URL нь зөвхөн " /" {// бол HTTP хариултын агуулга нь толгойг дагана: client.println ("Сайн уу ертөнц!"); } // HTTP хариулт нь өөр хоосон мөрөөр төгсдөг: client.println (); } // холболтыг хаах: client.stop (); Serial.println ("Үйлчлүүлэгч салгагдсан."); }}

Дээрх кодыг хуулж эсвэл GitHub дээрх үүргээс татаж аваарай.

SSID болон нууц үгээ сүлжээндээ нийцүүлэн өөрчлөхөө бүү мартаарай.

Энэхүү ноорог нь бидний сайн мэдэх Arduino -ийг ашигладаг

тохируулах()

ба

давталт ()

функцууд. Дахь

тохируулах()

IDE -ийн цуваа холболтыг эхлүүлж, WiFi -ийг ажиллуулдаг. WiFi нь SSID -д холбогдсоны дараа IP хэвлэгдэж, вэб сервер эхэлнэ. Давталт бүрт

давталт ()

Вэб серверийг холбогдсон үйлчлүүлэгчдийг шалгах функц. Хэрэв үйлчлүүлэгч холбогдсон бол хүсэлтийг уншиж, хүссэн URL -г хувьсагч хэлбэрээр хадгална. Хэрэв бүх зүйл зүгээр юм шиг санагдаж байвал серверээс үйлчлүүлэгчид өгсөн хариуг хүссэн URL дээр үндэслэн хийдэг.

АНХААРУУЛГА! Энэ код нь энгийн байлгахын тулд Arduino String классыг ашигладаг. String оновчлол нь энэхүү зааварчилгааны хүрээнд байдаггүй. Энэ тухай дэлгэрэнгүй мэдээллийг Minimal Ram ашиглан Arduino String Manipulation -ийн талаар уншина уу.

Алхам 2: Алсын JavaScript үүсгэх

Arduino / ESP нь зочдод хөтөчийг нэг файлыг ачаалахыг хэлнэ. Бусад бүх зүйлийг энэ JavaScript кодоор хийх болно.

Энэхүү зааварчилгаанд бид jQuery -ийг ашиглах болно, энэ нь тийм ч чухал шаардлагагүй, гэхдээ ажлыг хөнгөвчлөх болно.

Энэ файлыг вэбээс үзэх боломжтой байх ёстой, статик хуудасны сервер үүнийг хийхэд хангалттай, жишээ нь GitHub хуудас. Тиймээс та шинэ GitHub репозитор хийж, a үүсгэхийг хүсч магадгүй юм

gh-хуудас

салбар Дараах кодыг a дотор оруулна уу

.js

файлыг зөв салбар дахь репозиторт оруулна уу.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // script үүсгэх.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // src = "" тохируулна уу. script.onload = function () // дуудлага хийх функц, jquery файлыг ачаалсны дараа дуудагддаг {$ = window.jQuery; // дэлхийн хувьсагч болох init (); getElementsByTagName ('head') [0].appendChild (script); // үүсгэсэн хаягийг документэд нэмбэл энэ нь jQuery lib -ийг ачаалж эхлэх болно)) (); init () функц {// jQuery -г ачаалж дууссан, дараа нь энд код оруулах болно …}

Дээрх кодыг хуулж эсвэл GitHub дээрх даалгавраас татаж аваарай.

Таны файлд нэвтрэх боломжтой эсэхийг шалгаарай. GitHub-ийн хувьд https://username.github.io/repository/your-file.j… руу орно уу.

хэрэглэгчийн нэр

,

репозитор

ба

таны файл.js

зөв параметрүүдийн хувьд).

Алхам 3: Алсын JavaScript файлыг зочдын хөтөч рүү ачаалж байна

Бид бүх зүйлийг тохируулсны дараа вэбсайтыг алсын JavaScript файлыг ачаалах цаг болжээ.

Та ноорогны 88 -р мөрийг өөрчлөх замаар үүнийг хийж болно

client.println ("Сайн уу ертөнц!"); t

client.println ("");

(өөрчлөх

src

Энэ бол жижиг HTML хуудас бөгөөд JavaScript файлыг зочдын хөтөч дээр ачаалахад л хангалттай юм.

Өөрчлөгдсөн файлыг GitHub дээрх холбогдох даалгавраас олж болно.

Тохируулсан ноорогоо Arduino / ESP дээрээ байршуулна уу.

Алхам 4: Хуудас дээр шинэ элемент нэмэх

Хоосон хуудас нь ашиггүй тул вэб хуудсанд шинэ элемент нэмэх цаг болжээ. Одоогоор энэ нь YouTube -ийн видео байх болно. Энэ жишээн дээр үүнийг хийхийн тулд jQuery кодыг ашиглах болно.

Дараах кодын мөрийг

үүн дотор()

функц:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}). css ({өргөн: '608px', өндөр: '342px'}). AppendTo ('body');

Энэ нь үүсгэх болно

iframe

элемент, зөвийг тохируулна уу

src

css ашиглан шинж чанарыг тодорхойлж, хэмжээг тохируулж, элементийг хуудасны эхэнд нэмнэ үү.

jQuery нь вэб хуудсан дээрх элементүүдийг хялбархан сонгох, өөрчлөхөд бидэнд туслах зарим үндсэн зүйлийг хийхэд тусалдаг.

• $ ('бие')

• аль хэдийн байгаа элементийг сонгоно, бусад CSS сонгогчдыг бас ашиглаж болно

• $(' ')

  шинээр бий болгодог

• элемент (гэхдээ үүнийг баримт бичигт нэмдэггүй)

• .appendTo ('. үндсэн')

• сонгосон/үүсгэсэн элементийг CSS 'main' ангилалтай элементэд нэмнэ

• Элемент нэмэх бусад функц нь

  .append ()

  ,

  .preend ()

  ,

  .prependTo ()

  ,

  .insert ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  дараа ()

  ,

  . өмнө ()

Хэрэв ямар нэгэн зүйл тодорхойгүй байвал GitHub дээрх холбогдох үүргийг хараарай.

Алхам 5: Интерактив элементүүд

Видео бол хөгжилтэй, гэхдээ энэ зааварчилгааны зорилго нь Arduino / ESP -тэй харилцах явдал юм. Ардуино / ESP руу мэдээлэл илгээдэг товчлуурыг орлуулж, хариултыг хүлээж байя.

Бидэнд a хэрэгтэй болно

$('')

хуудсанд нэмж, үйл явдал сонсогчийг түүнд хавсаргана уу. Үйл явдал сонсогч нь тухайн үйл явдал тохиолдох үед буцааж буцаах функцийг дуудах болно.

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

{// товчлуур дээр дарахад код энд ажиллах болно}). appendTo ('body');

Дахин залгах функцэд AJAX хүсэлтийг нэмнэ үү.

$.get ('/ajax', функц (өгөгдөл)

{// AJAX хүсэлт дууссаны дараа энд байгаа кодыг гүйцэтгэх болно});

Хүсэлтийг дуусгасны дараа буцаагдсан өгөгдлийг хуудсанд нэмж оруулах болно.

$('

'). текст (өгөгдөл). appendTo (' бие ');

Дүгнэж хэлэхэд дээрх код нь товчлуур үүсгэж вэб хуудсанд нэмж оруулах бөгөөд товчлуурыг дарахад хүсэлт илгээх бөгөөд хариуг вэб хуудсанд нэмж оруулах болно.

Хэрэв та анх удаа буцааж дуудлага ашиглаж байгаа бол GitHub дээрх үүргийг шалгаж, бүх зүйл хэрхэн үүрлэсэн болохыг олж мэдэхийг хүсч магадгүй юм.

Алхам 6: Интерактив элементэд хариулна уу

Мэдээжийн хэрэг, AJAX хүсэлтэнд хариу өгөх шаардлагатай.

Гэсэн зөв хариултыг бий болгох

/ajax

url бидэнд an нэмэх шаардлагатай болно

өөр бол ()

if -г шалгаж буй хаалтын хаалтны дараа

/

url.

өөр бол (urlLine.indexOf ("GET /ajax")> = 0)

{client.print ("Сайн байна уу!"); }

GitHub -ийг хийхдээ би хүсэлт болгонд өвөрмөц байдгийг харуулах тоолуур нэмсэн.

Алхам 7: Дүгнэлт

Энэ зааварчилгаа дуусч байна. Та одоо Arduino / ESP -тэй бөгөөд жижиг вэб хуудсаар үйлчлүүлэгчийн хөтөч дээр JavaScript файлыг үүлнээс ачаалахыг хэлдэг. JavaScript -ийг ачаалсны дараа энэ нь хэрэглэгчийн Arduino / ESP -тэй харилцах UI -ийг хангах вэб хуудасны бусад агуулгыг бий болгодог.

Вэб хуудсан дээр илүү олон элемент үүсгэж, тохиргоог дотооддоо ямар нэгэн төрлийн ROM (EEPROM / NVS / гэх мэт) дээр хадгалах нь таны төсөөллөөс хамаарна.

Уншсанд баярлалаа, санал хүсэлтээ чөлөөтэй хэлээрэй!