Графическое отображение данных с помощью Arduino и HTML5 | Полный программный проект

Большинство проектов на базе Arduino используют ЖК-дисплеи для отображения данных, но в этом проекте вместо этого используется веб-страница, чтобы более подробная информация могла быть отображена в графической форме и доступна из любого места через Интернет. Проект принимает переменные аналоговые входные данные от Arduino и отображает результаты в графической форме на веб-странице, поддерживающей HTML5.

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

Веб-сервер, созданный щитом Arduino Ethernet, загружает запрошенную веб-страницу с устройства памяти SD-карты в браузер. Веб-страница через регулярные промежутки времени отправляет AJAX-запросы веб-серверу для получения входных данных. Веб-сервер отвечает файлом XML, содержащим измеренные входные значения в соответствующих тегах. Веб-страница считывает входные значения из формата XML с использованием JavaScript и отображает их в соответствующей диаграмме/диаграмме, закодированной с помощью элемента холста HTML5.

Холст — это область рисования, определенная в коде HTML5, заданном параметром <canvas> тег для динамического создания графики. Анимация графики возможна с помощью кода JavaScript. Canvas позволяет программистам создавать визуально привлекательные рисунки с помощью нескольких строк кода. Он особенно подходит для Arduino из-за его ограниченных возможностей по работе с большими файлами.

Цепь и работа

Шилд Ethernet с картой microSD показан на рис. 1. Схема графического отображения данных на базе Arduino показана на рис. 2. Он построен на плате Arduino Uno вместе с потенциометрами (VR1–VR6), резисторами (R1–R4) и тактильными переключателями (S1–S4).

Веб-сервер Arduino

Веб-сервер реализован путем установки щита Ethernet поверх платы Arduino. Экран Ethernet, используемый в этом проекте, имеет контроллер W5100 Ethernet и встроенный слот для карты microSD. Перенесите файлы HTML5, необходимые для этого проекта (gauge.htm, bargraph.htm, Analog.htm и digital.htm), на SD-карту. Теперь вставьте SD-карту во встроенный слот для карт microSD Ethernet Shield.

Arduino взаимодействует как с W5100, так и с SD-картой, используя шину SPI через заголовок ICSP, и, следовательно, только один из них может быть активен одновременно. Скетч Arduino (Arduino_html5.ino) в этом проекте использует для работы библиотеки SPI, Ethernet и SD. Эти библиотеки управляют общим доступом к шине SPI, поэтому можно использовать как W5100, так и SD-карту.

Подключение экрана Ethernet к ПК

Подключите экран Ethernet к ПК с помощью кабеля Ethernet. Адрес IP, назначенный экрану Ethernet в коде Arduino, равен 192.168.1.1. Поэтому назначьте адрес IP соединению Ethernet ПК, скажем, 192.168.1.10, с маской подсети 255.255.255.0 (см. рис. 3). Подключив экран Ethernet к компьютеру кабелем Ethernet, откройте веб-браузер (например, Google Chrome) и введите адрес http://192.168.1.1.

К default будет загружен файлкалибровка.htm с SD-карты. Для загрузки других файлов или веб-страниц на веб-странице default предусмотрены строки меню или ссылки. Можно легко switch переключаться между дисплеями с помощью гиперссылок, представленных на каждой странице. Если файлы не загружаются, откройте последовательный монитор Arduino IDE, чтобы проверить сообщение об ошибке и принять соответствующие меры.

Получение данных из Arduino

После загрузки кода холста веб-страницы с SD-карты в систему входные данные получаются из Arduino. Здесь используется метод AJAX (асинхронные JavaScript и XML), который помогает обновлять только диаграмму/диаграмму без перезагрузки всей веб-страницы. AJAX позволяет браузеру отправлять и получать данные с сервера в фоновом режиме. Веб-страница отправляет запросы AJAX на сервер через регулярные промежутки времени. Сервер Arduino отвечает файлом XML (расширяемый язык разметки), содержащим значения данных.

XML очень похож на HTML. Он предназначен для описания данных с помощью тегов, организованных в древовидную структуру. Древовидная структура содержит корневые (родительские) и дочерние элементы, определенные пользователем. Здесь файл XML создается кодом Arduino с корневым элементом и дочерними элементами для аналоговых и цифровых входов соответственно. Файл XML, созданный Arduino, приведен ниже:

где первая строка — это объявление XML.

Отображение графических данных на веб-странице

После того, как файл XML получен от Arduino, файл HTML5 анализирует содержимое с помощью кода JavaScript, который извлекает данные и отправляет их в код отображения холста. Код холста отображает данные на соответствующей диаграмме/диаграмме.

Четыре типа дисплеев разработаны с использованием кода Canvas, как описано ниже.

Измеритель

Манометр состоит из круглого градуированного циферблата и указателя, приводимого в действие измеренным входным значением. Здесь измерительный прибор спроектирован путем построения основных кругов и линий (см. рис. 4) на холсте HTML5 с помощью нескольких строк кода (gauge.html). Стрелка вращается слева направо при увеличении входного значения.

Для демонстрации значения входных аналоговых данных берутся непосредственно с аналоговых контактов Arduino от A1 до A3. В реальном приложении это могут быть обработанные значения, полученные от датчиков температуры, давления или влажности, с соответствующими изменениями в коде и маркировке шкалы.

Аналогово-цифровой преобразователь (ADC) в Arduino преобразует входные напряжения от 0 до 5 В как аналоговые входы в целочисленные значения от 0 до 1023. Следовательно, показания манометра варьируются от 0 до 1023.

Гистограмма

Гистограмма использует горизонтальные или вертикальные полосы, чтобы показать объем измеряемых данных. Здесь простая вертикальная гистограмма с вертикальным цветовым градиентом закодирована с помощью элементов холста (bargraph.html). В зависимости от ваших требований вы можете создать график любого типа, например круговую диаграмму или диаграмму с областями.

Для построения графика можно использовать любой тип данных, сгенерированных Arduino. Как и в манометре, здесь значения аналоговых входов напрямую воспринимаются как значения данных для отображения работы. Шесть полосок соответствуют аналоговым контактам от A0 до A5 Arduino. Высота столбца варьируется от 0 до 1023, поскольку входное напряжение варьируется от 0 В до 5 В. Этот тип графика можно использовать для сравнения последних значений данных друг с другом. Если вам требуется изменение значений данных со временем, можно использовать следующий график.

Анализатор аналогового входа

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

Анализатор цифрового входа

Отображение анализатора цифрового входа по существу представляет собой модифицированный линейный график со значениями данных только как «низкие» или «высокие». Вместо изменения значения в течение продолжительности оно изменяется как шаг в момент изменения. Следовательно, форма волны выглядит как серия импульсов. Это полезно для просмотра изменений в двоичном состоянии конкретных данных, генерируемых Arduino. В этом проекте входное состояние четырех цифровых выводов используется как четыре канала для мониторинга. При использовании цифровых контактов необходимо соблюдать осторожность, чтобы не использовать контакты, используемые экраном Ethernet для связи с платой Arduino.

В этой настройке мы использовали цифровые контакты с 5 по 8 Arduino в качестве входов. Эти контакты подключены к четырем кнопочным переключателям (от S1 до S4). Нажатие switch изменяет состояние входа с низкого на высокое. Закодированный здесь холст-график позволяет одновременно контролировать четыре входных канала.

Создание и тестирование

Раскладка PCB в реальном размере для отображения графических данных на базе Arduino показана на рис. 8, а компоновка ее компонентов — на рис. 9. После сборки схемы вместе с экраном Ethernet на PCB подключите Arduino Uno к ПК с помощью кабеля USB между портом USB. из Arduino Uno и COM-порта ПК. Аналогичным образом подключите экран Ethernet к ПК с помощью кабеля Ethernet между их портами Ethernet. После подключения просмотрите адрес IP шилда в браузере и просмотрите различные параметры.

Загрузите PCB и PDF-файлы компоновки компонентов: нажмите здесь

Дополнительные приложения

Помимо вышеупомянутых типов графиков/диаграмм, возможны многие другие приложения. Например, показания температуры можно отображать на графиках термометра, а значения можно сравнивать с помощью круговых диаграмм, диаграмм с областями, точечных диаграмм и т. д. Поскольку холст по сути является частью HTML5, он работает везде, где поддерживается HTML5. На данный момент он поддерживается в последних версиях всех основных браузеров, включая мобильные приложения. Поэтому if веб-сервер доступен в Интернете, за дисплеем можно удаленно следить на широком спектре устройств, включая настольные компьютеры, планшеты и смартфоны.

Прабхаш К.П. работает инженером подразделения STR, BSNL, Керала. В сферу его интересов входят электронные схемы, аппаратное обеспечение с открытым исходным кодом и Интернет вещей (IoT).