Topic: Dynamic Shapes in Hmiweb Display Builder

Topic: Dynamic Shapes in HMIWeb Display Builder
Contents
Create Simple Dynamic Shapes............................................................................................................3
Create Complex Dynamic Shapes ......................................................................................................17
Create Dynamic Shapes for Analog Indicators ...................................................................................45
Create a Dynamic Shape for Loop Operation .....................................................................................79
R400: Use HMIWeb Display Builder Test mode .................................................................................99
Configure HMIWeb Display Builder 'View in Station' Option ...............................................................99
10/10/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. 10/10/2011

Dynamic Shapes in HMIWeb Display Builder
Create Simple Dynamic Shapes

Practice
Objective
The purpose of this lesson is to learn how to build a simple dynamic shape in a display.
After completing this LAB you will be able to:
• Create a simple dynamic shape (such as a fan).
Prerequisites
• An Experion PKS Server and HMIWeb Display Builder (required completing the lab
exercises.)
• “Build the Static part of the Display” must be complete.
• All points must be downloaded and running.
Introduction
HMIWeb Display Builder is one of the graphic building tools of Experion PKS.
The purpose of this lab is to:
• Create simple dynamic shapes.
• Insert the dynamic shapes into a display.
This section provides standard drawing techniques as well as suggestions on naming and applying
color effects to the objects in your display.
TIP
If a shape has been changed after being inserted into

a display, it will need to be replaced or upgraded.
Select the shape in your parent/main display -- use the
Tools pull-down menu and select “Upgrade Embedded
Shapes”. As long as the folder containing your shapes
has been registered in the Tools > Options > Shapes
tab, the shape will be replaced successfully.

Procedure
Create simple dynamic shapes
9 Step Action
1 Open HMIWeb Display Builder.

Open your D_100.htm graphic.
• Your display should be similar to the one shown below.

9 Step Action
2 A dynamic shape will now be built to add 8 fans to the E-110 condenser:
• Select File > New.
• Select Dynamic Shape to open a blank dynamic shape display.
Create 3 objects on the dynamic shape display:

• 1 round rectangle (approximate size: width 22, height 20).
• 1 rectangle (width 22, height 12).
• 1 small rectangle to indicate Start/Stop status (width 10, height 8).
• Open the Properties window of the smallest rectangle and select the Animation
tab.

9 Step Action
3 For the Type of breakpoint, select Discrete.
• Select silver (gray) for State0 and green for State1.

• Leave the other colors as they are.
• Click Close
For this object and the points that this shape will be linked with, State0 is the Stop state
of the FAN, and State1 is the Start state of the FAN.
ATTENTION
The states (State0=Stop and State1=Start) correspond

to the configuration done in Control Builder when the
FAN points were built.

9 Step Action
4 Open the Properties window for the middle rectangle:

• Select the Colors tab.
• Click the drop-down arrow and select Fill Effects.
Complete the Fill Effects as shown below and click OK (select white for the fill color and
silver for the gradient color).
When finished modifying the fill effects, close the Properties window for this object.

9 Step Action
5 Open the Properties window for the display.

• Select the Custom Properties tab.
Click the Add button and enter the following data:

• Name: Tag
• Type: Point
ATTENTION
If you position your cursor in the Custom Properties

“Type” field and left-click 2 times, a drop down menu
becomes available to use in selecting the Custom
Property type.
• Close the Shape properties window.

9 Step Action
6 Open the Properties window for the smallest rectangle and select the Data tab.
• For type of database link, select Point/Parameter from the drop-down menu.
• Select <Tag> from the point drop-down list (Tag is the Custom Property just
defined for this shape display. Custom Properties appear at the top of the list.)
• Type devctla.do(1) in the parameter field.
• When finished, close the Properties window for the rectangle.
Arrange the objects on your shape display to resemble the illustration shown below.
(Stack the rectangles, and then group all objects.)
Save the display as fans.sha (or ds_fans.sha) in your abstract folder:

C:\ProgramData\Honeywell\Experion PKS\Client\Abstract

9 Step Action
7 Open your D_100 graphic in HMIWeb Display Builder.

Go to Edit > Insert Shape.
The Insert Shape window will open; select the fans shape and click Open.

9 Step Action
8 The fans shape is randomly inserted into your display as shown.
9 Drag the shape and place it below the E-110 condenser as illustrated.
• Add a connecting line between the fan shape and the condenser.

9 Step Action
10 Open the Properties Window for the fan shape that was just added.
• Below the Value heading in Custom Properties, enter the name of the database
point that this shape will link to.
11 Repeat the above steps to insert additional fan shapes and assign database links for
each shape.
The tag names are:
• 11_HS14b
• 11_HS14c
• 11_HS14d
• 11_HS14e
• 11_HS14f
• 11_HS14g
• 11_HS14h
Select all the fans and align evenly below the E-110 condenser.
Use the align tools and the “even horizontal spacing” button to achieve consistent
spacing. When finished, you may want to lock your objects in place using the “Lock
Objects” toggle button.
Your fans and condenser should look similar to the illustration below.
Save your D_100 display.

9 Step Action
12 Testing your graphic on Station:

Call your D_100 display on Station.
• Your graphic should resemble the one shown below.
• In order to test the Start/Stop states of the fans, you will need to go to the point
detail displays in Station.
• Double-click one of the fan shapes you have added to access the Detail Display
for that fan.
13 The Point detail display window will open as shown below. The fans are currently in the
OFF/STOPPED state (State0).

9 Step Action
14 Click the OP combo box and select START.

• The STOP status will change to START as shown below.
ATTENTION
If your point did not change state, as requested, look

at the bottom right of your Station display to see what
the current access level is. You may need to change to
Mngr access level to manipulate the points (password
mngr).

9 Step Action
15 Re-call your D_100 graphic in Station:

• The fan shape you selected has now turned green (ON).
16 Repeat the previous steps to test the other fans.


Create Complex Dynamic Shapes

Practice
Objective
The purpose of this lesson is to build complex dynamic shapes and insert them several times in a
display.
After completing this LAB you will be able to:
• Build basic valve shapes.
• Change valve color when OPEN and CLOSED.
• Create dynamic shapes with an output indication bar.
• Create comboboxes to control a discrete valve.
Prerequisites
• An Experion PKS Server with HMIWeb Display Builder (to complete the lab exercises.)
• All previous labs must be complete.
• All points must be downloaded and running.
Introduction
HMIWeb Display Builder is one of the Experion PKS graphic building tools.
• Build basic valve shapes with an output indication bar.
• Change valve color for an OPEN/CLOSED indication.
• Provide standard drawing techniques as well as naming and color suggestions for the objects
in your display.
TIP
Many of the drawing methods are similar to those used

in other Windows-based drawing and paint
applications.

Procedure
Creating Complex Dynamic Shapes
9 Step Action
1 If not already opened, open HMIWeb Display Builder.
2 Click the New Display icon drop down and from the menu select Dynamic Shape.

9 Step Action
3 Double-click the shape display background to open the Properties window; select the
Custom Properties tab.
Click the Add button and enter the information shown in the example below.
ATTENTION
Custom Properties give a dynamic shape flexibility –

the shape can then be used multiple times within a
graphic. When inserted, different tags as well as a
different parameter can be associated with the shape.
The default parameter value entered (PIDA.OP) will be
retained when the shape is inserted into a main/parent
display to save typing time, but this value can be
changed to another parameter after insertion.
4 When finished adding the Tag and Param Custom Properties, close the Properties
window.

9 Step Action
5
Click the (Polygon) button on the toolbar and draw a valve bottom as shown below.
Use the (Wedge) button or use the Transformation method to create the valve top
(as explained in Lab 1 - Basic Use of HMIWeb Display Builder).
Draw a slim rectangle (valve stem) from the valve bottom to the valve top.
Double-click on the rectangle to open the Properties window,
On General tab, enter Width : 1
When finished, group the entire valve object.

9 Step Action
6 Right-click the grouped valve and select Property pages.

9 Step Action
7 Select the Data tab and, using the drop-down arrows, select:
Type of database link: Point / Parameter
Point: <Tag>
Parameter: <Param>
TIP
When Custom Properties are defined in a dynamic

shape, the drop-down menus will list the Custom
Properties at the top of the point and parameter lists.

9 Step Action
8 Select the Animation tab, and enter the data shown on the example below.
• When the valve is closed, the fill color will be silver (gray); when the valve is
open (>1), the fill color will be green.
• Close the Properties window when the above data has been entered.
9 Add an Indicator next to the valve as shown. (Hint: Keep your objects relatively small --
many will be inserted into your displays.)

9 Step Action
10 Right-click the Indicator object:

• Select Property Pages.
11 Select the Data tab and, using the drop-down arrows, select:
Type of database link: Point / Parameter
Point: <Tag>
Parameter: <Param>

9 Step Action
12 Select the Animation tab, and enter the information shown on the example below.
When the indicator value is below 10% of range the color will be gold; from 10 to 90%
the indicator fill color will be cyan; when the value is 91% of range and above, the fill
color will be red.
ATTENTION
Indicators have a white fill color, by default. Go to the

Colors tab and change the fill color from white to
“Silver”.
Reminder: You will need to change the fill color of all
indicators to Silver in the lab exercises.
13 Close the Properties window for the indicator.
14 Group the indicator and the valve (dynamic shapes must be grouped).

9 Step Action
15 Right-click on the new grouped object and open the Properties window.

9 Step Action
16 Select the Behaviors Tab.

• Click the checkbox for Faceplate.
• As noted on the Behaviors dialog shown above, selecting the Faceplate option
allows a faceplate to be launched when this object is clicked. Also note that the
object calling the faceplate must be data bound, which means that the Data tab
must contain point information.

9 Step Action
17 Select the Data tab of the grouped object.

Select the following from the drop-down arrows:
Type of database link: Point/Parameter
Point: <Tag>
Parameter: <Param>
TIP
The faceplate receives its data and is populated from

the database information entered on the Data tab.
18 Close the Properties window for the group and save the display as valve.sha.

9 Step Action
19 Repeat the above steps (2 through 18) to create two more dynamic valve shapes with an
indicator on the right and on the top, as shown below.
TIP
COPY the valve you created and rotate it. Modify the
details tab of the indicator properties for the desired
horizontal or vertical fill direction as needed.
Reminder: If you ungroup the valve and indicator to

rotate the valve, remember to regroup all objects and
re-add the faceplate option and complete the Data tab.
ValveRightInd.sha
ValveTopInd.sha
20 Save the dynamic shape with the indicator on the right as ValveRightInd.sha and save
the other shape with the indicator on the top as ValveTopInd.sha.
21 Open your T_100 graphic in HMIWeb Display Builder. Use the “finished” lab examples in
the HMIWeb Lab Sequence section of your course material for correct valve placement
and tagnames.

9 Step Action
22 Select Edit > Insert Shape.
23 From the abstract folder select the valve.sha and click Open.
• The valve is randomly inserted in your display.

9 Step Action
24 Open the Custom Properties of the valve shape and enter the Tag value (11_FC01) for
this valve.
• The Param Custom Property is the default value of “pida.op” which was entered
when the dynamic shape was created. This Parameter value can be changed to
reuse this shape for other point types. However, we will keep the default value
of “pida.op” for all PID loops.
• Close the Shape properties when the tag entry is finished.

• Position the valve to the left of T_100 as shown in the HMIWeb Lab Sequence
section.
25 Repeat the previous steps (22 – 24) to insert a total of 4 valves (11_FC01, 11_FC02,
11_FC17 and 11_FC18) as shown in the T_100 final display example in the HMIWeb
Lab Sequence section of your course material. (You could alternately copy the first
valve that was inserted and modify the Custom Properties to reflect the different tags.)

9 Step Action
26 Save your T_100 display in the abstract folder.

• Your valve locations should be similar to the illustration below.
27 Open D_100 in HMIWeb Display Builder. Use the “finished” lab example for D_100 in
Tab 6 -- the HMIWeb Lab Sequence section of your course material -- for correct valve
placement and tagname assignment for the Custom Properties.

9 Step Action
28 If needed, use the “Edit > Insert Shape” steps outlined previously to insert the
appropriate valve dynamic shape into your D_100 graphic (a total of 8 valves will be
inserted).
Enter the tagname on each shape’s Custom Properties tab. NOTE: The two valves
located over the D-100 drum are a split range configuration and both have the same tag
11_PC16.
• When finished, your display will look similar to the one illustrated below.
29 The two valves at the top right of your D_100 display are “Auto/Manual” valves and were
configured differently from the other valves when our Training database was built.
Therefore, a different parameter must be entered for 11_HC41 and 11_HC44. Access
the Custom Properties for these valves, and change the pida.op parameter value to
automana.op.
Close the Properties window of the valves, when finished.
30 Save D_100 to the abstract folder, and close the display.

9 Step Action
31 Open E_100 in HMIWeb Display Builder. Use the “finished” lab example in the HMIWeb
Lab Sequence section of your course material for the correct valve placement and
tagname.
Open the Custom Properties of the valve shape and enter the Tag value as 11_FC15
for this valve.
When finished, your E_100 graphic should look similar to the one shown below.
32 Save E_100 to the abstract folder, and close your display.
33 Create another dynamic shape:

• Click the New Display arrow and select Dynamic Shape.

9 Step Action
34 Create a discrete on/off valve as shown below. Refer to Lab 1 for drawing techniques, if
needed.
• Note that the head of this valve is a rectangle.

9 Step Action
35 Group the object.
ATTENTION
Dynamic shapes must be grouped.
36 Open the Properties window of the display and click the Custom Properties tab.
Select the Add button and enter the information shown below.
• When this shape is inserted into your main graphic, the Custom Property value
for “Tag” will have a default value of 11_LSD15. This point value can be
changed whenever this shape is inserted into a display. However, since we will
use this shape only once, we will keep the default value.

9 Step Action
37 Open the Properties window for the grouped valve.

• Select the Animation tab.
• For the Type of breakpoint select Discrete
• Select silver (gray) for State0 and green for State1

9 Step Action
38 Click the Data tab.

• Select Point/Parameter from the Type of database link drop-down list.
39 Select <Tag> from the Point drop-down box.
40 Type FLAGA.PV for the Parameter entry.

• Since <Tag> is a Custom Property and will be linked with a point at insertion
time, the parameters needed may not appear in the drop-down list because the
actual point to be used with this dynamic shape is not yet known; therefore, the
applicable parameters (which are based on individual point type) are not known
by the display at this time.
41 Close the Properties window and save the display as dyna.sha.

9 Step Action
42 Open T_100 and select Edit > Insert Shape.
43 Insert dyna.sha from the abstract folder:

• Move the shape to the bottom of T-100 as shown.

9 Step Action
44 Open the Properties window of the discrete valve.

• Verify that 11_LSD15 appears in the Value field (this was the default Tag
entered when this shape was created.)
45 Close the Properties window and save T_100 in the abstract folder.
46 Click the textbox button in the toolbar:

• Draw a textbox below the valve and replace the word “Text” with 11_LSD15 (font
size 8, bold, and centered).
• Add a silver (light gray) fill color and darker gray line color (experiment with the
gradient fill effect for the 11_LSD15 textbox.)
47 Add two comboboxes to your display at the bottom/left of T-100, as shown.
48 Open the Properties window of each Combobox and modify the following color and font
attributes:
Fill color: White
Font size: 8, Left Alignment, Bold

9 Step Action
49 Select the Data tab, and enter the following information:

• For the left Combobox.
Point: 11_LSD15
Parameter: RST.PVFL
• For the right Combobox.
Point: 11_LSD15
Parameter SET.PVFL
Select the “data entry allowed” option for both comboboxes.
50 Insert an Open LSD text label above the first Combobox, and insert a Close LSD text
label above the second Combobox.
ATTENTION
The valve that is being controlled by the comboboxes

has a database point of 11_LSD15; draw a dashed
line from the second combobox to the valve to show
the relationship.
51 Save T_100 to the abstract folder and close the display.

9 Step Action
52 In Station, open T_100 to test the comboboxes:

• Your display should resemble the example shown.
53 Change the state of 11_LSD15 from OFF to ON using the comboboxes.

To open the valve, set the Close LSD combobox to OFF and set the Open LSD
combobox to ON. To close the valve, set the Open LSD combobox to OFF and set the
Close LSD combobox to ON.
• This will change the logic of the 11_LSD15 reset block. Note the change in the
11_LSD15 ON/OFF valve.
The valve changes color from gray to green indicating the dynamic shape is working
properly.

Testing Your Graphic on the Station
9 Step Action
1 Click each valve in your T_100 display to call the faceplate. (When the dynamic shapes
were built for the valves, the faceplate option was checked on the Behaviors tab -- this
allows changes to be made from the graphic using the faceplate rather than going to the
detail display.)
TIP
Double-clicking an object that has a database link (i.e.

alphanumeric or indicator) will take you to the detail
display in Station.
Change the OP to 0 for each valve to verify that the color change is working (Gray for
0/Closed and Green for >0/Open.) Change the OP value to 100 to test the indicator (it
should be red). The mode must be MAN to enable an OP change.
2 Open E_100 and test the valve (11_FC15) that was inserted in that display.
3
If you choose to go to the detail display to test your valves, click the (Back) button
on the Station’s toolbar to return to your graphic display.
• If the OP value is greater than 1, the valve is green and the indicator shows the
% of valve opening.
• If the OP is less than 1, the color of the valve changes to gray.

9 Step Action
4 Open D_100 to test your valves. You will observe that 11_HC41 and 11_HC44 (at the
top right of the display) do not have OP parameters that can be accessed from the
faceplate. You will have to go to the detail display to change the OP value to test the
“automan” valves.
• Double-click each valve to go to the detail display.
• On the Control Module tab of the detail display, double-click the OP
parameter of the AUTOMANA block and enter a value of 20. Return to
D_100 to verify a valve color change. The valve will be green if the OP
value is greater than 1.
• Once again, return to the detail display and enter a value of 0. The valve will
now be gray in your D_100 graphic.
NOTE: In the next lab, you will build alphanumerics to control these valves from the
D_100 display.

Create Dynamic Shapes for Analog Indicators

Practice
Objective
• Create and add dynamic shapes for analog point PV indication.
• Add textboxes for pumps P62, P63, P68 and P69.
• Add alphanumerics for 11_HC41 and 11_HC44.
Prerequisites
• All prior labs must be completed.

• All points downloaded and active.
Introduction
An alphanumeric object is used to display database values in different formats.

In this LAB you will build a dynamic shape using alphanumerics for the temperature and pressure
indicators along with their tagnames and engineering units.
You will also create alphanumeric objects for OP indication of 11_HC41 and 11_HC44 with the
data entry option enabled.
Textboxes will be added to D_100 to identify the pumps that were added as shape sequences in a
previous lab exercise (P62, P63, P68 and P69).

Procedure
9 Step Action
1 Open a new Dynamic Shape display in HMIWeb Display Builder.
A dynamic shape called TempInd.sha will now be built.
2 Double-click the display and select the Custom Properties tab. Select the Add button
and enter the Name and Type information shown below:

9 Step Action
3 Click the rectangle button on the toolbar, and draw a rectangle on the display similar to the
one shown below.
4 Right-click the rectangle and select Property Pages.

On the General tab, enter the size details as:
• Width: 88
• Height: 16
Accept the defaults for all other values.

9 Step Action
5 Select the Colors tab for the rectangle and modify the fill effects as shown (gray fill color
and silver gradient color).
• Click OK.
• Close the Properties window.
6 Your rectangle should appear similar to the one illustrated.

9 Step Action
7
Click the (alphanumeric) button on the toolbar.
Drag your cursor to draw an alphanumeric above the rectangle.
8 Right-click the alphanumeric object and open the Properties window.

On the General tab enter the following details:
Name: pvValue
Tooltip: Indicator PV
Width: 56
Height: 16
Accept the defaults for the other parameters.

9 Step Action
9 Select the Data tab and enter the following details:

Select the Point: <Tag>
Enter the Parameter: daca.pv
For this alphanumeric, do not allow data entry. This will be for indication only.
10 Select the Colors tab and select No Fill for the alphanumeric.
Note: All alphanumerics used in this dynamic shape lab will have “no fill” unless
otherwise instructed.

9 Step Action
11 Select the Details tab and enter the following data:

• Display as: Numeric (displays the value as numeric)
• Number of
decimals: 2 (number of decimals to be displayed)
• Number of
characters displayed: 9 (maximum # of characters to be displayed)

9 Step Action
12 Select the Font tab.

Set the Font Size to 8, the Effects to Bold, and the Alignment to Left.
13 Close the Properties window.

9 Step Action
14 Select the alphanumeric object; drag it onto the rectangle as shown.
15 Add another alphanumeric. (This will be used to show Engineering Units for the indicator
points.) Right-click and select Property Pages.

9 Step Action
16 On the General tab enter the following information.
• Accept the other defaults on the General tab.

9 Step Action
17 Click the Data tab:

• Select the Type of database link: Point / Parameter
• Select the Point: <Tag>
• Enter the Parameter: EUDESC

9 Step Action
18 Select the Details tab and enter the information shown:
19 Select the Font tab and complete the following:
• Close the properties window.

9 Step Action
20 Select this alphanumeric object; drag it onto the rectangle as shown.
• The PV value and Engineering Units are now defined for our dynamic shape and
both alphanumerics have been placed on the rectangle. (Did you remember to change
the fill color to “No Fill” for the alphanumeric and text object?)
• The Tagname will be the final addition to our shape display.
21 Add another alphanumeric to your dynamic shape. (This will be used to show the
Tagname.) Right-click and select Property Pages.

9 Step Action
22 On the General tab, enter the following information.
• Accept the other defaults on the General tab.

9 Step Action
23 Click the Data tab:

• Select the Type of database link: Point / Parameter
• Select the Point: <Tag>
• Enter the Parameter: NAME

9 Step Action
24 Select the Details tab and enter the information shown:
25 Select the Font tab.

• Set the Font Size to 8.
• Set the Alignment to center.
• Set the Effect to Bold.
26 Select the Colors tab and change the fill color to “No Fill”.
• Close the Properties window when finished.

9 Step Action
27 Select the Tagname alphanumeric; drag it above the rectangle. Group all objects in the
dynamic shape display as shown below.
28 Save your display as TempInd.sha in the abstract folder.
29 Open T_100 in HMIWeb Display Builder. Your display should look similar to the one shown
below.
30 Select Edit > Insert Shape to add your dynamic shape TempInd.sha to the display.
Use the final lab example of T_100 in the HMIWeb Lab Sequence section of your course
material for tagname assignment and correct placement of each inserted shape.

9 Step Action
31 Add instrument lines to connect each inserted shape to the relevant location of
measurement.
Click on the line button on the toolbar and draw a line as shown below.
Open the Properties window of the line and select the following:
• Width: 1px
• Style: Dashed (as shown)
Close the line Properties window.

9 Step Action
32 An example of T_100 with the shapes inserted is shown below.
Enter tagname 11_TI40 for the shape at the Heavy Feed line; 11_TI24 for the shape at the
right side of the tank T-100.
Add tagnames 11_TI23, 11_PI14, 11_TI20 respectively from top to bottom for the shapes
inserted at the left side of the tank.
ATTENTION
Verify that all Custom Properties of the dynamic

shapes have a tagname assigned.
34 Open E_100 in HMIWeb Display Builder and insert your TempInd shape. Use the final lab
example in the HMIWeb Lab Sequence section of your course material for tagname
assignment and shape location.

9 Step Action
35 An example of E_100 with the inserted shapes is shown below.
Enter the tagname 11_TI21 for the shape inserted at the top and 11_TI22 for shape
inserted to left side of the tank E-100.
36 Save your E_100 display in the abstract folder.
37 Open D_100 in HMIWeb Display Builder. Using the D_100 final lab example in the
HMIWeb Lab Sequence section of your course material, insert 2 instances of TempInd as
shown below.
Assign the tagname 11_TI25 to the shape at the left side and 11_TI26 to the shape at the
bottom of the tank.

9 Step Action
38 Add textboxes for Pumps P62, P63, P68 and P69.

Enter the details shown:
• On the General tab:
o Width: 30
o Height: 18
• On the Font tab:

o Font: 8
o Effect: Bold
Text: P-62 (for the first textbox)
Accept the defaults for any remaining parameters.
Repeat the above and draw textboxes for P-63, P-68 and P-69, and place the textboxes
near their respective pumps as illustrated below.

9 Step Action
39 To add alphanumerics for 11_HC41 and 11_HC44:
Select the tool and add an alphanumeric object for 11_HC41.
Open the Properties window and enter the following details:

• Name: Keep the default given by HMIWeb Display Builder.
• ToolTip: 11_HC41
• Width: 48
• Height: 17
• Font: 8, Bold

9 Step Action
40 Select the Data tab and enter the following details:

Point: 11_HC41
Parameter: AUTOMANA.OP
Select the Data entry allowed check box.

9 Step Action
41 Select the Details tab and enter the following data:

Display as: Numeric
Number of decimals: 0
Number of characters displayed: 4
Select the Word wrap check box.
42 Click the Colors tab. Select a line color of white. For the fill color, select the drop-down
arrow and select More Colors… to create a custom fill color.

9 Step Action
43 Create a custom color of light gray as shown below (change the Red, Green and Blue
definitions to 220 each).
• Select the “Add to Custom Colors” button so that we can easily use this same color
again.
• Select OK
44 Select the Lines tab; select a line style of Inset. Close the properties window when
finished.
45
Add a textbox to the display and replace the word “Text” with 11_HC41.
Open the textbox Properties Window and adjust the size of the textbox:
• Width: 50
• Height: 15
NOTE: For the textbox use a font size 8, Bold.
Position the alphanumeric and textbox for 11_HC41 as shown.

9 Step Action
46 Repeat the above steps to add another alphanumeric and a textbox for 11_HC44.
Modify the Data tab to connect this alphanumeric to point 11_HC44 and parameter
AUTOMANA.OP.
(Hint: Copy 11_HC41 and modify the properties to reflect 11_HC44)
47 Save your D_100 display to the abstract folder:

• Your display will be similar to the one shown below.

9 Step Action
48 To test your displays, first open T_100 in Station.
49 Select the 11_TI40.PV alphanumeric.
• In the message zone of Station you will see a message similar to the following:
• Try entering a value in this alphanumeric; it won’t allow you to do so because you did
not select the Allow data entry checkbox on the Data tab of this alphanumeric object.

9 Step Action
50 To test your display:

• Double-click 11_TI40 to open the Detail display as shown below.
• Select the Chart tab.

9 Step Action
51 Double-click on the PV connection of the NUMERICA block to open the Request Value
Change window:
Enter the Actual Value as 50
Click OK.
Confirm the change in PV value by clicking the Yes button, and then click OK.

9 Step Action
52 Recall your T_100 display on Station.
(Hint: Select the back button twice)
• 11_TI40.PV now indicates the new value of 50.
Select the alphanumeric and the message line in Station will show:
• In reality, you wouldn’t change the PV. For lab testing purposes, we are using a
Numeric block instead of an actual Analog Input channel so you are able to change the
PV.
53 Check the values of the other indicators in T_100.

9 Step Action
54 Open E_100 in Station and test the dynamic shapes that were added in this lab exercise.
55 Open D_100 in Station and test the dynamic shapes.

9 Step Action
56 Select the 11_HC44 alphanumeric.
In the message zone you will see a message similar to the following:
Enter 100 in the 11_HC44 alphanumeric.
• The new value will be accepted because you selected the Allow data entry checkbox
for both the 11_HC44 and 11_HC41 alphanumerics.

9 Step Action
57 Repeat the above step to test 11_HC41.
58 To finalize this lab, text objects were also added for the pump names, as shown.


Create a Dynamic Shape for Loop Operation

Practice
Objective
After completing this LAB, you will be able to:

• Create a dynamic shape for loop operation.
Prerequisites
• An Experion PKS Server and HMIWeb Display Builder (for lab exercises.)
• All previous LABS must be completed and the graphics operational.
Introduction
HMIWeb Display Builder is one of the Experion PKS graphic building tools.
• Create dynamic shapes for loop operation.
• Insert dynamic shapes into displays.
• Verify and test inserted dynamic shapes in T_100, D_100 and E_100.
• Practice standard drawing techniques.
TIP
A dynamic shape is best used where a complex shape

with a database connection is needed multiple times.
Many of the drawing methods are similar to those used
in other Windows-based drawing and paint
applications.

Procedure
9 Step Action
1 If not already opened, open HMIWeb Display Builder.
2 Click the New Display arrow and select Dynamic Shape.
A new dynamic shape “Loop.sha” will now be created.
3 Open the Properties window for the Shape display:

• Click the Add button and enter Tag in the Name field and select Point in the
Type field.
Close the Shape properties window.

9 Step Action
4 Select the alphanumeric button on the toolbar and add an alphanumeric object to your
Shape display as shown below.
5 Open the alphanumeric’s Properties window.

On the General tab change the Width and Height.
6 Select the Lines tab.

Change the width to 2px and the line style to Inset.
7 Select the Colors tab. For the fill color, select the drop-down arrow and select the color
Silver. Select a line color of white.
8 Select the Font tab and change the Font Size to 8 and the Effects to Bold.
9 Close the Properties window.

9 Step Action
10 Create a second alphanumeric object and position it under the first.
TIP
Select the first alphanumeric and click (the

Duplicate tool.)
11 Open the Properties window for the first (top) alphanumeric object.
Select the Data tab and enter the following:
First alphanumeric object
• Type of data base link: Point/Parameter
• Select Point: <Tag> (use the drop-down arrow)
• Enter the Parameter: PIDA.SP
Do not select the Data entry allowed checkbox.
For the second alphanumeric box

• Type of data base link: Point/Parameter
• Enter the Parameter: PIDA.PV
Do not check the Data entry allowed checkbox: We will use a faceplate to make
changes to the alphanumeric associated with this dynamic shape.
Close the Properties window.

9 Step Action
12 Add a combobox to the display as shown below.
13 Open the Properties window for the combobox and enter the following Width and Height
information on the General tab:
Accept the defaults for the remaining General tab parameters.

9 Step Action
14 Select the Data tab.

Enter the following information for the combobox:
• Type of database link: Point/Parameter
• Point: <Tag> (use the drop-down arrow)
• Type the Parameter: PIDA.MODE
Select the “Data entry allowed” checkbox
Note: If the “Data entry allowed” box is checked, the mode can be changed from the
combobox.
15 Select the Font tab and set the Font Size to 8 with Bold effects, and Centered.
16 Select the Colors tab and select a fill color of Silver, and a line color of white.
• Close the Combobox properties window when finished.

9 Step Action
17 Add a text object, change the word “Text” to SP and adjust the Font size to 8, Bold.
• Your display should look similar to the following illustration.
18 Repeat the above step to add a PV textbox below the SP text.
Hint: Use the duplicate function whenever possible.

9 Step Action
19 Add an alphanumeric object above the combobox.
20 Open the Properties window for the alphanumeric.

On the General tab adjust the Width and Height as shown below.

9 Step Action
21 Select the Data tab and enter the following:

• Type of database link: Point/Parameter
• Type the Parameter: NAME
Verify the Data entry allowed checkbox is not selected.
22 Select the Details tab and pick Text from the Display as drop-down box.
Select the Colors tab and change the fill color to Silver and the line color to white.
23 Select the Lines tab and change the line style to Inset.
Select the Font tab and set the Font Size to 8, Bold and Centered.
24 Close the alphanumeric Properties Window.
25 Your Shape display should be similar to the one shown below. You may have to adjust
the size and position of your objects.

9 Step Action
26 Select all “alphanumeric” objects, and then right-click to Property Pages. Do not select
the combobox. (If multiple objects are selected, you can edit any properties that are
common to the selected objects.)
Click the Behaviors tab, and select the Faceplate option.
• At runtime, when any one of the alphanumerics in the dynamic shape is

selected, the system faceplate will be invoked.
• Close the Properties Window.
27
Select the Alarm State indicator on the toolbar.
Draw an alarm indicator to the right of your objects as shown below.

9 Step Action
28 Access the Properties of the alarm state indicator and select the Data tab.
Select the Type of database link as Point/Parameter and enter the data as shown
below.
NOTE: The Alarm state object must be bound to the enable/disable state parameter of
a point for alarm indications to appear. The default entry for the Parameter field is NAME
which will display alarm indications. However, in order to display the Point Disabled
icon when alarms are disabled for the point, change the Parameter field from “NAME” to
the appropriate parameter – the parameter used is based on point type.

9 Step Action
29 Select the Details tab of the Alarm State Indicator and enable the options as shown
below.
• Close the Properties window.
ATTENTION
When the point that this alarm state object is

associated with goes into alarm, the indicator will
become visible and blink until the alarm is
acknowledged.
Once the alarm is acknowledged, the indicator will
stop blinking and remain visible as long as the alarm
condition exists.
If the alarms have been disabled and there is an
existing alarm condition for the point associated with
the alarm icon then the icon changes to a ghost alarm
indication and will blink if an unacknowledged

condition exists for this point.
When no alarm is present and the alarms have been
disabled, the Disabled icon will be shown.

9 Step Action
30 Group all objects in the dynamic shape display.
31 Save the display as Loop.sha in the abstract folder.
32 Open T_100 and select Edit > Insert Shape.

9 Step Action
33 Insert Loop.sha into your display.

• The dynamic shape is randomly inserted and can be moved as necessary.
34 Open the Properties window for the first inserted shape, select the Custom Properties
tab and enter the value shown below:
Close the Properties window.
35 Insert (or copy) additional loop shapes into your T_100 display and place them
according to the final lab example for T_100 in the HMIWeb Lab Sequence section of
your course material.
Do not insert a loop.sha for 11_FC01; a customized shape will be built for 11_FC01 in a
scripting lab exercise.

9 Step Action
36 Open the Properties window for each inserted shape, select the Custom Properties tab
and enter the appropriate tagname in the Value field.
ATTENTION
One reason that a dynamic shape may not work

correctly is because the Custom Properties have been
left blank in the main display or mistyped.
37 Your completed T_100 display will look similar to the one shown below.
Add instrument (dashed) lines as shown in the graphic using the line and polyline tools
on the toolbar.
39 Open D_100 and select Edit > Insert Shape.

9 Step Action
40 Repeat the above insertion steps to add Loop.sha to your D_100 display.
Use the D_100 final lab example in the HMIWeb Lab Sequence section of your course
material for loop placement and tagname assignment.
41 Your display should resemble the one illustrated below.
42 Save D_100 in the abstract folder.
43 Open E_100 and select Edit > Insert Shape.
44 Repeat the above insertion steps to add Loop.sha to your E_100 display. Use the
E_100 final lab example in the HMIWeb Lab Sequence section of your course material
for loop placement and tagname assignment.
45 Your E_100 display should resemble the one shown below.
46 Save E_100 in the abstract folder.

9 Step Action
47 To test your displays, call T_100 in Station.

• Your graphic will look similar to the one shown below.
48 Position your cursor over the SP value of 11_FC02 and click to call the faceplate.

9 Step Action
49 If the mode is not AUTO, select AUTO from the faceplate’s MD drop-down box; then
enter 50 in the SP field to view the effect on the display.
50 Close the faceplate and select the mode drop-down box on your inserted loopshape.
Change the mode to MAN. Change the mode back to the “NORMAL” mode using the
combobox.

9 Step Action
51 To view or make changes from the Point Detail Display, double-click the SP or PV value
in your graphic.


R400: Use HMIWeb Display Builder Test mode

Configure HMIWeb Display Builder 'View in Station' Option
Objective
Given an Experion PKS R400 Server

• Launch HMIWeb Display Builder and verify the working of the option “View In Station”
Prerequisites
• HMIWeb Display Builder knowledge

• Knowledge Builder available
Introduction
In Experion PKS R400, HMIWeb Display Builder allows a user to test a HMIWeb Display before is
deployed on process.
A new option ‘View in Station’ is added within the File menu of HMIWeb Display Builder. When
the user selects this option, a Station instance will be launched and show the HMI display with the
live data will be seen. The Station application will also execute and test HMI scripts configured
within the display.

Procedure
9 Step Action
Generate HMIWeb display
1 Open HMIWeb Display Builder.

Navigate to D_100 display.
• Your display should be similar to the one shown below.
2 Select ToolsÆOptions.

9 Step Action
3 The Options window opens.

Select View in Station tab.

9 Step Action
4 Select the dropdown menu of the Connection to use for viewing in Station option.
Notice that the default.stn will be used; however you can also connect to other stations
built in your system.
Click OK
ATTENTION
New.stn is the preconfigured station file which will be

used specifically to test the display D_100 by using the
View In Station functionality.
5 Click the Save button to save the display D_100.

9 Step Action
6 Select FileÆ View In Station.
7 D_100 display gets open in the Default.stn station window.
8 Double-click the indicator to open the detail display.

9 Step Action
9 The detail display of the point 11_LC16 gets open

Notice the values of SP, PV and OP.
ATTENTION
SP, PV and OP values of the point 11_LC16 indicates

that the station is connected to the server and the live
data can be seen for the D_100 display.
10 Close the Default.stn Station window.


Topic: Dynamic Shapes in Hmiweb Display Builder

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Topic: Dynamic Shapes in Hmiweb Display Builder

Uploaded by

Copyright:

Available Formats

Topic: Dynamic Shapes in HMIWeb Display Builder

Create Complex Dynamic Shapes ......................................................................................................17

Create Dynamic Shapes for Analog Indicators ...................................................................................45

Create a Dynamic Shape for Loop Operation .....................................................................................79

R400: Use HMIWeb Display Builder Test mode .................................................................................99

Configure HMIWeb Display Builder 'View in Station' Option ...............................................................99

10/10/2011 Copyright © 2011 Honeywell International Inc. 1

2 Copyright © 2011 Honeywell International Inc. 10/10/2011

Create Simple Dynamic Shapes

If a shape has been changed after being inserted into

10/10/2011 Copyright © 2011 Honeywell International Inc. 3

Create simple dynamic shapes

1 Open HMIWeb Display Builder.

4 Copyright © 2011 Honeywell International Inc. 10/10/2011

Create 3 objects on the dynamic shape display:

10/10/2011 Copyright © 2011 Honeywell International Inc. 5

3 For the Type of breakpoint, select Discrete.

• Select silver (gray) for State0 and green for State1.

The states (State0=Stop and State1=Start) correspond

6 Copyright © 2011 Honeywell International Inc. 10/10/2011

4 Open the Properties window for the middle rectangle:

10/10/2011 Copyright © 2011 Honeywell International Inc. 7

5 Open the Properties window for the display.

Click the Add button and enter the following data:

If you position your cursor in the Custom Properties

• Close the Shape properties window.

8 Copyright © 2011 Honeywell International Inc. 10/10/2011

• When finished, close the Properties window for the rectangle.

Save the display as fans.sha (or ds_fans.sha) in your abstract folder:

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

7 Open your D_100 graphic in HMIWeb Display Builder.

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

8 The fans shape is randomly inserted into your display as shown.

10/10/2011 Copyright © 2011 Honeywell International Inc. 11

Save your D_100 display.

12 Copyright © 2011 Honeywell International Inc. 10/10/2011

12 Testing your graphic on Station:

10/10/2011 Copyright © 2011 Honeywell International Inc. 13

14 Click the OP combo box and select START.

If your point did not change state, as requested, look

14 Copyright © 2011 Honeywell International Inc. 10/10/2011

15 Re-call your D_100 graphic in Station:

16 Repeat the previous steps to test the other fans.

10/10/2011 Copyright © 2011 Honeywell International Inc. 15

This page was intentionally left blank.

16 Copyright © 2011 Honeywell International Inc. 10/10/2011

Create Complex Dynamic Shapes

• Build basic valve shapes.

• Change valve color when OPEN and CLOSED.

• Create dynamic shapes with an output indication bar.

• Create comboboxes to control a discrete valve.

Many of the drawing methods are similar to those used

10/10/2011 Copyright © 2011 Honeywell International Inc. 17

Creating Complex Dynamic Shapes

1 If not already opened, open HMIWeb Display Builder.

18 Copyright © 2011 Honeywell International Inc. 10/10/2011

Custom Properties give a dynamic shape flexibility –

10/10/2011 Copyright © 2011 Honeywell International Inc. 19

When finished, group the entire valve object.

20 Copyright © 2011 Honeywell International Inc. 10/10/2011

6 Right-click the grouped valve and select Property pages.

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

When Custom Properties are defined in a dynamic