1

Widget Types

     2

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

     3

     4

     5

HMI:Animate

     6

-----------

     7

     8

     9

HMI:Animaterotation

    10

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

    11

    12

    13

HMI:Assign

    14

----------

    15

    16

    17

HMI:Back

    18

--------

    19

    20

    21

HMI:Button

    22

----------

    23

    24

    25

HMI:Circularbar

    26

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

    27

    28

    29

HMI:Circularslider

    30

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

    31

    32

    33

HMI:Custom

    34

----------

    35

    36

    37

HMI:Customhtml

    38

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

    39

    40

    41

HMI:Display

    42

-----------

    43

    44

    45

HMI:Dropdown

    46

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

    47

    48

    49

HMI:Foreach

    50

-----------

    51

    52

    53

HMI:Image

    54

---------

    55

| It is an SVG Image element with label

    56

| ``HMI:Image:variable``

    57

| where ``variable`` contains the HTTP GET path to the image it should display.

    58

    59

    60

HMI:Input

    61

---------

    62

    63

    64

HMI:JsonTable

    65

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

    66

| It is a SVG (group) element with label

    67

| ``HMI:JsonTable:path@notify_var@range_var@position_var@visible_var@filter_var``

    68

| where:

    69

* ``path`` is HTTP POST path used to fetch JSON list response

    70

* ``range_var`` is a variable containing number of elements in a list

    71

* ``position_var`` is a variable containing index of the first element from the list shown in the table

    72

* ``visible_var`` is a variable with number of elements to be displayed in the table

    73

* ``filter_var`` is a variable containing the string which is posted in a request for JSON response, and it's used to filter the results

    74

| On render request, the widget does a POST request to the path. That request contains all the variables listed above.

    75

| Handler for the request should be written in such manner that it returns a JSON list containing defined number of elements.

    76

| Elements are objects with keys and values defined by a user.

    77

| SVG element itself contains another element group ``data``. All of the elements in that group are also groups, with name ``[i]`` where ``i`` goes from 0 to ``visible_var - 1``. Only the last one is actually created, others are just copy of it.

    78

| Elements from ``data`` can be placed in such manner to depict table rows.

    79

| Elements in ``[i]`` can emulate columns. They can be:

    80

* HMI:TextStyleList (label dictates the style and text content)

    81

* Image (label dictates path to the image)

    82

* Other SVG elements

    83

| Any of the above elements can have label with ``onClick[acknowledge]=var`` which means that on a click on such element, the same POST request is invoked, but among ``options`` posted now there is a variable ``onClick[acknowledge]`` and its value is ``var``

    84

| Beside ``data`` element, there can also be ``action_reset`` group element with similar behavior as stated above: click invokes POST with ``action_reset`` among ``options``.

    85

| If it's needed to display images in a table, and those images should be loaded dynamically, one may use GET handler to load and return appropriate image.

    86

    87

HMI:Jump

    88

--------

    89

    90

    91

HMI:Keypad

    92

----------

    93

    94

    95

HMI:List

    96

--------

    97

    98

    99

HMI:Listswitch

   100

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

   101

   102

   103

HMI:Meter

   104

---------

   105

   106

   107

HMI:Multistate

   108

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

   109

   110

   111

HMI:Page

   112

--------

   113

   114

   115

HMI:Pathslider

   116

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

   117

   118

   119

HMI:Scrollbar

   120

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

   121

   122

   123

HMI:Slider

   124

----------

   125

   126

   127

HMI:Switch

   128

----------

   129

   130

   131

HMI:Textlist

   132

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

   133

   134

   135

HMI:Textstylelist

   136

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

   137

   138

   139

HMI:Tooglebutton

   140

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

   141

   142

   143

HMI:Xygraph

   144

-----------

   145