doc/svghmi/intro.rst
changeset 3928 5c662d2e3f72
parent 3925 1d383b4c0a23
equal deleted inserted replaced
3922:ffc8da83fdc2 3928:5c662d2e3f72
       
     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.