This lesson is part of the Perspective Components and Bindings course. You can browse the rest of the lessons below.


Autoplay Off

Supplemental Videos


Dragging and Dropping Images


Learn how to use Scalable Vector Graphics (SVGs) in your Perspective project.

Video recorded using: Ignition 8.1


(open in window)

[00:00] In previous lessons, we looked at how we can work with images and perspective using the image management utility and the image components. In this lesson, we're going to look at a straightforward mechanic that can make working with images even simpler. Namely in perspective, we have the ability to drag and drop images directly into a view. So to demonstrate, I have my designer open here and we're looking at a view I've created. On the side, I'm going to pull up my file explorer off another monitor, and I'll find the image I'd like to use in my project. And then just click, drag and drop that image into my view like so. On drop, a link image dialog will appear which will allow me to decide how to use this image in my view. it's worth noting that this technique will work for any supported image type. Meaning SVG, GIF, JPG, JPG, and PNG images. Now once this dialogue is up, we have two choices for how we want to incorporate this image into our view represented by the two radio buttons at the top.

[01:08] The first choice is save and link which will save the image in the image management utility, then generate an image component linked to that image automatically. This effectively automates some of the image component work we've seen in previous lessons and allows us to use an image from our files system in a single step. All we need to do is tell Ignition where the image should be stored under image management. I'm fine saving my image in the root directory here with the default name as specified. So I'll just click upload to initiate the save and link process. Immediately, we'll see the image generated in our view and with it selected, we'll see that the source property for the image has been tied to the path of the image in our image management structure. So in effect, this method eliminates the need to set up the image component ourselves. However, if we want to modify how the image is displayed, we can modify the properties of the generated image component to do so. Now there was another radio button in that interface.

[02:04] So I'm going to pull up my file explorer one more time. And this time drag in my second file like so, and this time I'm going to choose the embed image option. This option allows us to save the image directly as part of the view. This can be a useful feature when you want the image to be directly tied into the views configuration, which in some situations can be a bit simpler. So I'll go ahead and click embed here. For this embedded image we still use the image component so we have all the customization options the component allows, but the source property contains the actual image data rather than URL. It's worth mentioning that there are a couple of downsides to this approach. For one, the image can not be used elsewhere with an ignition without being imported again. So if some future structure required the image we'd have to duplicate this work. Additionally, storing an image as part of a view can cause degraded performance. Particularly when the image is larger than a hundred kilobytes or so. So with that said, however you opt to add an image into your view dragging and dropping files directly is a quick and easy approach.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.