Augmented reality (rozšírená realita) sa dostáva do popredia niekoľko posledných rokov. Dá sa využiť v rôznych aplikáciách, vrátane 3D vizualizácii v pokročilých medicínskych aplikáciach, digital twiningu, interakciu s vecami a podobne. Je to však vhodná technológia aj na jednoduchšie vizualizácie a malé projekty. Dnes by som rád ukázal implementáciu, ktorú som využil pre možnosť získania dát z môjho IoT dashboardu pre hladinomer. Ide o vôbec moju prvú skúsenosť s konceptom AR, teda popis a rozsah nemusí každému sedieť.

AR aplikácie môžu existovať priamo pre smartfóny a ich operačný systém, najčastejšie Android a iOS, okrem toho je možné využiť túto technológiu aj pre web, čo umožní použitie tejto aplikácie v podstate akýmkoľvek zariadením. Webaplikáciu je možné pridať aj ako ikonu na plochu zariadenia, čo urýchli jej použitie v prípade potreby. Každá AR aplikácia má určitý spúšťač akcie, v mojom prípade to bol QR kód, ktorý obsahoval preddefinovaný text, avšak môže to byť pokojne aj URL z ktorého sa dáta budú získavať bude vnorený až niekde v scripte.

Pozor pri QR kódoch najmä nato, či sú statické, alebo dynamické. Niektoré QR kódy odkazujú na web tretej strany, kde ste si ho vytvorili a ten vás následne presmeruje na URL, resp. text, ktorý ste do systému zadali. Tieto stránky však ponúkajú túto službu na niekoľko dní a následne je už QR kód nefunkčný, nakoľko vás nepresmeruje tam, kde sa to vyžaduje. Google Chrome umožňuje vytvoriť statický QR kód priamo na link / text ktorý vyžadujete, teda ide o statický QR kód a ako bonus uvidíte aj dinosaura :-).

Na základe validácie vstupu (či je načítaný správny QR kód), som dokázal spustiť logiku, ktorá vykonala cez AJAX XHR request a získala HTML kód webstránky, ktorý obsahoval iba JSON výstup. Následným parsingom JSON štruktúry boli vyexportované dáta podľa príslušného kľúča pre výšku hladiny vody v studni a o objeme studne v litroch. Celý program je client-side a nevyužíva žiaden backend kód, čo je trochu nevýhoda, nakoľko túto aplikáciu môže následne ktokoľvek odkopírovať, záleží však, či bude môcť danú aplikáciu aj použiť, prípadne prerobiť pre jeho potreby, či pre formát dát, ktoré jeho systém používa.

Pre samotný scanning QR kódu a využitie kamery smartfónu som využil Instascan (HTML5 QR code scanner od Chrisa Schmicha), s niektorými pasážami po pomáhal aj Chat GPT. Pri prvom spustení webaplikácie sa spustila predná kamera smartfónu, teda bolo nutné pozmeniť parameter poľa kamier, aby som dokázal zapnúť zadnú kameru smartfónu. Testoval som na smartfóne Xiaomi Redmi 11. Po niekoľkých úpravách som dokázal poupraviť logiku systému pre moje požiadavky. Skener je možné používať pri orientácii zariadenia na výšku, ale aj na šírku. Chat GPT v aktuálnej verzii pomohol aj s pridaním tlačidiel, ktorých počet sa dynamicky mení v závislosti od smartfónu a počtu jeho fotoaparátov, teda je možné využiť akýkoľvek.

Po naskenovaní QR kódu sa mi zobrazia aktuálne dáta, ak prestanem QR kód načítavať, po 5 sekundách sa výpis odstráni z videa a môžem znova plnohodnotne skenovať QR kódy v okolí. Výhoda QR kódov je ich unikátnosť a tak môžem mať každý QR kód pre unikátne zariadenie v systéme. Po preskenovaní QR kódu uvidím dáta práve toho zariadenia bez možnosti ich zámeny.

To sa hodí najmä pri viacerých zariadeniach v priestore, či výrobnej hale, kedy môže technik, či pracovník vidieť aktuálne dáta bez potreby návštevy portálu. Používateľ môže získať posledné dáta aj bez autorizácie, prihlasovania sa do systému a pod. Nemá však možnosť a práva na pozmenenie dát, ich vymazanie, ale jeho rola je read-only. QR kód môže byť na zariadení nalepený ako nálepka. QR kód môže taktiež obsahovať aj určitý identifikátor zariadenia ako napr. MAC adresa, či interný index v databáze pre možnosť výstupných dát pre cieľové zariadenie. V tomto prípade však ukážka smeruje na portál, kde sa zbierajú dáta iba z jedného senzorového uzla, teda tu nie je potrebný žiadny identifikátor. Používateľ má tak k dispozícii dáta iba z daného senzora, ktorý skenuje. Taktiež z rozhrania, kde senzor ukladá dáta môžu byť získané aj iné dáta, ktoré môžu poukazovať na stav konektivity, posledný update dát, či zobrazenie dôležitých notifikácii.

Vyskúšajte projekt hladinomer s vašim hardvérom (Arduino, ESP32, ESP8266). Dostupných je niekoľko ukážkových zdrojových kódov v Arduino Core, alebo ESP-IDF. Taktiež je tu mnoho dostupných prenosových technológii pre priamy, alebo nepriamy zápis na portál (PHY Ethernet, WiFi, NB-IoT, LoRa, LoRaWAN, BLE Beacon): https://martinius96.github.io/hladinomer-studna-scripty/

Časom plánujem aj viac AR prvkov v systéme. Toto bolo len na úvod :-)

Aktuálnu verziu AR môžete vyskúšať na: https://martinius96.github.io/hladinomer-studna-scripty/AR/
QR kód nájdete vo webovom rozhraní hladinomera (otvorte si ho na PC, alebo vytlačte na papier, odkiaľ ho budete načítavať smartfónom: 
https://arduino.clanweb.eu/studna_s_prekladom/

Prístupov 3089

Kvalita článku