Tato diplomová práce se zabývá tvorbou vzdálených a virtuálních laboratoří za použití internetové technologie HTML5. V práci je prezentován budoucí standard HTML5, programovací jazyk JavaScript, vektorový grafický formát SVG, řídicí systém REX a tzv. webové sokety. Pomocí těchto nástrojů byly v rámci této práce vyvinuty komponenty, z nichž lze sestavit množství vzdálených a virtuálních laboratoří. Stěžejní část práce je věnována popisu funkcí a možností jednotlivých komponent. Základní z nich je grafický objekt ChartPanel, který slouží k vykreslování obecných (třída AxesPanel) i časových (třída Trend) grafů. Dalšími vyvinutými grafickými objekty jsou Slider (posuvník), BarGraf (sloupcový graf) a Display (displej). Pro praktickou ukázku výše zmíněných grafických objektů byly vytvořeny dvě virtuální laboratoře. První z nich demonstruje možnosti nastavení PID regulátoru s momentovým autotunerem a druhá se zabývá tzv. Smithovým prediktorem. Vyvinuté komponenty jsou dostupné v knihovnách vizualizačních nástrojů REX.UI a REX.UI.CHARTS.
Annotation in English
This master thesis concerns a creation of remote and virtual laboratories using HTML5 web technology. There are presented several computing technologies such as future standard HTML5, JavaScript programming language, SVG vector graphics format, REX control system and websockets. The new user interface components have been developed using these tools. A variety of remote and virtual laboratories can be built from these components. The main part of this work is dedicated to the description of functions and options of these components. The most complex component of the implemented graphical objects is the ChartPanel, which contains classes for drawing general graphs (AxesPanel) and time graphs (Trend). Other graphical objects developed in this work are Slider BarGraph and Display. These objects are used in the final part of this thesis in order to create two virtual laboratories. The first laboratory demonstrates options of the PID controller with torque autotuner. The second laboratory deals with Smith predictor. Developed components are included into REX.UI and REX.UI.CHARTS visualization libraries.
Tato diplomová práce se zabývá tvorbou vzdálených a virtuálních laboratoří za použití internetové technologie HTML5. V práci je prezentován budoucí standard HTML5, programovací jazyk JavaScript, vektorový grafický formát SVG, řídicí systém REX a tzv. webové sokety. Pomocí těchto nástrojů byly v rámci této práce vyvinuty komponenty, z nichž lze sestavit množství vzdálených a virtuálních laboratoří. Stěžejní část práce je věnována popisu funkcí a možností jednotlivých komponent. Základní z nich je grafický objekt ChartPanel, který slouží k vykreslování obecných (třída AxesPanel) i časových (třída Trend) grafů. Dalšími vyvinutými grafickými objekty jsou Slider (posuvník), BarGraf (sloupcový graf) a Display (displej). Pro praktickou ukázku výše zmíněných grafických objektů byly vytvořeny dvě virtuální laboratoře. První z nich demonstruje možnosti nastavení PID regulátoru s momentovým autotunerem a druhá se zabývá tzv. Smithovým prediktorem. Vyvinuté komponenty jsou dostupné v knihovnách vizualizačních nástrojů REX.UI a REX.UI.CHARTS.
Annotation in English
This master thesis concerns a creation of remote and virtual laboratories using HTML5 web technology. There are presented several computing technologies such as future standard HTML5, JavaScript programming language, SVG vector graphics format, REX control system and websockets. The new user interface components have been developed using these tools. A variety of remote and virtual laboratories can be built from these components. The main part of this work is dedicated to the description of functions and options of these components. The most complex component of the implemented graphical objects is the ChartPanel, which contains classes for drawing general graphs (AxesPanel) and time graphs (Trend). Other graphical objects developed in this work are Slider BarGraph and Display. These objects are used in the final part of this thesis in order to create two virtual laboratories. The first laboratory demonstrates options of the PID controller with torque autotuner. The second laboratory deals with Smith predictor. Developed components are included into REX.UI and REX.UI.CHARTS visualization libraries.
Seznamte se s novou internetovou technologií HTML 5 [1], vektorovou grafikou SVG [2] a programovacím jazykem JavaScript [3].
Seznamte se s řídicím systémem REX [4] a jeho komunikačním rozhraním na bázi tzv. webových soketů (web sockets) [5].
Navrhněte vhodnou architekturu aplikací pro realizaci úloh vzdálené a virtuální laboratoře založené na uvedených technologiích.
Využijte navrženou architekturu k implementaci řady vhodných úloh demonstrujících pokročilé řídicí algoritmy a struktury, úlohy pro řízení pohybu, a dalších.
Research Plan
Seznamte se s novou internetovou technologií HTML 5 [1], vektorovou grafikou SVG [2] a programovacím jazykem JavaScript [3].
Seznamte se s řídicím systémem REX [4] a jeho komunikačním rozhraním na bázi tzv. webových soketů (web sockets) [5].
Navrhněte vhodnou architekturu aplikací pro realizaci úloh vzdálené a virtuální laboratoře založené na uvedených technologiích.
Využijte navrženou architekturu k implementaci řady vhodných úloh demonstrujících pokročilé řídicí algoritmy a struktury, úlohy pro řízení pohybu, a dalších.
Recommended resources
[1] W3C: Specifikace HTML 5 dostupná na:\\ http://www.w3.org/TR/html5\\
[2] W3Schools: SVG tutorial:\\ http://www.w3schools.com/svg/default.asp\\
[3] W3Schools: JavaScript tutorial:\\ http://www.w3schools.com/js/default.asp\\
[4] REX Controls: Funkční bloky system REX, Referenční příručka.\\ Plzeň, 2012.\\
[5] Web Socket: http://www.websocket.org
Recommended resources
[1] W3C: Specifikace HTML 5 dostupná na:\\ http://www.w3.org/TR/html5\\
[2] W3Schools: SVG tutorial:\\ http://www.w3schools.com/svg/default.asp\\
[3] W3Schools: JavaScript tutorial:\\ http://www.w3schools.com/js/default.asp\\
[4] REX Controls: Funkční bloky system REX, Referenční příručka.\\ Plzeň, 2012.\\
[5] Web Socket: http://www.websocket.org
