Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Internet of Things

Визуализация данных, поступающих с датчика Arduino в режиме реального времени, при помощи  Johnny-Five и  PubNub EON.js

by
Difficulty:IntermediateLength:ShortLanguages:
Sponsored Content

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)

В моей предыдущей статье я показала вам, как создавать прототип системы, соответствующей концепции IoT (* Internet of Things – концепция вычислительной сети физических предметов («вещей»), оснащённых встроенными технологиями для взаимодействия друг с другом или с внешней средой. Здесь и далее примеч. пер.), при помощи Johnny-Five (*  фреймворк для создания робототехники на JavaScript) и  PubNub (* быстро работающая система обмена сообщениями между любыми устройствами и платформами). В том руководстве вы узнали, как создавать СИД (* светоизлучающий диод), контролируемый при помощи веб-интерфейса, в стиле Philips HUE (* интеллектуальные  прозрачные лампочки Philips).

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

На этом занятии вы будете:

  1. создавать контур с температурным датчиком и считывать значения с него
  2. считывать данные и строить на их основе график
An image of the finished product

Предварительная подготовка

Вам необходима плата Arduino Uno (* "Uno" означает «один» на итальянском и является эталонной моделью для платформы Arduino) и базовые знания того, как настроить Arduino для использования Johnny-Five. Полезно будет просмотреть раздел Настройка Arduino в пошаговом руководстве, однако вам не нужно устанавливать StandardFirmata, поскольку вы установите в этот раз кое-что другое.

Также убедитесь, что Node.js запущен на вашем компьютере.

Удобная и простая в осуществлении визуализация данных при помощи EON

Проект EON – это фреймворк JavaScript с открытым исходным кодом для вычерчивания графиков и составления карт, созданный PubNub.

Поскольку компоненты EON для вычерчивания диаграмм и графиков основаны на C3.js, обертке для D3.js, то  благодаря EON вы можете легко создавать графики в режиме реального времени, не зная, как использовать намного более сложную в освоении библиотеку D3.

Базовые действия для визуализации данных, поступающих с датчика, настолько просты:

Публикуем данные из источника:

Мы разберем детали использования EON по мере того, как мы будем работать с аппаратным и программным обеспечением. Итак. Давайте начнем!

Собираем контур с термодатчиком

Давайте для начала соберем контур для термодатчика. Обычный сенсор и детали должны быть довольно дешевыми.

Необходимое аппаратное обеспечение:

  • 1 Arduino Uno
  • 1 цифровой температурный датчик DS18B20, обменивающийся данными по протоколу (интерфейсу) 1-Wire (* позволяет подключить огромное количество таких датчиков, используя всего 1 цифровой порт контроллера, и всего 2 провода для всех датчиков: земли и сигнала)
  • 3 проволочных перемычки с двумя штыревыми концам
  • 1 резистор (4,7 kΩ)
  • 1 прототипная плата
The hardware that youll need

Немного о цифровом термодатчике DS18B20

Типичный цифровой термодатчик DS18B20 позволяет определять температуру окружающего воздуха в диапазоне от -55°C до 125°C (Цельсия) с точностью ±0.5°C в большей части диапазона. Встроенный АЦП (* аналого-цифровой преобразователь) преобразует эти данные в аналоговой форме в цифровую с 12-битным разрешением.

Добавление ConfigurableFirmata в Arduino

Сенсор DS18B20 обменивается данными по протоколу 1-Wire. Когда вы применяете устройства, которые пользуются  специальным протоколом, то для Johnny-Five необходим модуль для работы с устройствами на основе интерфейса  1-Wire, который использует схему ConfigurableFirmata.

Поэтому давайте скачаем ConfigurableFirmata в Arduino до подключения сенсора:

  1. Подключите вашу Arduino к компьютеру при помощи кабеля USB.
  2. В IDE (* интегрированная среда разработки) перейдите в  Sketch > Include Library > Manage Libraries.
  3. Наберите в поисковой строке "ConfigurableFirmata".
  4. Кликните по результату, выберите последнюю версию и кликните Install
  5. Перейдите в  File > Examples > ConfigurableFirmata.
  6. Скачайте код в плату
Selecting the library from the Arduino IDE
Selecting ConfigurableFirmata

Сборка контура

Теперь давайте подключим провода. Контур очень пост: всего лишь убедитесь, что вы используете резистор 4.7kΩ, когда вы подключаете сенсор к источнику 5V от Arduino.

A sketch of the diagram for how well put this together
The assembled circuit

Считывание значений температуры с сенсора

Давайте займемся программным обеспечением Считывать цифровые значения с сенсора очень просто, если вы используете Johnny-Five.

Убедитесь, что Node.js установлена на вашем компьютере. В подходящей папке для разработки установите Johnny-five при помощи npm (* пакетный менеджер Node).

$ npm install johnny-five

Создайте файл temperature.js и используйте код ниже для выведения значений:

Выполните код в консоли при помощи node temperature.js. Как только плата аппаратного обеспечения будет готова, вы должны будете увидеть выведенные в консоль значения температуры наподобие этих:

The temperature values printed out in the console

Теперь давайте опубликуем данные с термодатчика и вырисуем на их основе график!

Пересылка данных температуры от сенсора в 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à! Вы реализовали визуализацию данных, поступающих в режиме реального времени, в вашем браузере!

An animation of the real-time data visualization in the browser

Вы можете выполнить дальнейшие настройки графика при помощи необязательных параметров C3.js для задания, например, цвета линий и ширины!

Например, для того чтобы изменить цвет гистограммы на фиолетовый, как показано на анимации gif выше, вы можете добавить цвет в параметре data:

Вы можете также использовать параметр axis для маркирования и форматирования осей x и y.

Если вам необходим другой тип графика, то попробуйте изменить ‘line’ – значение типа по умолчанию – на ‘spline’, и увидите, что измениться.

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

Надеюсь, вам понравилось руководство!

Ссылки

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.