Introduction

CX-Supervisor has the ability to perform graphical animations on objects on screen based on the values of points. This has always been possible on the native CX-Supervisor objects but not on imported vector files.

CX-Supervisor V3 now includes functionality to convert a WMF into CX-Supervisor objects which allow it to be animated. This means you don't need to be a graphical designer in CX-Supervisor to create great looking animated objects.

This article takes you through the steps to animate part of a WMF picture.

Adding the Vector Image

You can add a vector image from the graphics library if there is something suitable for you.

 

You can also create your own vector graphics or download them from the internet and use them.

For the purpose of this article we'll be using an image that has been downloaded from the Microsoft Office clipart website:

office.microsoft.com/en-gb/clipart/default.aspx

Once you have a WMF file on your disk you can load it into the picture object on a CX-Supervisor page:

You now have a WMF file on your page. This allows resizing in Development o without loss of quality.

Converting the Image into CX-Supervisor Objects

With CX-Supervisor V3 you can now convert the image into multiple CX-Supervisor Objects by right clicking the image and choosing 'Convert To CX-Supervisor Objects':

The image will now be converted into a 'group' of CX-Supervisor objects. At this point you can perform animations on this group as you wish. However now we have a group it is possible to choose to modify or rotate just part of the image.

Right click the image (now a group) and choose the ungroup option:

 Animating Part of the Image

You now have multiple objects on the page which you can select, modify and animate as you wish. For this example we'll animate the cog on the right. First of all we want to select all the objects in this area, the easiest way is to use the mouse to draw around all the objects in that area, when you release all the objects will be selected.

You can now group these items using the right click menu:

Note that on some images there is a shadow or some part of the image which may not be selected by this method. TIP: Try dragging this part of the image away from the rest of the image to ensure you have everything you expected - remember you can 'Undo' the drag!

Now would be a good time to save the page into the project if you haven't already.

We now have a group, we can add an action to it by right clicking on the group in the workspace and choosing 'Add Action' :

This displays all the actions you can add for this particular group. For this example we'll add Rotate:

This then presents you with all the rotate animation options. We will rotate based on the System Point $Millisecond, this could be a PLC point or even a calculation based on a number of points.

Now this animation is added we are finished, the right cog now has a rotate action:

When this application is run, the cog will now rotate: