Topic: Navigation in HMIWeb Displays

Contents
Create Navigation Buttons................................................................................................................... 3

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
 Navigation in HMIWeb Displays
Create Navigation Buttons

Create Navigation Buttons

Practice
Objective

The purpose of this lesson is to learn how to add navigation and show/hide buttons to your displays.
After completion of this LAB, you will be able to:
 Add and configure pushbuttons for navigation to other displays and add a pushbutton for
show/hide functionality.

Prerequisites

 An Experion PKS Server and HMIWeb Display Builder (to complete the lab exercises)
 A pre-built display and a word document on your PC

Introduction

HMIWeb Display Builder is one of the graphic building tools of Experion PKS.
The purpose of this lab is to:
 Add and configure buttons that call another display, call a third-party application (a word
doc.), create a hyperlink to access a website and add script for show/hide functionality.
This section provides standard drawing techniques as well as suggestions on naming and applying
color effects to the objects in your display.

TIP

Many of the drawing methods are similar to those used in other

Windows-based drawing and paint applications.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Navigation in HMIWeb Displays
Create Navigation Buttons

Procedure

 Step Action

1 Open HMIWeb Display Builder.

If you have performed the previous lab as per pre-defined course sequence then open
T_100_NAV display which you have built from Abstract folder, else open display
< T_100_NAV.htm> from C:\ProgramData\Honeywell\Experion PKS\Client\
DisplayDB
 Your display should look similar to the following illustration.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Navigation in HMIWeb Displays
Create Navigation Buttons

 Step Action

2
Select the pushbutton tool on the toolbar and draw a button in the upper right
portion of your display as shown in the following example.

Double-click the pushbutton to open the Properties window.

 Select the Details tab and replace the Button label with Debutanizer.doc (the
name of the third-party application to be called).
 Select the Colors tab and change the fill color to silver.
 Select the Lines tab and change the style to Outset.

 On the Font tab, modify the font to Arial, 8, Center, and Bold.

Close the Properties window when finished.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Navigation in HMIWeb Displays
Create Navigation Buttons

 Step Action

3 Right-click the pushbutton and open the script window.

 Select the onclick event from the event drop-down menu.

NOTE: Your pushbutton object may have a different name than the one being illustrated
below.

 Enter the following script in the Sub “onclick” event to invoke a word document.
Dim note
Set note = CreateObject("WScript.Shell")
note.Run "C:\student\Debutanizer.doc"

NOTE: To explain the syntax being used, the “shell” command executes another
application. The path to the document is provided next. Lastly, the window style is
defined (1 = application is displayed in a normalized window with focus).
 Close the script window.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Navigation in HMIWeb Displays
Create Navigation Buttons

 Step Action

4 Add another pushbutton with the name Product to navigate to a pre-built

Depropanizer graphic as shown in the following illustration.

5 Open the Properties window of the new pushbutton, and select the Details tab.
 Enter Product in the Label field for the pushbutton.
 Select Callup Page from the Action drop-down list.
 Enter Depropanizer.htm in the Page field.

Modify the line and font properties to match the previously configured buttons.
 Close the Properties window.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Navigation in HMIWeb Displays
Create Navigation Buttons

 Step Action

6 Creating a hyperlink:

 Select the hyperlink tool in the toolbar.

Create a hyperlink object in your display, as shown in the following illustration.

Replace the word “Text” with Honeywell Site.

Open the Properties window of the hyperlink and select the Details tab.
 Select the action as Callup URL from the drop-down menu.
 Enter the URL as: http://www.honeywell.com/
(Note: Honeywell is the default URL for the hyperlink tool)

 Select the Font tab and modify the font to size 8, bold/underline, and center.
 Close the Properties window for the hyperlink.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Navigation in HMIWeb Displays
Create Navigation Buttons

 Step Action

7 Your T_100_NAV display should resemble the one shown in the following illustration.

8 Additional navigation buttons will now be added to call related displays and show
process line continuity.
Your display, with the additional buttons configured, should be similar to the one shown
below.
 Add a total of 5 pushbuttons to your display, (2 on the bottom left for navigation to
other displays and 3 at the end of process lines). The displays to be called by the
pushbuttons are D_100 and E_100 as shown – enter the callup display names on
the Details tab of the appropriate pushbuttons. Put D_100.htm for D_100 button
and E_100.htm for E_100 button
 Save As your T_100_NAV display as T_100 in the Abstract folder.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Navigation in HMIWeb Displays
Create Navigation Buttons

 Step Action

9 Open D_100_TRD in HMIWeb Display Builder.

If you have performed the previous lab as per pre-defined course sequence then open
D_100_TRD display which you have built from Abstract folder, else open display
< D_100_TRD.htm> from C:\ProgramData\Honeywell\Experion PKS\Client\
DisplayDB
Add navigation buttons as shown below.
 Add a total of 4 pushbuttons to this display, (2 for navigation to other displays and
2 at the end of process lines). The displays to be called by the pushbuttons are
T_100, E_100 and the Depropanizer product line.

Save As your D_100_TRD display as D_100 in the Abstract folder.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Navigation in HMIWeb Displays
Create Navigation Buttons

 Step Action

10 In T_100 one additional pushbutton will be added to display. The button is to be labeled
Hide Lines. This pushbutton will work like a toggle and be scripted to show or hide the
instrument (dashed) lines.
 Add a pushbutton to the display, as shown, and modify the Details tab to show a
label of Hide Lines. Modify the Font tab to size 8, bold, and centered.
 The following is an example of T_100 with the Hide Lines button added.

When the Hide Lines button is clicked, if the instrument lines are visible, they will
become hidden; if the lines are currently hidden when the button is clicked, the
instrument lines will become visible.
 Right-click the Hide Lines button and add the following script. Be sure to first
select the onclick event from the event browser drop-down list. Use lower-case
text for the items in quotes to get an exact match.

 (In the above example, the pushbutton object has been renamed to
btnHideLines001. Your button name may be different).

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Navigation in HMIWeb Displays
Create Navigation Buttons

 Step Action

11 Note that in the script for the Hide Lines button, there is an object called linegroup that
is made visible or hidden. This is a renamed grouping of all the dashed instrument lines.
 Select all the instrument lines on the display (hold the SHIFT key while selecting
each dashed line), group the lines, and rename the group to LineGroup. (You
can select each line in your display as previously mentioned or sort the objects
alphabetically in Object Explorer. Then, using your CTRL key, select the line or
polyline that represents each dashed instrument line and create the linegroup.)

Use the “Send to back” button on the Arrange toolbar to send the
LineGroup behind the other display objects.
 Save your display.

12 Now, add the Hide Lines button with all above functionalities for D_100 and E_100
display. Similarly create LineGroup for dashed instrument lines.
Final E_100 display is already present in Abstract folder.
(Recall that the lines on D_100 were created with a background image. Therefore,
selecting the lines will be straightforward. However, the lines on E_100 were created
from scratch. Therefore, pay particular attention to the lines you select on your E_100
display.)

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Navigation in HMIWeb Displays
Create Navigation Buttons

 Step Action

13 Testing on Station:
Call your T_100 display in Station. The buttons you added should be similar to the
following illustration.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Navigation in HMIWeb Displays
Create Navigation Buttons

 Step Action

14 Click the Honeywell Site link.

 The Honeywell home page appears (the Connection Properties of your Station
must be set up for URL access.)

Note: Classrooms at the Phoenix Training Center do not have Internet access.

ATTENTION

For the Skytap Environment, you will not be able to see

above page as it has no Internet access.
1

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Navigation in HMIWeb Displays
Create Navigation Buttons

 Step Action

15 Click the Debutanizer.doc button.

 A word document opens.

16 Click the Product button in your T_100 display to call the Depropanizer graphic.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 Navigation in HMIWeb Displays
Create Navigation Buttons

 Step Action

17 Test the navigation buttons for process line continuity and test the Hide Lines
pushbuttons on T_100, D_100 and E_100.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary