You will now create a simple animated panel containing graphical objects. You will experiment with location and appearance connections.
The final panel your creating will look like the figure on page 8-3.
Configuring Location and Appearance Connections
1 Select the Rectangle object from the toolbin and drag it onto the
panel and place it in the upper left corner. Make the rectangle stretch across the panel. Refer to the figure on page 8-3.
4 Select each property from the Appearance menu and configure the
settings as listed in the table below.
You have now configured an appearance animation. When the value at cirapp1tag goes high, the appearance animation is applied. The ellipse object will then change color from it’s present state to Red.
5 With the Ellipse object still selected, click the left arrow located in
the upper left corner of the menu.
The Ellipse object menu appears. From this menu, select another animation as described in the following steps.
6 Select Animations -> New -> Location.
A location animation is created for the Ellipse object. The menu displays properties associated with a location connection.
7 Select each property from the Location menu and configure the
settings as listed in the table below.
Notice that there are nodes created for each point on the location path. The number next to each node represents the location of the graphic object based on the value read from the cirloc1tag address.
8 Select the node associated with the End Value (150) and stretch the
node so that it ends at the end of the rectangle.
Make sure you select directly on the node or you will return to the
Ellipse Appearance
Properties Setting
Name cirapp1
Output Tag cirapp1tag
Color1 Select Red from the Color1 palette.
Ellipse Location
Properties Setting
Name cirloc1
Output Tag cirloc1tag
Start Value 0
End Value 150
then select Animations -> cirloc1, to view the animation properties.
9 Select the Button and Slider tools from the toolbin and drag them
onto the panel. Place them below the Rectangle/Ellipse objects.
10 Select each property from the Button and Slider menus and
configure the settings as listed in the tables below.
Testing the Graphics1 Panel in Run Mode
Once the panel has been developed you can now test it in runtime. You can quickly enter test runtime to test the functionality of your application.
1 Select the Test Runtime icon in the Designer.
Button Properties Setting
Type Momentary
Values - Switch Input Values - Lens Output
cirapp1tag cirapp1tag Appearance - Off Lens -
Edit Text
Appearance - Off Lens - Font Size
Appearance - Off Lens - Apply To All
Cir App 10 Select it
Slider Properties Setting
Values - Slide Input Values - Slide Output Values - Min Value Values - Max Value
cirloc1tag cirloc1tag 0
4 Select the Exit Run Mode button and you are returned to the
Designer.
Adding another Location Animation
You will now add another Ellipse object with a location animation.
1 Select the Ellipse object from the toolbin and drag it onto the panel.
Place the Ellipse below the rectangle. Refer to the figure on page 8- 3.
An Ellipse object is created on the panel.
2 With the Ellipse object selected, select Animations -> New ->
Location.
A location animation is created for the Ellipse object. The menu displays properties associated with a location connection.
3 With the Ellipse object selected, press and hold the Ctrl+Shift key
combination then click along the location path to add additional nodes.
Each time you click the location path, a node is added to the path with a number displayed above each node. This number represents the location of the graphic object based on the value read from the
cirloc1tag address. Add as many nodes as you wish. There is no
specific path you need to create, be creative!
You must continue to press and hold the Ctrl+Shift key combination in order to add the nodes to the path.
4 Release the Ctrl+Shift key combination after you have added all the
nodes you wish.
5 After the path is created, you can click a node and move it around
Refer to the figure below for a sample path you may create.
6 Select each property from the Location menu and configure the
settings as listed in the table below.
Selecting a closed path will complete the location path, bringing the object back to the starting node upon reaching the maximum value.
Testing the Graphics1 Panel with an added Location Animation
1 Select the Test Runtime icon in the Designer.
You enter test runtime.
2 Select the Slider and move the knob position up and down the
Ellipse Location
Properties Setting
Name cir2loc1
Output Tag cirloc1tag (same address as the first Ellipse location animation)
Start Value 0
End Value 150
Path Roundness 100 - Notice that the nodes become rounded.
Closed Path Select it - Notice that the path end node overlaps the path