Programa de intervención

You will now create a second graphics panel to continue experimenting with additional animation connections.

Configuring the panel navigation buttons

You must first create panel navigation buttons on the Graphics2 panel.

1 With the Graphics1 panel in the project workspace, select both the

Exit and Go To Panel buttons.

2 Select Copy, go to the panel Graphics2, select Paste.

Both the Exit and Go To Panel buttons are pasted onto the Graphics2 panel.

3 Select the Go To Panel button, select Values -> Panel ->

Graphics1.

You modified the Go To Panel configuration so that during runtime operation, selecting this button will take you to the Graphics1 panel.

Configuring Size and Appearance Connections

The final panel you will create looks similar to the graphic shown below.

You will use rectangle objects to create tanks and tubing between the tanks. A Slider and Button tool are used to control the flow of fluid between the tanks and to open and close the tube.

In addition, a Polygon will be added to the panel and will contain a rotation animation connection. A second Slider tool will be used to control the

1 Select the Rectangle object from the toolbin and drag onto the

panel.

2 Select Style -> Thick Border from the menu.

3 Select another Rectangle object from the toolbin and drag onto the

panel, place the object inside the Rectangle you just created.

4 Resize the inner rectangle so that it fills up the majority of the outer

rectangle space. Refer to the figure on page 8-13.

5 With the “inner” rectangle selected, select Color 1 -> Light Blue

from the menu.

6 With the “inner” rectangle selected, click Animations -> New ->

Size and configure the settings as listed in the table below.

7 Select both the “outer” and “inner” rectangles by holding down the

Ctrl key as you select them. Rectangle Size

Properties Setting

Name tank1size

Output Tag tank1sizetag

Start Value 0

End Value 150

Direction Select the arrow pointing up. The inner rectangle will be selected.

Move the highlighted point (white colored) down. This is the size of the rectangle at the End Value, as if the tank were almost empty.

You will change the sizing direction of this rectangle, leaving all other properties the same as the first tank. Therefore, when the left tank is emptying, the right tank is filling up.

12 Click Animations -> tank1size and configure the settings as listed

in the table below.

Now you will add a rectangle object and create the tubing between the two tanks. Refer to the figure on page 8-13 for a view of the panel.

13 Select a rectangle from the toolbin and place it on the panel. Move

the rectangle and resize it so that it appears to connect between the two tanks.

14 With the rectangle connecting the two tanks selected, click

Animations -> New -> Appearance and configure the settings as

listed in the table below.

Rectangle Size

Properties Setting

Name tank1size

Output Tag tank1sizetag

Start Value 0

End Value 150

Direction Select the arrow pointing up. The inner rectangle will be selected.

Move the highlighted point (white colored) up. This is the size of the rectangle at the End Value, as if the tank were almost full.

Rectangle Appearance

Properties Setting

Now you will add a Slider to control the tank fill and a button to control the valve.

15 Select the Slider and Button tools and drag them onto the panel.

Position the Slider and Button both below the tank objects.

16 Select each property from the Button and Slider menus and

configure the settings as listed in the tables below.

Testing the Graphics2 Panel in Run Mode

1 Select the Test Runtime icon in the Designer.

You enter test runtime.

2 Select the Open Value button.

The rectangle connecting the two tanks changes color.

3 Select the Slider and move the knob position up and down the

Slider tool.

As you move the knob, the data changes at the tank1sizetag which

Button Properties Setting

Type Maintained

Values - Switch Input Values - Lens Output

valveopentag valveopentag Appearance - Off Lens -

Edit Text

Appearance - Off Lens - Font Size

Appearance - Off Lens - Apply To All

Open Valve 10

Select it

Slider Properties Setting

Values - Slide Input Values - Slide Output Values - Min Value Values - Max Value

tank1sizetag tank1sizetag 0

1 Select a polygon from the toolbin and place it on the panel. Move the

polygon so that it is to the right of the Slider and Button tools. Refer to the figure on page 8-13.

2 Select the polygon and delete some of its points so that it appears as

a pointed object.

3 With the Polygon selected, click Animations -> New -> Rotation

and configure the settings as listed in the table below.

4 Click off the Polygon, then reselect it to display the Polygon menu in

order to apply the transparency animation.

5 With the Polygon selected, click Animations -> New ->

Transparency and configure the settings as listed in the table

below.

Now you will add a Slider to control the rotation and transparency of the polygon.

6 Select the Slider tool and drag it onto the panel. Position the Slider

next to the polygon object.

7 Select the property from the Slider menu and configure the settings

as listed in the table below.

Polygon Rotation

Properties Setting

Name polyrot

Output Tag polyrottag

Start Value 0 End Value 150 Direction Clockwise Polygon Transparency Properties Setting Name polytrans

Output Tag polyrottag - (you are using the same tag to both rotate and cause the

object to turn transparent)

Start Value 0

End Value 150

You are now ready to perform the final test of the Graphics2 panel.

Final Test of the Graphics2 Panel

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

Slider tool.

As you move the knob, the data changes at the polyrottag which causes the Polygon to rotate in a clockwise direction at the same time that it turns transparent.

3 Select the Exit button and you are returned to the Designer.

This concludes the Graphics animation tutorial.

Slider Properties Setting

Values - Slide Input Values - Slide Output Values - Min Value Values - Max Value

polyrottag polyrottag 0