Как называется аналог windows

Программирование веб-интерфейсов для Arduino

В последнее время на нашем сайте время от времени появлялись запросы типа:

И правда, такой статьи здесь не было. Мы уже писали об Ethernet Shield (даже дважды) и о WiFi Shield. Однако мы всегда обсуждали скорее, как запрограммировать Arduino на считывание датчиков, управление светодиодами… Всегда было лишь немного поверхностной информации о программировании веб-интерфейса. Я хотел бы исправить это сейчас.

Как это обычно бывает, у нас есть практически неограниченные возможности выбора используемых компонентов. Если мы хотим измерить влажность, температуру или скорость ветра, у нас есть множество различных датчиков на выбор. Точно так же существует ряд модулей и шилдов, которые подключают Arduino к Интернету (например, Ethernet Shield, WiFi Shield, модуль ESP8266 и другие). У нас также может быть много устройств вывода (светодиоды, моторы, зуммеры…). Всю систему можно изобразить символически следующим образом:

Таким образом, Arduino взаимодействует с сетью с помощью модуля Connection . Кроме того, он получает значения от датчиков (влажность воздуха, скорость ветра и т. д.) и может отправлять другие значения на устройства вывода (скорость вращения двигателя, угол серводвигателя, яркость светодиодов и т. д.). Что общего между этими ценностями?

Это все цифры! Будь то десятичные или целые, они по-прежнему являются просто числовыми значениями. Поэтому сегодня мы не будем особо разбираться, какие датчики и выходы у нас есть. Для простоты выберем два аналоговых датчика — потенциометра (на выводах А4, А5) — и один цифровой — кнопки (вывод D2). Но вы также можете представить, что это термометр или гигрометр. В качестве устройства вывода будет использоваться обычный светодиод (вывод D3).

Кроме того, мы не будем затрагивать большую часть части «Соединение» . Его управление зависит от конкретного используемого модуля. Но часто работа с модулями очень похожа (напримерEthernet Shield и Wifi Shield). Мы будем использовать Ethernet Shield.

Выбор решения

Теперь нужно решить, как создать коммуникационный интерфейс. Есть ряд сторонних решений. О некоторых из них мы расскажем в конце статьи. Но сначала попробуем создать все с нуля.

Местоположение веб-сайта

Как вы помните из статьи об Ethernet и Wi-Fi Shield, Arduino может появляться в сети двумя способами. Либо как сервер, либо как клиент. В первом случае веб-страница управления запускается непосредственно на Arduino. У нас не так много вариантов, потому что у Arduino ограниченная память, но ее достаточно для базового управления. Мы будем использовать это решение, если не планируем выполнять анализ или более сложную визуализацию данных.

Arduino в качестве сервера

Основой является протокол HTTP

Основой связи между сервером и клиентом является (в основном) протокол HTTP. Он передает всю необходимую информацию, которую клиент может ожидать от сайта, и в то же время, используя HTTP-протокол, клиент говорит, какие данные он запрашивает у сервера. О HTTP я писал в статье об Ethernet Shield, где вы можете напомнить себе об этой проблеме.

Читайте также:  Как подключить колонки sven к компьютеру windows 10

Давайте кратко вспомним работу Shield на примере из раздела Примеры > WebClient , который загружает содержимое www.google.com и выводит его по последовательной линии (включая заголовок HTTP).

Когда мы открываем монитор последовательной линии, он говорит:

Ускоренный курс HTML

Основой большинства веб-сайтов является HTML — язык гипертекстовой разметки, т. е. «язык гипертекстовой разметки». На чешском языке, пожалуй, самая обширная страница, посвященная HTML, — http://www.jakpsatweb.cz/, на английском языке HTML очень подробно описан на веб-сайте W3CSchools. Основным строительным элементом страницы является бренд (чаще используется английский тег обозначения). Эти теги написаны наугловые скобки: . Они могут быть парами — они разграничивают какую-то часть веб-страницы, например Жирный шрифт (очевидно, их не видно на странице, они здесь для иллюстрации). Каждый открывающий парный тег должен иметь соответствующий закрывающий тег (начиная с косой черты). Второй вариант — нечетные теги — например, новая строка:
(нечетность обозначается косой чертой в конце). Кроме того, теги можно вкладывать друг в друга (иначе HTML не имел бы особого смысла :)). Таким образом, ABC DEF будет отображаться как ABC DEF .

Основной скелет страницы выглядит следующим образом:

Поэтому нам нужно, чтобы Arduino после подключения отправил нам веб-страницу, которая будет содержать соответствующие элементы управления. Мы начнем медленно. Мы хотим управлять светодиодом с помощью ссылок выключения и включения.

Управление светодиодами

В HTML ссылка создается с помощью тега Link Text. Параметры будем передавать на сервер методом GET (как в статье про Ethernet Shield). Итак, когда мы создадим ссылку OFF, на которую мы затем нажмем, HTTP-запрос, который клиент отправляет на сервер, будет начинаться следующим образом:

Из этого нам нужно «извлечь» именно часть l=0. Поэтому мы будем искать первое вхождение «?» в запросе, а затем читать, что содержит часть GET. Мы будем использовать модифицированный код из статьи Ethernet Shield. Обратите внимание, что перед кавычками, являющимися частью ссылки, ставится обратная косая черта: \». Это необходимо здесь из-за компилятора. Мы говорим ему, что хотим работать с кавычками и что это не часть программы (начало/конец строки). В теге указано, что мы будем работать с набором символов UTF-8, который также поддерживает чешские символы.

Отображать информацию

Добавить информацию о состоянии потенциометров и кнопок очень просто. Мы можем выбрать способ отображения данных. Чтобы продемонстрировать простоту HTML, мы наглядно покажем их встол. Мы будем использовать тот же код, просто добавим несколько строк. Теги для создания таблицы:

для самой таблицы, для строки,
для ячейки. Все три в паре. Код страницы выглядит так:

Мы могли бы продолжать и продолжать. Часто вам нужно не текущее значение, а курс с течением времени. Так что нам пришлось бы записывать значения в Arduino и отображать их при подключении. Но с отображением значений мы разберемся позже.

Примечание для более опытных веб-мастеров: может быть интересно использовать JS-скрипт, вставленный из внешнего источника, для получения красивых графиков и визуализаций.

Arduino в качестве клиента

В этом случае Arduino отправляет значения на сервер, который затем их обрабатывает. На мой взгляд, этот вариант гораздо больше подходит, потому что вы облегчите работу Arduino. Недостатком является то, что вам нужен указанный сервер. В нашем случае это будет PHP-сервер, который будет записывать полученные значения в базу данных MySQL (хороший туториал по PHP можно найти, например, на сервере ITnetwork). Вы также можете использовать бесплатный хостинг. Мы будем регистрировать значения по адресу https://bastlirna.hwkitchen.cz/data/logger.php . Находящаяся здесь программа будет ждать значений, которая, получив их, сохранит их в базе данных вместе с временными данными записи.

Читайте также:  Как сделать скриншот на компьютере если нет кнопки принтскрин

Регистратор данных Arduino

Создать таблицу MySQL

В доступном инструменте управления базой данных MySQL (например, phpMyAdmin) создайте таблицу arduino_data , в которой будет три столбца: id, timestamp, value. В уже упомянутом phpMyAdmin, мы сделаем это после входа в систему следующим образом:

  1. Выбираем базу данных
  2. В нижней части окна заполните раздел Создать таблицу . В поле Имя введите arduino_data , а в поле Количество полей введите 3.
  3. Нажимаем на кнопку Выполнить .

Создание MySQLтаблицы — Часть первая

Занесение значений в таблицу

Как мы создали таблицу, нам просто нужно добавить значение, и идентификатор и временная метка будут добавлены автоматически. Теперь к PHP-коду — отдельные части закомментированы. Вот как выглядит содержимое файла logger.php .

Если мы сейчас загрузим этот код на сервер и откроем его в браузере через https://bastlirna.hwkitchen.cz/data/logger.php/?hodona=1000 , появится новая запись. появляются в базе данных :

Запись в базу данных

Программа Arduino

Теперь давайте перейдем к Arduino. Нам нужно отправить из него измеренное значение.

Этот код отправляет значение на сервер примерно каждые пять секунд. Таблица постепенно заполняется данными.

Значения в MySQL

Отображение измеренных значений

Для отображения значений мы будем использовать библиотеку JavaScript Chart.js. Скачиваем архив с библиотекой и распаковываем в data/Chart . Все, что нам нужно, это Chart.js и содержимое папки src . Мы будем вызывать программу, которая будет отображать данные show.php .

Вы можете увидеть результат на https://bastlirna.hwkitchen.cz/data/show.php . Chart.js предлагает различные типы диаграмм. Вместе с четким описанием вы можете найти их в документации Chart.js.

Управление Arduino

Возможно, вам интересно, как управлять Arduino, которая подключается к сайту в качестве клиента. Здесь тоже есть несколько путей. Мы снова будем использовать PHP и MySQL. В MySQL мы будем хранить значения конфигурации, которые Arduino получит при подключении к странице, выступающей посредником между Arduino и MySQL.

Создание таблицы

Мы начнем с создания очень простой таблицы, которую назовем arduino_controls и которая будет иметь два столбца. Мы вызываем первый модуль (что мы контролируем) и второй значение (какое его состояние). Остальные устанавливаем по рисунку. ( Да, мы должны установитьключ, но я опускаю его для простоты. ).

Форма конфигурации

Теперь мы создадим форму, которая будет изменять значения в таблице. В нашем случае мы будем работать с одной строкой таблицы. Его значение module будет led и будет иметь значение 0 или 1. В форме мы будем использовать так называемый переключатель для переключения значения между 0 и 1 (что вы конечно знаете, но можете и не знать, что так он называет). Код также будет включать часть, которая определяет, существует ли строка с именем led. Если он не существует, он его создаст. Назовем файл config.php .

Форма не обязательно должна содержать только переключатель, а целый ряд различных входных данных. Вы можете просмотреть их обзор здесь, например. Теперь нам нужно создать страницу, которая будет отправлять данные из базы данных в Arduino.

Страница с конфигурацией

Мы назовем файл controller.php . Задача будет состоять в том, чтобы перечислить содержимое таблицы arduino_ovladani в виде модуль:значение: (он выведет все возможные строки таблицы одну за другой). Это будет очень простая программа:

Читайте также:  Как установить вайбер для windows 10

Теперь осталось создать программу Arduino, которая будет подключаться к странице https://bastlirna.hwkitchen.cz/data/controller.php и соответствующим образом устанавливать состояние светодиода.

Изменить состояние светодиода

Это зависит от проекта, как часто нам нужно проверять изменение статуса. Иногда достаточно проверять раз в час, а иногда и секунды слишком много. Мы выбираем интервал проверки приблизительно один раз в минуту.

Полезно понимать, что страница, предоставляющая данные для Arduino, также может быть страницей, которая получает значения от Arduino и записывает их в базу данных.

На этом завершается та часть, где мы все программировали сами, и мы можем кратко рассмотреть некоторые существующие сервисы, которые мы можем использовать.

Сторонние решения

Заборы

Как следует из названияпредполагает, что сервис Plotly в основном используется для визуализации данных. Он предлагает бесплатную программу для небольших объемов данных. Вы можете найти его по URL-адресу plot.ly. Например, вас могут вдохновить проекты, отображающие текущую температуру или температуру и влажность.

Фант

Автором проекта Phant является американская компания Sparkfun, которая продает очень успешные шилды и компоненты для Arduino и других плат. Вы можете найти его на data.sparkfun.com. Преимущество в том, что Phant работает на Node.js и его можно запустить на собственном сервере. Его использование четко описано в серии «Передача данных на Data.SparkFun.com». Общедоступные каналы можно просмотреть на странице data.sparkfun.com/feeds.

ИФТТТ

Возможно, вы знакомы с этой услугой. Он используется для подключения API разных приложений, которые обычно не могут взаимодействовать друг с другом. Вы создаете предписание, которое запускает реакцию на основе действия (отсюда и название — IF This Then That — если это, то это). Например, вы можете создать рецепт, который автоматически сохраняет все вложения из Gmail в Skydrive, отправляет все твиты о вас на вашу электронную почту и так далее. Волшебство происходит, когда вы подключаете Arduino к IFTTT. Как насчет того, чтобы сделать датчик открытия двери на ESP8266 (с помощью Adafruit.io), отправить электронное письмо при нажатии кнопки или включить розетку WiFi при обнаружении движения?

Вещи говорят

Thingspeak — это служба, предназначенная для подключения устройств Интернета вещей. Например, ознакомьтесь с простым учебным пособием, посвященным записи данных или регистрации влажности.

IBM Bluemix

Последние два примера относятся скорее к разряду «с пушкой по воробью». Но их использование может пригодиться, если у вас есть некоторый опыт работы с этими платформами. Вы можете начать работу с IBM Bluemix, например, из учебника, с помощью которого вы подключаете термометр к Bluemix. Последний использует протокол MQTT, который должен заменить HTTP для v-устройств.Интернет вещей.

Веб-службы Amazon

Amazon объявила о поддержке SDK для Arduino Yun в августе прошлого года. Подробнее об AWS можно прочитать здесь.

Вывод

Вы видите, что существует множество различных комбинаций, которые невозможно втиснуть в одну статью. Тем не менее, я надеюсь, что дал вам хорошее представление о обсуждаемых вопросах, и что полученных знаний будет достаточно, чтобы легко пройти через ваши проекты 🙂

Вам что-то непонятно из объяснения или у вас есть другие идеи, как сделать какую часть? Не стесняйтесь, дайте нам знать в комментариях или на форуме!

Поделиться с друзьями
ОС советы