1

Pre-made Widget Library

     2

=======================

     3

     4

Each widget type such as for example ``HMI:Meter`` can be applied to different

     5

SVG elements to make a new widget in an HMI.

     6

     7

+------------------------------------+---------------------------------+

     8

| Meter Widget Template (`HMI:Meter`)|      Voltmeter (`HMI:Meter`)    | 

     9

+====================================+=================================+

    10

| .. image:: svghmi_meter.svg        | .. image:: svghmi_voltmeter.svg |

    11

+------------------------------------+---------------------------------+

    12

    13

It is possible to collect customized widgets into libraries in order to re-use

    14

them in future HMI designs.

    15

    16

    17

Widget selection and configuration

    18

----------------------------------

    19

    20

SVGHMI comes with a UI dedicated to:

    21

    22

    * Select SVG widget from a library

    23

    24

        Button on top of library tree opens a directory selector dialog to select another widget library.

    25

        When a widget is selected in library tree, a miniature of this widget is displayed in preview panel.

    26

    27

    * Set widget arguments

    28

    29

        Given values are checked against expected argument types and boundaries, and validity is shown as a 

    30

        check mark on the right side of each argument.

    31

    32

    * Bind widget to HMI Tree variables

    33

    34

        Variables are dragged from HMI Tree to text fields in "Widget's variables" section, and then a 

    35

        valid path corresponding to selected variable is assigned to this field.

    36

    37

        .. image:: svghmi_library_ui.svg

    38

    39

    * Place widget in HMI design

    40

    41

        Once configured, widget is placed in HMI design by dragging widget preview in Inkscape directly.

    42

    43

        .. image:: svghmi_dnd.svg

    44

    45

    46

How to create a widget library

    47

------------------------------

    48

    49

    A widget library is a directory containing SVG files organized into arbitrarily nested subdirectories.

    50

    51

    Individual SVG file must only contain one widget, no nested widgets, and no pages.

    52

    It can be created by simply copying an existing widget into an empty SVG file.

    53

    Existing attributes are ignored when using widget from library and can be left as-is.