Instascan je šikovný HTML5 nástroj pre skenovanie QR kódov. Poslednú aktualizáciu dostal v roku 2017 ako release verziu 1.0.0, ale funguje perfektne aj dnes bez akýchkoľvek problémov v prehliadačoch aj s najnovšími smartfónmi. Netreba nato Chrome, funguje aj s natívnymi prehliadačmi výrobcov telefónov. Funkčnosť na Androide môžem potvrdiť, iOS som v ruke nemal, ale predpokladám, že by to fungovalo. Testoval som dokonca aj s už historickým Androidom 5 a QR skener funguje, nefungoval však Bootstrap, resp. jeho CSS štýly na tomto zariadení.  Na nástroji Instascan som si postavil moju aplikáciu pre skenovanie QR kódov zo senzorových uzlov Watmonitora, ktorú som v jej použiteľnom stave odprezentoval vo svojich článkov v Októbri 2023.

Fungovalo to dobre, časom som pridal aj funkcie pre prepínanie kamier, kedy sa automaticky detekuje počet kamier telefónu a bolo možné medzi nimi prepínať. Nešlo vôbec o prednú selfie kameru, ktorá je zrkadlená a QR kód by natívne neprečítala, ale šlo o primárne použitie poslednej indexovanej kamery, ktorá je vždy dá na bežné fotenie. Nevyberie to tak makro, ani širokouhlú, ale tú bežne používanú, ktorá sa štandardne otvorí pri spustení aplikácie Fotoaparátu telefónu. Používateľ tak mohol vybrať napr. makro kameru, ktorá mala zoom a bolo možné vyskúšať dostupné kamery.

Po naskenovaní QR kódu sa vykonalo overenie, či je jeho obsahom určitý text a vykonal sa HTTPS GET request na preddefinovanú lokalitu, ktorý vyparsoval dáta priamo z aplikácie Watmonitor a jeho json_output.php súboru. Tieto vyparsované hodnoty sa následne vyobrazili v tabuľke, ktorú bolo možné zatvoriť kliknutím na New Scan, alebo samotný request bolo možné obnoviť a získať posledné dáta bez nutnosti opätovného skenovania QR kódu. Tento QR kód bol nalepený na zariadení, ale bol dostupný aj priamo na webe Watmonitora.


Pôvodná JSON štruktúra (2023):

{
    "value": 288,
    "volume": 1447.65,
    "time": "14. Jan 00:26"
}

Funkcionalita vyzerala cca takto:

Samozrejme už pri tej pôvodnej implementácii boli rôzne problémy. Pôvodný QR skener bežal na Github Pages, ktorý umožňuje hostovať statické stránky, teda HTML5 plne podporuje. Nie je tam možné napr. spúšťať PHP scripty a backend. Sú tam ale ešte aj iné problémy a to napríklad s Cross-Origin hlavičkami, ktoré blokovali request na iný webserver. Z toho dôvodu bolo nutné použiť CORS proxy, ktorý fungoval ako prostredník pre request a nedošlo k blokovaniu requestu. Ďalším problémom bol caching ku ktorému dochádzalo a neobnovovali sa dáta, stále boli prijímané tie isté, aj keď už boli zmenené. To sa vyriešilo argumentom dopytu k pôvodnému HTTPS GET requestu, kde sa do každej požiadavky pripojil aktuálny čas, ktorý bol logicky vždy iný. Tým sa zabezpečilo, že nedochádzalo k cachingu rovnakého requestu.

S odstupom času Instascanu samozrejme niečo chýbalo a boli tam určité problémy aj v zobrazovaní ovládacích tlačidiel. V závislosti na rozlíšení zariadenia smartfónu sa stávalo, že po vyobrazení tabuľky sa tieto tlačidlá do polovice skryli pod URL lištu, nemali tak statickú pozíciu s akou boli pôvodne načítané pri spustení stránky. A najhlavnejšia vec, ktorá chýba... No samozrejme priesvietenie, aby bolo možné QR kód naskenovať aj za zníženej viditeľnosti, v ternéne, alebo aj vo vnútri studne, kde je senzorový uzol nainštalovaný.

Nebolo ho možné nijako použiť, keďže vždy pri spustení fotoaparátu dôjde k jeho zablokovaniu a zhasnutiu. Teda aj keď používateľ prísvit zapol manuálne, vypol sa pri načítaní stránky v momente spustenie kamery. Nová verzia QR skenera pre Watmonitor tak obsahuje aj ovládanie prisvietenia (blesku). Nie je to funkcionalita knižnice Instascan, ale je to WebRTC API. Pre ovládanie prísvitu bolo do aplikácie doplnené aj tlačidlo vedľa tlačidiel výberu fotoaparátov, ktorým je možné prísvit ovládať. Treba však spomenúť, že prísvit je viazaný na konkrétnu kameru a API overuje, či ho kamera podporuje. So žiadnou inou ako poslednou v indexácii nefunguje.

Príklad zapnutého prísvitu pri kamere 2 (index kamery 1, nakoľko sa indexuje od 0): 

Pri pokuse o zapnutie prísvitu pri zvolenej kamere č.1 (index 0, t.j. predná selfie kamera) vyskočí hláška o nepodpore flashlight funkcie pre túto kameru, WebRTC API k prísvitu nemá prístup skrz túto kameru. Je to klasický JS alert, ktorý je výsledkom použitia API pri kliknutí na button. Ak by došlo k ovládaniu flashlightu, tlačidlo sa prepne a vypíše protiakciu, ktorú vie vykonať (Turn off) a pod.

Rovnako tak pôvodný JSON výstup Watmonitora bol rozšírený ešte o meno studne, ktoré je prebraté priamo z webového rozhrania Watmonitora. To sa hodí najmä pre rozsiahlejšie inštalácie, kedy operátor môže naskenovať QR kód na zariadení a zistí meno studne, ktorej patrí, prípadne jeho MAC adresu, či poradové číslo. napr. kam má byť namontovaný v rámci prevádzky, továrne, zásobníkov, nádrží. JSON výstup z webového rozhrania pôvodne nevypisoval diakritiku správne a nahrádzal ju špeciálnymi znakmi. Z toho dôvodu bolo nutné poupraviť formátovanie JSON výstupu s parametrom JSON_UNESCAPED_UNICODE v PHP funkcii json_encode().

Finálne skenovanie môže vyzerať teda napríklad takto:

Zaujímavé bolo, že QR skener plne fungoval aj na najstaršom Androide 5, ktorý som mal v šuflíku k dispozícii. Občas nefungovali CSS štýly Bootstrapu a tlačidlá boli len tie typu "blank" a po niekoľkých refreshoch QR skenera už fngovali. Samotný prehliadač Chrome sa už ani nedal aktualizovať, Android verzia bola už nepodporovaná. Fungovalo aj zapnutie prísvitu. Nešlo ho ale vypnúť. Skrátka tlačidlo nato nereagovalo, stav menilo. Bolo vidieť, že po zapnutí prísvitu bol okolo tlačidla žltý rámik, teda pôvodné zapínacie tlačidlo bolo akoby aktívne pod tlačidlom pre vypnutie. Asi tam niečo nefungovalo dobre vo vzťahu k API. Prísvit sa dal zhasnúť iba zatvorením prehliadača, alebo prepnutím kamery. Bolo to ale aj tak použiteľné pre ten účel, i keď nefungovala korektne možnosť zhasnutia prísvitu. 

Android 5 (Lollipop)

JSON štruktúra môže byť doplnená o ďalšie zaujímavé parametre. Aj keby ich bol oviac, neovplyvní to aktuálny spôsob parsovania, keďže ten parsuje konkrétny parameter a je mu jedno, koľko je tam riadkov, nejde postupne. Medzi ďalšie paramtre môžeme zaradiť nastavenia uložené na serveri ako hĺbka a priemer studne a iné.

Aktuálna JSON štruktúra (navyše meno studne):

{
    "name": "Studňa (ESP32 + PHY Ethernet LAN8720)",
    "value": 288,
    "volume": 1447.65,
    "time": "14. Jan 00:26"
}

Parsing dát z formátu JSON v HTML5 aplikácii QR skenera:


QR skener v tejto verzii na vyskúšanie: https://hladinomer.eu/QR/
Target QR kód dostupný priamo v aplikácii Watmonitora: https://hladinomer.eu/

Prístupov 192

Kvalita článku