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

1REX.HMI.init = function(){ 
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

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

1// Simple HMI for PIDU_Simple_PID_Controller 
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

1REX.WebBuDi.addItems([ 
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]);