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.