HMI

Module 11
Animations - Basics
Contents

1 Introduction 3
1.1 PcVue version 3
1.2 In this module you will learn 3
1.3 Files used in this module 3
1.4 Third party software used in this module 3

2 This feature in PcVue architecture 4

3 Basics 5
3.1 Animation concept 5
3.2 Editing an animation 6
3.2.1 Create an animation 6
3.2.2 Modify an animation 7
3.2.3 Delete an animation 7
3.3 Basic animations 8
3.3.1 Color – Bit 8
3.3.2 Send – Bit 9
3.3.3 Text – Display register 11
3.3.4 Send – Register 12
3.3.5 Use different register display formats 15
3.3.6 Text – Text 18
3.3.7 Color – Bargraph 19
3.3.8 Link – Open 21
3.3.9 Link – Close 21

4 Summing-up 23

V12 Module 11 - Animations - Basics Page 2/23

1 Introduction
1.1 PcVue version
This module is for PcVue version 12.

1.2 In this module you will learn

What an animation is,
How to create an animation,
How to edit or delete an animation,
About the most commonly used animations.

1.3 Files used in this module

The PcVue project at the end of Module 10 Basic Graphical Object basics.

1.4 Third party software used in this module

Because we are starting to animate the graphical objects we need to use a simple
simulator which changes the values of variables.
A simulator, in the form of a User Manager DLL is supplied with PcVue. We just need
to enable and configure it using the following procedure.
a. Shut down PcVue.
b. To enable the simulator, locate the file svrmgrSimulation_UsrMgr.dat in the
Supervisor’s bin folder and rename it to UsrMgr.dat
c. To configure the simulator copy the file SvMgrSimulation.xml from Module
11\Projects to the C folder of your project.
d. Re-start PcVue.

V12 Module 11 - Animations - Basics Page 3/23

2 This feature in PcVue architecture

Figure 1

V12 Module 11 - Animations - Basics Page 4/23

3 Basics
3.1 Animation concept
Animation is the process by which a drawing element is given the capability of
interacting with the operator visually, mechanically (using the keyboard and mouse),
or both.
There are three types of animation:
Property animation: To change one or several properties of a graphical object
according the value of one or several variables. Property animation can be
broken down into the following categories:
 Color: Change the colors of a graphical object. For example change the
background according to the value of a bit variable.
 Text: Change the characters displayed in a text object. For example
display the value of a register variable.
 Symbols: Exchange a symbol (not covered by this module).
 Position: Change the position of a graphical object. For example move an
object according to the value of a register variable.
 Visibility: Change the visibility of a graphical object. For example show or
hide an image according to the value of a bit variable.
Control animation: To enable the operator to take an action such as changing
the value of a variable, opening or closing a mimic etc. Control animation can
be broken down into the following categories:
 Send: Send a control value by clicking the graphical object. For example
set the value of a register variable that represents a set point.
 Run: Create an action such as running a script or an external application.
For example run Microsoft Excel.
 Link: Open or close a mimic.
 Security: Execute a security related action. For example Log In.
You can indicate the drawing objects that have been configured
with control animations by selecting the command Display /
Show commands. PcVue will display the following icon
adjacent to each drawing object.
Composite animations: the Viewers (Trend, Log and Alarm) and Form Controls.
This module will not cover these animations.

V12 Module 11 - Animations - Basics Page 5/23

3.2 Editing an animation
3.2.1 Create an animation
To create an animation:
Step 1. Select the graphical object you want to animate.
Step 2. Select Animate in the menu bar or right-click / Animate.
Step 3. Select the category.

Figure 2

Step 4. And then the required animation.

Figure 3

Step 5. PcVue opens the graphical object’s Properties dialog and adds to it a
new tab containing the animation’s properties. Enter the Animation properties
and click the OK button.

V12 Module 11 - Animations - Basics Page 6/23

 Figure 4

3.2.2 Modify an animation

To modify an animation:
Step 1. Open the Graphical object’s Properties by double-clicking.
A usual mistake when editing an animation is to open the
animation menu again and click on the same animation. By
doing that you will add a new animation and not edit the current
one. We will cover this feature in the Advanced module.
Step 2. Select the tab for the animation.
Step 3. Modify the animation and click the OK button.

3.2.3 Delete an animation

To delete an animation:
Step 1. Open the Graphical object’s properties.
Step 2. Select the Animation tab.
Step 3. Click the Delete button (trashcan) and click the OK button.

Figure 5

V12 Module 11 - Animations - Basics Page 7/23

3.3 Basic animations
3.3.1 Color – Bit
You use this animation to change the color of a graphical object according the values
of a bit variable.

Figure 6

[A]: Variable used for animation. Click the button to select the variable.
[B]: Background colors. You can select a color for each value and for the NS state.
[C]: Line colors. You can select a color for each value and for the NS state.

The color used to represent the NS state should be the same for
all animations of the project. Then the operator is warned
quickly (because it’s visual) when information is not valid.

V12 Module 11 - Animations - Basics Page 8/23

3.3.2 Send – Bit
You use this animation to set (force) a bit variable.

Figure 7

[A]: Bit variable to send. Click the button to select the variable.
[B]: Value to send.
Reversed: Send the reverse of the current value.
To 0: Always send to 0.
To 1: Always send to 1.
Variable: Send the same value as that of another bit variable.
[C]: Sending mode:
Direct: Send the value without any confirmation.
Label: Send the value with confirmation.
Handled: Send the value while the mouse button is clicked and held down.
When the button is released the value reverts to the original.
Pulse: Send the value for a time (configurable period after which it reverts to its
original value).
Accelerator: Keyboard shortcut. Click on this field and type a key combination.
At run-time the animation is executed when the operator uses that
combination. This feature is also available in other animations.

We tend to use the word “Send” instead of “Set” as the variable will
nearly always be sent to an equipment (PLC etc.)

V12 Module 11 - Animations - Basics Page 9/23

 Exercise 1.
Manipulate the basic Bit animations.

1. Create a new mimic: Animations.

Add a rectangle and a text button “Light Switch”.
Animate these objects as described in the following table:

Rectangle Text Button

Animation Color / Bit Send / Bit

Variable BUILDING.FLOOR_01.ROOM_001.LT.ON BUILDING.FLOOR_01.ROOM_001.LT.CMD

Properties Default Default

The Simulator you have installed must set the bit

“BUILDING.FLOOR_01.ROOM_001.LT.ON” with the same value as the
bit “BUILDING.FLOOR_01.ROOM_001.LT.CMD”.
Switch to run-time mode and test by clicking the button.
Now modify these animations as follows:

Rectangle Text Button

Properties Bit off > Red Command > Reversed

Bit on > Green Sending mode > Label
NS > Purple

2. For our project:

Open the mimic Floor1.
Add some graphical objects to display the Light state and control it.

V12 Module 11 - Animations - Basics Page 10/23

3.3.3 Text – Display register
You use this animation to display the value of a register variable.

Figure 8

[A]: Register variable to display. Click the button to select the variable.
[B]: Property to display. You can select the Value (default), Unit, Minimum or
Maximum.
[C]: Format in which the value is displayed. The format feature is explained in the
chapter 3.3.5.

V12 Module 11 - Animations - Basics Page 11/23

3.3.4 Send – Register
You use this animation to set a register variable.

Figure 9

[A]: Register variable to send. Click the button to select the variable.
[B]: Options to display the register value using the same graphical object.
[C]: Sending mode:
Keyboard: Enter the value using the keyboard.
Step: Increase/decrease the value on each click.
Keypad: Enter the value using the keypad displayed on the screen. Used mostly
for touch screens.
Default: Send a particular pre-configured value.

V12 Module 11 - Animations - Basics Page 12/23

 Exercise 2.
Manipulate the basic register animations.

1. In the “Animations” mimic add a text “XXXX” and a text button “Set
Temperature”.
Animate these objects as described in the following table:

Rectangle Text Button

Animation Text / Display register Send / Register

Variable BUILDING.FLOOR_01.ROOM_001.AC.TEMP BUILDING.FLOOR_01.ROOM_001.AC.

SETPOINT

Properties Default Default

The Simulator you have installed must set the register

“BUILDING.FLOOR_01.ROOM_001.AC.TEMP” with the same value as
the register “BUILDING.FLOOR_01.ROOM_001.AC.SETPOINT”.
Switch to run-time mode and test by clicking the button.
Now modify these animations as follows:

Rectangle Text Button

Properties Display -> Unit Display value -> Not selected.

Sending mode: Keypad

2. For our project:

Open the mimic Floor1.
Add some graphical objects to display and control the temperature.

V12 Module 11 - Animations - Basics Page 13/23

 Add a rectangle and try to animate it to display a register
value. What happened? Why?

V12 Module 11 - Animations - Basics Page 14/23

3.3.5 Use different register display formats
When you are using an animation which is displaying a register value you can select
the display format.

Figure 10

Auto (Default): The format displayed is the one configured in the variable
properties.
The form of the format string is ##.##, where the number of #'s specifies the
number of significant figures before and after the decimal point. The displayed
value is automatically rounded up or down as necessary. Other characters may
also be used in the format string to signify special options, for example #u to
display the units text.
If a format is not specified, then the display of the variable will attempt to show
its exact value up to 100 million (100000000) after which the value will be
displayed in exponential form.

Figure 11

V12 Module 11 - Animations - Basics Page 15/23

 Custom...: You can customize the format using the Custom Display Format
dialog.

Figure 12

Some format examples are available in the online Help in:

Developing the HMI / Animation / Using custom display formats/
Format Examples.

V12 Module 11 - Animations - Basics Page 16/23

 Exercise 3.
Copy/Paste the animated Text several times.
Change the format as follows:

Text

##.00

00.00

#b

#X

dd/mm/yyy hh:nn:ss@s

V12 Module 11 - Animations - Basics Page 17/23

3.3.6 Text – Text
You must use this animation when you want to display a text variable.

Figure 13

[A]: Text variable to display. Click the button to select the variable.

Exercise 4.
Add a Text “Time”.
Animate it as follows:

Text

Animation Text / Text

Variable TIME

Properties Default

V12 Module 11 - Animations - Basics Page 18/23

3.3.7 Color – Bargraph
You use this animation to display a register variable as a Bar graph.

Figure 14

[A]: Register variable to be used by the bargraph.

[B]: Colors for the bar and the background.
[C]: Bounds (range) of the variable corresponding to an empty and full Bargraph.
Auto (default): Use the minimum or maximum defined in the variable
properties.

: Type the value you want to use as minimum or maximum.

: Use the value of another register variable as the minimum or maximum.
[D]: Direction of fill for the bargraph.

V12 Module 11 - Animations - Basics Page 19/23

 Exercise 5.
Add a rectangle.
Animate it as follows:
Animate it using the Color / Bargraph animation.

Rectangle

Animation Color / Bargraph

Variable BUILDING.FLOOR_01.ROOM_001.AC.TEMP

Properties Default

V12 Module 11 - Animations - Basics Page 20/23

3.3.8 Link – Open
You use this animation to open another mimic.

Figure 15

[A]: Mimic: Click the button to select the mimic to open.

[B]: Caller mimic behavior options.
Keep: The current mimic remains open.
Close: The current mimic is closed.

3.3.9 Link – Close

You use this animation to close a mimic.

Figure 16

[A]: Mimic: Click the button to select the mimic to close.

V12 Module 11 - Animations - Basics Page 21/23

 Exercise 6.
Add two text buttons: “Open a mimic” and “Close a
mimic”.
Animate these objects as follows:

Text button “Open a mimic” Text button “Close a mimic”

Animation Link / Open Link / Close

Mimic Homepage Homepage

Properties Default Default

Switch to run-time mode and try it out.

Edit the Text button “Open a mimic” and select Close

option. What happened? Why?

V12 Module 11 - Animations - Basics Page 22/23

4 Summing-up
An animation is just an extra tab added to the Graphical Object properties.
You can easily configure an animation to change the color, open a mimic or set
a value.

V12 Module 11 - Animations - Basics Page 23/23