[00:00] There are many ways to manipulate a component on a window in Ignition. The first is to do it one component at a time. So here, for example, I click on the tank, and I can easily click and hold down and move that component around the window, thus changing the position of that component. We can also use our arrow keys. I can actually just click on the component and then use my down arrow key to move it down by one pixel at a time. To the right, I can move by one pixel at a time, so any of the arrow keys there. I can also hold down Alt while I use the arrow keys, which will actually then move it by 10 pixels at a time. These are very useful features when you're trying to align two components perfectly together. Not only can we manipulate one component, we can actually select multiple components. So I can select the tank and I can hold down Control and select the meter, and I can easily click and move them around together, as well as I can use my arrow keys here to move 'em up or move 'em down. Not only can we change the position of the components, but we can also change the size. So I can actually click on a component and outside, there are handles here, resize handles that we can use. So I'll use the ones to the right, it'll actually allow me change the width, if I use the one at the bottom or the top it could change the height, if I use the ones in the corners, it allows me to actually change the width and the height at the same time.

[01:10] We can do the same thing with our keys. If I click and hold down, if I click on the component, I can use the Shift key, hold down the Shift, and then use the arrows to actually change the size by one pixel at a time to making it bigger or smaller. If I hold down Shift and Alt at the same time, I actually do it by 10 pixels at a time. So very similar to moving, Shift allows us to actually resize it. I can do the same thing with multiple components, I can click on the tank and the meter, again I can make 'em both bigger and smaller, as well as using my keys here using Shift, Alt and down allows me to make those bigger by 10 pixels at a time. The third way we can actually manipulate the size and position of these components is by right clicking and going to the size and position area here. Here I can actually specify the x, y, width and height in pixels, giving it the exact size that we want on the screen. The last thing we can do with these components to align them, to change the x and y, is to use the alignment tools that we have up here in the top.

[02:04] So, for example, I can click on all of my buttons here, and, at the top, I have some alignment buttons here, I can actually align them to the left edge, to the right edge, I can actually center them if I want to. And there's also this tool here, which is really handy, which is to align two or more components in a stack or in a row. If I align as stack, I can align as stack and I can normalize the widths if I want to. If I do this, align stack and normalize, I can specify the padding between the components, maybe like five pixels or 10 pixels. If I press OK, you'll see that they're not only aligned perfectly vertical there, the widths are also normalized and we can move 'em together anywhere we want. I can then, if I want to make them smaller, I can easily do that using the manipulation tools that we have in the designer. Lastly, certain components such as SVGs, vector graphics and symbol vector graphics can be rotated. So here, for example, I have a motor, I can click on it once to then move or make the component bigger or smaller. If I click on it twice, it actually puts rotate handles around the outside and here I can actually rotate that component on the screen very easily.