Create Custom Graphics With the Ignition Perspective Drawing Editor

Speakers

Christine Lee

Sales Engineer I

Inductive Automation

Charles Ahrens

Senior Application Engineer I

Inductive Automation

The already-amazing Perspective Module recently received some big upgrades in Ignition 8.3. Chief among them is the Drawing Editor, which enables you to create custom graphics for HMIs, dashboards, and more without ever leaving the Ignition Designer.

With this new palette of design tools now in front of you, a little bit of instruction from industrial-design artists could be just the thing to help you get started on your next masterpiece.

Join two of our Ignition engineers for this webinar as they explore the capabilities of the Drawing Editor through live demonstrations. They will also showcase examples of custom graphics and share best practices covering SVG performance, naming conventions, bindings, and more.

• See how to easily design and edit custom vector graphics
• Learn how to bind graphics to dynamic sources like tags
• Discover best practices for working with SVGs
• Get answers to your questions about designing in Perspective

Register now — even if you can’t attend, we’ll send you the recording!

Transcript:

00:00
Christine: All right, the participants are coming in, so I'm just gonna go ahead and get started. Hello everyone and welcome to our March webinar, Create Custom Graphics with the Ignition Perspective Drawing Editor. Thank you so much for joining us today. I'm Christine, and I'm a sales engineer with Inductive Automation.

00:20
Charles: Hi, I'm Charles, and I'm an application engineer here at Inductive Automation.

00:28
Christine: So here's our agenda for today. I'll give you a quick introduction to our company, Inductive Automation, and our software, Ignition. And I'll go through an overview of the drawing editor and discuss bindings in the drawing editor as well. And after these topics, Charles will do a live demo, share some best practices and tips for drawing in Perspective, and tell you about a few additional resources.

00:53
Charles: We'll wrap up by answering some of your questions about what we discussed today or just about Ignition in general. To submit a question to us, click on the Q&A button at the bottom of the Zoom window and type in your question, and we'll try to answer as many as we can at the end. If we can't get to your question today, please reach out to one of our account executives. We'll be happy to answer it. And tomorrow, we'll email the recording to you, and it'll be available on our website along with the slides.

01:19
Christine: All right, so about Inductive Automation. So just in case you're not familiar with Inductive Automation, here are a few fast facts about our company. Our software, Ignition, is used by 69% of the Fortune 100. So it's literally used every single day inside some of the world's biggest companies. We have over 5,000 integrators worldwide in our Ignition integrator program. We have a highly diversified customer base across many industries with thousands of Ignition installations in over 140 countries. We've been in the industry for over 23 years, and we have over 400 employees in the US and Australia. Our software is called Ignition, and it's an unlimited platform for enterprise integration, industrial applications, and more. Ignition acts as a central hub for everything on the plant floor and beyond. It's web-based, web-managed, and web-deployable to desktops, industrial displays, and mobile devices. It has an unlimited licensing model, it's cross-platform, and it offers industrial-strength security and stability. And all of this empowers you to build any kind of industrial application, whether you need SCADA, MES, IIoT, or another type of solution. It starts with Ignition. So let's get into drawings. So drawings before Ignition 8.3, as of Ignition version 8.0, users could upload and embed SVG files, which the Designer calls drawings, into Perspective.

02:59
Christine: If you wanted to edit that drawing, you could use the property editor to browse the element structure, modifying shapes and creating bindings as needed. This was often a difficult and tedious process because you had to navigate through this structure and guess at which element corresponded to which shape on screen. Adding a new element was also difficult because you had to remember the structure of each object type in a drawing, such as whether a property is named X or CX for a circle. The easy method was to bypass creating a drawing within Ignition and use an external third-party tool to create an SVG, then import it to Ignition. However, that still had limitations since any edits needed to be made externally and re-imported or through the methods that I just talked about. Now, Ignition version 8.3 adds a fully featured SVG editor, which we call the drawing editor, to Perspective. If you're transitioning to Perspective from Vision, the drawing editor may feel very similar to Vision's drawing tools. With the new drawing editor, it is much easier to create and customize drawings, especially since you can select objects just by clicking on them. So on the screen, you can see a screenshot of the drawing editor.

04:25
Christine: If you look along the left side, there are tools to add different shapes like rectangles, circles, lines, stars, or polygons. You can also add text, draw freehand, or draw paths by clicking each point. Along the top, there are options for copying, pasting, duplicating, ordering objects forward and backward, grouping or ungrouping objects, converting shapes to paths, or some more advanced features such as masking and clipping or making text follow paths. On the right side is your Design tab, which shows properties for the currently selected shape or shapes, and a Settings tab to adjust the settings for the drawing canvas or to turn on a helpful grid and snapping to grid or objects. Users can use the drawing editor to create drawings from scratch and modify them, making completely custom objects for your use cases, all without leaving the Designer. Or you can use the drawing editor to customize existing symbols in Perspective, such as the motor, the pump, sensor, valve, or vessel. So like I've mentioned, users can use the drawing editor to create just about anything they can imagine to customize their project. So here's a quick example of creating a new drawing from scratch. You can drag in a drawing component from the Perspective component list on the right and right-click and hit Drawing.

05:54
Christine: In this example, which is all in real time, the user dropped in a few different shapes, selected them all, and changed the color at once. Pretty neat. And then you can also edit an existing drawing. Here's an example of how easy it is to customize built-in symbols using the drawing editor. Because of the way the Designer uses the built-in symbols, we first need to right-click the symbol and convert it to a drawing, and then right-click again and then click Edit Drawing to open it in the drawing editor. So once we are in the drawing editor, you can select any of the different shapes within the drawing itself and edit properties or create bindings on them. You can either select them from the elements list on the right side or by clicking directly on the shape that you want to edit. Either way, it will highlight the shape so you can see exactly what you have selected. However, if you do edit built-in symbols this way, any bindings that had been configured already will need to be redone, and the resulting drawing will lose the ability to switch between different styles such as Mimic, Simple, P&ID.

07:06
Christine: So keep in mind that whatever style the symbol is currently in when you convert it to a drawing is what you will be able to edit. Bindings: Most properties of drawing elements can have bindings such as fill color, stroke color and weight, or the text inside of a text box. The drawing editor uses the normal binding editor, so there's no need to get used to a different interface. And it also means that there are no special limitations to drawing elements on what kind of bindings are available for you to use. The ability to leverage bindings within the editor means that you can bind as you design. So for example, you want to bind the state of an alarm to the fill color of the drawing. You can do that within the binding editor to test as you design. And you can also edit and bind to additional properties other than the ones listed on the editor through the Perspective property editor. Okay, so that was a lot of words. I talked a lot at you, and you know what they say, actions speak louder than words. So I will turn it over to Charles for the really exciting part, the live demo of the drawing editor.

08:25
Charles: Thanks, Christine. Okay, I'm going to do a demo of the drawing editor, but first let me show you the way you used to make drawings before Ignition 8.3 so we can compare the two methods. Then I'll edit a built-in symbol and finally show you how to set up bindings using the drawing editor. So let's say we have a manufacturing facility that uses robot arms and we want to represent those on our HMI with some custom drawings. First, we need a blank drawing. I have one here, and if we look in the Perspective properties, we can see it has a viewBox of 0, 0, 100, 100, which just means that X goes from 0 to 100 and Y goes from 0 to 100. We can change that viewBox later if stuff goes out of bounds. One thing to keep in mind is that depending on which image editors you're familiar with, the SVG standard of doing things might be a little bit backward. X goes from left to right from zero positive, but Y goes from top to bottom when it gets more positive. Just something to keep in mind. We can see the elements here is empty, so let's add a new element.

09:38
Charles: I click on this plus; it creates a blank element of type group, and I can switch it to a path with this dropdown, but it doesn't populate any of the properties I need. I know that a path needs property D for path data, and that describes how the path should be drawn using letters and numbers. It can be hard to remember them all, so at the end of this webinar, there's some online resources you can reference if you're using this method. To start, I'm going to use a move command with the letter M, and I'm going to go to 50, 80. That's halfway across the X and 80% down in the Y. And then I'm going to draw a horizontal line of length 10. And when you're using the path data, a capital letter like this M means go to that exact point 50, 80. A lowercase letter like this "h" means from wherever you are, move this direction in the X or Y. So H10 means add 10 in the X, whereas capital H10 would mean draw from where you are to X equals 10. I hit Enter. We can't see anything yet because we need a stroke property.

10:57
Charles: So I go to properties, click on the plus, select stroke, and then underneath stroke, I click the plus, and it's narrowed down the list of properties to add. Let's add a stroke paint. We'll make it red, and there's the line we just drew. So let's keep drawing the arm, and we're gonna use some horizontal and vertical lines. So H is horizontal, V is vertical, and remember, positive in the y is toward the bottom of the screen. I want to go up, so I do -40, and that draws a vertical line up 40, and then a horizontal line 40 in the X. And we can see that black background. Because the shape isn't connected back to the beginning yet, it's filling the background with the default color of black. So we can add a fill property and a fill paint, and let's make this gray. And when you put a color in here, you can either type in a name of a color, or you can use the color picker or the palette for the standard options for Perspective colors. Let's keep drawing this arm. So I'm gonna go vertical line of 10. Whoops, wrong direction. Negative 10, and then horizontal -50. And then one other command in the path data is Z, and that just means from wherever you are, draw a line back to the first position. So I don't need to know the height of this. I just say Z, and it connects right back to the start.

12:29
Charles: We've already set up this path to have data, stroke, and fill. So when I'm going to draw the end effector, which I'm just going to draw a gripper, we can just right-click and duplicate and change the path data, and it'll already be set up for us. One downside to this method is that you have to either guess and check where you want to start drawing or do the math. So I want to start the end effector from this point up here, and I know that I started this right here, and it's 50, 80. Let's figure out the X. It's 50 plus 10 plus 40, so it's 100 in the X. I can just delete all of this, M 100, and then this is Y equals 80, and then I went up 40, so that's 40, and then up 10, so it's Y equals 30. And then let's just draw a line. Perfect, we got it right. So now instead of just a horizontal or vertical line, let's draw a diagonal line. You do that with L. Then we need X and Y to describe how we want to draw.

13:38
Charles: So let's draw 5 in the X and up 5 in the Y. So 5 and then -5. That's a nice little diagonal line. And then we'll keep drawing the arm like this, or the gripper like this. And as I'm typing this, I'm hitting enter after each one, but if you wanted, you could draw a bunch of lines. You could draw a bunch of segments and then hit Enter at the end and see what happened. But see, I messed some stuff up. I needed to go -10 here. There, that looks better. So it's useful to just hit Enter after every couple to see how it's looking. And then H10, let's go -5 in the X, -5 in the Y, and then that Z command again, and it connects back to the start. That's looking pretty good. It's looking like a robot arm, but let's add some joints to it to kind of cover up those seams. So I click on this plus, it adds a group, and I'm gonna switch it to a circle. Now, with a circle, we need a center point CX, CY, and a radius R. You can rename properties.

14:54
Charles: So I just duplicated it a couple times instead of hitting this plus, selecting a value, et cetera. So let's try to put a circle right here. So I know it's 100, 30. Let's start there and make it a radius 10, 5, 8. 8 looks pretty good. Now the "y" we need to change. Let's make this 25, nope, 35. Okay, that looks pretty good, but let's move it over in the X about there. But let's move that gripper over a little bit. One benefit of using the relative moves with the lowercase letters for a path is that we can adjust that first point, and then the rest of the drawing path will move with us. So if we change this to 110, it moves the whole arm or the whole gripper over, but it should probably be 105. That looks pretty good. And then this could be 100. Okay, I'm gonna leave this joint for black right now, but if we wanted, we could add a stroke and a fill to change the color. Just like before when I duplicated the path to make a gripper, I can right-click on this circle and hit Duplicate. And now there's two circles right here, and since I know it's gonna be at the same Y, I can just adjust this X and move it over 50, 55. Okay, 55 looks pretty good.

16:18
Charles: And then I can duplicate it again, and the Y is gonna be like 80. Okay, now we have some joints, and let's make a base for this robot arm. So I'm gonna add another element. I'm gonna change it to "rect" for "rectangle." And a rectangle needs an X, a Y, a width, and a height. Unlike the circle where it's the center, X and Y for a rectangle are the upper-left corner. So if I want this to be 30 wide and 20 tall, it by default, since I don't have X and Y typed in, it starts at 0, 0, but I know I want it to center on this base. And if the center, this corner is 50, its width 10, so 55 -15, so X is gonna be 40. And then Y, we could probably just have it be the same Y, 80. Let's give it a color. Fill; change to object paint. Let's make this blue.

17:28
Charles: Oh, but it's in front of that joint. So we can reorder things by clicking next to this arrow and dragging it up. And now it's behind the joint. And that looks okay. We can change the color to make it more realistic. White, let's just make it gray. That's fine. It's a pretty good-looking robot arm. Only took a couple minutes, about five minutes, and we had to remember the structure of each object we were adding. It's not that complicated to do, but it can get tedious for more complicated shapes. Let's see how much faster and easier it is using the drawing tools. I have another blank drawing with the same empty elements, the same viewBox, and I can just right-click and hit Edit Drawing. And I have a grid set up with 10 spacing, and I can just click this path tool and start drawing. And when I draw, it shows me what point I'm going to. X is 31, Y is 24. Right now it's completely free, but if I hold Ctrl, it snaps to 15-degree increments. So I'm gonna draw a right angle here and try to line it up with those points.

18:48
Charles: Another keyboard shortcut to keep in mind, that Z command. I don't know how to click exactly on that point, but if I just hit Enter, it joins back to the start point. And if we look over here, it's already made a fill color, it's already made a stroke, and that's pretty quick. Let's say we want to move this over here. You can just drag and click. And since I have snapping to grid turned on, it aligns nicely. Now let's add an end effector. I'm gonna hold Ctrl again 'cause I want it to snap to 45 and go like this. And I'm just clicking and still holding Ctrl so that I get nice clean snaps. I hit Enter, and then we can drag that over a little bit. And since I have snapping turned on to 10-pixel width, I'm using the arrow keys to get it exactly where I want. Another handy keyboard shortcut. Now let's add some joints. With this circle tool, it makes an ellipse by default, but if I hold Ctrl, then it makes a perfect circle. And I can see as I'm adjusting it the width and height over here. So if I make this 12 and 12, circle shrinks.

20:11
Charles: That looks pretty good. Now we can either draw a new circle or we can, just like before, right-click and hit Duplicate. And then I'm just using the arrow keys; slide it over here. And then right-click on this one and hit Duplicate, and then slide it down here with the arrow keys. And then I click on the rectangle tool, and I draw it right here. And just like before, it drew on top of that last joint. So I can click over here in the elements list and drag it above. There's also these buttons off to the side: bring to the front, move forward one layer, move backward one layer, or send to the very back. You can also add a group or duplicate or even delete elements right from here. I hit Apply, and there we go. Pretty much the same robot arm in less than a minute. A little bit easier. We didn't have to remember anything, and we didn't have to do any math. But what about editing? Because this arm looks okay, but what if we wanted it to be a little bit more dynamic pose? Instead of straight out at a right angle, what if we had it elbowed back a little bit?

21:19
Charles: So let's right-click, or we're not gonna edit this one in that drawing editor. We're gonna open the elements, and what we have to do is change the path definition. So instead of horizontal and vertical lines, we're gonna have to do those diagonal lines. So let's see. Instead of H, no, H10 is okay. Instead of V-40, let's do L for a diagonal line, and then it's gonna be -20 in the X, -40 in the Y. Okay, looks all right. And then instead of this H40, we'll do L40 and down 10 in the Y. And then instead of this V10, we'll do 5 in the X, -10 in the Y. And then instead of this H-50, we'll do an L, -50, -10, -20. That doesn't look quite right. -60, -55, whoops, -55. Kind of hard to do. You gotta guess where each point goes, and it's hard to get the proportions quite right. -60. Okay, -60, -15 looks okay. And now I want to add a point instead of just Z, so I'm gonna do another L and then -5, 10 in the Y. That doesn't look quite right. So maybe let's adjust this one back to 50 and let's just do 10. It's okay. The joints will cover it. So now if we expand these other groups, we need to move that gripper just like I showed before by adjusting that first point. So let's see how it looks at 85. That's probably close enough. And then in Y, maybe 45. That's too far. Maybe 40.

23:16
Charles: Okay. And then we can move the circles. And since our circles aren't labeled, they're all called circle. The best way to figure out which one's which is just looking at the X coordinate. This one's the farthest over in X, and that one has the biggest X, so I think that's the first one. So we want to move it to about 80, 45. Yeah, that looks okay. And then the next one we want to move to the left, maybe 40, maybe 35. Okay, that looks pretty good. Wasn't too hard, but we had to do a lot of guess and check, and I don't know about exactly those proportions. But how easy is it to edit in the drawing editor? We just right-click and hit Edit Drawing. And then when we click on a path, we can click on this path tool up here, and then we can just click and drag the points exactly where we want.

24:17
Charles: Let's move this over here. But we have to add a point. So how do we do that? Well, if you click on a point and then hold Ctrl and click on another point, you see both are highlighted. And then I hit Insert on my keyboard, and it adds a point right between. And this point we can drag up and over here, and then we're done. And then we can just click on the circles, and we can adjust them over here and move this one down here with the keyboard. And actually, I think this circle might want to be a little bit bigger. But let's try to adjust this path behind it real quick. I can just hide this here like that. And that looks pretty good. I guess I don't have to adjust it after all. Hit Apply. Much quicker. We were able to edit completely visually where we could drag the object exactly where we wanted it instead of having to guess and check.

25:16
Charles: But what about editing an existing symbol like Christine mentioned? So if we open the Perspective components and we look down at the bottom, there's these five symbols that are built in. I'm gonna drag a valve, and I want this to be a P&ID valve, just a generic two-way valve. But I want to change it to a three-way ball valve. So first I have to change it to the appearance that I want. And remember, when you convert to a drawing, it loses that ability to switch between P&ID, mimic, and simple. And any bindings I had, I'll have to redo. Then I go to right-click, convert to drawing. And now you see it's just an SVG. It has the elements, it has a viewBox, and we can right-click and hit Edit Drawing, and then it appears in the drawing editor. So to make it a three-way valve, I need to add a triangle down here on the bottom. I can use the path tool and draw a shape like this. I could use the polygon tool, add a shape like this, change it to three, and rotate it. Or to make things really simple on myself, I could just click an existing triangle, select it here, right-click, hit Duplicate, click on the rotate button, and then I could move it right where it needs to go.

26:33
Charles: And now I have an exact copy of something that was already in the drawing, rotated the way I want with the same fill color and the same stroke color. Let's make this a ball valve by adding a circle. So I'm gonna click right here and hold Ctrl and drag a circle about that big. But you'll notice it doesn't have the same color, and the line on the outside's a little bit thinner. So if we click on any of these triangles, we can see here's the fill color, here's the stroke color, and it's a stroke width of 2. Let's copy that fill color, and then we can paste it in here. And then let's copy the stroke color, and we'll remember it's width 2, paste it in here, and change that to 2. And there we go. It looks just like it was built into Ignition. But you'll notice this white box around the outside. That's the viewBox. That is what will crop the image when it's used in a view within Ignition. Right now, this triangle is outside of that viewBox. So we need to adjust this height to something higher to fill it. So how about, it's 48. Let's try 50, no, 55, no, 58. Well, that's pretty good, but the width is 70. Let's just make it height 60, so it's 70 by 60. And then we hit Apply. And there we go.

27:54
Charles: Just like Christine said, any bindings you had on it before it was converted to a drawing will have to be redone. So let's take a look at setting up some bindings. I'm gonna copy this robot arm, the one we did in the drawing editor. And in my fictitious manufacturing facility, I have a bunch of different robot arms represented by UDTs that say the location, the type of arm it is, the state, and have some text that says "stopped" or "faulted." I'm just gonna paste this into that view. And then we have a representation of the robot arm. I'm gonna hit Save. And if we look at our overview that shows all of our different robot arms, it's already looking a little bit better. But let's put a binding on it. So on this view, I am passing in the path of the tag that represents a robot arm. And we have, if you look down here in the tag browser, loader 1 has location, state, state text, and type. State is what I want to look at. I want to change the color based on the state. So I'm gonna click on it, hit Edit Drawing.

29:04
Charles: And then I want to change the color of everything. So I can either click on each element one at a time by holding Ctrl and clicking, or over in this elements list, I can hold Shift and select everything. I could also hold Ctrl and click each thing, or I could just draw a box around everything. However you do it, once all the elements are selected, you can change the fill color and the stroke at the same time. And you see the little binding icons. Let's set up a binding on the fill color. It'll be a tag, an indirect tag, and we'll use that param, whoops, not page view, param path. And we're gonna look at state, and it's passing in zero. I have it set up so that zero is stopped, one is running, two is faulted, and three is error. So let's add a map and add zero, one, and two. Those are the states we care about, and everything else will be this fallback. Instead of value, let's change it to color. So when it's stopped, we want it to be gray. When it's running, we want it to be white. When it's faulted, we want it to be a slightly darker gray. And the fallback, if there's some other error, let's just make it red for now. Hit Apply, hit Okay.

30:22
Charles: And they all change to that light gray. Hit Apply there, go back to the overview, and there we go. Four of our robot arms are running, two are stopped, two are faulted. But those gray colors are really close, and it's kind of hard to tell which one's faulted and which one's just stopped. So why don't we add something else to our drawing? A special symbol to show that it's faulted. So I'm gonna go over here and click this plus to add a group. I'm gonna name it "faulted," and then I'm gonna add a symbol. I'm gonna make it a triangle. I'm gonna try to align it as best I can here. And I'm gonna make its fill color yellow. Let's do orange. Yellow's a little harsh. We can type colors in here, or we can click on that, and there's a nice color picker. And then we need to add some text. So I'm gonna add a big exclamation mark, and I want to center it on that triangle. So what I can do is I can hold Ctrl and select both, and then using these align tools, align middle and then align horizontal. And I want to move these into that group. So I select both of them, and I drag them on top of the group. And now we can see they're nested in one tab. So they're under this faulted group. And then I can click and move the whole group at once. I'm gonna put the icon down here.

32:10
Charles: And I'm gonna put a binding on this opacity with another tag, indirect binding on the path. Whoops, I hit Enter too quick, path state. And then I want to do another map. And only when it's faulted, which is two, do we want the opacity, oh wait, no. We want the opacity to be one. We want it shown. Otherwise, we want it to be zero. Hit Apply. It disappears because it's set to stopped. Hit Apply, hit Save. And when we go to the overview, our two faulted robots have that little symbol. Same drawing, but now we can represent a bunch of different states. But these robot arms are different arms. These are weld cells, that one's a paint line, these are assemblers, these ones are packagers. So let's modify our drawing again and add some different end effectors. Right now we just have a gripper, and it's this one. So let's just double-click and rename to "gripper." And let's draw another one. I have the UDT set up so that based on the type, let me show you. There is a type tag. Zero means it has a gripper, one means it has a welder, two means it has a paint sprayer, and three means it has a box lifter.

33:38
Charles: So we can draw those different types of end effectors. So we have a gripper, and we need to draw about the same size a weld arm. So I can just click and draw straight lines, or if I click and hold, it makes a curved line. And I actually clicked too far. So let me click; let me start that again. I'm gonna draw a little straight segment, and then I'm gonna click and hold here, and then draw a straight line here. And then I'm gonna click and hold here. Whoops. Let me undo. Great. Won't let me undo. But what we can do is click on this line tool and click on these endpoints and move them around. I click C on the keyboard to turn it into a curve, and then I can make it curved. It's easier to do when you're drawing, but if you mess up like I did, you can always fix it later. And then I'm going to click this point and this point and hit Insert, and then select just that point. There we go. And then we want the fill color. Let's just make it red for now. I didn't connect it back up to the beginning, but that doesn't really matter 'cause it's gonna be hidden by the circle. And then we also need a paint sprayer. So let's make this just a generic-looking spray nozzle. Hit Enter.

36:02
Charles: And then we should name them. So this one is going to be welder, and this one is going to be, oops, paint; I accidentally copied the text. Welder. Is that one right? No, that one's paint. Paint, and this one's weld. Naming things is a good thing to do because otherwise you'll lose the components you've made. We click on here, and let's draw that box lifter. So I'm gonna hold Ctrl and snap to some nice angles, and I'm just gonna make a really big gripper. Okay, and let's rename that box. Now I want to reorder all of these to the same depth as gripper, so I can click them all and then drag them up, and then drag them up further. And now they're all behind the circle, but they're not changing color based on the tag. So I can select them all and then change the fill color and do the same kind of indirect tag binding. View params path, and we do state, and we add a transform, and we do 0, 1, 2, and we want colors. And it saved our colors for us, the most recent ones, so it's not gonna take very long to set that up. Hit Apply.

37:48
Charles: Great. Now they're all the correct color, but I only want to see one at a time. So if we select all four, we can set up the binding on one of them and then just, or set up the binding one time and then change it on each one. So we want the opacity to be based on the type. So we do another indirect tag binding type. And it says three. Three is a box lifter. Now, just for now, since I have gripper selected first, I'm gonna make it so that gripper, which is 0, gives an output of 1 opacity. Everything else is 0. Hit Apply, and then I'm gonna click on paint and edit that binding. Why is my binding editor doing that? Let's hit Apply and see if that'll fix it.

38:47
Charles: Gripper, when type is 0, gets shown. When paint, paint won't let me do it. That's weird. What is going on? Okay, well, I don't know why it's not working right now to let me see that binding. Well, we can always do the bindings through here. So if we look through, we can see name is paint, name is welder, gripper, and the name is box. So on this opacity, there's a little binding symbol. You can right-click, or we can just click and then paint. When paint is... When type is 2, we want it to be shown. And then on welder, type is 1, we want it to be shown. And on box, type is 3, we want it to be shown. Hit Okay. And it's a loader, and now it shows the box. Let's hit Save, go to Overview. And now with one drawing and a couple bindings, we now have representations of different kinds of robots. Oh, and it looks like I might have hit undo on that faulted. Let's go back and edit that. Easy enough to redo. Indirect tag, relative path, 8, map. 2 is 1, everything else is 0. Hit Apply, hit Apply, and go back to overview. And there we go.

40:38
Charles: Very quick to set up a custom drawing, to set up bindings, to draw custom end effectors. And now we have a lot more visual interest on our HMI. We can see at a glance if we're not familiar with a certain type of robot: "Oh, does it look like this drawing?" Okay, that is that robot." We have a little faulted symbol because the stopped and faulted are so close, and we have different colors to represent different states. It looks a lot better than just plain text, and it really helps us add some visual interest using the drawing editor. Let's get back to the rest of the slides, and we'll talk about some best practices. Some best practices that apply to just about every SVG you make, whether it's with the drawing editor or using the older method, is grouping your elements. Group your items in a way that makes sense, and that'll make it much easier to navigate your drawing. As you saw when I was making that drawing of the robot arm, it only had about seven or eight components, so they were all at the root level, and there was only one group for the faulted symbol.

41:47
Charles: If your drawing gets very complicated, you're gonna really appreciate having them in groups instead of all at the root level. It also helps to name your elements. If you're navigating through, when I had to go to the old method and look at the properties directly, I saw this one's named "welder," this one's named "paint." Naming something "south conveyor belt" instead of rect 5 makes it a lot easier to find what you're looking for. And just as a rule of thumb, keep it under 1,000 elements in a single drawing, especially if you have a lot of complicated bindings changing opacity, color, stroke, fill, et cetera. Of course, it varies based on your use case. You can have some very, very complicated drawings that work just fine, but as a rule of thumb, I've found about 1,000. After about 1,000 elements, you start to see some performance impacts. And use keyboard shortcuts when you're using the drawing editor. I used a few, Insert, Enter, Escape, the arrow keys, but there's a full list at this link in our Ignition 8.3 drawing editor documentation, and the slides will be available so you can follow that link.

43:00
Charles: Here's a few other SVG resources that are helpful for if you're learning about SVGs, whether you're using the drawing method... Whether you're using the drawing editor, the older method, or an external tool. W3Schools has pages for just about every type of property and element that SVGs can have, with examples that can be edited live in your browser to see how things change. SSSVG is another good resource, but focused a bit more on an introduction to SVG where it builds upon previous knowledge. It's fully interactive, though, with sliders, dropdowns, and color pickers, so you can see how adjusting certain properties changes what shapes look like. And if you're curious about more advanced SVG techniques, including animations, check out my session at this year's ICC late September. Registration for the conference will be available soon.

43:51
Charles: We hope you enjoyed learning about the drawing editor. To use it for yourself, of course, you'll need to have the latest major version of Ignition, which is Ignition 8.3. Fortunately, you can download it for free today. Just go to Inductive Automation or the Inductive Automation website and click on Download Ignition. It downloads in about three minutes, and then you can use it in trial mode for as long as you want, no cost or obligation. You can also check out Inductive University, where we've got hundreds of free educational videos that let you learn. Ignition at your own pace. Whether you want to learn more about Perspective, using tags, alarms, scripts, or security practices in Ignition, IU has videos about all of that and more. No matter what your experience level is, you can always learn more at IU absolutely free.

44:33
Charles: If you're outside of North America, we have a network of international Ignition distributors who provide business development opportunities, sales, and technical support in your language and time zone. If you want to learn more about the distributor in your region, please visit their website as listed here or contact our International Distribution Manager, Yegor Karnaukhov. If you'd like to speak with one of our account executives in the US, please call 800-266-7798. To reach our office in Australia, please call the number at the bottom of the screen. And let's get on to that Q&A. As a reminder, you can always type questions into the Q&A area of the Zoom control panel.

45:11
Charles: Let's see what kind of questions we got. Okay, first one I see is, "If I create a binding on the drawing using the older method, will it still be editable in the drawing editor?" Yes. It's the same as long as that property is shown in the drawing editor. So fill color, stroke, text boxes, that kind of thing. If you have a binding on a property that is not bindable in the drawing editor, then you won't be able to edit it in the drawing editor, but it won't lose the binding when you edit the same drawing. And, "Will there be a rotation prop so we can rotate more precisely than just 45-degree increments?" That might come in a future version of the drawing editor, but we'll have to pass that on to our product managers.

46:08
Christine: Yes, if you have a question or input or feedback on the drawing editor, send it over through your account executives or any contact that you have with Inductive Automation. Maybe your sales engineer that you've been working with, or on the forums or ideas portal. We always check our emails, look at the portals, look at the forums to get feedback from our users. So that would be the best route to get feedback from us. But yes, our product manager will take a look and get that over to our dev team.

46:43
Charles: Let's see. "Is this with version 8.3 and 8.1?" You can use the older method of directly editing the props in 8.1. To use the drawing editor, you need to have version 8.3.

46:56
Christine: "Will this eventually be in Vision?" So Vision has drawing tools. So they have their own drawing methodology, drawing thingy. So drawing editor will not be in Vision because they have their own drawing tools.

47:15
Charles: Questions are scrolling by so fast, hard to grab one out. "I'm guessing this isn't officially supported, but any reason a drawing you edit in 8.3 wouldn't work to bring back to 8.1?" Absolutely none. You can copy that view, paste it into 8.1, or you can export it, bring it in. As long as you're not using something that 8.3 added, and there's only a few, I think there's one SVG prop I know of, which I'll talk more about at the ICC talk about animations and stuff. It's the TYPEATTR, T-Y-P-E-A-T-T-R. If you make a drawing in 8.3, especially 8.3.4, and then bring that into 8.1, that part of it would break. But otherwise, there's no restrictions. "Possible to add images?" Yes, but you need to... I would highly recommend checking out those references or the resources listed here.

48:21
Charles: For adding an image, W3Schools, I know, has a reference to, "Here's how to have an image in an SVG." You'll need to use probably an online tool or an external editor like Inkscape to convert the image into... Can't remember exactly what the format is; it's like a base64 format where instead of just copying and pasting, it's gonna be a bunch of random characters. But that could be drawn in an SVG. You could trace over it, do whatever, and then delete the image out afterward.

48:52
Christine: There's a question about what is the best way to learn Perspective coming from old-school Vision in Ignition. Definitely Inductive University is a great resource, and actually there is an elective study, which is different from the credential courses, that is specifically for building in Perspective. I personally found it very useful when I was transitioning from a Vision-only developer to learning Perspective, so I highly recommend that.

49:25
Charles: I would definitely second that. When I started at Inductive, I had only ever touched Vision. The latest version I had used was 7.8, I think, and coming from Vision to Perspective was a bit of a change. But going through all of Inductive University, especially focusing on Perspective and following along with your own trial version on your computer, is very helpful for kind of figuring out how this in Vision maps to this in Perspective. "Can you import an image from Inkscape or Illustrator and break apart the image into elements, regroup them, et cetera, as if it were drawn natively?" Yes. That element structure is the same for all SVGs. If you bring it into Ignition, what you'll need to do is you drag the SVG into Ignition. I have an SVG here, and then it says "Save and Link" or "Embed." If you click "Embed," here we have our Inductive Automation checkmark logo, and there it is. It's elements, and we can right-click, "Edit Drawing," and then we can select each element or even add others, just like we did in the drawing editor. That element structure with a viewBox and these other properties is common to SVGs, not just Ignition drawings.

50:55
Charles: "If you're importing from elsewhere and need to re-import, is there a strategy for preserving bindings?" If you're importing from, you draw it in 8.3, set up a bunch of bindings, and then export and import it back into 8.1 or a different project. I would recommend setting it up like I did in this view, where I have a path as a view parameter, and then on the drawing, I have all these bindings. But if I copy this and go back to drawing and paste it in, all of these bindings still came through. It's just missing that view prop or the view param. So if I make this path "loader2", and of course I hit the wrong key. There you go. All the bindings are preserved if you copy and paste the element or the view or export the view. That's just a good thing to keep in mind.

51:54
Christine: Oh, this is an interesting question. Are you done demoing?

51:58
Charles: Yeah, yeah.

51:58
Christine: Okay, sorry. I really like this question. "Will there be some sort of an SVG marketplace for people setting up image libraries and sharing with the public?" I don't foresee an actual SVG-specific marketplace, but you can definitely, well, I don't want to say or be like, "Definitely you can do this," but I would highly recommend checking out the Ignition Exchange. That would be a great place to put your resources there for the people to use. Absolutely. You're welcome.

52:39
Charles: I know of a few resources already on the Ignition Exchange that are, "Here's an icon library of useful SVGs built into an icon library," or here are some... I've made a few that are, "Here's some animated lines in SVG format," but they're in views in Ignition. Or the Water Industry Pack was one that we made internally with custom SVGs, and we turned them into views as if they are symbols built into Perspective.

53:11
Christine: There are some questions about, why am I blanking on the word? Movements? Yes. So can you give a sneak peek of how you approach that within Ignition Perspective? And well, I don't want to spoil anything for your session at ICC, because I know you have some great plans for that.

53:37
Charles: Sure. Let me share my screen again. So there's a few questions about animation, binding.

53:45
Christine: Animations. There you go. The word.

53:48
Charles: Or having bindings on things other than fill or stroke. So if I make a rectangle, now why can't I... Oh, I need to change the type. If I make a rectangle and X 50, Y 50, width 10, height 10. Okay, there's a black box in the center of the screen. I could make a binding on X or Y based on a tag. Let me add a slider. And I'll put it up here, min, max. And then I will bind from X to this slider, slider props value, 0. And then as I adjust the slider, it moves the element in the drawing. So you can imagine you could do something similar with the properties of a tag or dynamically creating a path based on values that you're reading and doing in a binding. Similarly, you can... There was a question about binding to points in a path. If I have a path, I'm gonna delete a couple of these. I don't know why I duplicated it. Path, D, and I need a stroke; hit black.

55:27
Charles: And I'm going to make this move 50 50, H 20, V 20. Okay. I can make a binding here, and let's bind it to that same property of the slider. And then we'll need to do a script transform. And we're going to do "M", the string of the value. And then I'm just going to copy this. And we want to do a horizontal line of the same length and a vertical line of that length, and we'll connect it back to the beginning. So with that script, it makes M 28, M 28 28, H 28, V 28, Z. And then as we adjust the slider, we can see the shape moves around, gets bigger and smaller, and we're creating that path dynamically. One thing, if you're doing this, creating it dynamically based on a tag or based on input props, you want to right-click and make that binding persistent. Because when the view first loads, the binding won't have fired yet, and it'll be a red overlay.

56:52
Charles: But if you make it persistent, whatever the previous state of that binding was, it'll render the path and you'll be good, so you won't have red overlays. That's kind of a sneak peek of some of the animation things. "With your demonstration of the SVG import, will Ignition preserve naming from the third-party app?" Yes, as long as it is named using the same property, whether that's ID or name or whatever property that software is using. I have found Inkscape; if you export as a plain SVG, that works the best to bring into Ignition. I'm not familiar with what the same mode is in Illustrator, but I'd imagine there's some sort of plain SVG instead of an Illustrator SVG or an Inkscape SVG.

57:50
Christine: Okay, I think we're at time. So, Charles, do you have one last question that you want to answer before we wrap it up?

57:59
Charles: I'm seeing a lot of questions about grouping, rotation, extra properties. I would highly recommend checking out those extra resources, W3Schools and SSSVG, because there are lots of properties that the drawing editor doesn't show and aren't by default included with the old method that you can add by just clicking on "Add a property" and renaming it to whatever the documentation says, and try it out on your own.

58:29
Christine: Awesome. So I think we're at time today. But yes, like we've said before, if you have any questions that you want to post on the forums, post it on the forums. And as well as if you have any questions that you want to send through your account executive, definitely do that. We'd be happy to answer any questions.

58:52
Charles: Thank you so much.

58:54
Christine: Yeah, and next month we'll be back with another webinar. So until then, you can connect with us on social media and subscribe to our weekly news feed email, and you can also see our latest blogs and case studies and videos on our website. And so thank you so much for joining us today for this hour, and have a great day.

59:14
Charles: Thanks, everybody.

59:16
Christine: Thanks, everyone. Goodbye.