Вывод данных с ардуино на компьютер в виде графика
This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
Russian (Pусский) translation by AlexBioJS (you can also view the original English article)
В этот раз я хотела бы показать вам, как считывать данные с сенсоров, закрепленных на Arduino, и построить график в браузере.
На этом занятии вы будете:
Предварительная подготовка
Вам необходима плата Arduino Uno (* "Uno" означает «один» на итальянском и является эталонной моделью для платформы Arduino) и базовые знания того, как настроить Arduino для использования Johnny-Five. Полезно будет просмотреть раздел Настройка Arduino в пошаговом руководстве, однако вам не нужно устанавливать StandardFirmata, поскольку вы установите в этот раз кое-что другое.
Также убедитесь, что Node.js запущен на вашем компьютере.
Удобная и простая в осуществлении визуализация данных при помощи EON
Проект EON – это фреймворк JavaScript с открытым исходным кодом для вычерчивания графиков и составления карт, созданный PubNub.
Поскольку компоненты EON для вычерчивания диаграмм и графиков основаны на C3.js, обертке для D3.js, то благодаря EON вы можете легко создавать графики в режиме реального времени, не зная, как использовать намного более сложную в освоении библиотеку D3.
Базовые действия для визуализации данных, поступающих с датчика, настолько просты:
Публикуем данные из источника:
Мы разберем детали использования EON по мере того, как мы будем работать с аппаратным и программным обеспечением. Итак. Давайте начнем!
Собираем контур с термодатчиком
Давайте для начала соберем контур для термодатчика. Обычный сенсор и детали должны быть довольно дешевыми.
Необходимое аппаратное обеспечение:
Немного о цифровом термодатчике DS18B20
Типичный цифровой термодатчик DS18B20 позволяет определять температуру окружающего воздуха в диапазоне от -55°C до 125°C (Цельсия) с точностью ±0.5°C в большей части диапазона. Встроенный АЦП (* аналого-цифровой преобразователь) преобразует эти данные в аналоговой форме в цифровую с 12-битным разрешением.
Добавление ConfigurableFirmata в Arduino
Сенсор DS18B20 обменивается данными по протоколу 1-Wire. Когда вы применяете устройства, которые пользуются специальным протоколом, то для Johnny-Five необходим модуль для работы с устройствами на основе интерфейса 1-Wire, который использует схему ConfigurableFirmata.
Поэтому давайте скачаем ConfigurableFirmata в Arduino до подключения сенсора:
Сборка контура
Теперь давайте подключим провода. Контур очень пост: всего лишь убедитесь, что вы используете резистор 4.7kΩ, когда вы подключаете сенсор к источнику 5V от Arduino.
Считывание значений температуры с сенсора
Давайте займемся программным обеспечением Считывать цифровые значения с сенсора очень просто, если вы используете Johnny-Five.
Убедитесь, что Node.js установлена на вашем компьютере. В подходящей папке для разработки установите Johnny-five при помощи npm (* пакетный менеджер Node).
$ npm install johnny-five
Создайте файл temperature.js и используйте код ниже для выведения значений:
Выполните код в консоли при помощи node temperature.js. Как только плата аппаратного обеспечения будет готова, вы должны будете увидеть выведенные в консоль значения температуры наподобие этих:
Теперь давайте опубликуем данные с термодатчика и вырисуем на их основе график!
Пересылка данных температуры от сенсора в PubNub
Для начала вам необходимо установить модуль pubnub для Node.js при помощи:
$ npm install pubnub
Сеть потока данных (DSN – Data Stream Network) PubNub предоставляет глобальную инфраструктуру (* основополагающая совокупность компонентов, объединенная в систему) и позволяет вам довольно просто создавать и масштабировать приложения и устройства IoT, работающие в режиме реального времени. В моем предыдущем руководстве мы использовали PubNub для получения данных от веб-браузера, однако теперь мы используем PubNub для публикации данных, поступающих с датчика, чтобы их считать в браузере.
Инициализация PubNub
Как только вы установили модуль pubnub, вам необходимо инициализировать его с помощью ваших ключей API.
Также давайте создадим имя для канала.
Когда вы будете вычерчивать график, то вам будет необходимо получить опубликованные данные из канала с тем же именем.
Публикация данных в PubNub
Сразу после получения при помощи Johnny-Five данных температуры при возникновении события data, генерирование которого мы реализовали в предыдущем разделе руководства, храните данные в переменной, а не выводите при помощи console.log.
Вы можете публиковать все данные в PubNub, однако датчик может генерировать события слишком часто. Так что давайте отсылать данные каждые три секунды.
В функции publish используйте метод publish() PubNub для отправки данных в виде объекта (или JSON (* текстовый формат обмена данными, основанный на JavaScript.)).
Полный код для Arduino доступен в этом репозитории GitHub.
Вычерчиваем гистограмму на основе данных, поступающих с датчика
Теперь забудем об Arduino и создадим отдельную веб-страницу для построения графика.
Для начала подключите eon.css в ваш файл HTML:
Затем подключите pubnub.js :
Далее создайте пустой элемент с определенным ID:
Именно тут будет располагаться сгенерированный график. Теперь вам необходимо инициализировать PubNub так же, как вы сделали ранее в файле node.js для Arduino:
Затем сгенерируйте простую гистограмму при помощи метода EON chart() сразу после получения данных от PubNub. Вы можете получить данные, присланные от датчика, используя то же самое имя канала – temperature-ds18b20:
Функция transform() преобразует необработанные данные, присланные от сенсора, так, чтобы они соответствовали схеме, которую может понять EON.
Выполните код HTML и Node.js для Arduino.
Voilà! Вы реализовали визуализацию данных, поступающих в режиме реального времени, в вашем браузере!
Вы можете выполнить дальнейшие настройки графика при помощи необязательных параметров C3.js для задания, например, цвета линий и ширины!
Например, для того чтобы изменить цвет гистограммы на фиолетовый, как показано на анимации gif выше, вы можете добавить цвет в параметре data :
Вы можете также использовать параметр axis для маркирования и форматирования осей x и y.
Если вам необходим другой тип графика, то попробуйте изменить ‘line’ – значение типа по умолчанию – на ‘spline’ , и увидите, что измениться.
Для ознакомления со всеми возможностями EON, пожалуйста, посетите этот репозиторий GitHub. Там приведено побольше примеров на случай, если вы захотите попробовать другие типы датчиков, например, фоторезистор, и другие типы графиков.
В данной статье описан простой способ построить график сигнала с Ардуино совместимых аналоговых датчиков. Это нужно для настройки и отладки некоторых измерительных систем.
Ранее были опубликованы проекты и статьи, которые предполагали настройку модуля AD620 под различные сигналы (ЭКГ, ЭЭГ, ЭМГ и др.) Однако возник вопрос как увидеть данный сигнал на ПК? Это ключевой момент в настройке!
К счастью это очень просто, если использовать нативную среду Arduino IDE.
Подключение и настройка среды Ардуино
Вначале подключите Ардуино к USB ПК.
На ПК он должен отобразиться в виде COM порта. Обычно номер порта самый последний.
В среде Ардуино нужно перейти в меню Инструменты -> Порт и выбрать COM порт для соединения.
Также нужно выбрать подключаемую плату Ардиуно в меню Инструменты -> Плата.
Параметры программы Ардиуно
Для примера рассмотрим программу калибровки модуля AD620:
В программе контроллера Ардуино нужно уделить внимание на три момента:
График сигнала с Ардуино
Осталось построить график сигнала с Ардуино. Для этого перейдите в меню Инструменты -> Плоттер по последовательному соединению.
Видеодемонстрация
Подробно весь процесс смотрите в видео:
Если возникнут вопросы, то пишите в комментариях здесь, на канале YouTube или обращайтесь в группу ВК.
Сегодня в уроке мы сохраним данные и время считывания данных в файл. Который можно открыть в Excel и построить график.
Как вывести график на смартфон, в режиме реального времени смотрите тут: Arduino SD карта. Воспроизводим звуки и музыку в wav формате.
Для урока нам понадобиться:
Модуль DS3231 выбрал не случайно. В нем есть датчик температуры . И мы можем сохранять значение температуры и время замеров .
Это наглядный пример использования легирование показаний с датчиков . Вы можете использовать другое датчики: DS18B20, DHT11, DHT22 . Также вы можете использовать одновременно несколько датчиков и сохранять показание с них.
Подключаем SD-модуль и модуль реального времени DS3231 к Arduino UNO по схеме.
Мы уже научились работать с картой, если возникнут сложности посмотрите предыдущий урок: Arduino SD карта. Создаем, удаляем файлы. Чтение, запись файлов.
Перейдем сразу к модулю времени DS3231 . Для его подключения нужно добавить всего пару строк:
Для вывода текущего времени и температуры есть 2 функции.
Для примера работы выведем время и показания в монитор порта.
И точно такие же показания будем сохранять в наш файл.
Можно сохранять в текстовый файл. А можно сохранить в файл TEST.csv.
Это тоже текстовый файл. Но его можно сразу открыть в Excel.
Осталось только построить график по полученным данным.
У вас наверное возникнет вопрос, почему у меня так скачет температура? Нет у меня нет резкого изменения температуры в комнате. Просто я погрел пальцами модуль времянки. И после он постепенно остывал.
Этот небольшой урок дает представления о возможностях легирования данных с использованием Arduino и SD карты.
В одной из предыдущих статей на нашем сайте мы рассмотрели взаимодействие платы Arduino с языком программирования Python, в результате которого мы управляли свечением светодиода. Если вы начинающий радиолюбитель, то перед прочтением данной статьи вам крайне рекомендуется прочесть упомянутую статью.
После прочтения упомянутой статьи у вас может возникнуть резонный вопрос зачем нам нужно взаимодействие с языком программирования Python, если все, что мы можем сделать с ним с помощью платы Arduino, это обмениваться информацией через порт последовательной связи. На самом деле Python представляет собой мощную платформу для разработки, в которой можно реализовать множество интересных проектов, относящихся к машинному обучению, компьютерному зрению и многому другому. В этой статье мы рассмотрим как создать простой графический интерфейс используя язык программирования Python, в котором мы будем задействовать модуль под названием Vpython. Изложенные в данной статье решения применимы только для тех пользователей, которые используют операционную систему Windows, пользователям Mac и Linux необходимо использовать другой подход.
В конце данной статьи мы узнаем как создать простой GUI (графический интерфейс пользователя) используя язык программирования Python. Мы создадим некоторое подобие анимации с помощью ультразвукового датчика, подключенного к плате Arduino. Приложение будет отслеживать объект с помощью ультразвукового датчика и отображать эту информацию в графической форме на экране компьютера используя модуль VPython. Передачу данных от ультразвукового датчика языку программирования Python будет выполнять плата Arduino.
Необходимые компоненты
- Плата Arduino (любая) (купить на AliExpress).
- Ультразвуковой датчик HC-SR04 (купить на AliExpress).
- Соединительные провода.
- Компьютер с установленным Python.
- Знания из предыдущей статьи этой тематики.
Установка VPython на ваш компьютер
В предыдущей статье мы уже рассмотрели вопрос с установкой языка программирования Python на ваш компьютер. Здесь же мы установим поверх него модуль Visual Python (VPython) чтобы создавать "продвинутую" графику на основе взаимодействия Python и Arduino. Для установки VPython необходимо выполнить следующие простые шаги:
Шаг 1. Убедитесь в том, что Python уже установлен на вашем компьютере.
Шаг 2. Скачайте установочный (exe) файл VPython. Не устанавливайте его 64-битную версию даже если ваш компьютер поддерживает это.
Шаг 3. Запустите установку VPython и следуйте инструкциям во время установки. Убедитесь в том, что вы выбрали полную установку модуля (“full installation”) и не меняйте каталог установки, который установлен по умолчанию.
Шаг 4. После установки VPython его можно найти среди новых установленных программ под именем “VIDLE(VPython)” как показано на следующем рисунке.
Примечание : VIDLE for VPython отличается от IDLE for python.
Шаг 5. Запустите установленное приложение и вы увидите окно программы, показанное на следующем рисунке.
Шаг 6. Это окно, в котором вы будете писать программу для VPython. Но сначала давайте проверим корректно ли работает Vpython на тестовом примере. Для этого выберете пункт меню File->Open->Bounce.
Шаг 7. Должен открыться пример программы. Запустите его на выполнение с помощью выбора пункта меню Run -> Run Module. Если все работает как нужно вы должны получить на экране компьютера следующее изображение:
Шаг 8. Также вы можете попробовать и другие примеры программ чтобы посмотреть на возможности Vpython, например, пример программы под названием “electric-motor”, выполнение которого приведет к следующей картинке на вашем экране.
Шаг 9. Если пример программы у вас успешно запустился, то вы можете переходить к следующему разделу данной статьи.
Шаг 11. Откройте My computer -> C drive -> Python 27 -> Scripts -> local.bat. Этот файл запустит окно с командной строкой как показано на следующем рисунке.
Шаг 12. Напечатайте в этом окне “pip install --upgrade numpy” и нажмите ввод на клавиатуре. В результате этой команды на ваш компьютер будет установлена новая версия Numpy. Возможно, вам придется подождать некоторое время если у вас медленный интернет.
Шаг 13. Теперь вам нужно вернуться к шагу 4 и попробовать запустить на выполнение указанный в шаге 6 пример программы.
Программирование VPython
Теперь мы начнем программировать в окне VPython. В этой программе мы создадим два 3D прямоугольных объекта, один из которых будет помещен в центре экрана по отношению к стационарно установленному ультразвуковому датчику, а позиция второго объекта будет меняться динамически в зависимости от расстояния между ультразвуковым датчиком и объектом (листом бумаги).
Полный код программы для Python приведен в конце статьи, здесь же мы обсудим его наиболее важные фрагменты.
Первую вещь, которую мы должны сделать в программе – это импортировать (подключить) библиотеку для работы с графическими объектами (visual Library) чтобы мы могли создавать 3D объекты. Это можно сделать с помощью следующей строки:
Читайте также: