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

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

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

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

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

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

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

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

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

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

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

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

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

1

PUBNUB.publish({

2

  channel:  'my-graph',

3

  message:  {'eon': 

4

　　{'My data 1': 39, 'My data 2: 23}}

5

});

6

7

2. Embed a graph on web:

8

9

eon.chart({

10

  channel: 'my-graph',

11

  generate: {

12

    bindto: '#myGraph'

13

  }

14

});

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

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

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

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

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

Немного о цифровом термодатчике 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. Скачайте код в плату

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

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

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

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

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

$ npm install johnny-five

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

1

var five = require('johnny-five');

2

3

five.Board().on('ready', function() {

4

  var temperature = new five.Thermometer({

5

    controller: 'DS18B20',

6

    pin: 2

7

  });

8

9

  temperature.on('data', function() {

10

    console.log(this.celsius + '°C', this.fahrenheit + '°F');

11

  });

12

});

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

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

Пересылка данных температуры от сенсора в PubNub

Для начала вам необходимо установить модуль pubnub для Node.js при помощи:

$ npm install pubnub

Сеть потока данных (DSN – Data Stream Network) PubNub предоставляет глобальную инфраструктуру (* основополагающая совокупность компонентов, объединенная в систему) и позволяет вам довольно просто создавать и масштабировать приложения и устройства IoT, работающие в режиме реального времени. В моем предыдущем руководстве мы использовали PubNub для получения данных от веб-браузера, однако теперь мы используем PubNub для публикации данных, поступающих с датчика, чтобы их считать в браузере.

Инициализация PubNub

Как только вы установили модуль pubnub, вам необходимо инициализировать его с помощью ваших ключей API.

1

var pubnub = require('pubnub')({

2

  publish_key: 'pub-c-156a...',

3

  subscribe_key: 'sub-c-f762f...'

4

});

Также давайте создадим имя для канала.

1

var channel = 'temperature-ds18b20';

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

Публикация данных в PubNub

Сразу после получения при помощи Johnny-Five данных  температуры при возникновении события data, генерирование которого мы реализовали в предыдущем разделе руководства, храните данные в переменной, а не  выводите при помощи console.log.

1

var temp = 0;

2

3

temperature.on('data', function() {

4

  temp = this.celsius;

5

});

Вы можете публиковать все данные в PubNub, однако датчик может генерировать события слишком часто. Так что давайте отсылать данные каждые три секунды.

1

setInterval(publish, 3000);

В функции publish используйте метод publish() PubNub для отправки данных в виде объекта (или JSON (* текстовый формат обмена данными, основанный на JavaScript.)).

1

function publish() {

2

  var data = {

3

    'temperature': temp,

4

  };

5

  pubnub.publish({

6

    channel: channel,

7

    message: data,

8

  });

9

}

Полный код для Arduino доступен в этом репозитории GitHub.

Вычерчиваем гистограмму на основе данных, поступающих с датчика

Теперь забудем об Arduino   и создадим отдельную веб-страницу для построения графика.

Для начала подключите eon.css в ваш файл HTML:

1

<link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/0.0.9/eon.css">

Затем подключите pubnub.js:

1

<script src="//cdn.pubnub.com/pubnub-3.10.2.js"></script>

Далее создайте пустой элемент с определенным ID:

1

<div id="chart"></div>

Именно тут будет располагаться сгенерированный график. Теперь вам необходимо инициализировать PubNub так же, как вы сделали ранее в файле node.js для Arduino:

1

var pubnub = PUBNUB.init({

2

  publish_key: 'pub-c-156a...',

3

  subscribe_key: 'sub-c-f762f...'

4

});

Затем сгенерируйте простую гистограмму при помощи метода EON chart() сразу после получения данных от PubNub. Вы можете получить данные, присланные от датчика, используя то же самое имя канала – temperature-ds18b20:

1

eon.chart(

2

  pubnub: pubnub,

3

  {

4

    channel: 'temperature-ds18b20',

5

    generate: {

6

      bindto: '#chart'

7

    }

8

  },

9

  transform: function(m) {

10

    return { eon: {

11

      temperature: m.temperature

12

    }}

13

  }

14

});

Функция transform() преобразует необработанные данные, присланные от сенсора, так, чтобы они соответствовали схеме, которую может понять EON.

Выполните код HTML и Node.js для Arduino.

Voilà! Вы реализовали визуализацию данных, поступающих в режиме реального времени, в вашем браузере!

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

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

1

...

2

  generate: {

3

    bindto: '#chart,

4

    data: {

5

      type: 'line', 

6

      colors: {

7

        temperature: '#663399'

8

      }

9

    },

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

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

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

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

Ссылки

• Создание интеллектуальных устройств на основе Arduino и Node.js при помощи PubNub
• Johnny-Five: оригинальный фреймворк для программирования робототехники на JavaScript
• PubNub: глобальная сеть потока данных, поступающих в режиме реального времени для мобильных приложений, веб-приложений и устройств IoT.
• Проект EON: фреймворк, разработанный PubNub, с открытым исходным кодом для вычерчивания графиков и построения карт на основе данных, поступающих в режиме реального времени