Topic: Static Elements in HMIWeb Displayshw.server.tracorp.com/courses/ac/EXP03R410B/14575_Lab...• Click the Rounded Rectangle icon on the toolbar. • Drag the cursor diagonally

7/31/2013 Copyright © 2013 Honeywell International Inc. 1

HPS Automation College written permission required to distribute

Honeywell Confidential and Proprietary

Topic: Static Elements in HMIWeb Displays

Contents

Build the Static Parts of the Displays.....................................................................................................3

2 Copyright © 2013 Honeywell International Inc. 7/31/2013



This page was intentionally left blank.

Static Elements in HMIWeb Displays

Build the Static Parts of the Displays





Practice

Objective

The purpose of this lesson is to build static objects in displays.

After completion of this LAB you will be able to:

• Insert static objects from the Shape Library

• Create static objects, such as tanks, vessels and process lines

Prerequisites

An Experion PKS Server with HMIWeb Display Builder (needed to complete lab exercises.)

Introduction

HMIWeb Display Builder is one of the graphic building tools of Experion PKS.

The lab exercises will enable you to:

• Create static objects

• Insert objects such as a compressor from the Shape Library






The following is example of the lab project that will be completed in this lesson.

On the Display Toolbar, there are several object-creation buttons that will be used in building your custom graphics. The way in which you use a particular tool/button depends on the type of object you are building. In the lab exercises we will begin using several different buttons from the toolbar as well as pre-built shapes from the Shape Library.

This section provides standard drawing techniques as well as suggestions on naming and applying color effects to the objects in your display.






Procedure

Build the Static Parts of the Display

Step Action

1 To open a new display in HMIWeb Display Builder:

• Click the New Display icon in the toolbar

• A blank display is opened as illustrated below.

ATTENTION

A default name (Display#) is given to each new display that is opened. The # stands for the next sequential number assigned by the HMIWeb Display Builder. Your display # may be different than the one being illustrated.






Step Action

2 To set the Background color and Display size:

• Double-click on the display to open the Display Properties window

3 Select the Appearance tab:

• Adjust the Size of the display to 874 x 432 (this size has been selected based on a SafeView window configuration that will be done in a later lab.)

• Change the default Background Color to silver.

• Leave the Background Image and Style blank, for now.

• Close the Display Properties window.






Step Action

4 To Create Tank D_100

• Click the Rounded Rectangle icon on the toolbar.

• Drag the cursor diagonally to create a horizontal tank.

5 Open the Properties window for the Rounded Rectangle.

• Select the Lines tab.

• Change the Corners Roundness to 100.






Step Action

6 Select the Colors tab:

• Using the drop-down arrow, click More Colors.






Step Action

7 In the More Colors window:

• Change the RGB value to 210 as shown

ATTENTION

This background color is changed for the better visibility and consistency in graphical displays.

8 On the General tab:

• Change the Width to 190

• Change the Height to 54

• Close the Properties Window.

The Rounded Rectangle should look similar to the one shown.






Step Action

9 Select the Line tool from the toolbar.

• Place a Line near the right and left ends of the rounded rectangle as shown.

Add a Textbox on your tank.

• Replace the word text with D-100 (modify the Font size to 8, Bold, and Alignment Center).

• Group the objects and rename the group TankD100.

10 It’s a good idea to periodically save your display.

• Click the Save icon in the toolbar.

Save your display with the name D_100_STA.htm in the Abstract folder (the path is: C:\ProgramData\Honeywell\Experion PKS\Client\Abstract)






Step Action

11 In the Object Explorer, notice that when several objects are grouped, you still have access to the individual parts that make up the group. Also note that your grouped tank is now called TankD100.

ATTENTION

An important consideration when creating displays: The processing time required to call up a display depends primarily on the Object Count, almost regardless of the complexity of the individual objects.

The Combine tool can aid in minimizing object count, which is explained in the following steps.

Grouping objects makes it easier to move a complex object but does not positively impact object count.






Step Action

12 Select the Textbox object in the Object Explorer.

• Then select the bring-to-front tool located in the bottom left toolbar.

ATTENTION

This step is required to keep the text visible after using the Group and Combine feature.

13 For using the Combine tool objects required to be grouped first. (This was already done in a previous step.)

• Select TankD100 and then select the Combine tool on the bottom toolbar.

• TankD100 is now one object as shown in Object Explorer.

To modify any parts of a combined object, you must “Uncombine” the object by doing the above steps in reverse order.

Select your tank:

• Uncombine TankD100 (for practice) using the Uncombine tool .

When finished with the Combine/Uncombine practice, leave your tank as an uncombined grouped object and again rename it TankD100.






Step Action

14 Create Fan Control E-110:

• Select the Pushbutton icon from the toolbar.

• Drag the cursor diagonally on the display to the correct size for the object you are creating as shown below.

15 Open the Properties window for the Pushbutton.

• Select the Details tab, and enter a Label of E-110.

• Select the Font tab, and pick a Font size of 8, Bold, and Alignment Center.

• Select the General tab, and enter a width of 200 and height of 24.






Step Action

16 Select the Colors tab:

• Select more Colors.

• In the colors tab click More Colors. Change the RGB value to 210

• Close the Properties window.

17 A background image of process lines will next be added to display. This will save drawing time and reduce the object count in your display, which improves call-up time and performance.

18 Open the Properties window of the D_100_STA display.

• Select the Appearance tab.

• Select the Background Image Browse button.






Step Action

19 In the Abstract folder:

• Select D_100_Lines.bmp.

• Select Open.

20 A background image of process lines becomes part of your display.

• Resize and reposition your objects as shown below.






Step Action

21 Use the Shape Gallery to insert a compressor shape into your display:

• Select View > Shape Gallery to open the Shape Gallery window.

22 The Shape Gallery window will open.

• Click the Browse button.






Step Action

23 Browse to:

C:\Program Files(x86)\Honeywell\Experion PKS\ Client\HMIWeb Display Builder\ShapeLib

• Click the “+” to see the folders in the Shape Library.

24 Select Custom_Shapes folder

• Select OK to see the available shapes.

ATTENTION

The folder Custom_Shapes contains the shapes which will be used in this course. This folder is not created automatically with Experion installation. This folder was created and copied at this location specifically for this course.






Step Action

25 If the shapes are not visible (only the names are listed), select the View Shapes icon at the top of the Shape Gallery to get a “Thumbnails” view of the shapes.

• Select the Compressor shape name, and drag and drop the shape name onto your display.

• OR right click the Compressor shape, and insert it into your display and click yes to Insert shape dialog box. .

• Close the Shape Gallery window when finished.

26 Select the Textbox tool from the toolbar and add a label below the Compressor.

• Replace the word Text with COMPRESS (modify the Font size to 8, Bold, and Alignment Center).






Step Action

27 Select the textbox icon from the toolbar and add a Title to your display:

• Enter a text as D-100 (font size 16, bold, and alignment center).

• On the Colors tab, select More Color option. Change the RGB value to 210.

• Select Line Color option. Change Line color as gray.

• Size and reposition the title as necessary.

Select the Textbox tool from the toolbar:

Add a label for the Flare as shown.

Save your D_100_STA display.

28 To draw process lines:-

Open your E_100_Test display from C:\ProgramData\Honeywell\Experion PKS\Client\Abstract in HMIWeb Display Builder.

The previous display (D_100_STA) used a background image for the process lines. However, for your E_100_Test display, you will draw the process lines instead of using a background image.






Step Action

29

Use the Polyline tool to add process lines as shown in the next step.

TIP

When drawing lines, it helps to have your snap-to-grid

set on to maintain “straightness”. (The icon can be found at the top of the HMIWeb Display toolbar). Take the snap-to-grid off when moving lines or objects to get precision/pixel alignment. (Or hold the shift key to assist in drawing straight lines.)

30 To draw a polyline:

• Click at the beginning (1), and at each turn or segment in the line (2, 3, 4), and double-click the end position to finish the line.

• The following is an example of the click pattern that could be used to create one of the polylines in your display.






Step Action

31 After drawing the polyline:

• Select the polyline and click the Properties tab located at the left bottom of the display.

TIP

If the properties tab is not present it can be invoked by navigating to View Properties window.






Step Action

32 Select the Lines tab option:

• Expanding the Width menu, change the Line Width to 3 px.

• Change the Line Begin Style to a Block arrow.

TIP

The toolbar at the top right of HMIWeb Display Builder can also be used to modify line properties.

To use the line toolbar, select the line to be changed and then select one of the drop-down arrows to modify the line properties.






Step Action

33 Expand the Colors option :

• Change the Line color to Gray.

34

ATTENTION

Using the example seen at the start of this lab section as a reference, continue adding process lines as needed to complete your display.

Place arrows on the process lines to indicate the process flow direction (to do this, create a short line and modify the arrow end style as needed -- place this newly created line/arrow on top of your process lines.)






Step Action

35 Your display will look similar to the one illustrated below.

Save your E_100_Test display as E_100_STA display in the C:\ProgramData\Honeywell\Experion PKS\Client\Abstract

36 Open both the displays created in the lab E_100_STA and D_100_STA in the HMIWeb display builder

Click the various tabs located at the top of the display to navigate between different displays created.






Step Action

37 Click E_100_STA tab to open display.

38 Test E_100_STA and D_100_STA graphics by calling each display in Station.






This page was intentionally left blank.

Documents

Topic: Static Elements in HMIWeb Displayshw.server.tracorp.com/courses/ac/EXP03R410B/14575_Lab...• Click the Rounded Rectangle icon on the toolbar. • Drag the cursor diagonally