This lesson is part of the Components and Property Binding course. You can browse the rest of the lessons below.


Autoplay Off
Take topic challenge


Learn how to resize, rotate, and move components on a screen. SVG images have X, Y, Width, Height, and Angle properties to make animation easy.

Video recorded using: Ignition 7.7


(open in window)

[00:00] It is easy to animate objects in Ignition, by rotating them or changing the size and position dynamically. We typically do this with vector graphics, so let's say for example I draw an arrow on my screen. Any vector graphic has some properties down the bottom-left that we can modify, we have an X, Y, width, height and angle. The angle allows us to rotate it, we can change the width and height, and we can move that component around the screen. All we have to do is bind these properties to a tag or to an expression to get them to change dynamically. So for example, on my arrow, if I want to move it on the screen, I can actually bind the X and Y. So here I have a couple of tags in my Tag Browser, I could take Location X, drag it down to the X, and you can start seeing it actually move on my screen. If I take Location Y tag and drag it down to the Y, you can see now it's changing both in X and in Y. We can do the exact same thing for the width and height. I can take a square, put that onto Window, and I can bind the Width here to Location X, let's say, and the Height to Location Y, and you'll see that now the size is actually changing for that component dynamically. The third thing we can do is rotate objects on a screen, so we can use the Angle property of the symbol graphics, like for example, I draw another arrow, and then I can go down here to my Angle, I can actually bind that to something like, again if I take Location X, put it on to the Angle, I'll start seeing it rotate here. Now when we're rotating objects, rotation's from 0 to 360 degrees, typically we don't just bind to a tag, typically we have in a PLC is like a status, like 1 or 0 saying we're on or off. So like for example, a fan, the fan's on, we want to see it rotating, if it's off, we don't want to see it rotating. So let's say go up here to Tools and Symbol Factory and drag in a fan object, which is this one we have here, this is a good graphic here. The problem is, you can see there's a lot of stuff that make up this particular graphic, what I want to do is actually un-group this, I want to remove some of the pieces of it, so I'm going to delete some of the back parts, like the circle and all that, just keep the actual fan here. I'm going to select the fan, right click and group it back together so I have one graphic here. Now in order to rotate this of course, I'm going to bind the angle property to something, I don't have a tag here, all I have is a tag that says I'm 1 or 0, on or off. So we can do is actually go and use a component we have in Ignition, under the Miscellaneous tab called the Timer. A timer is an invisible component that run time, we don't see it, it allows us to go through a set of values. So here for example, I can set the delay for the timer, how often I want this thing to run, at 250 milliseconds, set the initial delay to 0, and then at the bottom we can figure out the Step by and the Bound. So I'm going to go, the Bound's going to be 360 degrees, the Step by here is, let's say we're going to go by 30 degrees every time. And then the value will automatically increment up for us, up to 360 when the timer's running. So if I set this to Running, you'll see the value over here stepping up. So, what we want to do of course, is bind our fan's status to the Running property. So, as you can see, I just drag it down, now you can see it will be running based on this tag here. Then we go over here to our fan and we actually then bind the Angle property to a property on the screen, which is the timer's Value. By doing so, when the timer's running, the fan will be rotating. And so that's all governed by the Fan Status tag here, so if I set this to 0, you'll see that it'll stop rotating, set it back to 1 and it'll be rotating again. So, we can really setup any kind of animation that we want on these components. A component has to have a property, X, Y, Width, Height or Angle, in order to be able to do this.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.


Share this video