Watmonitor je lightweight webová aplikácia v HTML5, PHP, Bootstrape 5.3.8, ktorá umožňuje príjem, archiváciu (MySQL / MariaDB) a následnu vizualizáciu dát (JustGage, Raphaël, ApexCharts) o výške hladiny vody, či inej kvapaliny a tiež o výške sypkých materiálov. Systém je možné používať s open-source hardvérom, pre ktorý sú pripravené aj ukážkové sketche. Ide o WiFi mikrokontroléry ESP32 (aj s PHY Ethernetom cez RMII), ESP8266 od Espressif Systems, Raspberry Pi Pico W, či klasické Arduino s Ethernet shieldom rady Wiznet W5100 / W5500 s hardvérovým stackom, či ENC28J60 so softvérovým stackom.

Ukážkové sketche využívajú ultrazvukovú / ToF laserovú technológiu na určenie vzdialenosti, teda merajú rozdielovú výšku hladiny vody (od veka po hladinu). Vďaka univerzálnosti ho ale je možné využiť aj s priemyselným riešením s vhodne nakonfigurovaným callbackom, ktorý okrem hodnoty vyžaduje aj token pre autorizáciu zápisu do SQL. Rovnako tak je možné využívať aj snímače poskytujúce reálnu výšku hladiny vody merajúce od dna po hladinu.

Webaplikáciu je možné prepojiť aj s platformami tretích strán ako Ubidots, ThingSpeak, ThingsBoard a smart home systémov ako Loxone, Home Assistant a ďalšie a to či už priamo cez pull / push model, tak aj cez prostredníka, napríklad Node-RED v rámci predpripravených integrácii, alebo aj inými s vlastnou implementáciou. Keďže Watmonitor má pre pull model dva API endpointy, jeden vracia len posledné dáta, druhý všetky dáta, resp. skrz vhodne nastavené GET parametre v requeste dokáže vrátiť všetky dáta od, alebo všetky dáta do, prípadne za špecifické obdobie od do (GET parametre from, to. Formát YYYY-MM-DD bez časovej značky, teda k 00:00 hod).

Samotný Watmonitor okrem svojej real-time vizualizácie posledných nameraných dát poskytuje aj alternatívne vizualizácie a to buď statické, alebo dynamické (v rozšírenej realite - AR). Obe tieto vizualizácie využívali identický princíp a to prednú kameru telefónu, ktorú bolo možné využiť pre detekciu a načítanie QR kódu priamo v obraze, ktorý zachytila kamera. Správny kód vizualizoval dáta, ktoré sa načítali z JSON API Watmonitora.

Pri statickej vizualizácii sme využívali HTML tabuľku pre prehľadný výpis dát. AR vizualizácia umožnila vizualizáciu dát na karte v priestore, ktorú bolo možné otáčať a určitým spôsobom interagovať. Nakoľko bola vizualizácia vo fixnej vzdialenosti od kamery, šlo o orbitálnu vizualizáciu, ktorá má výhodu v tom, že môžete dáta prezerať aj za pohybu, keďže objekt v priestore neostane za vami.

Táto vizualizácia bola neskôr rozšírená o percentuálnu reprezentáciu naplnenia studne. V tomto prípade došlo aj k rozšíreniu API o ďalšie parametre, ktoré umožňovali vizualizovať percentuálny prepočet (napr. hĺbka studne) - zmena len v endpointe json_output.php. Samotnú AR vizualizáciu môžeme rozšíriť aj o interakciu s NFC, či RFID kartami (rovnaká frekvencia 13,56 MHz), kedy môžeme dáta vizualizovať aj formou priloženia karty, čo si popíšeme nižšie.

Aj tu platí, že môžeme mať rôzne druhy, resp. spôsoby triggeru AR scény u karty / tagu. Môže ísť o základné identifikátory ako UID karty, ale tiež môžeme použiť aj dáta z pamäte, napríklad NDEF záznamy. Samotný záznam môže byť len text, alebo URL adresa, či používateľom definovaný identifikátor. Každá karta tak môže prislúchať samostatnej inštancii Watmonitora. Pre malú aplikáciu ako je Watmonitor úplne postačuje identifikovať kartu cez UID. Na základe toho, či použijeme NTAG, alebo klasickú RFID kartu MiFare Classic musíme počítať aj s tým, aký bude tento identifikátor dlhý. V prípade NTAG-ov ide štandardne o 7 bajtové UID, pričom prvý bajt označuje vendora (výrobcu). Štandardne sú od NXP, teda označenie bude 04 (HEX) v prvom bajte. Ak použijeme MiFare Classic, UID má 4 bajty a aj tu platí, že prvý bajt je identifikátor vendora. Je tu veľmi malá šanca na duplicitu, u MiFare Classic síce menšia, ale ak si niekde zakúpite aj 50 kariet, určite nebudú mať identické UID.

Práca s NFC v HTML dokumente
Pre webové aplikácie je dostupné Web NFC API, ktoré umožňuje interagovať s NFC tagmi / RFID kartami a najmä kompatibilným hardvérom zariadenia bez ohľadu na výrobcu. Aktuálne ho viete použiť iba s prehliadačmi Google Chrome Android, WebView Android, Opera Android, Samsung Internet. Zdá sa, že iOS je úplne bez podpory tohto API. Samotné API dokáže prečítať sériové číslo tagu, čítať NDEF záznamy, zapisovať do tagu a pod. Z pohľadu použitia API v aplikácii je nutné splniť viacero podmienok. Webaplikácia môže bežať na localhoste, alebo na doméne s HTTPS protokolom pre end-end šifrovanie (klasické aj pri použití mikrofónu, kamery).

Prehliadač bude API blokovať pre HTTP konektivitu. Druhým dôležitým aspektom je tzv. gesto používateľa, teda priama akcia používateľa, aby sa API dalo použiť. Nestačí tak, aby mal používateľ vopred pustené NFC v telefóne a po otvorení stránky sa samovoľne spustilo. Musí tu byť akcia používateľa na povolenie NFC. Z pohľadu použitia API mi príde jednoduchšie NFC funkciu na telefóne vypnúť a zapnúť ju až po tom, čo si prehliadač zapnutie vyžiada. Funguje to spoľahlivejšie, ako povoľovač už aktívnu NFC funkcionalitu.

Samotné použitie API je jednoduché, keďže sa obsluhuje v Javascripte a má skutočne iba niekoľko funkcií. Skrz fyzické tlačidlo nfcBtn.addEventListener('click', startNFC) urobíme gesto používateľa, ktorý musí fyzicky odkliknúť použitie NFC API (respektíve funkcie, ktorá ho vykonáva), inak by sa API nespustilo, ak by neprebehla udalosť fyzického kliknutia na obrazovku telefónu. Je to podmienené v tom, ako je API napísané.

V samotnom NFC bloku postačuje vytvoriť inštanciu (objekt)  triedy NDEFReader, s ktorým môžete volať podporované funkcie. Pre túto vizualizáciu zavoláme funkciu scan() s týmto objektom. Ďalšie akcie s API sa vykonávajú asynchrónne, keďže sa zavolajú až pri akcii. V našom prípade používame asynchrónnu metódu onreading, ktorá spustí udalosť (event) v ktorom prečíta UID karty (event.serialNumber), prípadne aj jej obsah (TextDecoder(), decoder.decode()), ak je v nej niečo zapísané (length > 0).

Na premennú sériového čísla (scannedData), ktorá sa porovnáva s očakávaným reťazcom 04:14:2b:72:1d:12:91 tak nastavujeme UID karty, prípadne textový obsah, ak bol nájdený. Keďže sme používali prázdne NTAG213, NTAG215 a NTAG216, identifikátor bol vždy UID z výroby, ktorý NTAG vysiela po nabití elektrickým poľom z NFC čítačky telefónu.

Konkrétne UID, ktoré očakávame od karty nastavíme do porovnania, ktoré aktivuje AR scénu a dáta vizualizuje. Po načítaní danej karty tak dostaneme IoT dáta v AR orbitálnej vizualizácii. U NTAG-ov aj pri RFID kartách platí, že UID neviete zmeniť, nakoľko Block 0 u RFID, respektíve Block 0 1 a 2 pri NTAG-och nie je prepisovateľný, je read-only, pokiaľ nemáte tzv. Magic karty, ktoré majú tieto bloky otvorené. V našom prípade budeme overovať toto UID: 04:14:2b:72:1d:12:91, teda AR  scéna sa zobrazí až po priložení tejto konkrétnej NTAG karty.

Celá modifikácia oproti skenovaniu QR kódov je iba niekoľko riadková zmena, ktorou dostanete úplne nový spôsob pre trigger AR scény. V prípade, že by ste využívali NDEF záznam s určitou hodnotou pre vykonanie akcie, napríklad URL konkrétnej inštancie Watmonitora, ktorých môže byť na serveri, či serveroch niekoľko, môžete tento záznam aj zmeniť, napríklad cez aplikáciu NFC Tools, čím môžete dynamicky zmeniť cieľové API z ktorého sa dáta budú ťahať. V prípade statického QR kódu by ste takúto zmenu už nemohli urobiť, jedine presmerovať cieľovú URL priamo v kóde aplikácie.

Watmonitor môžete vyskúšať s vašim open-source hardvérom priamo / cez simulované MCU v simulátore Wokwi, ktoré sú nastavené na verejnú Watmonitor inštanciu, kde je možné otestovať všetky dostupné funkcionality. Webové rozhranie je zdieľané a tak je možné, že vám môže iný používateľ prepisovať dáta: https://your-iot.github.io/Watmonitor/sk/.

QR skener - statická vizualizácia: https://hladinomer.eu/QR/

AR orbitálna vizualizácia s QR kódom: https://hladinomer.eu/AR/

AR orbitálna vizualizácia s NFC tagom: https://hladinomer.eu/NFC/ - môžete použiť akýkoľvek NTAG, alebo MiFare kartu (áno, aj tá bude fungovať, hoci má len 4-bajtové UID) v prípade, že skrz NFC Tools vytvoríte NDEF záznam (záložka WRITE) typu TEXT, do ktorého vložíte reťazec 04:14:2b:72:1d:12:91, kliknete na Write a potom priložíte kartu k NFC čítačke telefónu a dáta sa zapíšu, o čom bude informovať aj informačná obrazovka. Následne otvorte NFC AR vizualizáciu, aktivujte NFC, priložte kartu.

S takouto kartou sa vám následne zobrazí aj AR vizualizácia na danom umiestnení. Druhou možnosťou je mať kartu prázdnu a prepísať bloky 0 1 a 2 (len u NTAG, MiFare nemôžete použiť, lebo nemá taký dlhý UID!). Štandardne sú tieto bloky read-only a teda potrebujete tzv. Magic (CUID) kartu. Na UID nastavíte 04:14:2b:72:1d:12:91 a v takomto prípade sa vám AR vizualizácia po naskenovaní tejto karty taktiež spustí. Kompatibilné iba s popísanými prehliadačmi (najlepšie aktualizovanými) v operačnom systéme Android.

 

Prístupov 9

Kvalita článku