Vue.js Graphical View components

Vue.js additional components for Scada-LTS Graphical Views

Graphical View is a page where user can define the custom "panels" that can represent some real-life scenarios. Adding "Simple Points Components" user is able to monitor specific point values. Most of the components could be added using "select-box" and just adding them to the View but there is a second type of the components. Those are the Vue.js components that could be attached to Graphical View using specific HTML tag ID. If Vue renderer find that specific tag it will try to embed related component into that place. To do that just add HTML component and type one of the following examples:

List of components:

Component	HTML Tag	Description
IsAlive	<div id="app-isalive" .../>	Check the connection to Scada-LTS server
IsAlive2 (WatchDog)	<div id="app-isalive2" .../>	Advanced condition check of Scada-LTS application
AutoManual CMP	<div id="app-cmp-X" .../>	Render state based on the provided configuration
AutoManual v2	<div id="app-cmp2-X" .../>	Improved CMP component
Modern Chart	<div id="chart-line-X" .../>	Renponsive AmChart JavaScript chart
Modern Range Chart	<div id="chart-range-X" .../>	Chart for browsing point values from specific time period
SVG Synoptic Panel, User manual	Not applicable	Creating views based on SVG graphic files

Example project

If you want to see how to configure specific component you can open the following Tutorial Scenario with ready to use examples.