4.1 Simple Buttons and Displays on the Web
WebBuDi is an acronym for Web Buttons and Displays, is a simple JavaScript file with several declarative blocks that describe data points which the HMI is connected to and assemble a table in which all the data is presented. It provides a textual interaction with selected signals and is suitable for system developers and integrators or may serve as a fall-back mode HMI for non-standard situations.
WebBuDi is composed from several rows (a graphical components with pre-defined function and look) connected to a single item in the control system (specified by an alias or a cstring property). There are different rows according to the type they are changing (for boolean, numbers, dates, etc.). All rows are organized in sections (colored blocks which can have a heading). The sections are then organizes in several columns.
The configuration is done using JavaScript objects. See 4.1 for more details.
Example
2// Simple PID controller example
3
4// Optional - Add items first
5REX.WebBuDi.addItems([
6{alias: 'PID_MAN', cstring: 'pidcontrol_control.CNB_MAN:YCN', write: true}
7]);
8
9// Add WebBuDi section
10REX.WebBuDi.addSection({
11column: 1,
12title: 'User controls',
13rows: [
14{alias: 'PID_MAN', desc:'Controller mode', type: 'DW', label_false: 'AUT', label_true:'MAN'},
15{type:'ES'},
16{alias: 'SP_AW', cstring: 'pidcontrol_control.CNR_sp:ycn', desc:'Setpoint', type: 'AW'}
17]
18});
19
20// Show graph from TRND block
21REX.HMI.Graph.addSignal({cstring: 'pidcontrol_control.TRND_PIDU', labels: ['Process value','Manipulated variable','Setpoint']});
22
23// Set different target address
24// REX.HMI.setTargetUrl('ws://127.0.0.1:8008/rex');
25
26// Set refresh rate (Default: 500 ms)
27REX.HMI.setRefreshRate(100);
28
29// Change title of the page
30REX.HMI.setTitle('Simple PID controller');
31}
.WebBuDi : object
- .addSection(opt) => REX.HMI.WebBuDi
- .add() => REX.HMI.WebBuDi
- .addItems(items) => Array.<REX.WS.Item>
REX.WebBuDi.addSection(opt) => REX.HMI.WebBuDi
The addSection adds new rows / HMI components to the web page.
The section contains all components defined in rows array. It can have title shown in header. The whole section can be controlled via disable_by and hide_by item. Finally the section is placed to the column (index based).
The function calls can be chained or called via alias REX.WebBuDi.add().
Kind: static method of WebBuDi
Param |
Type |
Default |
Description |
|
|||
opt |
|
|
The main configuration object |
opt.rows |
Array.< RowOption> |
|
Definition of all HMI components / rows. See the list for more details |
[opt.title] |
String |
|
Title of the section shown in the header. |
[opt.column] |
number |
1 |
Index of the column (starts from 1). |
[opt.background _color] |
String |
|
Custom background color of the section. |
[opt.text_color] |
String |
|
Custom text color of the section header |
[opt.disable_by] |
String | Object |
|
If defined by ’alias’ or object {alias:"XXX", cstring:"XXX", reverse_meaning:false} the state of the component changes (enabled / disabled). |
[opt.hide_by] |
String | Object |
|
If defined by ’alias’ or object {alias:"XXX", cstring:"XXX", reverse_meaning:false} the visibility of the row changes. |
[opt.customDivID] |
String |
”content” |
The ID of the element where all the columns / sections will be appended. |
|
|||
|
|||
|
Example
2
3REX.WebBuDi.addSection({
4column: 1,
5title: 'Controls',
6rows: [
7// Digital write
8{alias: 'PID_MAN', desc:'Controller mode', type: 'DW', label_false: 'AUT', label_true: 'MAN'},
9// Analog write
10{alias: 'SP', desc:'Setpoint', cstring: 'pidcontrol_control.CNR_sp:ycn', type: 'AW'},
11{type: 'ES'}, // Empty space
12],
13hide_by:"",
14disable_by:""
15});
REX.WebBuDi.add() => REX.HMI.WebBuDi
Shortcut for REX.WebBudi.addSection function.
Kind: static method of WebBuDi
REX.WebBuDi.addItems(items) => Array.<REX.WS.Item>
Add several items at once. This is useful way how to define aliases and use them in various rows
Kind: static method of WebBuDi
Param |
Type |
Description |
|
||
items |
Array. <Object> |
Array of items to register. Shortcut for REX.HMI.addItems(). |
items.alias |
String |
|
items.cstring |
String |
|
items.write |
boolean |
Set true if item is writable |
|
||
|
||
|
Example
2{alias: 'PID_MAN', cstring: 'pidcontrol_control.CNB_MAN:YCN', write: true},
3{alias: 'SP_AW', cstring: 'pidcontrol_control.CNR_sp:ycn', write: true},
4{alias: 'HV', cstring: 'pidcontrol_control.PIDU:hv'}
5]);
[Back to top] [Up] [Next]