You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST

5:04Drawing Tools Overview

2:11Drawing a Line

1:44Fill and Stroke

2:48Gradients

4:05Eyedropper Tool

4:54Shape Geometry

3:09Editing Shape Paths

2:54Bezier Curves
Take Topic Challenge
LESSON
Shape Geometry
Description
Shape geometry allows you to apply functions such as a union (combine), difference (exclusion), and intersection (division) on multiple shapes to get the resulting shape that you want.
Video recorded using: Ignition 8.1
Transcript
(open in window)[00:00] In this lesson, we'll show how to use the Ignition Drawing Tools to create more complex composite shapes out of basic shapes like rectangles, circles, and triangles, using shape geometry. Let's say that we want to make a simple graphic element representing a pump. We can do this by combining simple shapes such as the circle, triangle, and rectangle we see here. We'll start with a circle at the bottom, and layer the triangle and the rectangle on top of it. We'll align and resize these until they're just so, till we see the outline of a simple pump graphic. Then we'll select all of our components. Now if we head up to the Shape menu, we see the five available shape geometries. We'll select the first one, the Union. A Union combines all selected shapes into one composite shape. So now we see one graphic that has the general appearance of a pump.
[01:02] We can now move this around, or resize this, as one element, and we can change its fill color again as one element. So that's the behavior of a Union. By contrast, a Difference is the opposite of a Union, a Difference subtracts one shape from another. To demonstrate this, let's create a rectangle shape. Then we'll place an arrow shape on top of it. If we select the rectangle shape first, then select the arrow second using the Ctrl key, then select Shape, Difference. We have cut out the arrow portion and effectively created a cutout or a stencil. The arrow color we see now is that of the window background since it's been cut out. To see this even more clearly, we can move our new shape over the earlier colored pump graphic. Next is the Intersection shape geometry.
[02:05] An Intersection gives us the region that is common to two overlapping shapes. To demonstrate, let's create a circle, and then create a triangle. Then overlap the two like so, and then if we select both shapes, then select Shape Intersection, we get the smaller shape that is the intersection, the common area between both original shapes. By contrast, an Exclusion shape geometry is the opposite of an Intersection. An Exclusion yields the region of two overlapping shapes that's outside of their intersection, the area that belongs to one original shape OR to the other. To demonstrate, let's once again create a circle, and then create another triangle. Then we'll overlap the two as before, and select both shapes.
[03:07] This time, if we select Shape Exclusion, we get an overall shape that excludes the intersection between the two shapes. We can see that there is a missing area, by once again moving the new shape over the colored pump graphic. Finally, we have the Division shape geometry, which divides the first selected shape along the boundary of the second selected shape. To better demonstrate that, this time let's create two rectangles, and two circles side by side with them. Then we'll overlap them like so. This time there is an ordering dependence to the resulting Division shapes. So for the upper one, we'll select the rectangle first and then the circle. Then select Shape Division, and for the lower one, we'll select the circle first, then the rectangle.
[04:09] Then again, select Shape Division. Then for the upper division, the rectangle is split up along the circle's boundary, and for the lower division, the circle is split up along the rectangle's boundary. So now we've seen the five available shape geometries, which allow us to create more complicated shapes out of simpler basic shapes. A Union with which we created a composite pump graphic from more basic shapes; a Difference, which is like a cutout or a stencil; an Intersection; and its opposite, an Exclusion; and a Division, which splits one shape along the boundaries of another shape.