[00:00] In this lesson, we'll take a look at creating components in the vision module. In front of me, I have my designer, and I have a blank window where we're going to create some components. Now, the right-hand side of the screen has the component palette. From here, we list all of the well, most of the components that are available to the vision module. There are some additional things like the symbol factory library, drawing tools, and a couple of other things that we'll cover in later videos. The component palette itself does have the components categorized by different categories, which we can collapse and expand individually. We can collapse all of them with these buttons at the top. We can also expand all of them and even search for individual ones. So I could, for example, search for a label component. And there, we see a couple of suggestions based off of the name of the component and the description, or the text inside of the description, of the component. Now to create a component, we simply drag and drop into our container. And you'll notice that there is this little yellow border that's going around the container, here.

[01:04] That's just highlighting which container the component is going to be created inside of. Since we only have one, there's really only one option. So I'll let go of my mouse button, and it will create the component right there. Now we can also, if we head over to the component palette, if I click and release on top of the component over here, we get this little crosshair icon. But more importantly, if we head back to one of our containers, if I click and drag, I would create a component of whatever size we resize this little box to when I let go, it creates a component. Now we can always resize components later on, too. So I could, with this component selected, just kind of drag these arrows and resize it or reposition it. And that does actually go for the first component, as well. Now, if you want it to be very peculiar about how big your components are, you can always right click on one, go down to size and position, and from this little menu here, you can specify where in the container the component should be positioned, and its dimension. So maybe I want this to be 100 by 100 pixels.

[02:03] I'll go ahead and click okay. And it will be resized, just like that. Now, some of these components are also designed to be interacted with, from the client. So if we head back to the palette over here, I clear out the search. I do see that we have this little slider component. So I'm going to drag this onto our window here and drop it. Now this slider component does have a little dial in it. So, if you wanted to, from the designer, test out a screen, test out some of the interactions you can. In the designer, we have a preview mode that you can use to interact with your screens. There's a little play button in the toolbar here, but you can also just go up to project and preview mode, which toggles the preview mode. Now, while we're in preview mode, I can't create new components. You'll notice that these are all grayed out, but we can interact with components on our screen, as if we were in a client. So this little dial I can actually grab and drag now changing the position of it. And when I'm done, I can exit preview mode by pressing the button up here. Of course, you can always go back to the project menu, and leave preview mode from here.

[03:07] Once we're back in design mode, we can again, reposition components and create new ones. Now, there's another way to create components. That's actually from the Tag browser. So I have some tags here that were created by the quick start workflow when you first install Ignition, but you can always just create your own tags, if you need to. From the Tag browser, if we find a tag, so I have this little ramp zero tag here, I can actually select it and then press and hold my mouse button, drag it onto a container and let go, and it'll give me this little pop-up here. And from here, I can basically select what type of component I want to create. And the suggestions that are populated here are based on the data type of the tag we dragged over. So this is a floating point tag. So it's giving me numeric options. So if I were to select the LED Display, it will create that component for us. Now, technically it does something a little extra. It created what's called a tag binding. So the value that's on the display is synchronized with that one tag.

[04:03] We're not really at a point to really examine bindings further. We'll talk about those in lessons later on, but the point is, that you can drag tags from the Tag browser and create components. Now in earlier lessons, we did see that the designer has a concept of a communication mode. Basically, the designer is able to read values from things like tags and databases. It's also able to write back to those things, but only if you allow it to do so. So for example, if I were to get a different tag here, I do have some writeable tags that basically just, they're not automatically updating all the time. If I were to grab a, how about this, a writeable double one out to drag that onto my window here. And I create a controlled opponent. Let's do a numeric text field. So it's like a text field we can basically type into from the preview mode and the client. Now, if we were to go into preview mode, this is in fact a live preview, right? So tag bindings are components that are set to interact with other things can do so from preview mode. Normally.

[05:04] Now, if I were to try to type something in here, there is a fail safe. So I'll hit the enter key here and we do get a little error. And that's because the communication mode for my designer, which we talked about earlier, is in read only mode. So it was when I was typing into this component, the component was trying to send a write request to that tag there. So something to keep in mind with that preview is it's technically a live preview. So if you're you're in a production environment, you probably want to keep things in read only mode, but just for the purposes of example today, we'll go ahead and switch over to read-write. We'll try that again, hit enter, and we can see that it went ahead and wrote directly to the tag, but again, that kind of touches upon tag bindings. We'll play around those a little bit later. Just for now, I'll go ahead and go back to read only mode and I'll exit preview mode, but that's really it. Creating components is fairly simplistic. I guess the last thing I would touch upon here is we should probably talk about containers, real quick. So there is in fact a container component, which I will drag into my root container here.

[06:09] And when you try to move the container component around, you'll notice that just does kind of some selection mechanism. So that's because while you can drag other components in there. So I could grab a label component and I can drag that into this container, here. Right? So as far as the hierarchy is concerned, we have the root container. We have our newly added container, and then we added a label inside of there. So you can have components that are kind of nested like that. If you needed to reposition the container, you want to select the, the container, which you can do by just clicking on where it is in the window here. Or if that's kind of tricky, you can always just come up to the project browser and select it. And then from here, you can actually hold the alt key down, and then left click and drag, and then you can reposition the container and move it wherever you want. So again, the idea of where you place the component more appropriately in which container you place the component is very important, when you're starting to build these screens.