Topic: HMIWeb Solution Pack Overview

Contents
Solution Pack....................................................................................................................................... 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
 HMIWeb Solution Pack Overview
Solution Pack

Solution Pack
Practice
Objective– OPTIONAL LAB EXERCISE

The purpose of this lesson is to build a display using objects from the HMIWeb Solution Pack.

Prerequisites

 An Experion PKS Server with HMIWeb Display Builder (for lab practice and database
simulation.)
 All points must be downloaded and running.
 HMIWeb Solution Pack must be loaded on the Server.

Introduction

HMIWeb Solution Pack is the foundation for an integrated high performance and high functionality
solution for graphics development. The Solution Pack (SP) library contains over 2200 objects that
can be used with C200/C200E, C300, SCADA, Fieldbus, and TPS points. Custom properties
configured for each shape provide flexibility in creating effective displays.
Solution Pack is available in two versions. Basic Solution Pack and Advance Solution Pack.
Advanced Solution Pack is licensed option.
In this lab exercise you will create a display template as well as a process display. Both the
template display and process operating display are built with objects from the HMIWeb Solution
Pack.

Procedure

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

Preparation – Before you begin building HMIWeb Solution Pack displays

ü Step Action

1 Right Click HMIWeb Display Builder program and select Run As

Administrator.
 Using the Tools drop-down menu, select Options.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

2 On the General Tab, specify:

 Default Scripting Language - VBScript
 Number of Undo/Redo Levels - 100 (max)
 Recently used file list - 16 (max)
 Save AutoRecover time - 20 minutes

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

3 On the Grid and Rulers Tab, set:

 Horizontal and Vertical spacing = 4 pixels
 Grid color = light gray (Enter RGB value as 212,212,212 for light gray color)
 Enable Snap and Show grid
 Enable Show rulers

Recommendation: Set your grid and snap options “on”. It will make it easier to
attach lines to inserted shapes.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

4 On the Shapes tab:

 Click ADD button
 Enter path of shape library
C:\Program Files (x86)\Honeywell\Experion PKS\HMIWeb Solution Pack \
Shapes
 Select radio button “Content of shape file”
 Click OK

ATTENTION

If above path C:\Program Files (x86)\Honeywell\

Experion PKS\HMIWeb Solution Pack \Shapes is
already present at the Path for shape library then
ignore the step.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

5 Open the properties window of the display select Appearance tab:

 Set the size of the display template = 1000 x 700

Use the Browse button to associate a cascade style sheet with your display.
 Select sp.css located in the Abstract > CSS folder.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

6 Using the drop-down menu, select the “Background” style for your template
display.

The display will inherit the properties defined in the Background style of the
cascade style sheet.

 Close the properties window of the display when finished.

ATTENTION

You may need to select the Tools > Options menu

and modify your grid color to be slightly lighter than the
Background color specified in the CSS.

7 Open the Shape Library.

Select View > Shape Gallery.

If necessary, select the browse button to navigate to the

C:\Program Files (x86)\Honeywell\Experion PKS\HMIWeb Solution Pack\
Shapes

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

8 To insert shape:-
Select the Shapes folder:-
Shapes \Common \Display_Title
 All_DspTitle_lib_01:- This object will show your display’s title
 All_ButtonAckPage_01:- Used to acknowledge all alarms on the
display.
 All_ButtonNmEuHd_lib_01:- at runtime, will show the tagname or
engineering units or hide both.
 All_TitleBackground_lib_01:- (this shape places a gray background
behind the title and the other objects at the top of the display).
 All_NavTitle_lib_01:- This shape provides navigation capabilities and
launches graphics that are part of your display hierarchy
To insert trend button:-
Select the Shapes folder:-
Shapes \Common \Trending
 All_TrdSel_lib_h_01:- Used for trend support and specifies the current
trend group to which new traces can be added.
To insert the shape select Contents of Shape file

ATTENTION

If you are unable to perform above step, follow below

procedure:
1. Select browser on the left pane of shape
library.
2. Select the appropriate shape then right click
and select insert into display.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

Add this shape to the top right portion of your template display.

9 Script holders are used to centralize the script in one location, which improves
maintainability as well as performance. Similarly add two additional script holders
to your template display as shown below:
1. Common_GSH -- handles all mouse events and provides support for
navigation as well as support for shapes with multiple alarm icons.
2. Trend_Sup_GSH -- will show all points and parameters in the current
trend group. It contains a table which will show all points and parameters in
the current trend group.

Note: - This shape works closely with the All_TrdSel_lib_h_01.sha shape.

When the trend configuration table is shown, the increase/decrease buttons
of the All_TrdSel_lib_h_01.sha shape can be used to view other trend
groups.
(These General Script Holders are located in the Shapes \Common. Click on
Common folder to find above shapes.)

Note: At runtime, all script holders will be invisible.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

10 The final step in creating your template display is adding other shapes that will
be common to most of your displays.
Add the following alarm/navigation shape:
 All_Navigation_lib_h_ai_02 :- This shape will provide navigation
functionality and alarm indication based on assets

(This shape is located in the Shapes \Navigations folder.)

Add 5 as shown below.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

11 Save your template display in the following directory:

C:\Program Files (x86)\Honeywell\Experion PKS\client\HMIWeb Display
Builder\Templates
When saving your display, give your template an appropriate name (for example,
SP_Template).

ATTENTION

While saving your display as a template at location C:\

Program Files (x86)\Honeywell\Experion PKS\
client\HMIWeb Display Builder\Templates
you need to give full control to Template folder

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

12 Open HMIWeb Display Builder (Without Administrative Privilege)

Open a new display by selecting New > Display from Template…

 Select your template display from the dialog box and select OK.

13 The display should appear similar to the one shown below.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

14 Open the properties window for your “Display Title”.

On the Custom Properties tab, enter “Training Display” as shown below if it

not already present.

15 Open the properties window for your display navigation shape.

On the below to invoke the appropriate displays at runtime.

16 The template contains 5 navigation/alarm shapes. The process display will only
use 3. Therefore, delete two of the inserted navigation/alarm shapes.

17 On the Custom Properties tab of the three remaining navigation/alarm shapes

enter the values shown in the following step.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

18 First shape -- Second shape -- Third shape --

19 When finished, close the properties window of the alarm shape.

It’s good practice to periodically save your work.
 From your File drop-down menu, select Save As. Name your display
Training and save it in your abstract folder.
Your display should resemble the one shown below.

At runtime, these shapes will show all alarms in the defined tagname/asset area
and, when selected, will call the specified display.

20 Create a tank in your Training Display. Put a label on the tank using a standard
text object.
Enter text “V-102”.
(Make the label the same width as the vessel.)

21 Open the properties window of your tank.

 On the General tab select the style as “A_Vessels”.

22 Open the properties window of your tank label.

 On the General tab select the style as “A_Text”.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

23 Your tank and text object are now being goverened by the properties defined in
the Cascade Style Sheet that is associated with the display.

24 To add navigation shapes to the display, open the Shape Library.

 Select View > Shape Gallery.

If necessary, select the browse button to navigate to the HMIWeb

Solution Pack \Shapes folder.
 Select the Shapes folder; then select OK.

25 Expand the Shapes listing as shown below and select the Navigations folder.
 Right-click the navigation object All_Navigation_lib_r_ai_02, and insert 2
of the navigation shapes into your display.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

26 Position the shapes as shown in the following illustration.

27 Open the properties window of the left shape, and select the Custom
Properties tab. Enter the values shown below.

Open the properties window of the right shape, and select the Custom
Properties tab. Enter the values shown below.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

28 Note: The following inserted objects will be repositioned in a later step. For
now, just insert the objects into your display..
Insert the following horizontal valve into your display. The valve is located in the
CDA > OnOffValves_CDA folder.

 CDA_OnOffValve_isa_h_poai_01

29 Insert a right-facing pump located in the CDA > Pumps_CDA folder.

 CDA_Pump_isa_r_pai_01

30 Insert 2 controllers located in the CDA > Controllers_CDA folder.

 CDA_RegCntl_lib_h_psomai_01

31 Insert a horizontal control valve located in the CDA > Control Valves_CDA
folder.

 CDA_RegCntlValve_isa_h_oai_01

32 Insert a digital state indicator located in the CDA > DigStates_CDA folder.

 CDA_DigState_lib_h_pai_01

33 Reposition the inserted objects as shown in the illustration.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

34 Open the properties window of the control valve and enter the following values
on the Custom Properties tab:

35 Open the properties window of the upper controller object. On the Custom

Properties tab enter 11_TC10 in the tagname Value field.

36 On the Custom Properties tab of the lower controller enter the tagname
11_FC15.

37 On the Custom Properties tab of the pump enter the tagname 11_HS14A.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

38 Information only:-
The pump is made up of 3 main elements, a polygon (the foot), a circle (the
body) and a rectangle (the outlet). For each of these 3 pump objects a style is
defined based on the running state, which means you can specify the fillcolor
settings for each piece independently.

The colors for state 0, 1, 4, 5, 6 are defined in the CSS.

You can also specify the bad PV state for the shape. When the PV is in that
state, it is considered BAD, and a “B” will be shown in the shape.
Faceplate:- When the pump is left clicked, a faceplate will appear -- the
faceplate called is determined by the point detail display that has been
configured for that control module. If you specify a “-” no faceplate will be shown.
The solution pack allows you to specify an alternative faceplate file. This might
be needed if you have, for example, a CM with PIDA and DACA block and your
shape is showing the DACA block data. The faceplate file, by default, refers to
the PIDA, but by changing this custom property you can specify an alternative
faceplate file dedicated to the DACA block.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

39 Information Only:-
When selecting the trend option on the shortcut menu, station will invoke the first
trend group containing that point if this custom property is left empty. However,
if you specify a specific trend group number in the custom properties
(cp_custtrd), that trend will be invoked. The same applies for operating groups
When selecting the “Help” option on the Shortcut Menu, the file specified in the
custom property “cm_file” will be opened using Explorer, and depending on the
file extension, will open the associated application. When no file is specified, the
menu item will be grayed out (as shown in the example).
The custom property “cm_label” specifies the text that will appear in the Shortcut
Menu (e.g. Help).
Context menu:- “ContextMenuFile” is used to invoke the correct Shortcut
Menu (a.k.a. context menu). The HMIWeb Solution Pack contains Shortcut
Menus with predefined functions as shown.
If you specify a “-” no shortcut menu will appear.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

40 Open the properties of the On/Off Valve and enter the tagname 11_HS14B.

Information Only:-
The tagname configuration for a control valve is identical to the discrete valve
and pump. If this shape is used for another FB and parameter (other than
PIDA.OP), it can easily be modified.
You can also specify if the control valve should change color depending on the
OP value.
Reminder: Cascade Style Sheets can be used to configure the control valve’s
behavior.

41 Open the properties window of the digital state indicator and enter the
tagname 11_HS14B in the Custom Properties Value field.

42 Add lines on the left side of your tank as shown below. (The lines behind the
pump and valve are one polyline, which is sent to the background.)

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

43 Add lines between the different shapes on the right side of your tank as shown.

Note: Use polylines when possible.

44 Select the line going from the tank to the controllers and control valve along with
the line going from the on/off valve to the digital state indicator (hold your Shift
key down to select both lines). Open the properties window of the lines.
 On the General tab, select the style “A_InstrumentLines”. The lines will
change from solid to dashed as defined in the cascade style sheet.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

45 Select the process lines at the left and bottom of the tank. Open the properties
window of the lines.
 On the General tab, select the style “A_ProcessLinesWidth2”. The lines
will change based on the cascade style sheet definition.

46 Add one additional digital state indicator shape at the top of the tank.
 CDA_DigState_lib_h_pai_08
Modify the Custom Properties:
Enter devctla.pv in cp_pv, OK in cp_TextForPV0 and HI in cp_TextForPV1.

This indicator will show the tagname, PV, alarm status as well as an indication
for the measurement type (in this case a “P”). Also defined is the text to be
displayed for PV state0 and state1. Close the properties window, when finished.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

47 Using the Tools drop-down menu, select Display Performance Analysis to

verify that your display is within the performance guidelines. View summary and
Details for this display.

48 If you have performed the previous lab as per pre-defined course sequence,
then skip this step else copy T_100 and D_100 from
C:\ProgramData\Honeywell\Experion PKS\Client\DisplayDB to C:\
ProgramData\Honeywell\Experion PKS\Client\Abstract

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Solution Pack Overview
Solution Pack

ü Step Action

49 Save your display and call it up in Station to test the functionality of the shapes.

ATTENTION

Verify that sp_gsh.vbs and sp_gsh.js files are in C:\

ProgramData\Honeywell\Experion PKS\Client\
Abstract\Scripts Folder.
Make Sure that Station is logged in mngr.

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

Honeywell Academy written permission required to distribute
Honeywell Confidential and Proprietary