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:

Target platform is running NiagaraAX 3.8
A recent HTML5 compliant browser (issued 2011 or later), for example: FireFox, Chrome, Opera, IE (v.10 or later) and Safari.
svgBatik module (svgBatik.jar) must be in the Modules folder.
SVG images must be located in the station file system

The following example uses the Picture widget and two arrow images, in one the arrow points up, in the other it points down. For more information, see About SVG support.

NOTE: Prior to performing this procedure, copy any SVG images you intend to use to the station file system.

Animate a Picture widget using two static SVG images

In the station, create a new EnumWritable to use as the data source for the animation.
Set the range values for the Facets as follows:
- 0 = Up
- 1 = Down
Right-click the component and select Views > New View to open a new Px view.
Click PxViewer > Toggle View/Edit mode to switch to Edit mode.
In the Palette side bar, open the bajaui palette, expand the Widgets folder and drag the Picture widget to the Px Editor canvas
Double-click the widget to open the Edit Properties dialog and click the Add Binding button (in the upper right corner), to add a value binding to the widget.
In the Value Binding section of the Properties dialog box, click on the ORD property of the binding and click the selection icon () to access the Component Chooser.
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
In the Picture widget section of the Properties dialog, right-click the image property and click Animate.
In the Animate dialog, 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, !stations/PxTest2/Files/px/arrowUp.svg) to be displayed for facet value “0” and click OK.
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, !stations/PxTest2/Files/px/arrowDown.svg) to be displayed for facet value “1” and click OK
Click Save to save these changes to your Px View.
Switch to View mode (click PxEditor > Toggle View/Edit mode).
In the canvas pane, right-click the displayed arrow image, select Actions > Set and change to Down as shown here:

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.

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 and drop 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” as shown here:

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

Animate using static SVG images

Related Links