Заредете вашата уеб страница за конфигуриране на Arduino/ESP от облака: 7 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:53

Когато създавате проект на Arduino / ESP (ESP8266 / ESP32), можете просто да кодирате всичко хардко. Но по-често нещо се появява и в крайна сметка отново ще прикачите вашето IoT устройство към вашата IDE. Или просто имате повече хора, които имат достъп до конфигурацията и искате да предоставите потребителски интерфейс, вместо да очаквате те да разберат вътрешната работа.

Тази инструкция ще ви каже как да поставите по -голямата част от потребителския интерфейс в облака, вместо в Arduino / ESP. Ако направите това по този начин, ще спестите място и използване на паметта. Услуга, предоставяща безплатни статични уеб страници, е особено подходяща като „облак“, като страниците на GitHub, но вероятно ще работят и други опции.

Изграждането на уеб страницата по този начин изисква браузърът на потребителя да премине през 4 стъпки:

1. Заявете коренния URL адрес от Arduino / ESP
2. Получавайте много проста уеб страница, казваща на:
3. Заявете JavaScript файл от облака
4. Получавайте кода, който изгражда действителната страница

Този Instructable също ще обясни как да взаимодействате с 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, парола); 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 = ""; // направете низ за запазване на искания URL адрес, ако (клиент) // ако получите клиент, {Serial.println ("Нов клиент."); // отпечатва съобщение от серийния порт 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 = ""; // нулиране на текущия низ Line}} else if (c! = '\ r') // ако имате нещо друго освен символ за връщане на каретка, {currentLine += c; // добавяме го в края на текущата линия}}} 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, за да го поддържа прост. Оптимизациите на низове не са в обхвата на тази инструкция. Прочетете повече за това в инструкциите за Arduino String Manipulation Using Minimal Ram.

Стъпка 2: Създаване на отдалечен JavaScript

Arduino / ESP ще каже на браузъра на посетителите да зареди този един файл. Всичко останало ще бъде направено от този JavaScript код.

В тази инструкция ще използваме jQuery, това не е строго необходимо, но ще улесни нещата.

Този файл трябва да бъде достъпен от мрежата, достатъчен е сървър на статични страници, за да работи това, например страници на GitHub. Така че вероятно ще искате да направите ново хранилище на GitHub и да създадете

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 = "" attribute script.onload = function () // функция за обратно извикване, извиква се след зареждане на jquery файла {$ = window.jQuery; // прави jQuery достъпна като глобалната $ променлива init (); // извиква функцията init}; document. getElementsByTagName ('head') [0].appendChild (script); // добавете създадения маркер към документа, това ще започне зареждането на jQuery lib}) (); function init () {// Готово зареждане на jQuery, ще добави код тук по -късно…}

Копирайте горния код или го изтеглете от ангажимента на GitHub.

Проверете дали вашият файл е достъпен. В случай на страници на GitHub отидете на https://username.github.io/repository/your-file.j… (заменете

потребителско име

,

хранилище

и

your-file.js

за правилните параметри).

Стъпка 3: Зареждане на отдалечения JavaScript файл в браузъра за посетители

Сега, когато сме настроили всичко, е време да накараме уеб страницата да зареди отдалечения JavaScript файл.

Можете да направите това, като промените ред 88 на скицата от

client.println ("Здравей свят!"); T

client.println ("");

(променете

src

атрибут, който сочи към вашия собствен JavaScript файл). Това е малка html уеб страница, всичко, което прави, е да зареди JavaScript файла в браузъра за посетители.

Промененият файл също може да бъде намерен в съответния коммит на GitHub.

Качете коригираната скица на вашия Arduino / ESP.

Стъпка 4: Добавяне на нови елементи към страницата

Празната страница е безполезна, затова е време да добавите нов елемент към уеб страницата. Засега това ще бъде видеоклип в YouTube. В този пример ще се използват някои jQuery кодове, за да се постигне това.

Добавете следния ред код към

в него()

функция:

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

Това ще създаде

iframe

елемент, задайте правилното

src

атрибут и задайте размера с помощта на css и добавете елемента към тялото на страницата.

jQuery ни помага лесно да избираме и променяме елементи в уеб страницата, някои основни неща, които трябва да знаем:

• $ ('тяло')

• избира всеки вече съществуващ елемент, могат да се използват и други css селектори

• $(' ')

  създава нов

• елемент (но не го добавя към документа)

• .appendTo ('. main')

• добавя избрания/създаден елемент към елемент с css клас "main"

• Други функции за добавяне на елементи са

  .append ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .insert ()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .след()

  ,

  .преди()

Разгледайте съответния коммит на GitHub, ако нещо не е ясно.

Стъпка 5: Интерактивни елементи

Видеоклипът е забавен, но целта на тази инструкция е да взаимодейства с Arduino / ESP. Нека заменим видеоклипа за бутон, който изпраща информация до Arduino / ESP и също чака отговор.

Ще ни трябва а

$('')

за да добавите към страницата и да прикачите слушател на събития към нея. Слушателят на събития ще извика функцията за обратно повикване, когато се случи посоченото събитие:

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

{// кодът тук ще бъде изпълнен при натискане на бутона}). appendTo ('body');

И добавете AJAX заявка към функцията за обратно повикване:

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

{// кодът тук ще бъде изпълнен, когато AJAX заявката приключи});

След като заявката приключи, върнатите данни ще бъдат добавени към страницата:

$('

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

В обобщение, горният код създава бутон, добавя го към уеб страницата, при натискане на бутона ще бъде изпратена заявка и отговорът също ще бъде добавен към уеб страницата.

Ако за първи път използвате обратни извиквания, може да искате да проверите ангажимента в GitHub, за да видите как всичко е вложено.

Стъпка 6: Отговорете на интерактивния елемент

Разбира се, заявката AJAX изисква отговор.

За да създадете правилния отговор за

/ajax

url ще трябва да добавим an

иначе ако ()

веднага след затварящата скоба на оператора if, който проверява

/

url.

иначе ако (urlLine.indexOf ("GET /ajax")> = 0)

{client.print ("Здравей!"); }

В ангажимента на GitHub добавих и брояч, който да покаже на браузъра, че всяка заявка е уникална.

Стъпка 7: Заключение

Това е краят на тази инструкция. Вече имате Arduino / ESP, обслужващ малка уеб страница, която казва на браузъра на посетителя да зареди JavaScript файл от облака. След като JavaScript се зареди, той изгражда останалата част от съдържанието на уеб страницата, предоставяйки потребителски интерфейс за потребителя да комуникира с Arduino / ESP.

Сега зависи от вашето въображение да създадете повече елементи на уеб страницата и да запазите настройките локално на някакъв ROM (EEPROM / NVS / и т.н.).

Благодарим ви за четенето и не се колебайте да дадете отзиви!