Manipulating SVG Images

AggreGate has comprehensive support for SVG (Scalable Vector Graphics) images. It includes features such as transparency, arbitrary geometry, filter effects (shadows, lighting effects, etc.) and animation. Any SVG image can be scaled, rotated and flipped without loosing its quality. A special Symbol Library provides a vast collection of SVG images with additional built-it functionality. These special images have dynamic properties for changing different visual aspects: color, lines thickness, animation etc.

This article shows how to manipulate SVG images and use them for creating interactive user interfaces. The tutorial will guide you to create a widget with two SVG components: a fan controlled by a button.

1. Creating a Widget

To create an empty widget double-click on the System Tree Widgets () node or choose its Create Widget () action in popup menu. In the opened window set Widget Name property to svgManipulation, and Widget Description to SVG Manipulation, click OK. This will bring you to the GUI Builder with an empty widget template.

2. Adding SVG images

First, set Layout property of the Root panel to Absolute layout to have more freedom in component positioning. We use the root panel for simplicity, but you can also use a separate panel as a container.

Drag the Vector Drawing component () from the component palette and drop it to the root panel of the widget work form:

Now load a file with the fan image from the Symbol Library: press Choose button in SVG File property, then locate and open the proper file in the dialog appeared.

Set the component's position and size properties: X Coordinate and Y Coordinate to 0, Width and Height to 500. This will make the fan to occupy full widget space.

Drag and drop another Vector Drawing component () from the component palette to the work form. Then load a button image file from the Symbol Library as described above. Resize it and move to the left bottom panel corner: set X Coordinate and Y Coordinate properties to 410, Width and Height properties to 90. Now we've got the fan with the button:

3. Renaming Components

Let's rename our components to easily identify them. Right-click on the component (or on the component's name in the Resources Tree) and choose a Rename item in the popup menu.

Call your components fan and button.

4. Animating the fan

First, make the button to turn the fan rotation on. The fan SVG image has the State property that turns rotation animation on and off. Let's bind this property to trigger fan animation state upon clicking the button. To perform that, right-click on the fan's State property in the Properties Editor and choose a Bind Property popup menu item, the Bind Property dialog should appear.

The Target property is already set to form/fan:state. Click [...] button inside the Expression field to edit the expression text interactively in the Expression Builder. First, find the fan State property in the Components tree of the Expression Builder, double-click it to insert a reference. Second, append == 'on' ? 'off' : 'on' to the expression, click OK to accept the Expression Builder dialog. The resulting expression will return inversion of the fan State property value when evaluated.

Next, switch to the Activator field and click [...] to open an Activator dialog. Select a Widget Event tab, then set a Context field to button and an Event to mousePressed. Click OK to confirm. This activator will run the binding every time a click on the button is performed.

Check that On Event property is marked in the Bind Property dialog. Make sure that all properties have values as shown on the screenshot and click OK:

5. Animating the button

Now let's allow the button to light up in green when the fan is turned on. Right-click on the button's Color property in the Properties Editor and choose a Bind Property popup menu item. Set binding properties the same way as above to meet the values shown on the below screenshot and click OK:

6. Saving and running the widget

Click Done () to finish editing and save the widget. SVG Manipulation widget context () should appear in the System Tree. To see the widget in action choose Launch Widget () action from a widget popup menu.

Here you are! You can press the button and see the fan in action.

In this tutorial we showed you how to create interactive components. Now you can combine controls and use them for building complex user interfaces.