Index | Prev | Next

Animate using static SVG images

This type of animation requires at least two SVG images, of identical size and shape. The animation is caused by alternately displaying one image and then the next. You can apply this animation to a Picture widget or Label.
Prerequisites:
  • A recent HTML5 compliant browser, for example: FireFox, Chrome, Opera, IE (v.10 or later) and Safari.
  • The svgBatik module (svgBatik.jar) must be in the Modules folder.

The following example uses the Picture widget and two arrow images, in one the arrow points up, in the other it points down.

Perform the following steps:
  1. In the station, create a new EnumWritable point to use as the data source for the animation.
  2. Set the range values for the Facets as follows:
    • 0 = Up
    • 1 = Down
  3. Right-click the component and select Views > New View to open a new Px view.
  4. Select PxViewer > Toggle View/Edit mode to switch to Edit mode.
  5. Open the bajaui palette, expand the Widgets folder and drag the Picture widget to the Px Editor canvas.
  6. Double-click the widget to open the Edit Properties window and click the Add Binding button (in the upper right corner), to add a value binding to the widget.
  7. In the Value Binding section of the Properties window, click on the ord property of the binding and click the selection icon (Image) to access the Component Chooser.
    1. In the Component Chooser, locate and select the out value of the EnumWritable data source created in step one, for example: station:|slot:/Drivers/Points/EnumWritable/out/value, and click OK.
  8. Open the kitPxN4svg palette, expand Piping folder and drag the DirectionArrowDown and DirectionArrowUp image files to the Px Editor canvas.
     NOTE: The kitPxN4svg and Piping folders are automatically generated under the station’s Files folder. 
  9. Double click on the Picture widget, Properties window opens.
  10. In the Properties window, click the selection icon to access the File Chooser.
    1. In the File Chooser, locate the added DirectionArrowUp image file (for example,file:^px/kitPxN4svg/Piping/Direction_Arrows/DirectionArrow_Up.svg)
  11. In the Picture widget section of the Properties window, right-click the image property and click Animate.
    1. In the Animate window, select the first facet of the EnumWritable and click Set and use the File Chooser to locate and select the first image file (for example, file:^px/kitPxN4svg/Piping/Direction_Arrows/DirectionArrow_Up.svg) to be displayed for facet value 0 and click OK.
    2. Select the second facet of the EnumWritable and click Set and use the File Chooser to locate and select the second image file (for example,file:^px/kitPxN4svg/Piping/Direction_Arrows/DirectionArrow_Down.svg) to be displayed for facet value 1 and click OK.
  12. Click Save to save these changes to your Px View.

The graphic image changes automatically when you set the Actions. The image displayed depends on whether the EnumWritable Action is set to Up or Down. For example, in View mode, right-click the displayed arrow image and select Actions > Set and change to Down:

Image

Additionally, providing an input to the EnumWritable using a control component, such as MultiVibrator in the kitControl palette, causes the animation to occur automatically. For example, drag a MultiVibrator component onto the wire sheet view for the EnumWritable and set the MultiVibrator Period property to 5 seconds (so that the out value changes from true to false every five seconds). In the wire sheet view, connect the MultiVibrator out value to the EnumWritable In :

Image

Switch to the Px Editor View mode to observe the animation.

Related Links

  • Animating graphics (data binding) (Parent Topic)

    • Index | Prev | Next