Arduino/ESP Config веб -бетін бұлттан жүктеңіз: 7 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:26

Arduino / ESP (ESP8266 / ESP32) жобасын жасаған кезде сіз бәрін қатаң кодтай аласыз. Көбінесе бірдеңе пайда болады және сіз IoT құрылғысын IDE-ге қайта қосуды аяқтайсыз. Немесе сізде конфигурацияға көп адамдар кірді және сіз ішкі жұмысты түсінеді деп күтпей, UI бергіңіз келеді.

Бұл нұсқаулық UU -дің көп бөлігін Arduino / ESP орнына бұлтқа қалай қою керектігін айтады. Осылай ету кеңістікті және жадты үнемдеуге мүмкіндік береді. Тегін статикалық веб -беттерді ұсынатын қызмет GitHub Pages сияқты «бұлт» ретінде қолайлы, бірақ басқа опциялар да жұмыс істейтін шығар.

Веб -бетті осылайша құру үшін пайдаланушы шолушысы 4 қадамнан өтуі қажет:

1. Arduino / ESP -тен түбірлік URL сұраңыз
2. Қарапайым веб -бетті алыңыз, онда мыналар айтылады:
3. Бұлттан JavaScript файлын сұраңыз
4. Нақты бетті құратын кодты алыңыз

Бұл нұсқаулық бет жоғарыда көрсетілген қадамдарға сәйкес дайын болғаннан кейін Arduino / ESP -пен қалай әрекеттесу керектігін түсіндіреді.

Бұл нұсқаулықта жасалған кодты GitHub -тан табуға болады.

Пререквизиттер

Бұл нұсқаулық сізге белгілі бір материалдарға және кейбір алдын ала білімге қол жеткізуді болжайды:

• Arduino (желіге кіру мүмкіндігі бар) / ESP
• Жоғарыдағыларды тіркейтін компьютер
• Wi -Fi Интернетке қосылған
• 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, құпия сөз); 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 = «» сериялық портынан хабарды басып шығару; // (client.connected ()) // клиент қосылған кезде клиенттен кіретін деректерді ұстап тұру үшін жол жасаңыз {if (client.available ()) // егер клиенттен оқылатын байттар болса, {char c = client.read (); // байтты оқыңыз, егер (c == '\ n') // егер байт жаңа жолдың таңбасы болса {// егер ағымдағы жол бос болса, сізде қатарда екі жаңа жол таңбасы бар. // бұл клиенттің HTTP сұрауының соңы, сондықтан жауапты жіберіңіз: if (currentLine.length () == 0) {sendResponse = true; // бәрі жақсы! үзіліс; // while циклінен шығу} else // егер сізде жаңа жол болса, онда currentLine өшіріңіз: {if (currentLine.indexOf («GET /»)> = 0) // бұл URL жолы болуы керек {urlLine = currentLine; // оны кейін пайдалану үшін сақтаңыз} currentLine = «»; // currentLine String}} қалпына келтіру}} else 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 класын қолданады. Жолдарды оңтайландыру осы нұсқаулықтың шеңберіне кірмейді. Бұл туралы толығырақ Minimal Ram көмегімен Arduino String манипуляциясы туралы нұсқаулықтан оқыңыз.

2 -қадам: қашықтан JavaScript құру

Arduino / ESP келушілерге шолғышты бір файлды жүктеуді ұсынады. Қалғанының бәрі осы JavaScript кодымен жасалады.

Бұл нұсқаулықта біз jQuery қолданамыз, бұл өте қажет емес, бірақ жұмысты жеңілдетеді.

Бұл файлға интернеттен қол жетімді болу керек, бұл жұмыс үшін статикалық беттер сервері жеткілікті, мысалы GitHub беттері. Сондықтан сіз жаңа GitHub репозиторийін жасап,

gh-беттер

филиал Келесі кодты a ішіне енгізіңіз

.js

файлды дұрыс тармақта репозиторийде сақтаңыз.

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

Жоғарыдағы кодты көшіріп алыңыз немесе оны GitHub -тегі міндеттемеден жүктеңіз.

Сіздің файлға қол жетімді екенін тексеріңіз. GitHub беттерінде https://username.github.io/repository/your-file.j… өтіңіз (ауыстырыңыз)

пайдаланушы аты

,

репозиторий

және

your-file.js

дұрыс параметрлер үшін).

3 -қадам: Қашықтағы JavaScript файлын келушілер шолушысына жүктеу

Енді бізде бәрі бар, веб -бетті қашықтағы JavaScript файлын жүктеуге уақыт келді.

Сіз мұны эскиздің 88 жолын өзгерту арқылы жасай аласыз

client.println («Сәлем әлем!»); т

client.println («»);

(өзгертіңіз

src

Бұл JavaScript файлының келушілер браузеріне жүктелуі.

Өзгертілген файлды GitHub сәйкес міндеттемесінен де табуға болады.

Реттелген эскизді Arduino / ESP -ке жүктеңіз.

4 -қадам: бетке жаңа элементтер қосу

Бос парақ пайдасыз, сондықтан веб -бетке жаңа элемент қосатын уақыт келді. Әзірге бұл YouTube бейнесі болады, бұл мысалда бұл үшін кейбір jQuery кодтары қолданылады.

Келесі код жолын файлға қосыңыз

ішінде()

функция:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', кадр жиегі: '0'}). css ({ені: '608px', биіктігі: '342px'}). AppendTo ('body');

Бұл жасайды

iframe

элемент, дұрыс орнатыңыз

src

атрибут және CSS көмегімен өлшемді орнатыңыз және элементті беттің корпусына қосыңыз.

jQuery бізге веб -беттегі элементтерді оңай таңдауға және өзгертуге көмектеседі, білуге болатын кейбір негізгі нәрселер:

• $ ('дене')

• кез келген бар элементті таңдайды, басқа CSS селекторларын да қолдануға болады

• $(' ')

  жаңасын жасайды

• элемент (бірақ оны құжатқа қоспайды)

• .appendTo ('. main')

• таңдалған/жасалған элементті 'main' CSS класы бар элементке қосады

• Элементтерді қосудың басқа функциясы

  .append ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .insert ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .кейін ()

  ,

  .бұрын ()

Егер бірдеңе түсініксіз болса, GitHub бойынша сәйкес міндеттемені қараңыз.

5 -қадам: Интерактивті элементтер

Бейне қызықты, бірақ бұл нұсқаулықтың мақсаты - Arduino / ESP -пен өзара әрекеттесу. Келіңіздер, бейнені Arduino / ESP -ке жіберетін түймені ауыстырамыз, сонымен қатар жауап күтеміз.

Бізге а қажет болады

$('')

бетке қосу және оған оқиға тыңдаушысын тіркеу. Көрсетілген оқиға болған кезде оқиғаны тыңдаушы кері шақыру функциясын шақырады:

$ (''). мәтін ('түйме'). бойынша ('басу', функция ()

{// код батырманы басқан кезде орындалады}). appendTo ('body');

Қайта шақыру функциясына AJAX сұранысын қосыңыз:

$.get ('/ajax', функция (деректер)

{// мұнда AJAX сұрауы аяқталған кезде орындалатын код});

Сұрау аяқталғаннан кейін қайтарылған деректер бетке қосылады:

$('

').мәтін (деректер).appendTo (' дене ');

Қысқаша айтқанда, жоғарыдағы код түйме жасайды, оны веб -бетке қосады, түйме басылған кезде сұрау жіберіледі және жауап веб -бетке қосылады.

Егер сіз қоңырау шалуды бірінші рет қолдансаңыз, GitHub -тегі міндеттемені тексеріп, барлығы қалай кірістірілгенін көргіңіз келуі мүмкін.

6 -қадам: Интерактивті элементке жауап беру

Әрине, AJAX сұрауына жауап қажет.

Үшін дұрыс жауап құру үшін

/ajax

url бізге қосу керек болады

әйтпесе ()

if операторының жабылатын жақшасынан кейін бірден

/

url.

әйтпесе (urlLine.indexOf («GET /ajax»)> = 0)

{client.print («Сәлем!»); }

GitHub бойынша міндеттемеде мен браузерге әрбір сұраудың бірегей екенін көрсететін есептегішті қостым.

7 -қадам: Қорытынды

Бұл нұсқаулықтың соңы. Енді сізде келушінің браузеріне бұлттан JavaScript файлын жүктеуді айтатын шағын веб -бетке қызмет көрсететін Arduino / ESP бар. JavaScript жүктелгеннен кейін ол веб -беттің қалған мазмұнын құрады, ол пайдаланушыға Arduino / ESP -пен байланысуға UI береді.

Енді веб -бетте көбірек элементтерді жасау және параметрлерді жергілікті ROM -да (EEPROM / NVS / т.б.) сақтау сіздің қиялыңызға байланысты.

Оқығаныңыз үшін рахмет, және өз пікіріңізді қалдырыңыз!