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

У моєму попередньому посібнику я показала вам, як створювати прототип системи, що відповідає концепції IoT (* Internet of Things – Інтернет речей; концепція мережі, що складається із взаємозв'язаних фізичних пристроїв, які мають вбудовані датчики, а також програмне забезпечення, що дозволяє здійснювати передачу і обмін даними між фізичним світом і комп'ютерними системами, за допомогою використання стандартних протоколів зв'язку. Тут і надалі примітка перекладача), за допомогою Johnny-Five (* фреймворк для створення роботехніки на JavaScript) та PubNub (*швидко працююча система обміну повідомленнями між будь-якими пристроями та платформами.) У тому посібнику ви дізналися, як створювати СВД (* світловипромінюючий діод), що можна контролювати за допомогою веб-інтерфейсу, у стилі Philips HUE (* інтелектуальні прозорі лампочки Philips).

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

На цьому занятті ви будете:

1. створювати ланцюг з температурним датчиком та зчитувати значення з нього
2. зчитувати дані та будувати на їх базі графік

Попередні підготування

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

Також впевніться, що Node.js запущено на вашому комп'ютері.

Зручна та проста у здійсненні візуалізація даних за допомогою EON

Проект EON – це фреймворк JavaScript з відкритим початковим кодом для викреслювання графіків та складання карт, створений PubNub.

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

Базові дії для візуалізації даних, що надходять з датчика, настільки прості:

Публікуємо дані з джерела:

PUBNUB.publish({
  channel:  'my-graph',
  message:  {'eon': 
　　{'My data 1': 39, 'My data 2: 23}}
});

2. Embed a graph on web:

eon.chart({
  channel: 'my-graph',
  generate: {
    bindto: '#myGraph'
  }
});

Ми розглянемо деталі використання 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 та використайте код нижче для виведення значень:

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

five.Board().on('ready', function() {
  var temperature = new five.Thermometer({
    controller: 'DS18B20',
    pin: 2
  });

  temperature.on('data', function() {
    console.log(this.celsius + '°C', this.fahrenheit + '°F');
  });
});

Виконайте код у консолі за допомогою node temperature.js. Тільки-но плата апаратного забезпечення буде готова, ви повинні будете побачити виведені до консолі значення температури подібні наступним:

Тепер давайте опублікуємо дані з термодатчика та нарисуємо на їх основі графік!

Пересилання даних температури від сенсора до PubNub

Для початку вам необхідно встановити модуль pubnub для Node.js за допомогою:

$ npm install pubnub

Мережа потоку даних (DSN – Data Stream Network) PubNub надає глобальну інфраструктуру (* основоположна сукупність компонентів, об'єднана в систему) і дозволяє вам доволі просто створювати та масштабувати застосунки та пристрої IoT, що працюють у режимі реального часу. У моєму попередньому посібнику ми використовували PubNub для отримання даних від веб-браузера, проте тепер ми використовуємо PubNub для публікації даних, що надходять з датчика, щоб їх зчитати у браузері.

Ініціалізація PubNub

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

var pubnub = require('pubnub')({
  publish_key: 'pub-c-156a...',
  subscribe_key: 'sub-c-f762f...'
});

Також давайте створимо ім'я для каналу.

var channel = 'temperature-ds18b20';

Коли ви будете викреслювати графік, то вам буде необхідно отримати опубліковані дані з каналу з тим же ім'ям.

Публікація даних до PubNub

Одразу після отримання за допомогою Johnny-Five даних температури при виникненні події data, генерування якої ми реалізували в попередньому розділі посібника, зберігайте дані в змінній, а не виводьте їх за допомогою console.log.

var temp = 0;

temperature.on('data', function() {
  temp = this.celsius;
});

Ви можете публікувати всі дані до PubNub, проте датчик може генерувати події занадто швидко. Так що давайте відсилати дані кожні три секунди.

setInterval(publish, 3000);

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

function publish() {
  var data = {
    'temperature': temp,
  };
  pubnub.publish({
    channel: channel,
    message: data,
  });
}

Повний код для Arduino можете знайти у цьому репозиторії GitHub.

Викреслюємо гістограму на основі даних, що надходять з датчика.

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

Для початку підключіть eon.css до вашого файлу HTML:

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

Потім підключіть pubnub.js:

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

Далі створіть порожній елемент з певним ID:

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

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

var pubnub = PUBNUB.init({
  publish_key: 'pub-c-156a...',
  subscribe_key: 'sub-c-f762f...'
});

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

eon.chart(
  pubnub: pubnub,
  {
    channel: 'temperature-ds18b20',
    generate: {
      bindto: '#chart'
    }
  },
  transform: function(m) {
    return { eon: {
      temperature: m.temperature
    }}
  }
});

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

Виконайте код HTML та Node.js для Arduino.

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

Ви можете виконати подальші налаштування графіка за допомогою необов'язкових параметрів C3.js для визначення, наприклад, кольору ліній та ширини!

Наприклад, для того щоб змінити колір гістограми на фіолетовий, як показано на анімації gif вище, ви можете додати колір у параметрі data:

...
  generate: {
    bindto: '#chart,
    data: {
      type: 'line', 
      colors: {
        temperature: '#663399'
      }
    },

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

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

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

Сподіваюся, що вам сподобався посібник!

Посилання

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