author | Edouard Tisserant <edouard@beremiz.fr> |
Wed, 03 Jul 2024 11:44:01 +0200 | |
changeset 3981 | 74035ea6792c |
parent 3936 | 129202e555e0 |
permissions | -rw-r--r-- |
3936
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
1 |
Pre-made Widget Library |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
2 |
======================= |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
3 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
4 |
Each widget type such as for example ``HMI:Meter`` can be applied to different |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
5 |
SVG elements to make a new widget in an HMI. |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
6 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
7 |
+------------------------------------+---------------------------------+ |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
8 |
| Meter Widget Template (`HMI:Meter`)| Voltmeter (`HMI:Meter`) | |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
9 |
+====================================+=================================+ |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
10 |
| .. image:: svghmi_meter.svg | .. image:: svghmi_voltmeter.svg | |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
11 |
+------------------------------------+---------------------------------+ |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
12 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
13 |
It is possible to collect customized widgets into libraries in order to re-use |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
14 |
them in future HMI designs. |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
15 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
16 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
17 |
Widget selection and configuration |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
18 |
---------------------------------- |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
19 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
20 |
SVGHMI comes with a UI dedicated to: |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
21 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
22 |
* Select SVG widget from a library |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
23 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
24 |
Button on top of library tree opens a directory selector dialog to select another widget library. |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
25 |
When a widget is selected in library tree, a miniature of this widget is displayed in preview panel. |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
26 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
27 |
* Set widget arguments |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
28 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
29 |
Given values are checked against expected argument types and boundaries, and validity is shown as a |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
30 |
check mark on the right side of each argument. |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
31 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
32 |
* Bind widget to HMI Tree variables |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
33 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
34 |
Variables are dragged from HMI Tree to text fields in "Widget's variables" section, and then a |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
35 |
valid path corresponding to selected variable is assigned to this field. |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
36 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
37 |
.. image:: svghmi_library_ui.svg |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
38 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
39 |
* Place widget in HMI design |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
40 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
41 |
Once configured, widget is placed in HMI design by dragging widget preview in Inkscape directly. |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
42 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
43 |
.. image:: svghmi_dnd.svg |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
44 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
45 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
46 |
How to create a widget library |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
47 |
------------------------------ |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
48 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
49 |
A widget library is a directory containing SVG files organized into arbitrarily nested subdirectories. |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
50 |
|
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
51 |
Individual SVG file must only contain one widget, no nested widgets, and no pages. |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
52 |
It can be created by simply copying an existing widget into an empty SVG file. |
129202e555e0
More documentation. Work in progress.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents:
diff
changeset
|
53 |
Existing attributes are ignored when using widget from library and can be left as-is. |