HMIWeb Display Builder Basics Lab

Topic: HMIWeb Display Builder Basics Lab
Contents
Use Experion PKS HMIWeb Display Builder.........................................................................................3
Generate Display Reports ...................................................................................................................49
9/21/2011 Copyright © 2011 Honeywell International Inc. 1

HPS Automation College written permission required to distribute
Honeywell Confidential and Proprietary
This page was intentionally left blank.
2 Copyright © 2011 Honeywell International Inc. 9/21/2011

HMIWeb Display Builder Basics Lab
Use Experion PKS HMIWeb Display Builder

Practice
Objective
After completion of this LAB you will be able to:

• Create a new display.
• Create basic display objects, such as rectangles, text and polygons.
Prerequisites
• An Experion PKS Server with HMIWeb Display Builder (needed for lab exercises.)
Introduction
HMIWeb Display Builder is a specialized drawing application that enables you to create and
modify displays for Station.
Custom displays allow you to present information in a graphical and user-friendly manner. Well-
designed custom displays make it easier for Operators to visualize complex processes and reduce
the probability of Operator errors.
During this lab, you will:
• Start HMIWeb Display Builder and practice navigation techniques.
• Create a new display.
• Create objects on a display.
• Customize/create a toolbar.
• Configure HMIWeb Display Builder options.
• Save and test your Practice.htm display in Station..

This beginning lab provides standard drawing techniques as well as suggestions on naming objects
in your display.
TIP
Many of the drawing methods are similar to those used

in other Windows-based drawing and paint
applications.

Procedure
9 Step Action
Launch HMIWeb Display Builder
1 To Launch HMIWeb Display Builder:

From the Start menu, click
Start > Programs > Honeywell Experion PKS > Server > HMIWeb Display Builder.
TIP
HMIWeb Display Builder can also be launched from

the Start Menu as shown below.
For Console Stations:

Start > Programs > Honeywell Experion PKS >
Console Station > HMIWeb Display Builder
For Flex Stations or Operator Stations:
Start > Programs > Honeywell Experion PKS >
Client Software > HMIWeb Display Builder

9 Step Action
2 The HMIWeb Display Builder application will launch with a blank display.
The Object Explorer and the Point Browser may or may not be visible based on how the
last person to use the application left it.

9 Step Action
Navigate HMIWeb Display Builder
3 HMIWeb Display Builder’s layout is shown below.
B
A
A MENU BARS
B TOOLBARS
C DISPLAY / DRAWING AREA
D OBJECT EXPLORER
ATTENTION
Additional details are provided on the following pages.

9 Step Action
4 B J Understanding TOOLBARS.
The most frequently used tools on the HMIWeb Display Toolbar (which appears just
below the menu bar) are detailed below.
No. Icon Name Description

1. New Display Opens a new display
2. Rectangle Creates a Rectangle / Square
3. Rounded Rectangle Creates a Rounded Rectangle /

Rounded Square
4. Oval Creates an Oval / Circle
5. Line Creates a Line
6. Polyline Creates an open multi-segmented

line
7. Polygon Creates a closed multi-
segmented line object
8. Bezier Curve Creates a smooth curved line
9. Arc Creates an Arc
10. Wedge Creates a Wedge (Quarter

segment of an oval / filled arc)
11. Textbox Creates a text object
12. Hyperlink Creates navigation to an Internet

site
13. Alphanumeric Used to show values in displays
(with various formats)
14. Checkbox Used to indicate selection / de-
selection of an option
15. Pushbutton Creates a button which, on click,
will perform a certain task
16. Indicator Used to show levels relating to
changing values

9 Step Action
5 B J Understanding TOOLBARS continued…

1. Combobox Creates a box from which a user
can make a selection from a list in
an interactive display
2. Trend Creates a trend showing values
that change with time
3. Basic Trend Creates a simple trend, which has
fewer operator controls than a
trend
4. ActiveX Document Inserts a link to an ActiveX
document
5. Picture Inserts a Picture into the display
6. Shape Inserts a Shape Sequence /

Dynamic Shape
7. ActiveX Control Inserts a link to an ActiveX
Control
8. Alarm Table Creates a specialized table that
lists Alarms
9. Event Table Creates a specialized table that
lists Events
10. Alarm Icon Inserts an Alarm icon into the
display
11. Table Inserts a Table that lists data in a
tabular format

9 Step Action

Details of the Toolbar that appears at the bottom of the display.

1. Bring to Front Bring the selected object to front
2. Send to Back Send the selected object back
3. One Layer Up Bring Forward
4. One Layer Down Send Backward
5. Group Group the selected objects
6. Ungroup Ungroup the selected objects
7. Align Left Align the left edge of the selected

objects to the primary object
8. Align Center Align the center of the selected
9. Align Right Align the right edge of selected
10. Align Top Align the top edge of the selected
11. Align Middle Align the middle of the selected
12. Align Bottom Align the bottom edge of selected
objects to the primary objects
13. Make same width Resize the objects to have the
same width as the primary object
14. Make same height Resize the objects to have the
same height as the primary object
15. Make same height Resize the selected objects to
and width have the same height and width
as the primary object
16. Even horizontal Evenly space the selected objects
spacing horizontally

9 Step Action

1. Even Vertical spacing Evenly space the selected objects
vertically
2. Lock object Toggle to lock and unlock the
selected object in place
3. Flip Horizontal Flip the selected objects from Left
to Right
4. Flip Vertical Flip the selected objects from top
to bottom
5. Rotate Left Rotate the selected object 90
degrees to the left
6. Rotate Right Rotate the selected object 90
degrees to the right
8 CÆ DISPLAY/DRAWING AREA
By default, when HMIWeb Display Builder is started a blank display will be opened.
HMIWeb Display Builder will give a default name to the display. Later, when saving your
display, you can change the name as needed.

9 Step Action
9 In Experion PKS release R400 HMIWeb Display Builder layout has changed. Four new
tabs are added in the HMIWeb Display Builder. These new tabs are:
• Object Explorer
• Toolbox
• Properties
• Point Browser tab

9 Step Action
10 DÆ OBJECT EXPLORER
The Object Explorer is a tool used for managing and editing objects. It shows every
object in the current display and, in the case of grouped objects, shows their inter-
relationships.
11 ToolBoxÆ Toolbox tab is used to display the tools or objects used to develop display in
HMIWeb display builder application.

9 Step Action
12 Properties Æ Properties tab displays all the possible properties of an object selected in
the HMIWeb display

9 Step Action
13 POINT BROWSERÆ
• The Point Browser displays every point that has been defined in the server to
which you are connected.
• Point Browser is a tool used to browse for points. It allows you to verify that a
point actually exists in your system. Using Point Browser, you can import a point
name into a display object.
• Point Browser opens in the same area that the Object Explorer is located.
AJ Enter/Type Point Name
BJ List of Points in a selected Server
CJ Full Asset Name (for the point selected)
DJ Server Name

9 Step Action
14 There are several types of displays that can be made using HMIWeb Display Builder:
a. Display: A Standard display.
b. Popup: A Popup is a secondary window that appears when a user clicks an object to
which the popup is attached.
c. Shape Sequence: A Shape Sequence is a custom object that is used in displays as
either a status indicator or a simple animation.
d. Dynamic Shapes: A dynamic shape is also, in effect, a custom object that is used in
displays to present complex data and may contain custom properties.
e. Display from Template: A template is used to create new displays that maintain
visual consistency. A Template is a standard “starter” display that is stored in the
HMIWeb Display Builder’s Template folder.
ATTENTION
The details of each display type will be covered later in

this course.
Create a New Display
15 Create a new display:
a. Click on the New Display icon to create a standard display.

b. Or, click the arrow to the right of the display icon. A drop-down menu will list the
types of displays that you can create.

9 Step Action
Configure HMIWeb Display Builder Options
16 Configure HMIWeb Display Builder Options:

• Click on Tools in the menu bar.
• Select Options from the drop-down menu.

9 Step Action
17 Details of the Options General tab.
a. Default Scripting Language: Specifies the default scripting language. Either

VBScript or JScript.
b. Number of Undo/Redo Levels: Specifies the maximum number of undo’s and
redo’s that you can perform.
c. Recently used file list: Specifies the number of recently used files listed under the
File menu.
d. Save AutoRecovery info every: Saves the “AutoRecover” version of any open
display at the specified frequency. If HMIWeb Display Builder closes unexpectedly it
asks you whether you want to open the AutoRecover version when you restart
HMIWeb Display Builder.
e. Change the mouse cursor when over a selectable object: If you select this option
the cursor (pointer) changes to this when you move it over a

selectable/editable object in HMIWeb Display Builder.
f. Show Intellisense auto-completion list in script editor: If you select this option,
you activate the Script Editor’s Intellisense feature.
g. Archive file format: Use the file format (Text) unless you have a specific need to
use Binary.
h. Save unarchived copy of file with archive files: Selecting this option will allow you
to save a display in different formats:
• Archive(*.hda or *.hsa)
• Standard(*.htm or *.sha)

9 Step Action
18
ATTENTION
When you save a display/shape in archive/binary

format, it is saved as a single file, which is suitable for
use with version management tools. (If you save a
display in standard/text format, an archive version is
not saved. In standard format, an associated binding
folder is also created that contains various support
files and graphics. The folder has the same name as
the display, but with a "_files" extension.) Because
you cannot call up an archive file in Station, you may
want to set up HMIWeb Display Builder so that
displays are saved in both formats.
19 Configure the Grid and Rulers:

• Click the Grid and Rulers tab
a. Horizontal spacing: The horizontal spacing of gridlines is expressed in pixels.

b. Vertical Spacing: The vertical spacing of gridlines is expresed in pixels. You may
change these default numbers, as needed, based on your drawing needs.
c. Color: The color of the gridlines.
d. Snap objects to grid: If you select this option, objects automatically align to the grid
when you create, move or resize them.
e. Show grid: If you select this option the grid is visible.
f. Show rulers: If you select this option the rulers are visible. The rulers make it easier
to arrange objects in a neat and consistent manner.

9 Step Action
20 Configure the path to Shape files:

• Click the Shapes tab.
With reference to the callout boxes above:

A J This list specifies the folders HMIWeb Display Builder searches while
looking for shapes.
B J Specifies the default manner in which the shapes are inserted in displays.
• Contents of a shape file: embeds a copy of the shape file in the display.
• Link to shape file: inserts a link to the shape file.

9 Step Action
21 Click the Add button.
• Browse to the Abstract folder and select it to add it to the ‘Search Paths’
lists.
• Click OK to close the Options dialog.
ATTENTION
This is what is known as ‘Registering a Shape

Folder’.

9 Step Action
22 Click View in Station tab

By using the View in Station option the displays can be tested and verified before
deploying it in Experion. When a user selects this option it will launch a station instance
and show the HMI display with the live data. Station application will also execute and test
the HMI scripts configured within the display
With reference to the callout boxes above:

A J Station File path option displays the path of the Station used.
B J This drop down list will show all the Station connection available, decide select a
specific Station connection that will always be used for the test mode.

9 Step Action
Customize/Create a Toolbar
23 Customize / Create a toolbar.

You can create your own toolbars containing the Tools/ Menus you want:
• Click on the Tools drop-down menu.
• Select Customize.
24 A Customize dialog box will open.

9 Step Action
25 To create a new toolbar

• Click Toolbars tab
• Click New button
26 New Toolbar dialog box will appear

• Type Displays in the Toolbar name field.
• Click OK.

9 Step Action
27 A small empty toolbar is formed. The new toolbar name also appears in the Toolbars
list as shown below.
28 Select the Command tab.

9 Step Action
29 Add commands to your Toolbar:

• Drag the icons for Open File, Save File, from the Categories File. The size of
the toolbar will expand as objects are added to it.
• Drag the icon of undo from the categories Edit.
• Click Close.
• The Customize window will be closed.
ATTENTION
This action of dragging the icons will copy these icons

to the new toolbar. It doesn’t delete them from the
original toolbar.

9 Step Action
30 Drag and drop the new Displays toolbar to the top of the HMIWeb Display Builder
toolbar area as shown below. It is now docked with the other toolbars.
Next, move the Displays toolbar to the bottom right corner of the display builder.
To move the toolbar:

• Select the move handle or select the bottom right corner of the Displays toolbar.
• Drag it to the bottom right toolbar area of HMIWeb Display Builder.
• Dock it with the other toolbars at the bottom of the display.

9 Step Action
Create Object on a Display
31 To create objects on 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 now have two drawing surfaces open – Display 1 and Display 2. Select
display 1 to begin adding objects to the display.

9 Step Action
32 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).
+ Shift

9 Step Action
33 Configure a Name for your rectangle:

• Right-click the rectangle.
• Select Properties Pages.

9 Step Action
34 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 Step Action
35 Click on the Colors tab.

• Change the Fill Color to Light Yellow. (Note that color tooltips appear when you
hover over a square on the color palette.)
• Close the Properties window.
36 The object is now named rectBox (as shown in the Object Explorer) and has a light
yellow fill color.

9 Step Action
37 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 Step Action
38 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.
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.

9 Step Action
39 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 Step Action
40 Select the Polygon object just drawn:

• From the top toolbar select the drop-down arrow next to the Fill Color bucket.
• Select the color Red.
41 The Polygon is changed to a red Fill Color.

9 Step Action
42 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 Step Action
43 There are several ways to draw your valve top. Read both methods prior to deciding
which drawing method is best for you (Read Steps 38 – 45).
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.

9 Step Action
44 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.
45 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.

9 Step Action
46 • 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.
47 Using the Transformations toolbar at the bottom of the display builder:

• Select the Intersection button.

9 Step Action
48 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).
49 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 Step Action
50 To compare Method 1 vs. Method 2
Method 1 retains a line in the middle of the valve top; method 2 does not.
51 Using either of the above methods:

• Create a top for your valve
Method 1 = Steps 38 and 39
Method 2 = Steps 40 thru 44
When finished creating and grouping your valve, resume with Step 47.
52 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 Red to Blue.

9 Step Action
53 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 Step Action
54 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.
55 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 Step Action
56 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.

9 Step Action
Save and Test
57 To save your display:

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

9 Step Action
58 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.

9 Step Action
59 To test your display:

• Open Station on your PC if it is not already open. The path is
Start > Programs > Honeywell Experion PKS > Server > 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.

Generate Display Reports

Practice
Objective
The purpose of this lesson is to learn how to generate a Report for displays. This section provides
the steps to generate a report on an existing display.
After completion of this LAB you will be able to:
• Generate a report for the selected displays.
Prerequisites
• An Experion PKS Server and HMIWeb Display Builder (to complete the lab exercises.)
• A pre-built display.
• Internet Explorer installed.
Introduction
HMIWeb Display Builder is one of the graphic building tools of Experion PKS. The Display
Report tool is used to create a report about the objects on a display. A display report can include
the following information:
• Object properties
• Point information
• Style sheet properties
• Scripts
• Shape list
• Custom properties

Procedure
9 Step Action
1 If not already open, open HMIWeb Display Builder and open your Practice.htm
display.
• It should look similar to the one shown below.
2 From the menu bar, select Tools:

• From the drop-down list, select Display Report...

9 Step Action
3 The Display Report wizard will open.
ATTENTION
All the display objects are selected by default. You can

deselect any option that you don’t want to be included
in the report.
4 Keep the default options, which include all display objects.

• Click OK at the bottom of the Display Report wizard.

9 Step Action
5 A Display Report preview window opens in HTML format as shown.

• The Display Report contains all the information about the display objects and
shapes used in the Practice.htm display.
6 Click the Save As... button and save the Display Report as Practice_Report.htm in the
Abstract folder.
• The path to the Abstract folder is C:\ProgramData\Honeywell\Experion
PKS\Client\Abstract
• Close the Display Report window.

9 Step Action
7 Go to Windows Explorer and browse to the Abstract folder.

• Select Practice_Report.htm.
• Right-click and select Open.

9 Step Action
8 The Practice_Report.htm Display Report will open in an Internet window.

• You may get a message regarding Internet Explorer’s Security configuration as
shown below.
• If so, select the checkbox “In the future, do not show this message”, then select
OK.
Example of a Display Report:
• Close the display report when finished.

9 Step Action
9 To generate a display report for all displays in a specified folder:

• Open HMIWeb Display Builder if not already opened
• From menu bar select Tools > Display Builder Assistant

9 Step Action
10 The HMIWeb Display Builder Assistant window opens.

Select Create Display Report from task
• Browse to the Display folder path (Abstract)

• Browse to the path to save the Display Report (Abstract)
• Enter a Report file name (Report)
• Select the Report format (.html)
• Select the Report options (leave the defaults checked as shown)
• Click Run
TIP
You can Browse to or type the path to your Abstract

folder in the display folder field
OR
Create a new folder and copy the display files into that
folder for report generation.

9 Step Action
11 Click OK when the report generation is completed, and close the Display Builder
Assistant window.
12 Go to Windows Explorer and browse to the Abstract folder.

• Select Report.htm.
• Right-click and select Open.

9 Step Action
13 Report.htm will open in an Internet window.

The following is an example of a Display Report:
TIP
The HMIWebLog text file will list any errors that may
have occurred.


HMIWeb Display Builder Basics Lab

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HMIWeb Display Builder Basics Lab

Transféré par

Droits d'auteur :

Formats disponibles

Topic: HMIWeb Display Builder Basics Lab

Generate Display Reports ...................................................................................................................49

9/21/2011 Copyright © 2011 Honeywell International Inc. 1

2 Copyright © 2011 Honeywell International Inc. 9/21/2011

Use Experion PKS HMIWeb Display Builder

After completion of this LAB you will be able to:

9/21/2011 Copyright © 2011 Honeywell International Inc. 3

Many of the drawing methods are similar to those used

4 Copyright © 2011 Honeywell International Inc. 9/21/2011

Launch HMIWeb Display Builder

1 To Launch HMIWeb Display Builder:

HMIWeb Display Builder can also be launched from

For Console Stations:

9/21/2011 Copyright © 2011 Honeywell International Inc. 5

6 Copyright © 2011 Honeywell International Inc. 9/21/2011

Navigate HMIWeb Display Builder

3 HMIWeb Display Builder’s layout is shown below.

Additional details are provided on the following pages.

9/21/2011 Copyright © 2011 Honeywell International Inc. 7

No. Icon Name Description

2. Rectangle Creates a Rectangle / Square

3. Rounded Rectangle Creates a Rounded Rectangle /

5. Line Creates a Line

6. Polyline Creates an open multi-segmented

9. Arc Creates an Arc

10. Wedge Creates a Wedge (Quarter

12. Hyperlink Creates navigation to an Internet

8 Copyright © 2011 Honeywell International Inc. 9/21/2011

5 B J Understanding TOOLBARS continued…

No. Icon Name Description

6. Shape Inserts a Shape Sequence /

9/21/2011 Copyright © 2011 Honeywell International Inc. 9

6 B J Understanding TOOLBARS continued…

No. Icon Name Description

2. Send to Back Send the selected object back

3. One Layer Up Bring Forward

4. One Layer Down Send Backward

5. Group Group the selected objects

6. Ungroup Ungroup the selected objects

7. Align Left Align the left edge of the selected

10 Copyright © 2011 Honeywell International Inc. 9/21/2011

7 B J Understanding TOOLBARS continued…

No. Icon Name Description

9/21/2011 Copyright © 2011 Honeywell International Inc. 11

12 Copyright © 2011 Honeywell International Inc. 9/21/2011

9/21/2011 Copyright © 2011 Honeywell International Inc. 13

14 Copyright © 2011 Honeywell International Inc. 9/21/2011

9/21/2011 Copyright © 2011 Honeywell International Inc. 15

The details of each display type will be covered later in

Create a New Display

15 Create a new display:

a. Click on the New Display icon to create a standard display.

16 Copyright © 2011 Honeywell International Inc. 9/21/2011

Configure HMIWeb Display Builder Options

16 Configure HMIWeb Display Builder Options:

9/21/2011 Copyright © 2011 Honeywell International Inc. 17

17 Details of the Options General tab.

a. Default Scripting Language: Specifies the default scripting language. Either

the cursor (pointer) changes to this when you move it over a

18 Copyright © 2011 Honeywell International Inc. 9/21/2011

When you save a display/shape in archive/binary

19 Configure the Grid and Rulers:

a. Horizontal spacing: The horizontal spacing of gridlines is expressed in pixels.