Tento článok opisuje riešenie problematiky moderných používateľských grafických rozhraní pre vizualizáciu a prácu s diagramami typu HMI. Poznatky získané behom študovania záverečnej témy sa aplikovali vo forme návrhu nového systému, ktorý by bol použiteľný v praxi aj pre dnešné potreby koncového používateľa.
Úvod
Tento článok prezentuje webovú aplikáciu ako riešenie pre problematiku interaktívnych grafických rozhraní a návrh na tvorbu a správu diagramov v technologickom prostredí. Väčšina technológií pre vývoj podobných aplikácií sú nasadené do panelových počítačov vo vnútripodnikovom prostredí a slúžia na ovládanie strojových prvkov vo výrobnom procese a zároveň znázorňujú aktuálny priebeh a stav jednotlivých komponentov. Mimoriadne postavenie medzi panelovými počítačmi má skupina určená na nasadenie ako Human Machine Interface (HMI) – rozhranie medzi človekom a strojom.
Z pohľadu aplikácie ide o komunikáciu medzi serverom, s ktorým komunikuje tretia strana pomocou odovzdávania a prijímania dát v databáze. Vďaka využitiu striktného JavaScriptu, technológie PHP 7 a hŕstky nadšencov sa vynašiel mikro framework Lumen od Laravelu, ktorý poháňa aplikáciu podporovanú na veľkej väčšine prehliadačov práve z dôvodu možného jej nasadenia na rôzne platformy.
O aplikácii
Pre používanie aplikácie je nutné prihlásenie užívateľa, ktorým predchádza registrácia do databázy. Zaradenie užívateľov podľa rolí a vymedzenie ich práv je potom už na práci samotného programátora, ktorý tento systém integruje do prevádzky. Užívateľ je identifikovaný podľa prihlasovacieho mena a hesla na úvodnej obrazovke, kde po prihlásení prebieha na strane serveru autentifikácia.
V prípade, ak ide o čerstvo nainštalovanú aplikáciu, je na práci dizajnéra, aby navrhol schému pomocou editačného režimu. Po prvotnom prihlásení sa teda zobrazí prázdny priestor pre diagram, ktorý slúži na zobrazovanie entít komponentov a vzťahmi medzi nimi.
Pri vytváraní diagramu pomocou editačného režimu je teda na programátorovi, resp. dizajnérovi, aby nastavil vstupy a výstupy jednotlivých entít a stratégiu prepojovacích čiar tak, aby to vizuálne vyzeralo prehľadne a zároveň to súhlasilo s reálnymi komponentmi vo výrobnom procese. Celkový diagram potom môže mať nasledujúcu podobu:
Jednotlivé vzťahy sú určené prepojovacími čiarami, ktoré su vopred definované dizajnérom alebo programátorom aplikácie. Tie znázorňujú komunikáciu alebo presun medzi dvomi komponentami. V prípade zaradenia do priemyselného procesu ide o presun materiálu z jedného stroja do druhého.
Ovládanie
V editačnom režime má dizajnér k dispozícii hlavné menu s možnosťou pridávania jedlotlivých komponentov, a s možnosťou pridaním svojej vlastnej komponenty spolu s nahratím obrázku a nastavením jeho konštantných parametrov. Pomocou myši sa presunú na konkrétne miesto a pomocou troch predpripravených prepojovacích čiar sa nastavia väzby medzi jednotlivými komponentami, ktoré sú charakteristické pre tento diagram. Kliknutím sa zobrazia možnosti v jednotlivých entitách, kam umiestniť počiatočný a následne koncový bod dvoch týchto entít a v diagrame sa potom medzi nimi vykreslí.
Po kliknutí na obrázok v užívateľskom režime sa môžu vo vyskakovacom okne zobraziť všetky podrobné informácie v aktuálnom čase, spolu s možnosťou úpravy editovateľných parametrov, ktoré sa následne uložia do databázy. Môže mať v sebe zobrazené informácie o parametroch, ak sú mu definované a nastavené ako viditeľné.
História
Dôležitá súčasť aplikácie je zobrazovať korektné dáta pre každú entitu. Tieto informácie môžu byť zobrazené po presune kurzora na konkrétnu entitu vo vyskakovacom okne, alebo priamo v entite ako informačná tabuľka.
Aplikácia v sebe uchováva historické záznamy, ktoré využíva na zobrazenie konkrétnych entít v konkrétnom čase a so zachovanými údajmi. Zároveň komunikuje aj s treťou stranou systému, ktorého úlohou je zapisovať údaje do aplikácie a tým pravidelne aktualizovať komponentu s jej aktuálnymi hodnotami vo výrobnej linke, čím sa zároveň zapíše aj čas a iné hodnoty potrebné pri vykresľovaní entity do diagramu.
Užívateľovi je umožnené zistiť parametre komponentov v aktuálny čas, ktorý nastavuje pomocou posuvnej lišty v dolnej časti obrazovky. Počas presunu vidí aktuálny čas a pustením sa zobrazia dáta v danom čase. Užívateľ je schopný ísť aj do budúceho času, kde dáta uvidí v prípade, ak sú v databáze uložené.
Záver
Problematika zobrazovania interaktívnych grafických rozhraní je dosť komplexná, preto zložité procesy ako riadenie priemyselnej automatizácie, distribúcia, inžinierske schémy znázorňujúce procesný tok alebo kontrolné systémy táto aplikácia zatiaľ neumožňuje.
Jedným zo spôsobov, ako aplikáciu dostať na vyššiu úroveň je v ďalších verziách priniesť podporu aj pre dizajn inžinierskych schém, pridanie rozšírujúceho balíčka pre obrázky, podpora viacerých jazykov, moderný dizajn - tzv. Material Design, história a práca s dátami aj nad prepojovacími čiarami, pridanie pokročilých prvkov do ovládacieho panelu komponenty a možnosť exportu diagramu do rôznych formátov (jpg, png, pdf, …). Riešením prepojenia s technologickým prostredím bolo využitie architekúry REST a pomocou klientskych volaní využitie serverového API na spracovanie získaných dát a spätnú interakciu s klientom. Spolu s grafickým rozhraním sa spája aj editor tohto rozhrania, ktoré sa riešilo individuálnou podstránkou, ku ktorej je možné prístup pomocou hlavného menu. Editor obsahuje len možnosti pre tvorbu diagramov a ich manažment, bez časovej osi alebo iných funkciách dostupných pre bežného užívateľa.
Behom implementácie dochádzalo k neustálym chybám z dôvodu zložitosti aplikácie a jej optimalizácie. Bolo potrebné vybrať potrebné technológie, ktorých riešením bolo použitie viacerých základných programovacích jazykov, ktoré sú bez nutnosti externých rozširujúcich balíčkov, vďaka čomu ich nároky na inštaláciu ostali na nízkej úrovni a aplikácia je ľahko upraviteľná. Zdrojový kód je prehľadný a zdokumentovaný v anglickej verzii, takže by nasledujúci vývoj nemal priniesť komplikácie vedúce k nepochopeniu kódu z dôvodu jeho nečitateľnosti. Aplikácia však môže mať potenciál pri nasadení do automatizácie v malých a stredne veľkých firmách, ktoré potrebujú vyriešiť problém rýchleho a ľahko ovládaného postupu pre ovládanie priemyselných strojov a zároveň sledovať ich aktivitu počas celej výrobnej doby.