Tato práce se zabývá problematikou vytváření operátorského rozhraní pro modely sestavené v řídicím systému REX, formou webové vizualizace. Cílem je vytvořit knihovnu grafických komponent, které lze snadno editovat a lze je jednoduše vkládat do webové stránky. Práce je zaměřena na technologie a postupy, využívané při tvorbě interaktivních grafických komponent. Jedná se zejména o technologie, jež jsou součástí specifikace HTML5. Porovnává již existující možnosti vytvoření vizualizace s vlastním řešením a vysvětluje základní principy. Analyzuje výhody a nevýhody vlastního řešení. Součástí je aplikace výsledků na teoretickém příkladu a testování funkčnosti v nejrozšířenějších webových prohlížečích.
Anotace v angličtině
This thesis deals with the issue of creating an operator interface in the form of a website, for models that have been compiled in REX control system. Task is to create a library of graphical components, that can be edited easily and can be inserted to web page simply. The work is focused on technologies and procedures that are used in the creation of graphical components. Especially discussed about technologies that are a part of HTML5 specification. The work compares existing possibiblities to create a visualization with own solution, explains basic principles and analyzes advantages and disadvanteges of a custom solution. Part of this work is an application of results to theoretical example and functional testing in the most common browsers.
Tato práce se zabývá problematikou vytváření operátorského rozhraní pro modely sestavené v řídicím systému REX, formou webové vizualizace. Cílem je vytvořit knihovnu grafických komponent, které lze snadno editovat a lze je jednoduše vkládat do webové stránky. Práce je zaměřena na technologie a postupy, využívané při tvorbě interaktivních grafických komponent. Jedná se zejména o technologie, jež jsou součástí specifikace HTML5. Porovnává již existující možnosti vytvoření vizualizace s vlastním řešením a vysvětluje základní principy. Analyzuje výhody a nevýhody vlastního řešení. Součástí je aplikace výsledků na teoretickém příkladu a testování funkčnosti v nejrozšířenějších webových prohlížečích.
Anotace v angličtině
This thesis deals with the issue of creating an operator interface in the form of a website, for models that have been compiled in REX control system. Task is to create a library of graphical components, that can be edited easily and can be inserted to web page simply. The work is focused on technologies and procedures that are used in the creation of graphical components. Especially discussed about technologies that are a part of HTML5 specification. The work compares existing possibiblities to create a visualization with own solution, explains basic principles and analyzes advantages and disadvanteges of a custom solution. Part of this work is an application of results to theoretical example and functional testing in the most common browsers.
Seznamte se s novým standardem HTML5 [1] pro tvorbu webových aplikací, se skriptovacím jazykem JavaScript [2], se škálovatelnou vektorovou grafikou SVG [3], s knihovnou jQuery [4] v jazyku JavaScript a s řídicím systémem REX [5].
Dále se seznamte s aktuálním stavem průběžně vyvíjených nástrojů pro vizualizaci a ovládání v HTML5 ve vývojovém týmu oddělení automatického řízení na katedře kybernetiky.
Navrhněte vhodnou sadu vizualizačních a ovládacích komponent pro typické uživatelské rozhraní k obecným řídicím systémům pro nejrozšířenější internetové prohlížeče (Google Chrome, Internet Explorer, Firefox, Opera).
Implementujte navržené komponenty a jejich funkci ověřte na vhodně zvolených příkladech.
Zásady pro vypracování
Seznamte se s novým standardem HTML5 [1] pro tvorbu webových aplikací, se skriptovacím jazykem JavaScript [2], se škálovatelnou vektorovou grafikou SVG [3], s knihovnou jQuery [4] v jazyku JavaScript a s řídicím systémem REX [5].
Dále se seznamte s aktuálním stavem průběžně vyvíjených nástrojů pro vizualizaci a ovládání v HTML5 ve vývojovém týmu oddělení automatického řízení na katedře kybernetiky.
Navrhněte vhodnou sadu vizualizačních a ovládacích komponent pro typické uživatelské rozhraní k obecným řídicím systémům pro nejrozšířenější internetové prohlížeče (Google Chrome, Internet Explorer, Firefox, Opera).
Implementujte navržené komponenty a jejich funkci ověřte na vhodně zvolených příkladech.
Seznam doporučené literatury
[1] HTML5 Working Draft, online: http://www.w3.org/TR/html5/\\
[2] JavaScript tutorial, online: http://www.w3schools.com/js/default.asp\\
[3] SVG tutorial, online: http://www.w3schools.com/svg/default.asp\\
[4] jQuery, online: http://jquery.com/\\
[5] REX Controls: Funkční bloky systému REX. Referenční příručka. 2013.
Seznam doporučené literatury
[1] HTML5 Working Draft, online: http://www.w3.org/TR/html5/\\
[2] JavaScript tutorial, online: http://www.w3schools.com/js/default.asp\\
[3] SVG tutorial, online: http://www.w3schools.com/svg/default.asp\\
[4] jQuery, online: http://jquery.com/\\
[5] REX Controls: Funkční bloky systému REX. Referenční příručka. 2013.