HMIWeb Reporting and Specialized Editing Functions

Use Experion PKS HMIWeb Display Builder

Step Action
Create Object on a Display

1 To create objects in a new Display:

Click the New Display icon.

A new display opens with the name Display1, Display2, etc. HMIWeb Display
Builder will give a default name to each new display.
You have a new display, Display1 open.

To Change the Display background color

Double click the blank area in the display. The Display Properties window
opens.
Select the Appearance tab.
Click the Color dropdown menu. Select the silver color as shown.

30 Copyright © 2017 Honeywell International Inc. 9/28/2018

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

2 Create Static objects

Create a Rectangle:
Click the rectangle button in the toolbar. The cursor shape will change to a “+”.
Click on the display window and drag the cursor diagonally over the display.
A dotted line will show the size of the rectangle.

Release the mouse button when the correct size is achieved.

(Example of drawing a square is shown below: To draw a square hold the <Shift> key
down while dragging the cursor).

9/28/2018 Copyright © 2018 Honeywell International Inc. 31

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

3 Configure a Name for your rectangle:

Right-click the rectangle.
Select Properties Pages.

32 Copyright © 2017 Honeywell International Inc. 9/28/2018

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

4 Enter the following details:

Under the General tab type the Name as rectBox.

ATTENTION

In the above illustration, the Style properties give the

size and position details of the object.
Style: Leave as <No Style>. Cascade Style Sheets,
which can be associated with a display and used to
control an object’s properties and characteristics, will
be covered in a later exercise.
Tabbing: Leave unchecked. If checked, the Tab
index field becomes enabled. You can then enter a tab
index number for each object in your display. This
index number creates a consistent tabbing pattern
when the tab key is used for navigation in the display.

9/28/2018 Copyright © 2018 Honeywell International Inc. 33

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

5 Click the Colors tab.

Click drop down menu
Select More Colors option

Change the RGB values to 212 as shown and then close the properties window.

ATTENTION

This background color is changed for better visibility

and consistency in graphical displays.

34 Copyright © 2017 Honeywell International Inc. 9/28/2018

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

6 The object is now named rectbox (as shown in the Object Explorer) and has a light
grey fill color.

7 Practice creating a Line:

Click on the Line icon on the toolbar.
Click and drag to mark the length and direction of the line as shown below.
Release the mouse button when the line has the correct length and direction.

9/28/2018 Copyright © 2018 Honeywell International Inc. 35

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

8 In the Object Explorer window:

Double click the name of the line (line001) to open its Properties window.
Change the line’s name to lineSlanted and then close the properties window.

ATTENTION

The Object Explorer provides an alternate method to

access the Properties Window of an object.
You can double-click the object or select the object
and right-click to call a context menu and gain access
to the Properties window.

TIP

To draw a straight line that is horizontal, vertical or at a

45 degree angle, hold down the <Shift> key while
dragging. This also applies when creating segments of
a polygon or polyline, which is shown next.

36 Copyright © 2017 Honeywell International Inc. 9/28/2018

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

9 Create a Polygon object in your display similar to the one shown here:

Click the (Polygon) button on the toolbar.

Click to mark each node 1-2-3, except for the last.
Double-click to mark the last node, which also closes the polygon as shown
below.
For example, to create the above example (a valve bottom), you could click points in the
following pattern 1 – 2 – 3 – 4.

1 3

4 2
The last click (number 4) is double-clicked, which ends the drawing segment,
completes the object and closes the polygon. A polygon can be used to build
valves and multi-segmented, irregularly-shaped, filled objects.

Hint: It helps to have your grid and snap-to-grid on when drawing the above object (to
maintain straight edges and consistent sizing or hold the shift key while drawing the
lines.)

9/28/2018 Copyright © 2018 Honeywell International Inc. 37

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

10 Select the Polygon object just drawn:

From the top toolbar select the drop-down arrow next to the Fill Color bucket.

Select the color Silver.

11 The Polygon is changed to silver Fill Color.

38 Copyright © 2017 Honeywell International Inc. 9/28/2018

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

12 Select the Line tool from the toolbar:

Draw a line attached to the polygon as shown below.

Again, if your grid and snap-to-grid is not set to on, hold the shift key down while drawing
the line to maintain straightness.

9/28/2018 Copyright © 2018 Honeywell International Inc. 39

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

13 There are several ways to draw your valve top. Read both methods prior to deciding
which drawing method is best for you (Read Steps 14 – 20).
Method 1: Select the Wedge tool from the Toolbar:
Drag your cursor to show a dotted line as shown below. When you release the
mouse button, a wedge will replace the dotted line.

With the Wedge selected, click the Duplicate icon in your tool bar.

The newly created wedge becomes selected; click the Flip Horizontal button on
the toolbar at the bottom of your display and then reposition the wedge as
shown (practice using your arrow keys to move the wedge into position).

ATTENTION

The Flip Horizontal button is used to give a mirror

image of an object.

40 Copyright © 2017 Honeywell International Inc. 9/28/2018

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

14 Group all parts of the Valve:

Select each piece while holding the <Shift> Key down.
Select the Group button from the toolbar at the bottom left of the display.

The grouped object is now shown in Object Explorer.

ATTENTION

Grouping provides a convenient way to move objects composed

of several parts to different locations within a display.

9/28/2018 Copyright © 2018 Honeywell International Inc. 41

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

15 Method 2: To make one object (in this case a valve top) from two overlapping objects:
Draw a rectangle (or square) on your display.
Draw a circle that overlaps the rectangle (put the circle on top of the rectangle)
as shown.

16 Holding your shift key down, select the rectangle first and then select the
circle (both objects are now selected).

ATTENTION

Notice that one object has white handles and one has
black handles. The first object selected (in this case
the square) exhibits white handles and is the reference
object; its properties will be retained after the
transformation takes place.

17 Using the Transformations toolbar at the bottom of the display builder:

Select the Intersection button.

42 Copyright © 2017 Honeywell International Inc. 9/28/2018

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

18 A new object is created that represents only the parts of the previous objects that were
overlapping. The new object will inherit any properties that were defined on the
reference object (in this case the rectangle, which was the first object selected).

19 Position your new valve top as shown below.

Group all parts of the valve:
Select each piece while holding the <Shift> key down.
Select the Group button from the toolbar at the bottom left of the display.

Note the grouped valve in Object Explorer.

9/28/2018 Copyright © 2018 Honeywell International Inc. 43

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

20 To compare Method 1 vs. Method 2:

Method 1 retains a line in the middle of the valve top; method 2 does not.

21 Using either of the above methods:

Create a top for your valve
Method 1 = Steps 13 and 14
Method 2 = Steps 15 thru 20

When finished creating and grouping your valve, resume with Step 22.

22 To modify one part of a grouped object, expand the group in Object Explorer, select the
component to be modified, right-click on it and select Property Pages.

Modify the fill color of your polygon from silver to grey.

44 Copyright © 2017 Honeywell International Inc. 9/28/2018

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

23 Add a Polyline in the display:

Polylines are similar to polygons except the last segment remains open. In other words,
using the same click sequence as shown previously for the polygon, if you double-click
number 4 as the final segment in your polyline, the left side would remain open (see the
below example). If you want to completely close a polyline, you must finish the final
double-click back at number 1.

Practice drawing a polyline:

Click the Polyline button on the toolbar.
Click once to mark each node except for the last.
Double-click to mark the last node and complete the object.

9/28/2018 Copyright © 2018 Honeywell International Inc. 45

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

24 Rotate an object:
Select the object to be rotated (select your valve).

Select the Rotator tool in the toolbar.

The object will now have green “circle” handles that can be used for rotation.

Rotate your valve 45 degrees.

46 Copyright © 2017 Honeywell International Inc. 9/28/2018

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

25 Create an oval object:

Select the Oval tool in the toolbar.

Click and drag your cursor diagonally over the display.
Release the mouse button when the dotted "outline” is the correct size and
shape for the object you are drawing.

9/28/2018 Copyright © 2018 Honeywell International Inc. 47

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

26 Create a textbox:

Select the Textbox button on the toolbar.

Drag the pointer diagonally over the display.
When you release the mouse button "Text" appears in the box and is
highlighted.
Replace the default word "Text" with 11_FC01.

If required, the size, color and several additional text characteristics can be modified by
accessing the Properties of the textbox object.

48 Copyright © 2017 Honeywell International Inc. 9/28/2018

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

27 To save your display

Select File on the menu bar, and select Save As
Browse to C\ProgramData\Honeywell\ExperionPKS\Client\Abstract folder on
your local hard disk
Save your display as Practice.htm

9/28/2018 Copyright © 2018 Honeywell International Inc. 49

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

28 To Preview your display:

Select File > Preview or Select Preview on the Toolbar at the top of
HMIWeb Display Builder. Your display will open in Preview mode.
Click Close when finished previewing your practice display.

50 Copyright © 2017 Honeywell International Inc. 9/28/2018

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
 HMIWeb Reporting and Specialized Editing Functions
Use Experion PKS HMIWeb Display Builder

Step Action

29 To test your display:

Open Station on your PC if it is not already open. The path is
Start > Honeywell Experion > Experion Station.

Click the Request Page button in the toolbar.

Enter your display name in the Page input field as shown above and press OK.

Alternately, you can click in the Command Zone, type the display name, and press
Enter.

Your Practice.htm display should resemble the one shown below.

9/28/2018 Copyright © 2018 Honeywell International Inc. 51

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary