|
1 Introduction to SVGHMI |
|
2 ====================== |
|
3 |
|
4 +-----------------------------+-------------------------------------------------------------------------------+ |
|
5 | | SVGHMI is a SVG based HMI toolkit. With it, PLC programmers and HMI designers | |
|
6 | .. image:: svhgmi_pitch.svg | can efficiently produce Scalable Web Based HMIs. <br /> <br /> HMI design | |
|
7 | | happens in `Inkscape <https://inkscape.org>`_. | |
|
8 | | Designer freely draws HMI pages and widgets following WYSIWYG principle. | |
|
9 +-----------------------------+-------------------------------------------------------------------------------+ |
|
10 |
|
11 WYSIWYG HMI design with Inkscape |
|
12 -------------------------------- |
|
13 |
|
14 "**What You See Is What You Get**, is a system in which editing software |
|
15 allows content to be edited in a form that resembles its appearance when |
|
16 printed or displayed as a finished product." |
|
17 |
|
18 -- Oxford English Dictionary |
|
19 |
|
20 Widgets can be selected from customizable widget library and drag'n'dropped |
|
21 directly in Inkscape. |
|
22 |
|
23 .. image:: svghmi_dnd.svg |
|
24 |
|
25 SVGHMI's Page and Widget roles are assigned to SVG elements by changing objects |
|
26 name and description in Inkscape. |
|
27 |
|
28 .. image:: svhgmi_inkscape.svg |
|
29 |
|
30 HMI tree scale together with PLC instance tree |
|
31 ---------------------------------------------- |
|
32 |
|
33 In SVGHMI, **scalability** applies to both graphics and data. Once HMI and PLC |
|
34 are associated in a first version of a machine, it is easy to extend both of |
|
35 them simultaneously. In most cases DRY principle applies. PLC code or SVG |
|
36 elements can be re-used and extended. |
|
37 |
|
38 PLC data exposed to HMI is represented in an "HMI Tree" deduced from PLC |
|
39 program. More precisely, HMI Tree is a simplified subset of POU instances tree. |
|
40 PLC programmer selects variables to be exposed by assigning them a derived |
|
41 HMI_* type. For example HMI_REAL is used instead of REAL to expose a floating |
|
42 point variable. |
|
43 |
|
44 .. image:: svghmi_trees.svg |
|
45 |
|
46 In order to reduce HMI Tree complexity, structure of POU instance tree is not |
|
47 preserved by default. Only POUs having a single HMI_NODE variable defined |
|
48 appear in HMI Tree. This allows to expose variables that are spread in a |
|
49 complex hierarchy of POUs in a single HMI Tree node. |
|
50 |
|
51 .. image:: svghmi_types.svg |
|
52 |
|
53 Re-usable widgets and pages |
|
54 --------------------------- |
|
55 |
|
56 HMI elements are SVG elements whose labels start with ``HMI:``. They can be |
|
57 widgets or pages, and can point to locations in HMI tree with a path starting |
|
58 with a ``/``, and with ``/``-separated hierarchical levels. |
|
59 For example, ``/THIS/IS/A/VALID/HMI_TREE/PATH``. |
|
60 |
|
61 ``HMI:Switch@/GREENLIGHT`` |
|
62 "Switch" type widget bound to a variable named GREENLIGHT at root of HMI tree |
|
63 |
|
64 Each ``HMI:Page`` has a unique name. ``HMI:Jump`` and ``HMI:Back`` widgets are |
|
65 used to switch to other pages. PLC can also trigger page change autonomously. |
|
66 HMI must have at least one SVG element labelled ``HMI:Page:Home``. ``Home`` is |
|
67 a special page name: it will make this page the landing page when HMI is loaded. |
|
68 |
|
69 .. image:: svhgmi_pages.svg |
|
70 |
|
71 ``HMI:Page:Home`` |
|
72 Mandatory "Home" page declaration |
|
73 |
|
74 ``HMI:Jump:Home`` |
|
75 Change current page to "Home" page when clicked |
|
76 |
|
77 ``HMI:Back`` |
|
78 Change current page back to previous page when clicked |
|
79 |
|
80 Pages and groups of widgets can be dynamically re-based to another compatible |
|
81 HMI Tree location. They can then be be re-used as HMI components, paired with |
|
82 corresponding POU instances on PLC side. |
|
83 |
|
84 Simple yet powerful widgets |
|
85 --------------------------- |
|
86 |
|
87 Widgets are meant to be as simple as possible. Still, they can become complex |
|
88 when implementing interactions that cannot be broken down into multiple |
|
89 independent widgets. |
|
90 |
|
91 +------------------------------------+---------------------------------+ |
|
92 | Meter Widget Template (`HMI:Meter`)| Voltmeter (`HMI:Meter`) | |
|
93 +====================================+=================================+ |
|
94 | .. image:: svghmi_meter.svg | .. image:: svghmi_voltmeter.svg | |
|
95 +------------------------------------+---------------------------------+ |
|
96 |
|
97 HMI and pages have their own local variables allowing interaction in between |
|
98 widgets bypassing HMI Tree. For example, position of `HMI:Scrollbar` can be |
|
99 directly connected to a position in `HMI:JSONTable` with a page local |
|
100 variable. |
|
101 |
|
102 How does it work ? |
|
103 ------------------ |
|
104 |
|
105 HMI's client and server code is generated during SVGHMI build, based on PLC |
|
106 code and HMI design. |
|
107 |
|
108 .. image:: svghmi_overview.svg |
|
109 |
|
110 SVGHMI build is part of Beremiz build, available in IDE and command line. |