How do I animate a conveyor system on one screen? I have the AutoCad file opended in Illustrator and can save it to a SVG format, but I don’t see anywhere in ignition that will allow you to import a SVG file to be animated. I have been trying to use paintable canvas, but there is little documentation as to how this works. Please help!!!
Thanks,
Ronnie
Right now we don’t have the ability to import SVGs into Ignition. We are currently working on a drawing interface in Ignition that is based on SVG. In the meantime, you can import any png, gif or jpg image into Ignition and display them on the screen using the image component in the display tab of the component palette.
As far as animation goes you can import animated gifs into Ignition. The image component does support rotation by altering the rotation property in the runtime. For example, you can bring a timer component into the window from the misc tab and set the delay to 200ms, step by to 20 and bound to 380. Once you press the running checkbox (on the timer component) you will see the value increase by 20 up to 360. You can then bind the rotation property of the image to the value property of the timer and the image will rotate nicely in the client. You can of course bind the running checkbox of the timer to a tag or expression.
Besides basic rotation you can alter a components size and position dynamically in the client by using two scripting functions:
system.gui.resizeComponent
system.gui.moveComponent
The best way to use these two scripting functions is again to use a timer component. You can add a timer component and set the properties to whatever you would like. When the value property changes it fires a propertyChange event on the component that we can respond to. This way we can use the timer component to move or resize a component. Right click on the timer and select Event Handlers… There select the propertyChange event and add the following script to the script editor tab:if event.propertyName == "value":
value = event.newValue
system.gui.moveComponent(event.source.parent.getComponent('Image'), 650 + value, 23)You will see that we are just calling the moveComponent scripting function moving the component called “Image” on the screen to the new x and y. You can set the x and y to whatever you would like.
Basically, you can manipulate any property on a component to change the way it looks and behaves, for example the rotation property. You can also dynamically move and resize components using the scripting functions. Hope this helps.