Dashboards in Node-RED

predstavenie možností nástroja Node-RED pre tvorbu jednoduchých dashboard-ov

About

Vecičky, ktoré vytvárate pre svoje IoT riešenia, sú častokrát len zdrojom údajov. Odčítavate teplotu, intenzitu svetla, vlhkosť a rozličné iné hodnoty opisujúce prostredie, v ktorom sa vecička nachádza. Čo však ďalej robiť s údajmi, ktoré vecičky odčítajú? Zobraziť ich na displeji? Poslať ich do cloud-u?

Na tomto cvičení si ukážeme, ako v nástroji Node-RED vytvoriť jednoduché “dashboard”-y, ktoré budú údaje z vašich senzorov zbierať.

Goals

  • zoznámiť sa so základmi používania nástroja NodeRED
  • porozumieť fungovaniu protokolu MQTT

Content

Krok #1: Get Ready for Dashboarding

Ešte predtým, ako začneme, si naimportujte výsledný flow z minulého cvičenia.

Úloha 1.1: Vytvorte nový flow s názvom Dashboard.

Úloha 1.2: Nainštalujte do Node RED-u balík node-red-dashboard.

Tento balík pridá do palety uzlov nové uzly do novej kategórie dashboard. Pomocou nich budeme môcť zostaviť používateľské rozhranie.

Nainštalovať nový balík môžete cez položku Manage palette v hamburgerovom menu aplikácie. Následne kliknite na záložku Install, vyhľadajte balík a nainštalujte ho.

Krok #2: The Score

Jeden zo základných typov komponentov, s ktorým sa dá stretnúť v Dashboard-och sa nazýva skóre. Jedná sa najčastejšie o zobrazenie jednej (číselnej) hodnoty. V tomto kroku si vytvorenie jednoduchého skóre ukážeme.

Úloha 2.1: Vytvorte jednoduchý flow inject a text a výsledok nasaďte.

Aby nasadenie prebehlo úspešne, je potrebné nastaviť skupinu a kartu, kde sa výsledné UI nasadí. Stačí, ak potvrdíte predvolené hodnoty (UI skupina sa bude volať Default a UI karta sa bude volať Home).

Flow: Vytvorenie skóre

Úloha 2.2: Otvorte prehliadač na adrese http://localhost:1880/ui.

Ak ste postupovali správne, zobrazí sa vám jednoduché používateľské rozhranie. V tomto rozhraní sa na karte Home v skupine Default nachádza jednoduché skôre s aktuálnou časovou značkou získanou z uzla inject.

Dashboard: Jednoduché skóre

Úloha 2.3: Experimentujte s vlastnosťami uzla text.

Krok #3: Temperature as a Score

V tomto kroku pre skóre použijeme ako hodnotu teplotu. Vhodným spôsobom ju teda budeme publikovať pomocou protokolu MQTT z flow-u Weathermap, aby sme ju vo flow-e Dashboard použili ako zdroj dát pre zobrazenie vo forme skóre. Ako MQTT Broker budeme aj tentokrát používať broker.hivemq.com.

Úloha 3.1: Upravte flow Weathermap tak, aby do osobitného MQTT topic-u publikoval len hodnotu teploty získanej z webovej služby poskytujúcej predpoveď počasia.

Teplotu je potrebné extrahovať z JSON-u, ktorý bol získaný zo služby openweathermap.org. To je možné napr. pomocou uzla function alebo pomocou uzla change.

Aby každý dostal informáciu práve o svojej teplote, údaj posielajte do témy kpi/iot/MENO/temp, kde MENO bude vaše meno (alebo prezývka).

Flow: Extrahovanie teploty

Úloha 3.2: Vo flow-e Dashboard vymeňte uzol inject za uzol mqtt in, z ktorého budete získavať aktuálnu hodnotu o teplote.

Flow: Odber teploty z MQTT

Úloha 3.3: Nastavte vlastnosti uzla text tak, aby sa spolu s hodnotou teploty zobrazila aj jednotka °C.

Krok #4: The Gauge Node

Zatiaľ sme teplotu vizualizovali len pomocou jednoduchého skóre. Nástroj Node-RED však ponúka aj ďalšie komponenty pre vizualizáciu údajov. V tomto kroku sa pozrieme na možnosti vizualizácie pomocou komponentu Gauge.

Úloha 4.1: Ku uzlu mqtt in pripojte aj uzol gauge a nastavte jeho základné vlastnosti.

Pre uzol gauge nech platí:

  • zobrazí sa na karte Home v skupine Default

  • jednotkou je stupeň celzia °C

  • teplotný rozsah je -35°C do +45°C

  • chlad reprezentujte modrým odtieňom

Flow: Vizualizácia teploty pomocou uzla gauge

Úloha 4.2: Experimentujte s rozličnými typmi uzla gauge.

Uzol gauge poskytuje 4 rôzne typy vizualizácií:

  • Gauge - budík
  • Donut - šiška
  • Compass - kompas
  • Level - hladina
Rozličné typy uzla gauge: gauge, donut, compass a level

Krok #5: The Chart Node

Úloha 5.1: Ku uzlu mqtt in pripojte aj uzol chart a nastavte jeho základné vlastnosti.

Pre uzol gauge nech platí:

  • zobrazí sa na karte Home v skupine Default
Flow: Vizualizácia teploty pomocou uzla chart

Úloha 5.2: Rozmiestnite komponenty dashboard-u do dvoch skupín tak, aby lepšie využili miesto na stránke.

Vytvorte dve skupiny:

  • skupina Live Data - bude zobrazovať aktuálne údaje

    • nastavte šírku na 6
    • umiestnite do nej uzly text a gauge

  • skupina History - bude zobrazovať priebeh údajov v čase

    • nastavte šírku na 12
    • umiestnite do nej uzly chart

Samotnú kartu premenujte na Temperature.

Karta teploty

Krok #6: Input Nodes

Krok #7: Notifications

Additional Tasks

  1. Ku meranej hodnote pridajte aj informáciu o tom, kedy bolo meranie uskutočnené. Ideálne túto informáciu získajte zo zdroja merania, pretože môže byť iná (staršia), ako čas, v ktorom sa na hodnotu budete pýtať vo svojom flow-e.

  2. Vytvorte osobitne záložky Humidity a Pressure, do ktorých vhodným spôsobom vizualizujete namerané hodnoty vlhkosti a tlaku.

  3. Vytvorte osobitnú záložku Home, na ktorej sa budú nachádzať len aktuálne informácie o všetkých meraných veličinách (či to bude budík alebo len skóre je na vás) spolu s informáciou o čase posledného merania.