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

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

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

Это руководство расскажет вам, как разместить большую часть пользовательского интерфейса в облаке, а не на Arduino / ESP. Таким образом вы сэкономите место и память. Служба, предоставляющая бесплатные статические веб-страницы, особенно подходит в качестве «облака», например GitHub Pages, но, вероятно, подойдут и другие варианты.

Для создания веб-страницы таким образом браузер пользователя должен выполнить 4 шага:

1. Запросить корневой URL-адрес от Arduino / ESP
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); в то время как (! серийный) {; // ждем подключения последовательного порта. Требуется только для собственного USB-порта} WiFi.begin (ssid, пароль); в то время как (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 if (client) // если вы получаете клиента, {Serial.println ("New Client."); // выводим сообщение через последовательный порт String currentLine = ""; // создаем строку для хранения входящих данных от клиента while (client.connected ()) // цикл, пока клиент подключен {if (client.available ()) // если есть байты для чтения от клиента, {char c = client.read (); // считываем байт, затем if (c == '\ n') // если байт является символом новой строки {// если текущая строка пуста, у вас есть два символа новой строки в строке. // это конец клиентского HTTP-запроса, поэтому отправьте ответ: if (currentLine.length () == 0) {sendResponse = true; // все в порядке! перерыв; // выход из цикла while} else // если у вас есть новая строка, то очищаем currentLine: {if (currentLine.indexOf ("GET /")> = 0) // это должна быть строка URL {urlLine = currentLine; // сохраняем для дальнейшего использования} currentLine = ""; // сбрасываем строку currentLine}} else 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 ("Content-type: text / html"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // если URL только "/" {// содержимое HTTP-ответа следует за заголовком: client.println ("Hello world!"); } // HTTP-ответ заканчивается еще одной пустой строкой: client.println (); } // закрываем соединение: client.stop (); Serial.println («Клиент отключен»); }}

Скопируйте приведенный выше код или загрузите его из коммита на GitHub.

Не забудьте изменить SSID и пароль в соответствии с вашей сетью.

В этом скетче используется хорошо известный Arduino.

настраивать()

а также

петля()

функции. в

настраивать()

Инициализируется последовательное соединение с IDE и Wi-Fi. Как только Wi-Fi подключается к указанному SSID, IP печатается и веб-сервер запускается. На каждой итерации

петля()

Функция веб-сервера проверяется на наличие подключенных клиентов. Если клиент подключен, запрос читается, а запрошенный URL сохраняется в переменной. Если все в порядке, ответ сервера клиенту выполняется на основе запрошенного URL.

ПРЕДУПРЕЖДЕНИЕ! В этом коде для простоты используется класс Arduino String. Оптимизация строк не входит в объем данной инструкции. Подробнее об этом читайте в инструкции по манипулированию строкой Arduino с использованием минимального ОЗУ.

Шаг 2: Создание удаленного JavaScript

Arduino / ESP скажет браузеру посетителей загрузить этот файл. Все остальное сделает этот код JavaScript.

В этом руководстве мы будем использовать jQuery, это не обязательно, но упростит задачу.

Этот файл должен быть доступен из Интернета, для этого достаточно сервера статических страниц, например, страниц GitHub. Так что вы, вероятно, захотите создать новый репозиторий GitHub и создать

gh-страницы

ветвь. Поместите следующий код в

.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 (); // вызываем функцию инициализации}; document. getElementsByTagName ('head') [0].appendChild (script); // добавляем созданный тег в документ, это запустит загрузку jQuery lib}) (); function init () {// Закончил загрузку jQuery, позже добавим сюда код…}

Скопируйте приведенный выше код или загрузите его из коммита на GitHub.

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

имя пользователя

,

хранилище

а также

ваш-файл.js

для правильных параметров).

Шаг 3. Загрузка удаленного файла JavaScript в браузер посетителей

Теперь, когда у нас все настроено, пора заставить веб-страницу загружать удаленный файл JavaScript.

Вы можете сделать это, изменив строку 88 эскиза с

client.println («Привет, мир!»); т

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 ('тело');

Это создаст

iframe

элемент, установите правильный

src

атрибут и установите размер с помощью css и добавьте элемент в тело страницы.

jQuery помогает нам легко выбирать и изменять элементы на веб-странице, о чем нужно знать несколько основных вещей:

• $ ('тело')

• выбирает любой уже существующий элемент, также могут использоваться другие селекторы css

• $(' ')

  создает новый

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

• .appendTo ('. главная')

• добавляет выбранный / созданный элемент к элементу с классом css 'main'

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

  .append ()

  ,

  .prepend ()

  ,

  .prependTo ()

  ,

  .вставлять()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .после()

  ,

  .до()

Взгляните на соответствующий коммит на GitHub, если что-то неясно.

Шаг 5: интерактивные элементы

Видео - это весело, но цель этого руководства - взаимодействовать с Arduino / ESP. Давайте заменим видео на кнопку, которая отправляет информацию в Arduino / ESP, а также ожидает ответа.

Нам понадобится

$('')

добавить на страницу и прикрепить к ней прослушиватель событий. Слушатель событий вызовет функцию обратного вызова, когда произойдет указанное событие:

$ (''). text ('кнопка'). on ('щелчок', функция ()

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

И добавьте в функцию обратного вызова запрос AJAX:

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

{// код здесь будет выполнен, когда запрос AJAX будет завершен});

После завершения запроса возвращенные данные будут добавлены на страницу:

$('

').text (данные).appendTo (' тело ');

Таким образом, приведенный выше код создает кнопку, добавляет ее на веб-страницу, при нажатии кнопки будет отправлен запрос, и ответ также будет добавлен на веб-страницу.

Если вы впервые используете обратные вызовы, вы можете проверить фиксацию на GitHub, чтобы увидеть, как все вложено.

Шаг 6. Ответьте на интерактивный элемент

Конечно, запрос AJAX требует ответа.

Чтобы создать правильный ответ для

/ ajax

URL, нам нужно добавить

иначе если ()

сразу после закрывающей скобки оператора if, который проверяет

/

URL.

иначе, если (urlLine.indexOf ("GET / ajax")> = 0)

{client.print («Привет!»); }

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

Шаг 7: Заключение

Это конец этой инструкции. Теперь у вас есть Arduino / ESP, обслуживающий небольшую веб-страницу, которая сообщает браузеру посетителя загрузить файл JavaScript из облака. После загрузки JavaScript формирует остальную часть содержимого веб-страницы, предоставляя пользовательский интерфейс для взаимодействия пользователя с Arduino / ESP.

Теперь ваше воображение может создать дополнительные элементы на веб-странице и сохранить настройки локально на каком-либо ПЗУ (EEPROM / NVS / и т. Д.).

Спасибо за чтение и не стесняйтесь оставлять отзывы!