[00:00] In this lesson, we'll demonstrate several different ways of manipulating components in Ignition. By manipulating, we mean performing any of the following actions, moving resizing and rotating components. We'll start out with this Vision window populated with several components. First, there are several ways of moving a single component. Let's select this cylindrical tank by clicking on it. Then by holding our mouse down, we can drag it and change its position on the screen. We can also use the arrow keys to move a component. While the tank is still selected. We can change its position by one pixel at a time by using the up, down, left, and right arrow keys, or we can change its position by 10 pixels at a time by holding down the Alt key and using the same up, down, left, and right arrow keys. We can also move around multiple components at a time as one group. Let's use Ctrl click to select both the cylindrical tank and the Meter components.

[01:10] Then as before, we can move both components together by dragging them. Rr move them one pixel at a time by using the up, down, left, and right arrow keys. Or move them 10 pixels at a time by holding down the Alt key, then using the up, down, left, and right arrow keys. Next, let's see how we can resize a single component. If we select the Tank component, it now shows resize handles around the perimeter. We can change to the width by clicking and dragging the left or right handles, or height by clicking and dragging the top or bottom handles, or we can change the width and height proportionally at the same time by clicking and dragging one of the corner handles. And similar to before, we can also use the arrow keys to resize a component. If we hold down the Shift key, we change the height by one pixel by using the up or down arrow keys, or the width by one pixel by using the left or right arrow keys.

[02:19] Or if we hold down the Shift and Alt keys, we change the height by 10 pixels by using the up or down arrow keys, or the width by 10 pixels by using the left or the right arrow keys. And similar to before, we can also resize multiple components at the same time. We will Ctrl click to select both the Tank and the Meter components. We can change the widths by clicking and dragging the left or right handles, or the heights by clicking and dragging the top or bottom handles, or the width and height proportionally by clicking and dragging one of the corner handles. And like before, we can use the arrow keys to resize multiple components at a time.

[03:10] If we hold down the Shift key, we change the heights by one pixel by using the up or down arrow keys, or the widths by one pixel by using the left or right arrow keys. Or if we hold down both the Shift and the Alt keys, we change the height by 10 pixels by using the up or down arrow keys, or the width by 10 pixels by using the left or right arrow keys. Another way to achieve precise placement and sizing is by right clicking on a component and selecting its Size & Position dialog. Here we are prompted to enter the position and/or the size in pixel units. Two things to note about the position. It represents the component's upper left corner, and it's measured from the 0,0 origin at the upper left corner of the window, then X and Y are positive downward and to the right.

[04:06] Let's say we want our tanks upper left corner to be placed exactly at the 50 50 coordinates, and we want it to have a width of 200 and a height of 300 pixels. When we click OK, we see that our tank is placed exactly as specified, and sized accordingly. Another useful manipulation of components involves a aligning them in a stack or a row. For this, we can use the alignment tool icons we have at the top. We'll start by selecting the 4 buttons we have. Then some things we can do are: align the left edges, align the right edges, or align the center lines. Another useful thing we can do is align stack and normalize. This allows us to specify the padding between components, so we'll use maybe 10 pixels. We see that the buttons are now neatly aligned with uniform widths and the specified padding between them. Furthermore, we can also move these buttons as one grouping, or resize them as we've seen previously. Finally, certain components such as drawing tool SVG shapes or Symbol Factory graphics can be rotated. For example, if we click once on this Motor graphic, we can move it or resize it as we've already seen. But if we click a second time, we add rotate handles around the perimeter, and then we can drag one and rotate the motor, as we see here.

[05:42] We see the same thing for this ellipse shape. One click allows us to move it or resize it. The second click enables us to rotate it on the window. So now we've seen several ways of manipulating Vision components, such as moving resizing, and rotating.