Topic: Display templates in HMIWeb Display Builder

Contents
Configure Faceplate Behavior.............................................................................................................. 3

Create a Popup Display..................................................................................................................... 11

Create a Custom Faceplate............................................................................................................... 23

Create and configure dashboard display........................................................................................... 39

Create Pan and Zoom Display........................................................................................................... 57

4/24/2023 Copyright © 2023 Honeywell International Inc. 1

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 This page was intentionally left blank.

2 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Configure Faceplate Behavior

Configure Faceplate Behavior

Practice
Objective

After completion of this lab, you will be able to:

 Configure Auto Selection Functionality in Station
 Work with the different Auto Selection Behaviors in the Faceplate

Introduction

In this lab, you will learn the faceplate behavior. In the earlier releases of Experion, whenever a
faceplate was called up in Station, the appropriate parameters were automatically selected. This
functionality is now optional.

A user can enable or disable this functionality from server wide settings in Station.
By default, this option is disabled; when a faceplate is called up in Station, nothing is selected
on the faceplate.

4/24/2023 Copyright © 2023 Honeywell International Inc. 3

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Configure Faceplate Behavior

Procedure

 Step Action

Auto Selection Behaviors

1 If you have performed the previous lab as per pre-defined course sequence then skip
this step else, open display < D_100_MENU.htm > from C:\ProgramData\Honeywell\
Experion PKS\Client\DisplayDB and save it as <D_100_MENU.htm> to C:\
ProgramData\Honeywell\Experion PKS\Client\Abstract folder

2 Open the Station window if not already opened.

3 Select Configure > System Hardware > Server Wide Settings.

4 In server-wide Station settings "Apply select timeout to faceplates" is enabled:

ATTENTION

Apply select timeout to faceplates option by default is enabled.

4 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Configure Faceplate Behavior

 Step Action

5 In the Faceplate Options section, “Automatically select most appropriate parameter”

is disabled by default. If selected, the system will automatically select the most
appropriate parameter on a faceplate based on the current mode. For example, if the
point’s mode is AUTO, the SP value will be selected. If the mode is MAN, the OP value
will be selected when the faceplate is called.

Faceplate Behaviors

6 To test the enhanced faceplate behavior, call up your D_100_MENU display in Station.
Click on the Pressure Control valve to call the faceplate.

7 The 11_PC15 faceplate is called. Station’s message zone should be empty and no
parameter field should be selected on the faceplate. This is the default behavior
because no faceplate options were selected in Server Wide Settings.

8 Select the SP on the faceplate. The message zone will display the server/station name,
the point ID, and the SP value.

9 Select the OP and the message zone will display information relating to the output.

10 Select the MODE and observe the data displayed in the message zone.

4/24/2023 Copyright © 2023 Honeywell International Inc. 5

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Configure Faceplate Behavior

 Step Action

11 Click on the display background to give focus to the D_100_MENU display; notice that
the faceplate gets de-selected as shown below.

12 Click on the Pressure Control valve again. This will transfer focus back to the
faceplate.

13 Click on the Heavy Feed valve. This will invoke the faceplate for 11_PC16.

6 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Configure Faceplate Behavior

 Step Action

14 Notice that the 11_PC16 faceplate is now in focus and 11_PC15 is de-selected.

Nothing is selected on the faceplates, and the message zone is empty.

4/24/2023 Copyright © 2023 Honeywell International Inc. 7

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Configure Faceplate Behavior

 Step Action

15 Go to Station’s Server Wide Settings (Configure > System Hardware > Server Wide
Settings) and enable the option “Automatically select most appropriate parameter”.

ATTENTION

Make sure the access level is MNGR to enable the option.

16 Recall your D_100_MENU display in Station.

8 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Configure Faceplate Behavior

 Step Action

17 Click on the Pressure control valve to call up the 11_PC15 faceplate. Depending on
the mode of the point (MAN or AUTO) the SP or OP value will be selected, and the
message zone displays that value.

4/24/2023 Copyright © 2023 Honeywell International Inc. 9

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Configure Faceplate Behavior

18 Repeat steps 14 to 16 to observe the other Server Wide Settings for faceplate.

19 If “Show values of intermediate tick If “Enable Preferred SP” is checked, the

marks” is checked, the faceplate shows faceplate shows a filled arrow for the
intermediate values on the faceplate current SP and a hollow arrow for the
based on the point’s range. preferred SP value. (Right-click the SP
value on the faceplate - use the shortcut
menu to set the Preferred SP option.)

10 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Popup Display

Create a Popup Display

Practice
Objective

The purpose of this lesson is to demonstrate how to build and use a Popup display.
After completion of this lab, you will be able to:
 Create a Popup for the condenser fan operation
 Call the Popup from a pushbutton on your D_100_MENU display.

Prerequisites

An Experion PKS Server and HMIWeb Display Builder.

All previous labs must be completed and the D_100_ MENU graphic must be operational.

Introduction

HMIWeb Display Builder is one of the Experion PKS graphic building tools.
The purpose of this lab is to:
 Create a Popup display.
 Call the Popup from your D_100_ MENU graphic

TIP

A Popup is a child display that is used to keep the main display less
cluttered. When called, it does not replace the main display but is called
in addition to the main/parent display.

4/24/2023 Copyright © 2023 Honeywell International Inc. 11

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Popup Display

Procedure

Create a Popup Display

 Step Action

1 Open your D_100_ MENU display in HMIWeb Display Builder.

2 Click the New Display arrow and select Popup.

ATTENTION

The default size of a Popup is 300 x 300 as shown by

the dotted outline on your new Popup display.

User cannot change the display's type after creating it.

So, for proper functioning of a particular shape or
display, ensure that you choose the correct file type
before starting to configure your shape or display.

12 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Popup Display

 Step Action

3 Double-click the display to open the Properties window.

Select the Appearance tab and modify the following:
Color: Silver
Width: 200
Height: 200
Click close.

4 Select the combobox button on the toolbar and drag your cursor on the display to a
comfortable size within the outlined Popup area.

4/24/2023 Copyright © 2023 Honeywell International Inc. 13

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Popup Display

 Step Action

5 Double-click the combobox to open the Properties window.

 On the General tab, modify the width and height as shown:

6 Select the Data tab and enter the following:

Type of database link: Point/Parameter
Point: 11_HS14a
Parameter: devctla.op
Select the Data entry allowed checkbox.

14 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Popup Display

 Step Action

7 Click the Details tab.

Select State descriptor from the Display as list.

8 Click the Font tab and select Font size 8, Bold, and Center.

9 Change the fill color to silver.

Close the Properties window.

10 Select the textbox button from the toolbar and place a textbox above the combobox as
shown.

4/24/2023 Copyright © 2023 Honeywell International Inc. 15

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Popup Display

 Step Action

11 Replace the word “Text” with 11_HS14a and modify the following properties:
 Font size 8, Bold, and Center.
Move your combobox and text to the upper left of your popup display as shown.

12 Repeat the previous steps and create 7 additional comboboxes and textboxes.
(Hint: Copy…)
 Remember to modify the Data tabs of each combobox for the correct point. Your
finished Popup will be similar to the example shown.

Modify the textboxes to show the following tagnames:

Textbox 2 11_HS14b
Textbox 3 11_HS14c
Textbox 4 11_HS14d
Textbox 5 11_HS14e
Textbox 6 11_HS14f
Textbox 7 11_HS14g
Textbox 8 11_HS14h

16 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Popup Display

 Step Action

13 Select all the comboboxes and textboxes on the Popup display as shown in the below
figure and group them.

4/24/2023 Copyright © 2023 Honeywell International Inc. 17

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Popup Display

 Step Action

14 Save your Popup display as 11_hsfans.htm in the abstract folder:

15 On your D_100_MENU graphic,

 Right-click the pushbutton object labeled E-110.
 Select Property pages.

16 Select the Details tab, and enter the following:

Label: Fan Control

18 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Popup Display

 Step Action

17 Select the Font tab and verify the following:

 Font size 8, bold, and center.

18 Select the Behaviors tab and select Popup.

 When the Popup option is selected, a new “Popup” tab appears.

4/24/2023 Copyright © 2023 Honeywell International Inc. 19

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Popup Display

 Step Action

19 Select the Popup tab and enter the following:

File name: 11_hsfans.htm (Use the Browse button)
Initial position: Position on parent display
Top: 10
Left: 10

ATTENTION

The Position on the parent display selection will put the

popup 10 pixels from the top of the display and 10
pixels in from the left side of the display.
If you select Determine automatically, the top left of the
popup appears just to the bottom right of the object
that has called it (in this case, the Fan Control
pushbutton).
If you select the Set Position button, your cursor
changes to a crosshair “+” and you then click on the
display to set the coordinates for the top left of your
popup.

20 Close the Properties window.

20 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Popup Display

 Step Action

21 Save As your display D_100_MENU as D_100_POP in the Abstract folder.

 Your graphic should resemble the following example.

22 Call your D_100_POP display in Station.

4/24/2023 Copyright © 2023 Honeywell International Inc. 21

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Popup Display

 Step Action

23 Click the Fan Control button to call the Popup window.

24 Select the 11_HS14a combobox drop-down arrow and select START.

Select the 11_HS14b combobox drop-down arrow and select START.
 The fans will change color from silver to gray.
Select the 11_HS14c combobox drop-down arrow and select STOP.
Test the combobox controls to Start and Stop each fan.
NOTE: You may have to change the security level to Mngr before operating the fans.

22 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

Create a Custom Faceplate

Practice
Objective

The purpose of this lesson is to demonstrate how to build and use a faceplate display.
After completion of this lab, you will be able to:
 Create a faceplate display.
 Call the faceplate from graphic.

Prerequisites

An Experion PKS server and HMIWeb Display Builder (needed to complete lab exercises).
All previous labs must be completed.

Introduction

HMIWeb Display Builder is one of the Experion PKS graphic building tools.
The purpose of this lab is to:
 Create a faceplate display.
 Call the faceplate from graphic

TIP

You can also convert a normal display to a faceplate

using the Convert to faceplate option in HMIWeb
Display Builder. With this option, the normal display
size will not change, only a new Faceplate tab gets
added to the Display Properties. This allows you to
configure faceplate properties for that display and call
up that display in Station as a faceplate.

4/24/2023 Copyright © 2023 Honeywell International Inc. 23

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

Create a faceplate display using a template

 Step Action

1 Open HMIWeb Display Builder if not already opened.

There are two ways to create Faceplates. One way is to you build a completely. New
Faceplate Display from a template. This template is available with HMIWeb Display
Builder. The second method is to migrate an existing Display and convert it to a
Faceplate Display format.

2 A custom faceplate similar to the one shown below will now be created.

3 Select File > New > Display from Template…

24 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

4 Select Faceplate Display from the display template dialog box.

Click OK to close the template window.

4/24/2023 Copyright © 2023 Honeywell International Inc. 25

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

5 Double click on the display to open the Display Properties window.

On the Appearance tab, observe the default display size. Also note that a new
Faceplate tab is added in the Display Properties.

ATTENTION

The default size of a faceplate display is 150 x 325 as

shown by the dotted outline on your new Faceplate
display.

6 On the Appearance tab modify the following:

Color: Silver

26 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

7 Click on the Custom Properties tab, and add a name CurrentPoint of type point as
shown:

Leave the remaining fields at the default settings.

Close the display properties window when finished.

4/24/2023 Copyright © 2023 Honeywell International Inc. 27

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

8 EXAMPLE: Arrange the alphanumerics, indicators, and textboxes in such a way that
your customized faceplate looks similar to the illustration shown below. (The following
steps will provide details for adding each object to your faceplate.)

28 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

9 Add three alphanumeric objects - one for the Point Name, Point Descriptor and
Engineering Units. Modify the following properties for the alphanumerics:
1. Alphanumeric for Point Name:
Data Tab: Type of database link: Point/Parameter
Point: <CurrentPoint> (from drop down menu)
Parameter: NAME
Details Tab: Display as: Text
Number of characters displayed: 8
Font Tab: Font size 8, Bold, and left

2. Alphanumeric for Point Description:

Data Tab: Type of database link: Point/Parameter
Point: <CurrentPoint> (from drop down menu)
Parameter: DESC
Details Tab: Display as: Text
Number of characters displayed: 40; check the Word wrap option
Font Tab: Font size 8, Bold, and left

3. Alphanumeric for Point Engineering Units:

Data Tab: Type of database link: Point/Parameter
Point: <CurrentPoint> (from drop down menu)
Parameter: EUDESC
Details Tab: Display as: Text
Number of characters displayed: 8
Font Tab: Font size 8, Bold, and left

4/24/2023 Copyright © 2023 Honeywell International Inc. 29

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

10 Add three Indicator objects - one to graphically show the SP, PV and OP. To begin,
make all indicators the same size as shown in the example in Step 8. Modify the
following properties for these objects:

1. Indicator for SP:

Data Tab: Type of database link: Point/Parameter
Point: <CurrentPoint> (from drop down menu)
Parameter: PIDA.SP
Details Tab: Type: Pointer
Colors Tab: No fill color; Green Level fill color; no line color

2. Indicator for PV:

Data Tab: Type of database link: Point/Parameter
Point: <CurrentPoint> (from drop down menu)
Parameter: PIDA.PV
Details Tab: Type: Bar
Colors Tab: No fill color; Cyan Level fill color; Black line color
Lines Tab: Width: 1 px Style: Inset

3. Indicator for OP:

Data Tab: Type of database link: Point/Parameter
Point: <CurrentPoint> (from drop down menu)
Parameter: PIDA.OP
Details Tab: Type: Bar
Colors Tab: No fill color; Gold Level fill color; black line color
Lines Tab: Width: 1 px Style: Inset

30 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

11 Add alphanumeric objects at the bottom of the faceplate for SP, PV, and OP values.
Modify the following properties for the alphanumerics:

1. Alphanumeric for SP value:

Data Tab: Type of database link: Point/Parameter
Point: <CurrentPoint> (from drop down menu)
Parameter: PIDA.SP
Select the check box Data entry allowed
Details Tab: Display as: Numeric
Number of decimals: 2
Font Tab: Font size 8, Bold, and right
Color Tab: No fill color; White line color; Black text color
Lines Tab: Width: 1 px Style: Inset

2. Alphanumeric for PV value:

Data Tab: Type of database link: Point/Parameter
Point: <CurrentPoint> (from drop down menu)
Parameter: PIDA.PV
Details Tab: Display as: Numeric
Number of decimals: 2
Font Tab: Font size 8, Bold, and right
Color Tab: No fill color; No line color; Black text color
Lines Tab: Width: 1 px Style: Inset

3. Alphanumeric for OP value:

Data Tab: Type of database link: Point/Parameter
Point: <CurrentPoint> (from drop down menu)
Parameter: PIDA.OP
Select the check box Data entry allowed
Details Tab: Display as: Numeric
Number of decimals: 2
Font Tab: Font size 8, Bold, and right
Color Tab: No fill color; White line color; Black text color
Lines Tab: Width: 1 px Style: Inset

4/24/2023 Copyright © 2023 Honeywell International Inc. 31

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

12 Add two combobox objects – one for Mode and one for Mode Attribute and modify the
following properties:
1. Combobox for MODE:
Data Tab: Type of database link: Point/Parameter
Point: <CurrentPoint> (from drop down menu)
Parameter: PIDA.MODE
Select the check box Data entry allowed
Details Tab: Display as: State descriptor
Font Tab: Font size 8, Bold, and left
Color Tab: No fill color; White line color; Black text color
Lines Tab: Width: 1 px Style: Inset

2. Combobox for Mode Attribute:

Data Tab: Type of database link: Point/Parameter
Point: <CurrentPoint> (from drop down menu)
Parameter: PIDA.modeattr
Select the check box Data entry allowed
Details Tab: Display as: State descriptor
Font Tab: Font size 8, Bold, and left
Color Tab: No fill color; White line color; Black text color
Lines Tab: Width: 1 px Style: Inset

13 Add additional text objects to your faceplate as shown in the below example.

32 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

14 Double-click on the faceplate display to open the properties window.

Click on the Faceplate tab.
Specify the Mode, Setpoint, and Output using the drop-down arrows as shown below.
Select the checkbox for Auto select on mode change.
(Combobox and alphanumeric names may differ from the one shown here.)

TIP

In this example, combobox001 and alpha009 are objects in your

display that will be used for the Mode and Output. Script will be
written for the setpoint.
Your object names may be different than the ones shown here.
Select the respective object name from your drop-down list.

15 Close the Properties window.

16 Right-click on the display, and select Edit Script.

4/24/2023 Copyright © 2023 Honeywell International Inc. 33

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

17 Verify that you are scripting to the Page object and select onrequestsetpointelement
from the event list.t
Enter the following script as shown:
Page.setpointElement = “alpha007”

Note: alpha007 is the alphanumeric object for the SP value.

(Similarly, you could write script for the other elements by selecting the respective event.)

ATTENTION

If you are unable to view Script Editor as VB Script, change the default
script language to VB script. Recall Lab Use Experion PKS HMIWeb
Display Builder.
i.e. Tools> Options> General> Change the Default Scripting
language to VB Script.
Note that quotes (“ ”) should be given correctly, else you will get script
error to open faceplate on station.

34 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

18 Save your faceplate display as RegCtl_Custom_FP.htm in the Abstract folder.

If it asks for replace, select Yes.

ATTENTION

This Custom Faceplate name “RegCtl_Custom_FP” has already been

added in the Training Center Database in Abstract as it is linked to
Group Detail Display name for Control Module 11_FC19 in Control
Builder.

19 Select the alphanumeric objects for the Point Name, Point Descriptor, Engineering
Units and text object for the Custom Faceplate as shown in below screen capture.
After this group these objects and save the faceplate display in the Abstract folder.

20 Call D_100_POP display in station and click on 11_FC19 for faceplate.

4/24/2023 Copyright © 2023 Honeywell International Inc. 35

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

21 To check the control module properties for 11_FC19, double-click on the custom
faceplate. This will call the detail display for the point.
Select the Chart tab as shown below.

22 Double-click in a blank area of the Chart monitoring window to open the properties of
the Control Module.

36 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

23 Click on Server Displays tab and note that the Group Detail Display name is the same
as that of your custom faceplate display.

24 Call D_100_POP display in Station.

4/24/2023 Copyright © 2023 Honeywell International Inc. 37

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create a Custom Faceplate

 Step Action

25 Click on valve 11_FC19 at the bottom left of your display to call your custom faceplate.

ATTENTION

This Custom Faceplate name “RegCtl_Custom_FP” has already been

entered in the Training Center Database as the Group Detail Display
name for Control Module 11_FC19.
Therefore, it is important that you name your display correctly so that
this customized faceplate is automatically invoked for 11_FC19.

26 Recall your D_100_POP display and call your custom faceplate.

Practice changing the OP value and mode and observe the behavior on the faceplate.

38 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

Create and configure dashboard display

Practice
Objective

The purpose of this lesson is to create and configure Dashboard displays. After completion of this
lab, you will be able to:
 Create a new dashboard display
 Create the displays containing system points
 Configure system alarm groups for dashboards
 Call up the dashboards in the System Status

Prerequisites

An Experion PKS Server with HMIWeb Display Builder.

Introduction

This lab exercise will enable you to:

 Create and configure a new dashboard display
By default, the System Overview Dashboard display is available in the System Status display.

4/24/2023 Copyright © 2023 Honeywell International Inc. 39

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

Overview Dashboard display

40 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

Procedure

Prerequisites for creating new Dashboard Display

ü Step Action

1 Open HMIWeb Display Builder, if it is not already open.

Start > Honeywell Experion Tools > HMIWeb Display Builder

From the menu, select Tools > Options.

2 In the Grid and Rulers tab, set the horizontal spacing to 40 and vertical
spacing to 35. Select "Snap object to grid" and "Show grid"

4/24/2023 Copyright © 2023 Honeywell International Inc. 41

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

ü Step Action

3 In the Alarm groups tab, select "Generate alarm group file when saving a
display" and change the Default alarm group naming convention to
“<display name>”

42 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

Create a new dashboard display

ü Step Action

1 Start HMIWeb Display Builder.

 On the New Display menu, click Display from Template

4/24/2023 Copyright © 2023 Honeywell International Inc. 43

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

ü Step Action

2 Select System Dashboard and click OK.

A new display, based on the System Dashboard template, appears. On the right-
hand side, tips to create Dashboard display are given. You can delete this tips
after the creating the display.

44 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

ü Step Action

3 Delete objects Example, Example grouping and Example network segment

label which are present by default on the display.
You can make use of this lines and texts to customize your dashboard
display.

4/24/2023 Copyright © 2023 Honeywell International Inc. 45

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

ü Step Action

4 On the View menu, click Point Browser.

In the point browser select System tab. And drag SCE_SIM,

E02ESVXX_SERVER and STATION35 from the System tab of the Point
Browser.

You can add objects to your dashboard display as required. For example,
system points from the System tab of the Point Browser, borders, and lines
depicting the network connecting the system points.

46 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

ü Step Action

5 Adjust the objects such that your display will be similar to the one shown below.

Select File > Save as.

 Save the file as Dashboard_1 in your abstract folder i.e C:\
ProgramData\Honeywell\Experion PKS\Client\Abstract

4/24/2023 Copyright © 2023 Honeywell International Inc. 47

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

To configure system alarm groups for dashboards

ü Step Action

1 In Configuration Studio, select the highest-level system node.

Under System Tasks, click Configure System Alarm Groups for this
system.

48 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

ü Step Action

2 Choose File > Import.

Browse the system alarm group files i.e Dashboard_1_files at the location
C:\ProgramData\Honeywell\Experion PKS\Client\Abstract that were created
when the dashboard display was saved.

4/24/2023 Copyright © 2023 Honeywell International Inc. 49

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

ü Step Action

3 Click on Select All and then click Import.

4 Imported system alarm groups appear as children of the System Alarm

Groups parent in the system alarm group tree.

Select Dashboard_1 System alarm group and click Load Entire Model
button on the toolbar.

ATTENTION

File gets downloaded with warning message. You can ignore the
warning and proceed further.

50 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

To call up the dashboards in the System Status display

ü Step Action

1 In Station, call up the System Status display by clicking

at the bottom station.
Click on the icon Show Dashboard Pane to open the Dashboard Pane.

4/24/2023 Copyright © 2023 Honeywell International Inc. 51

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

ü Step Action

2 Open the dashboard drop-down menu and select Dashboard_1 display

which we have created in earlier steps.

Here you can see the Dashboard_1 display,

52 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

ü Step Action

3  Alarm icons are shown for the points in alarm.

 Status icons (tick, cross, marginal, etc.) are shown for the points
that support it.

 Clicking on one of the shapes will filter the alarm lines below.

4/24/2023 Copyright © 2023 Honeywell International Inc. 53

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

ü Step Action

4 Configure a Dashboard for Station Based Security:

Go to Configure > System Hardware > Flex stations, select flex station
Station35

In General tab under the “Default System Status Dashboard”, list of all
dashboards appears.

User can set any dashboard display as a Default system status dashboard
from the list.

The default display will appear in the Dashboard when security level is
changed to mngr in the station.

ATTENTION

Uncheck “Enable content persistence on summary display”

option from Server Wide Settings> Summary Display Tab to
always view your default Dashboard display

54 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

ü Step Action

5 Configure a Dashboard for Operator Based Security:

Go to Configure > Operational Security > Operators, select operator

Team02.

In Advanced tab under the “Default System Status Dashboard”, list of all
dashboards appears.

User can set any dashboard display as a Default system status dashboard
from the list.

The default display will appear in the Dashboard whenever the user logs in.

4/24/2023 Copyright © 2023 Honeywell International Inc. 55

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create and configure dashboard display

This page was intentionally left blank.

56 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create Pan and Zoom Display

Create Pan and Zoom Display

Practice
Objective

The purpose of this lesson is to learn how to create Pan and Zoom display.
After completion of this lab, you will be able to:
 Create Pan and Zoom Display.
 Call Pan and Zoom display on Experion station.

Prerequisites

 An Experion PKS Server and HMIWeb Display Builder (to complete the lab exercises.)
 Pre-built displays

Introduction

o Pan and Zoom Display Provides

 Panning: Click and drag to navigate through the display

 Zooming: Roll the mouse wheel, to zoom the display

 Hyper zoom: Nesting of Pan and Zoom displays. This is done by invoking a
Pan and Zoom display at a pre-defined viewport and zoom level.

o User can interact with Pan and Zoom display via

 Experion Station

 HMIWeb Display Builder

4/24/2023 Copyright © 2023 Honeywell International Inc. 57

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create Pan and Zoom Display

Procedure

To create Pan and Zoom Display

ü Ste Action
p

1 Launch HMIWeb Display builder.

2 Go to file > New > Click Display from Template

58 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create Pan and Zoom Display

ü Ste Action
p

3 Select Pan and Zoom Display and Click Ok.

ATTENTION

Double click on display, then display properties will

open. Go to Appearance and check width and Height
of display. It should be 3200 * 2400.

4/24/2023 Copyright © 2023 Honeywell International Inc. 59

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create Pan and Zoom Display

ü Ste Action
p

4 Now, User needs to add multiple displays into Pan and Zoom display. Go to file, Click Open
and navigate to C:\ProgramData\Honeywell\Experion\Client\Abstract

Select the display that user wanted to add in Pan and Zoom display. In above example, we
select E_100.htm display.

60 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create Pan and Zoom Display

ü Ste Action
p

5 E_100 display will open in HMIWeb display builder. Select all and Copy that display and go
to Pan and Zoom display Paste it.

Similarly, select another display that user wants to add in Pan and Zoom display. In above
example, we consider four displays: E-100, Overview, Tankfarm, Navigation Menu (Nav).

6 Save Your display as PanAndZoom.htm.

4/24/2023 Copyright © 2023 Honeywell International Inc. 61

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Display templates in HMIWeb Display Builder
Create Pan and Zoom Display

ü Ste Action
p

7 Go to Experion station and call PanAndZoom.htm display.

Notice the Internet Explorer window on the left of display. You can maximize the window and
select the portion (highlighted in grey) to view the desired location on station.

8 Perform the following steps to check pan within a pan and zoom display:
1. Click the mouse button on any blank space within the display. The cursor changes
to a hand to indicate that the display can be moved.
2. Hold mouse button, drag the display until desired location is visible.
3. Release mouse button.

9 Perform the following steps to check zoom within a pan and zoom display:
1. Roll the mouse wheel provided to zoom within the current display
2. Roll the mouse upwards to increase the zoom.
3. Roll the mouse downwards to zoom out of the display.

10 In this way, Pan and Zoom display is tested on station.

62 Copyright © 2023 Honeywell International Inc. 4/24/2023

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary