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

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

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.

Ukrainian (українська мова) 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 (Genuino) 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
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.