Ардуино управление через браузер
Проект в котором мы рассмотрим новую возможность браузера Google Chrome по связи с Ардуино и последовательными устройствами.
О проекте
Недавно Google Chrome добавил функциональность для связи с последовательными устройствами из браузера, что позволит в дальнейшем легко реализовывать интерактивные проекты.
Возможность комбинировать Arduino или физические вычисления с браузерными технологиями может дать дизайнерам и техническим специалистам возможности для более быстрого и дешевого прототипирования потрясающих приложений.
В прошлом Arduino обычно подключалась к Processing для создания интерактивных проектов, продуктов или услуг. Хотя это все еще широко используемый способ подключения Arduino к компьютеру, подключение к браузеру может предоставить более широкий спектр возможностей и требует меньше настроек.
Однако, до недавнего времени, подключение Arduino к веб-браузеру было все еще сложной задачей (веб-сокеты и сервер на устройстве), но теперь, с введением последовательного API, вы можете подключиться к любому последовательному устройству из браузера одним нажатием кнопки.
Одним из огромных преимуществ является то, что программное обеспечение, которое запускается в браузере, легко распространять и запускать на различных устройствах и операционных системах.
Эта система должна работать с любым Arduino, имеющим последовательное соединение с компьютером. На данный момент только Google Chrome поддерживает веб-последовательный порт, если включены экспериментальные функции веб-платформы, но надеемся, что такие возможности смогут появиться и в других браузерах.
Компоненты
Для реализации этого небольшого проекта контроля Ардуино через браузер нам понадобятся всего лишь:
Примеры использования
В своей диссертации о будущем изучения Arduino, Arduino Action, я использовал этот последовательный веб-протокол для установления связи между Arduino и экосистемой телефонов.
Этот проект был создан для опытного прототипирования с Илзе Поуэльс, Себастьяном де Кабо Португал и Кэролайн Вегнер.
В этом прототипе мы использовали связь Bluetooth, но если бы мы знали про webSerial, то это было бы более оптимальным решением.
Камера подключалась к ноутбуку, на котором работал P5.js (ниде) для запуска PoseNet (распознает вашу позу с помощью компьютерного зрения) и Key Nearest Neighbor (модель машинного обучения, которую можно обучить отличать одни позы от других).
Скрипт JS
Скрипт P5.js ниже:
Как это работает
Установите последнюю версию Google Chrome.
для этого идем сюда:
Вы должны теперь иметь возможность общаться с помощью браузера с вашим Arduino.
Можете проверить это на:
Если вы хотите попробовать это самостоятельно в P5.js (см.выше), перейдите к этому скетчу и загрузите скетч Arduino:
Объяснение Javascript
В браузере используется язык сценариев JavaScript, именно здесь вы можете брать значения из Arduino и делать с ними все; он также может отправлять значения обратно в Arduino и использовать другие периферийные устройства, такие как мышь, клавиатура, камера, микрофон и т. д.
Наиболее важными функциями в коде javascript для подключения к Arduino являются функции записи и чтения. В этом примере writeToStream() является эквивалентом Serial.print для компьютера.
В этом случае значение каждого пакета байтов добавляется в поле recieveText .
Вот один простой пример того, как вы можете использовать кнопку для отправки определенного символа или строки в Arduino:
Итоговое видео
Итоговое видео от автора (англ.) ниже:
В этом видео автор показал как Arduino можно подключить через последовательный API к браузеру Chrome.
Когда Arduino был запущен, то у меня были проблемы с поиском последовательного порта в интерфейсе последовательного API; просто выключите Arduino, подключите и отключите плату, и вы сможете её найти.
Иногда соединение было нестабильным, если я не мог подключиться; отключите Arduino, обновите страницу, нажмите «Подключиться», подключите Arduino и подключитесь к нему.
В моих публикациях [1,2,3] подробно описана цепочка датчик – Arduino-интерфейс Python. В реальных условиях промышленного производства датчики находиться на значительном удалении не только друг от друга но и от места где осуществляется централизованная обработка измерительной информации. Логично передавать информацию от датчиков по компьютерной локальной сети используя хорошо разработанные сетевые технологии. Данная публикация написана в стили упражнения по сборке и настройке сетевого приложения с Arduino в домашних условиях.
Постановка задачи
- Использовать библиотеку Arduino Ethernet с расширением Arduino Ethernet Shield для создания веб-сервера.
- Создать удаленный доступ к Arduino с использованием сети вашего домашнего компьютера.
- Использовать стандартный пример Arduino для обеспечения значений влажности и датчика движения с помощью веб-сервера.
- Разработать веб-приложений с использованием Python.
Этапы решения поставленной задачи
- Проектирование и создание аппаратных средств для использования Arduino и Ethernet Shield.
- Запуск примера по умолчанию из среды разработки Arduino как начальную точку создания сервера.
- Изменение примера для размещения вашего оборудования и повторного развертывания кода.
- Разработка веб-приложений с использованием Python.
Подключение Ethernet Shield поверх Arduino Uno
Arduino Ethernet Shield — официально поддерживаемое сетевое расширение с открытым исходным кодом, предназначенное для работы с Arduino Uno. Ethernet Shield оснащен разъемом RJ45 для подключения к сети Ethernet. Ethernet Shield предназначен для установки на Arduino Uno, и он расширяет выводы(пины) от Arduino Uno в верхней части платы. Ethernet Shield также оснащен гнездом для карт памяти microSD для хранения важных файлов по сети. Как и большинство расширений, Ethernet Shield питается от платы Arduino, к которой он присоединен.
Каждая плата Ethernet Shield оснащена уникальным аппаратным (MAC) адресом. Вы можете видеть это на обратной стороне платы. Вы можете записать этот аппаратный адрес, поскольку он будет часто требоваться в предстоящих упражнениях. Также убедитесь, что вы знакомы с установкой Arduino Ethernet Shield для выполнения последующих упражнений.
Ниже приведена диаграмма Fritzing схемы, требуемой для этого упражнения. Первое, что вам нужно сделать, это подключить Ethernet Shield поверх вашего Arduino Uno.
Arduino Uno
При развертывании аппаратного обеспечения Arduino для удаленного подключения без USB вам необходимо будет обеспечить внешнее питание платы, поскольку у вас больше нет подключения USB для питания платы.
Теперь подключите Arduino Uno к компьютеру с помощью USB-кабеля. Вам также необходимо подключить Arduino к локальной домашней сети с помощью кабеля Ethernet. Для этого используйте прямой кабель CAT5 или CAT6 и подключите один конец кабеля к домашнему маршрутизатору.
Этот маршрутизатор должен быть тем же устройством, которое обеспечивает сетевой доступ к компьютеру, который вы используете. Подключите другой конец кабеля Ethernet к порту Ethernet платы Arduino Ethernet Shield. Если соединение физического уровня установлено правильно, вы должны увидеть зеленый свет на порту.
Теперь пришло время начать кодирование вашего первого примера Ethernet.В коде вам нужно будет изменить MAC и IP-адреса, чтобы он работал для вашей конфигурации. Хотя вы можете получить MAC-адрес Ethernet Shield с задней стороны платы, вам придется выбрать IP-адрес в соответствии с конфигурацией вашей домашней сети.
Когда вы уже получили IP-адрес компьютера, с которым работаете, выберите другой адрес в диапазоне. Убедитесь, что ни один другой сетевой узел не использует этот IP-адрес. Используйте эти MAC и IP-адреса для обновления следующих значений в коде.
В IP-сети видимый диапазон IP-адресов для вашей сети является функцией другого адреса, называемого subnetwork или subnet. Subnet вашей сети LAN IP может помочь вам выбрать соответствующий IP-адрес для Ethernet Shield в диапазоне IP-адресов вашего компьютера. Вы можете узнать об основах подсети по адресу [4].
Прежде чем углубляться в код, скомпилируйте код с этими изменениями и загрузите его в Arduino. После успешного завершения процесса загрузки откройте веб-браузер и введите IP-адрес, указанный в скетче Arduino. Если все будет хорошо, вы должны увидеть текст, отображающий значения аналоговых контактов.
Чтобы лучше понять, что здесь произошло, вернемся к коду. Как вы можете видеть, в начале кода мы инициализируем библиотеку Ethernet-сервера на порту 80, используя метод EthernetServer из библиотеки Ethernet:
Во время выполнения setup () программа инициализирует Ethernet-соединение через Ethernet Shield с помощью метода Ethernet.being () с переменными mac и ip, которые вы определили ранее. Метод server.begin () запустит сервер отсюда. Оба этих шага являются обязательными для запуска сервера, если вы используете библиотеку Ethernet для кода сервера:
В функции loop () мы инициализируем client объект для прослушивания входящих клиентских запросов с использованием метода EthernetClient. Этот объект будет отвечать на любой запрос, поступающий от подключенных клиентов, которые пытаются получить доступ к серверу Ethernet через порт 80:
После получения запроса программа будет ожидать окончания загрузки запроса. Затем он будет отвечать клиенту с форматированными данными HTML, используя метод:
Если вы попытаетесь получить доступ к серверу Arduino из браузера, вы увидите, что веб-сервер отвечает клиентам с помощью данных на аналоговых контактах. Теперь, чтобы получить правильные значения датчиков влажности и PIR, которые мы соединили в аппаратном дизайне, вам придется выполнить следующую модификацию кода.
Здесь вы заметите, что мы отвечаем клиентам с вычисленными значениями относительной влажности вместо необработанных показаний со всех аналоговых выводов. Мы также изменили текст, который будет напечатан в веб-браузере, чтобы соответствовать правильному названию датчика:
В этом процессе мы также добавили функцию Arduino, getHumidity (), которая будет вычислять относительную влажность по значениям, наблюдаемым с аналоговых выводов.
Эти изменения можно применить к примеру, WebServer Arduino для фазы тестирования или просто открыть скетч WebServer_Custom.ino из папки Exercise 1 — Web Server в каталоге вашего кода. Как вы можете видеть в открытом файле скетча, мы уже модифицировали код, чтобы отразить изменения, но вам все равно придется изменить MAC и IP-адреса на соответствующие адреса.
После того как вы закончите с этими незначительными изменениями, скомпилируйте и загрузите скетч в Arduino. Если все пойдет по плану, вы должны иметь доступ к веб-серверу с помощью веб-браузера. Откройте IP-адрес недавно подготовленного Arduino в веб-браузере.
Вы должны получить такой же ответ, как показано на следующем скриншоте. Хотя мы показываем значения влажности только через этот скетч, вы можете легко прикрепить значения датчика движения, используя дополнительные методы client.print ().
Подобно механизму, который мы реализовали в этом упражнении, веб-сервер отвечает на запрос, сделанный веб-браузером, и предоставляет веб-страницы, которые вы ищете. Хотя этот метод очень популярен и универсален для доставки веб-страниц, полезная нагрузка содержит много дополнительных метаданных (данные о данных) по сравнению с фактическим размером информации датчика.
Кроме того, реализация сервера с использованием библиотеки серверов Ethernet занимает много ресурсов Arduino. Arduino, будучи устройством с ограниченными ресурсами, не подходит для запуска серверного приложения, поскольку ресурсы Arduino должны быть приоритетными для обработки датчиков, а не связи.
Веб-сервер, созданный с использованием библиотеки Ethernet, поддерживает очень ограниченное количество подключений, что делает его непригодным для крупномасштабных приложений и многопользовательских систем.
Лучшим подходом к решению этой проблемы является использование Arduino в качестве клиентского устройства или использование легких коммуникационных протоколов, предназначенных для работы с аппаратными устройствами с ограниченными ресурсами. В следующих нескольких разделах вы узнаете и реализуете эти подходы для коммуникации Arduino на Ethernet.
Разработка веб-приложений с использованием Python
Запустив веб-сервер на базе Python на вашем компьютере или других устройствах, таких как Raspberry Pi, вы можете избежать использования Arduino для размещения веб-сервера. Веб-приложения, созданные с использованием языков высокого уровня, таких как Python, также могут предоставить дополнительные возможности и расширяемость по сравнению с Arduino.
Будем использовать библиотеку Python, web.py, для создания веб-сервера Python. Мы также будем использовать эту библиотеку для создания интерактивных веб-приложений, которые позволят передавать данные между клиентом Arduino и веб-браузером.
Веб-фреймворк Python — web.py
Веб-сервер может быть разработан в Python с использованием различных веб-фреймворков, таких как Django, bottle, Pylon и web.py. Мы выбрали web.py как предпочтительную веб-структуру благодаря своим простым, но мощным функциям.
Установка web.py
Чтобы начать работу с web.py, вам нужно установить библиотеку web.py с помощью Setuptools. В Linux и Mac OS X выполните одну из этих команд на терминале, чтобы установить web.py:
В Windows откройте командную строку и выполните следующую команду:
Для pythn 3.61 надо набрать в командной строке:
Если Setuptools настроен правильно, вы можете установить библиотеку без каких-либо трудностей. Чтобы проверить установку библиотеки, откройте интерактивную подсказку Python и запустите эту команду, чтобы убедиться, что вы импортировали библиотеку без каких-либо ошибок:
Первое веб-приложение Python
Реализация веб-сервера с помощью web.py — очень простой и понятный процесс. Для библиотеки web.py требуется объявление обязательного метода GET для успешного запуска веб-сервера.
Когда клиент пытается получить доступ к серверу с помощью веб-браузера или другого клиента, web.py получает запрос GET и возвращает данные, указанные в этом методе. Для создания простого веб-приложения с использованием библиотеки web.py создайте файл Python, используя следующие строки кода и выполните файл с помощью Python.
При выполнении вы увидите, что сервер теперь запущен и доступен через адрес 0.0.0.0:8080. Поскольку серверная программа запущена на IP-адресе 0.0.0.0, вы можете получить к ней доступ с помощью того же компьютера, локального хоста или любого другого компьютера из той же сети.
Чтобы проверить сервер, откройте веб-браузер и перейдите по адресу 0.0.0.0:8080. Когда вы пытаетесь получить доступ к серверу с того же компьютера, вы также можете использовать 127.0.0.1:8080 или localhost:8080. 127.0.0.1 IP-адрес фактически означает localhost, то есть сетевой адрес того же компьютера, на котором запущена программа. Вы сможете увидеть ответ сервера, отображаемого в браузере, как показано на следующем снимке экрана:
Чтобы понять, как работает этот простой код, ознакомьтесь с методом GET в предыдущем фрагменте кода. Как вы можете видеть, когда веб-браузер запрашивает URL-адрес, метод GET возвращает Hello, world! в браузер.
Тем временем вы также можете наблюдать еще два обязательных компонента web.py в вашем коде: методы urls и web.application (). Библиотека web.py требует инициализации местоположения ответа в объявлении переменной urls.
Для каждого веб-приложения на основе web.py требуется, чтобы метод application(urls, global()) вызывался для инициализации веб-сервера. По умолчанию приложения web.py запускаются на порт 8080, который можно изменить на другой номер порта, указав его во время выполнения. Например, если вы хотите запустить приложение web.py на порту 8888, выполните следующую команду:
Хотя это возвращает только простой текст, вы успешно создали свое первое веб-приложение с помощью Python. Мы перейдем отсюда и создадим более сложные веб-приложения в следующих главах, используя библиотеку web.py.
Для разработки этих сложных приложений нам потребуется не только метод GET. Давайте начнем изучение предварительных концепций, чтобы еще больше улучшить ваше знакомство с библиотекой web.py.
Основные концепции web.py для разработки сложных веб-приложений
Библиотека web.py была разработана для обеспечения удобных и простых методов разработки динамических веб-сайтов и веб-приложений с использованием Python. Используя web.py, очень просто создавать сложные веб-сайты, используя лишь несколько дополнительных концепций Python.
Благодаря этому ограниченному курсу обучения и простым в использовании методам, web.py является одним из самых быстрых способов создания веб-приложений из языков программирования. Давайте начнем с понимания этих понятий web.py в деталях.
Обработка URL-адресов
Вы могли заметить, что в нашей первой программе web.py мы определили переменную urls, которая указывает на корневую папку (/) of the Index class:
В предыдущем объявлении первая часть, '/', является обычным выражением, используемым для сопоставления фактических запросов URL. Вы можете использовать такие выражения для обработки сложных запросов, поступающих на ваш сервер web.py, и указывать их на соответствующий класс.
Методы GET и POST
Мы создали веб-сервер на основе Arduino, работающий через порт 80, мы использовали веб-браузер для доступа к веб-серверу. Веб-браузеры являются одним из самых популярных типов веб-клиентов, используемых для доступа к веб-серверу; Другие типы c URL, Wget и веб-сканеры.
В разделе «Обработка URL-адресов» мы узнали, как связать классы web.py с местами размещения URL-адресов. Используя метод GET, предоставляемый библиотекой web.py, вы можете связать запрос GET с отдельными классами. После того как вы получили запрос GET, вам необходимо вернуть соответствующие значения в качестве ответа клиенту. Следующий фрагмент кода показывает, как будет вызываться функция GET (), когда кто-либо делает запрос GET в местоположение «/»:
Шаблоны
После того как вы создадите экземпляр папки рендеринга, пришло время создавать файлы шаблонов для вашей программы. В соответствии с требованиями вашей программы вы можете создать столько файлов шаблонов, сколько хотите. Для создания этих файлов шаблонов в web.py используется язык под названием Templetor. Подробнее об этом можно узнать по адресу [5]. Каждый файл шаблона, созданный с использованием Templetor, должен храниться в формате HTML с расширением .html.
Давайте создадим файл test.html в папке templates с помощью текстового редактора и вставим следующий фрагмент кода в файл:
Как вы можете видеть в предыдущем фрагменте кода, файл шаблона начинается с выражения $def with (), где вам нужно указать входные аргументы как переменные в скобках.
После визуализации шаблона они будут единственными переменными, которые вы можете использовать для веб-страницы; Например, в предыдущем фрагменте кода мы передали две переменные (form и i) в качестве входных переменных. Мы использовали объект формы, используя $: form.render (), чтобы отобразить его внутри веб-страницы. Когда вам нужно отобразить объект формы, вы можете напрямую передать другую переменную, просто объявив ее (то есть, $: i). Templetor будет отображать HTML-код файла шаблона, как он есть, при использовании переменных в тех случаях, когда они используются.
Теперь у вас есть файл шаблона test.html, готовый к использованию в вашей программе web.py. Всякий раз, когда выполняется функция GET () или POST (), вам необходимо вернуть значение запрашивающему клиенту. Хотя вы можете вернуть любую переменную для этих запросов, в том числе None, вам придется отобразить файл шаблона, где ответ связан с загрузкой веб-страницы. Вы можете вернуть файл шаблона с помощью функции render (), за которым следует имя файла шаблона и входные аргументы:
Как видно из предыдущей строки кода, мы возвращаем визуализированную страницу test.html, указав функцию render.test (), где test () — это просто имя файла без расширения .html. Функция также включает объект формы, f и переменную i, которые будут переданы в качестве входных аргументов.
Формы
Библиотека web.py предоставляет простые способы создания элементов формы с использованием модуля Form. Этот модуль включает в себя возможность создавать элементы формы HTML, получать входные данные от пользователей и проверять эти входы до их использования в программе Python. В следующем фрагменте кода мы создаем два элемента формы: Textbox и Button, используя библиотеку Form:
Помимо Textbox (который получает ввод текста от пользователей) и Button (который отправляет форму), модуль Form также предоставляет несколько других элементов формы, таких как Password для получения скрытого ввода текста, Dropbox для получения взаимоисключающего выпадающего списка, Radioto получает взаимоисключающие входы из нескольких опций, а Checkbox — выбор бинарного входа из заданных опций. Хотя все эти элементы очень просты в реализации, вы должны выбрать элементы формы только в соответствии с вашими требованиями к программе
В реализации формы через web.py веб-страница должна выполнять метод POST каждый раз, когда форма отправляется. Как вы можете видеть в следующей реализации формы в файле шаблона, мы явно объявляем метод отправки формы как POST:
Вывод
Публикация содержит все необходимые данные для сборки в домашних условиях сетевого приложения для дистанционного контроля температуры влажности и перемещения.
Около года назад я написал небольшую обзорную статью для управления Arduino через интернет, с помощью сервера NinjaBlocks. Это было довольно хорошее и удобное решение и оно отлично работало, пока в один прекрасный момент не начались проблемы с соединением. Попытки уговорить разработчиков через форум решить проблемы были напрасны — они просто игнорировали мои просьбы и не удосужились даже ответить, что было очень печально.
1. Как это всё работает.
У нас имеется:
— сервер на php расположенный на хостинге который привязанный к доменному имени
— клиент в виде arduino
— панель управления
Arduino подключается к серверу и отправляет GET запрос, где содержатся значения датчиков температуры.
Сервер принимает запрос, и записывает значения температур в текстовые файлы. При этом читает из текстового файла значение установленного выхода для arduino и отправляет в ответ на запрос контроллера.
Arduino принимает ответ от сервера и согласно ему устанавливает состояние своего выхода
Панель управления, используя Ajax, считывает значение температуры из текстовых файлов и обновляет показания датчиков. А также считывает их текстового файла состояние выхода и обновляет его на странице. С помощью того же Ajax через форму в текстовый файл записывается значение выхода контроллера, откуда потом будет брать значение сервер и отправлять контроллеру.
2. Клиент на Arduino
Скетч довольно простой, всё что он делает — это собирает значение датчиков и отправляет их на сервер, получает ответ, включает или отключает выход.
EthernetClient client;
char server[] = "*************"; // имя вашего сервера
int buff=0;
const int led=5;
void setup()
Ethernet.begin(mac);
sensors.begin();
pinMode( led, OUTPUT);
digitalWrite(led, LOW);
>
if (client.connect(server, 80))
client.print( «GET /add_data.php?»);
client.print(«temperature=»);
client.print( sensors.getTempCByIndex(0) );
client.print("&");
client.print("&");
client.print(«temperature1=»);
client.print( sensors.getTempCByIndex(1) );
client.println( " HTTP/1.1");
client.print( «Host: » );
client.println(server);
client.println( «Connection: close» );
client.println();
client.println();
while (client.available())
char c = client.read();
if ( c=='1')
buff=1;
>
if ( c=='0')
buff=0;
>
>
client.stop();
client.flush();
delay(100);
>
else
client.stop();
delay(1000);
client.connect(server, 80);
>
if ( buff==1)
digitalWrite (led, HIGH);
>
else
digitalWrite(led, LOW);
>
delay(500);
>
3. Сервер и панель управления
Сервер состоит всего из нескольких файлов:
index.php — панель управления
add_data.php — файл обрабатывающий запросы с контроллера и отсылающий ответ обратно на arduino
style.css — определяет внешний вид панели
Папка transfer — содержит файлы, с помощью которых происходит считывание и запись значений из текстовых файлов.
led.php — записывает состояние выхода в файл out-1.txt, отправленное через форму в панели управления
ledstate.php — считывает состояние из текстового файла out-1.txt и выводит на панели в виде «ON» или «OFF»
temp-1.php и temp-2.php — считывают значения температуры из файлов in-1.txt и in-2.txt и отправляют на панель управления.
Папка txt — своего рода база данных для хранения информации.
Сервер на самом деле очень простой и его сможет установить себе любой человек с минимальными познаниями, например, как я. До работы над этим проектом у меня был опыт работы только с arduino, поэтому php, ajax, html и css пришлось изучать буквально с нуля.
Установка очень простая. Просто скопируйте файлы на сервер и загрузите скетч в контроллер, при этом в скетче подправьте доменное имя, подключите датчики и светодиод, и у вас все должно работать.
Уверен, что матерые программисты будут пинать меня и тыкать носом в те места где можно было бы написать код более лаконично и правильно. Я это только приветствую.
Если вы увидели, что некоторые вещи можно сделать проще и быстрее, то сообщите мне.
Что в итоге мы имеем?
— все просто и понятно
— можно настроить под свои нужды и задачи
— хорошая стабильность
— сервер можно развернуть на любом бесплатном хостинге
— большое количество запросов на сервер ( некоторым хостерам это может не понравиться, в этом случае нужно увеличить паузу между запросами в скетче)
— кушает много трафика со стороны клиента ( при 1 запросе в секунду выходит около 300 Мб в сутки)
— существует небольшая задержка на включение выходов ( может быть критично для некоторых случаев)
Планы на будущее:
— добавить кнопку на контролере для включения и выключения реле с изменением состояния на сервер
— добавить авторизацию
— добавить идентификационные ключи в запросах
— организовать работу нескольких плат одновременно с одной панелью управления
— добавить подтверждения от контроллера о включении выхода
— очень хотелось бы использовать протоколы websockets или mqtt, но всё же склоняюсь к использованию websockets c использованием socket.io
Возможно, если будет интересно, напишу статью об управлении через интернет wifi модулем esp8266. Его я уже успел успешно опробовать и убедился, что все работает, правда, там есть свои нюансы в работе.
А если наберется достаточное количество желающих напишу, будет подробная статья, где мы рассмотрим добавление новых блоков с датчиками и управлением дополнительными выходами в панель управления.
Прошу дать совет как лучше реализовать авторизацию в панели управления, чтобы была относительно простая и понятная установка и приемлемый уровень безопасности.
Смотрим видео
Всем спасибо за внимание!
UPD. Добавил обратную связь в панель в виде фоторезистора. Когда лампочка выключена, показания около 130, когда включена — 900.
Обычно уроки я строю по принципу – даю формальное описание функций, методов, протоколов…, а затем, используя эту информацию, разрабатываю учебные проекты.
Общая информация.
Надо твердо помнить, что:
Аппаратная часть, для которой мы будем разрабатывать программы в этом уроке, описывается в уроке 63 и была нами использована в уроках 64 и 69. Это плата Arduino UNO R3 и модуль ENC28J60 подключенный к роутеру прямым кабелем.
Структура протокола.
В общем виде обмен информацией происходит так:
Структура запроса.
Давайте напишем простую программу, позволяющую увидеть запросы клиента. Немного изменим первую программу из урока 64.
Зарегистрируйтесь и оплатите. Всего 60 руб. в месяц за доступ ко всем ресурсам сайта!
EthernetServer server(80); // с оздаем сервер, порт 80
EthernetClient client; // объект клиент
boolean clientAlreadyConnected= false; // признак клиент уже подключен
void setup()
Ethernet.begin(mac, ip); // инициализация контроллера
server.begin(); // включаем ожидание входящих соединений
Serial.begin(9600);
Serial.print("Server address:");
Serial.println(Ethernet.localIP()); // выводим IP-адрес контроллера
>
В строке адреса браузера наберем IP-адрес сервера (у меня 192.168.1.10).
Стартовая строка.
Стартовая строка запроса имеет следующий формат:
- Метод – тип запроса.
- URI – идентификатор ресурса. Определяет путь к запрашиваемому файлу.
- Версия – разделенные точкой цифры.
Методы.
Методы это команды серверу. Они сообщают серверу, что он должен делать.
Состоят из любых символов, кроме управляющих и разделителей.
Методы чувствительны к регистру.
Система может использовать любые методы, даже не документированные в протоколе. Если сервер не распознал указанный метод, он должен вернуть код состояния 501. Если метод известен, но не может быть применим к указанному ресурсу, то возвращается код 405.
Любой сервер обязан обрабатывать методы GET и HEAD.
На практике востребованными являются только методы GET и POST. Мы будем использовать только эти запросы.
Через GET-запросы клиент может передавать параметры. Параметры отделятся от URI символом “?”. Параметры разделяются символом “&”.
В следующем уроки, при реализации методов GET и POST, я расскажу о них подробнее.
Заголовки.
Заголовки передают серверу дополнительную информацию о клиенте и о запросе. Формат заголовков представляет собой название параметра и значение с двоеточием между ними. Название параметра состоит из любых кодов символов, кроме перевода строки. Двоеточие должно примыкать к названию параметра без пробела.
В нашем запросе блок заголовков выглядит так.
Host: 192.168.1.10
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7
Почти вся информация понятна без расшифровки.
Заголовки разделяются на 4 группы:
Если не хватает стандартных, то заголовки можно вводить свои.
Структура ответа.
После получения и обработки запроса, сервер посылает клиенту ответ.
Стартовая строка ответа должна выглядеть так:
- Версия – разделенные точкой цифры.
- Код состояния – число из 3 цифр. Говорит клиенту о результате выполнения запроса и определяет его дальнейшие действия. Набор кодов состояния описан в протоколе.
- Пояснение – короткое текстовое пояснение кода состояния. Необязательное поле, не влияющее на действия клиента.
Стартовая строка ответа может выглядеть так:
Код состояния.
Представляет собой 3-значное число. Первая цифра определяет класс состояния.
Необязательный параметр стартовой строки ПОЯСНЕНИЕ разъясняет код состояния в коротком текстовом сочетании.
200 OK
102 Processing
202 Accepted
304 Not Modified
407 Proxy Authentication Required
500 Internal Server Error
По коду ответа клиент узнает о результатах его запроса и решает, какие действия предпринять.
Существует 5 классов кодов.
| Код состояния | Класс | Назначение |
| 1XX | Информационный | Информирование о процессе передачи данных. |
| 2XX | Успех | Информирование об успешной обработке запроса клиента. |
| 3XX | Перенаправление | Сообщает клиенту о необходимости сделать запрос по другому URI. |
| 4XX | Ошибка клиента | Информирует об ошибках со стороны клиента. |
| 5XX | Ошибка сервера | Информирует о неудачных операциях по вине сервера. |
Создание простого WEB-сервера.
Для начала разработаем самый простой WEB-сервер, который по GET-запросу клиента будет передавать одну и ту же текстовую строку.
- установить TCP-соединение;
- принять запрос клиента;
- выделить в нем пустую строку, те окончание блока заголовков (для простого GET-запроса это окончание запроса);
- послать ответ клиенту;
- разорвать соединение;
- все операции запротоколировать в мониторе последовательного порта.
Вот скетч такого сервера.
Зарегистрируйтесь и оплатите. Всего 60 руб. в месяц за доступ ко всем ресурсам сайта!
EthernetServer server(80); // создаем сервер, порт 80
EthernetClient client; // объект клиент
boolean flagEmptyLine = true; // признак строка пустая
char tempChar;
void setup()
Ethernet.begin(mac, ip); // инициализация контроллера
server.begin(); // включаем ожидание входящих соединений
Serial.begin(9600);
Serial.print("Server address:");
Serial.println(Ethernet.localIP()); // выводим IP-адрес контроллера
Serial.print("");
>
void loop()
client = server.available(); // ожидаем объект клиент
if (client)
flagEmptyLine = true;
Serial.println("New request from client:");
while (client.connected())
if (client.available())
tempChar = client.read();
Serial.write(tempChar);
Загрузил скетч в плату.
Запустил браузер GoogleChrome.
client.println("Content-Type: text/html; charset=utf-8"); // тело передается в коде HTML, кодировка UTF-8
Ардуино для кириллических символов использует кодировку UTF-8. В большинстве браузеров по умолчанию другая кодировка.
Этот пример показывает, как заголовки влияют на отображение информации.
В мониторе последовательного порта видно, что появилось 2 запроса.
Вторым запросом Google Chrome пытается получить с сервера иконку favicon, чтобы отобразить ее рядом с информацией ресурса.
Я перешел на браузер Internet Explorer.
В нем только один запрос. Дальнейшие проверки я буду производить с веб-обозревателем Internet Explorer.
Более сложный WEB-сервер.
Чтобы не подключать к плате Ардуино дополнительные элементы, давайте передадим клиенту значение функции millis(), т.е. время с момента включения сервера.
Заодно немного приукрасим текстовую информацию, которая появится в окне браузера.
Я предлагаю использовать HTML-редактор. В окне такого редактора вы набираете текст, задаете шрифты, размеры фрагментов, раскрашиваете их, полностью оформляете текстовую информацию. На выходе получаете HTML-код, который можете передавать клиенту.
Существует огромное количество простых и сложных, платных и бесплатных редакторов. Можете выбрать по своему вкусу. Чтобы не заниматься загрузкой и установкой, я использовал онлайн HTML-редактор Vulk. Он мне первым попался под руку.
Я создавал сервер в такой последовательности.
- Написал и раскрасил текстовую информацию. Оформить, конечно, можно было и красивее.
Число 34,56 – показатель времени я пока задал статическим.
- Нажал закладку HTML в левом нижнем углу редактора.
Эти строчки надо передать клиенту.
Символ “двойные кавычки” (“) используется в функции prrint() для задания строки. Поэтому кавычки внутри HTML-кода надо экранировать символом ”\”.
Другой вариант – подготовить текстовую строку и передать ее в функцию print() через указатель.
Зарегистрируйтесь и оплатите. Всего 60 руб. в месяц за доступ ко всем ресурсам сайта!
Пока проигнорируем и запустим браузер. Запросим сервер.
Выход – хранить текстовую информацию не в ОЗУ, а в FLASH памяти. У микроконтроллера ATmega 328 объем FLASH 32 кбайт, а ОЗУ всего 2 кбайт.
Это делается просто. Достаточно использовать макрос F() библиотеки pgmspace.h. Я писал о ней в уроке 27, но макроса F() не касался.
Так вот, если текстовую строку разместить в качестве аргумента макроса F(), то она будет сохранена в FLASH.
Serial.print(“test”); // строка ”test” размещается в ОЗУ
Serial.print(F(“test”)); // строка ”test” размещается в FLASH
Вот скетч полностью.
Зарегистрируйтесь и оплатите. Всего 60 руб. в месяц за доступ ко всем ресурсам сайта!
Теперь трансляция проходит без пугающих предупреждений. И оперативной памяти используется намного меньше, 1318 байт . В предыдущем варианте программы было 1696.
Здесь я вынужден сделать небольшое отступление. До последнего варианта программы все работало идеально. Как только я стал использовать в программе макрос F() сервер начал виснуть. На второе, третье обращение. Я убрал макрос и вставил несколько одинаковых строк с функцией println(). Сервер периодически зависал. Я заменил плату Arduino UNO R3, затем модуль ENC28j60. Ничего не помогало. Система заработала стабильно только после того, как я подключил модуль к плате Arduino Nano. Мощности стабилизатора платы 3,3 В для питания ENC28j60 явно не хватает. Поэтому я использовал внешний стабилизатор LD1117.
После этого все заработало идеально. К серверу по последнему варианту программы я сделал более 2000 запросов.
Я не стал разбираться в причине происходящего. Могу предположить, что либо не хватает пиковой мощности стабилизатора 3,3 В платы Arduino UNO, либо библиотека UIPEthernet не работает с этой платой. Если кто-то разберется в этом вопросе – напишите. Я добавлю эту информацию в урок. Можно создать тему на форуме сайта.
Дальнейшие испытания я производил на связке Arduino Nano - модуль ENC28j60.
Функция millis() возвращает значение времени в мс, а нам надо в секундах. Сделаем простейшее преобразование.
client.print( (float)millis() /1000. ); // вывод времени в секундах
Разорвем длинную строку HTML кода и вместо 34,56 вставим вывод времени.
А весь скетч будет таким.
Зарегистрируйтесь и оплатите. Всего 60 руб. в месяц за доступ ко всем ресурсам сайта!
В браузере увидим время.
Можно добавить в заголовки ответа строку
client.println(F("Refresh: 2")); // обновить страницу автоматически
Тогда браузер будет сам обновлять страницу каждые 2 секунды.
Зарегистрируйтесь и оплатите. Всего 60 руб. в месяц за доступ ко всем ресурсам сайта!
В течение часа мой сервер отработал в таком режиме. Никаких сбоев, зависаний.
Работает сервер и при обращении с телефона.
В следующем уроке продолжим тему. Научимся передавать данные от клиента серверу с помощью GET и POST запросов. Разработаем простой WEB-клиент.
Читайте также: