[00:00] In this lesson, we'll talk about images in the Perspective Module. If you're familiar with Vision, you know that you can go up to the Tools menu and open up Image Management. And if you're unfamiliar with this tool, we simply store these images on the gateway, but you have access to them here. You also have some built-in images when you first install Ignition. But of course, there's an upload button here, so you can add images if you need to. The supported types are listed down below. Now, in this case, we're going to head over to the built-in. So I'll start double clicking. I'll go to this Agitator directory, I'll double click again, and I'm going to use this first agitator here. So I'm going to right click and copy the path to it, which places the path to this image in image management into my system clipboard. So copy the path here and I'm done with image management. I'm simply going to close this. Now to get that image onto my view, we'll primarily be using the image component.

[01:04] So if I head over to the Prospective Component pallet under Display, there's an image component, which I'll drag onto my view. And then to show the image, we need to update the source property here. Now you can see from the tool tip, we need an image URI. We'll talk about that a little bit later though. So right now to use the image management stuff, I simply need to change the value of source. So if I head over to the value, I'll right click and I'll paste. It'll paste the path to that image, but you won't see the image yet. To access images in image management, you need to make a slight modification to this path. I'll click back into the source field here. I move my text cursor all the way over to the left, and then you type slash systems, slash images, and then one more slash, and you can see that the image appears right away. Now at this moment in time, you need to type system slash images which may change in the future. Always consult the user manual for more information. Now, while I have this image component here, I will notice that as I resize the component, the image doesn't stretch with it.

[02:07] And that's mostly due to these fit properties here, specifically mode. The mode property determines whether or not we should resize the image. So if I click the little drop down here, I could set it to fill, which will cause the image to fill the entirety of the component. Now, again, we're working with these rasterized images, which don't necessarily handle being resized too well. I think I'll set this back to none and use just the original size. Now let's grab another image component. So we'll head back to the Prospective Component pallet. And again, back under Display, I'll grab an image and throw that onto my view. Now, from the tool tip we saw earlier here, source allows us to grab a URI. And again, we're dealing with a web based solution here. So if I can grab some sort of web address, we can simply point the component to an image over the network somewhere. Now I'm going to move my designer out of the way here and head over to one of my favorite websites.

[03:06] If you have an image stored or available somewhere such as this one at the top, I can right click on it and I can copy the image address to it. So again, just to kind of show you if I go to a different tab and I just kind of paste that in there, we'll hit Enter and you kind of see that it shows the image as well as the path to it. We can actually use that URL up there inside of our components. So now that I've showed you how to steal these images, let's go ahead. We'll head back to our designer and I have my image component, my new one selected. I can simply click into this field. We'll go ahead and we'll actually, we'll right click, we'll paste. And you can see the image is now available inside of the component. As a closing statement, it may or may not seem obvious, but always respect applicable copyright laws when using images you find online.