doc/svghmi/library.rst
author Edouard Tisserant <edouard@beremiz.fr>
Thu, 08 Aug 2024 14:56:13 +0200
changeset 4004 19f8192b7d68
parent 3936 129202e555e0
permissions -rw-r--r--
SVGHMI: cosmetic
Pre-made Widget Library
=======================

Each widget type such as for example ``HMI:Meter`` can be applied to different
SVG elements to make a new widget in an HMI.

+------------------------------------+---------------------------------+
| Meter Widget Template (`HMI:Meter`)|      Voltmeter (`HMI:Meter`)    | 
+====================================+=================================+
| .. image:: svghmi_meter.svg        | .. image:: svghmi_voltmeter.svg |
+------------------------------------+---------------------------------+

It is possible to collect customized widgets into libraries in order to re-use
them in future HMI designs.


Widget selection and configuration
----------------------------------

SVGHMI comes with a UI dedicated to:

    * Select SVG widget from a library

        Button on top of library tree opens a directory selector dialog to select another widget library.
        When a widget is selected in library tree, a miniature of this widget is displayed in preview panel.

    * Set widget arguments

        Given values are checked against expected argument types and boundaries, and validity is shown as a 
        check mark on the right side of each argument.

    * Bind widget to HMI Tree variables

        Variables are dragged from HMI Tree to text fields in "Widget's variables" section, and then a 
        valid path corresponding to selected variable is assigned to this field.

        .. image:: svghmi_library_ui.svg

    * Place widget in HMI design

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

        .. image:: svghmi_dnd.svg


How to create a widget library
------------------------------

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

    Individual SVG file must only contain one widget, no nested widgets, and no pages.
    It can be created by simply copying an existing widget into an empty SVG file.
    Existing attributes are ignored when using widget from library and can be left as-is.