7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Internet of Things

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

Read Time: 6 mins
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 productAn image of the finished productAn 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 needThe hardware that youll needThe 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 IDESelecting the library from the Arduino IDESelecting the library from the Arduino IDE
Selecting ConfigurableFirmataSelecting ConfigurableFirmataSelecting ConfigurableFirmata

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

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

A sketch of the diagram for how well put this togetherA sketch of the diagram for how well put this togetherA sketch of the diagram for how well put this together
The assembled circuitThe assembled circuitThe 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 consoleThe temperature values printed out in the consoleThe 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 browserAn animation of the real-time data visualization in the browserAn animation of the real-time data visualization in the browser

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

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

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

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

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

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

Ссылки

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.