Images (png, jpg, gif) Video at Inductive University

Transcript

(open in window)

[00:00] Even though it's recommended to use SVGs instead of images, because images don't scale very nicely, we can still drag in PNGs, JPGs, and GIFs onto a window in Ignition. So let's say for example that I want to drag in my logo, and I don't have the logo as an SVG file, all I have is a PNG. So I'm going to right-click here on the image and save the image as a PNG file in my Documents folder. Once you have the image on your computer, we can upload the image to Ignition so we can view it on a screen. So in order to view it, we have to use the Image component that's under the Display tab of our Component Palette. We can drag the Image component onto our screen, and by default, it shows nothing. What we have to do is go down here to the property called Image Path and set that to the path of the image we want to show. We can do that by clicking on the little magnifying glass with a folder, that allows us like an image that we have in Ignition. And we do have to upload our image to Ignition in order for this to work. So I don't have the logo in here yet, so I'm going to go up here to the top, I'm going to click on the Upload new image button and find the logo. Now it's there, I can double-click on that to show it here on the screen. So we can show any JPG, PNG, or GIF. Unfortunately we do not support bitmaps.

Even though it's recommended to use SVGs instead of images, because images don't scale very nicely, we can still drag in PNGs, JPGs, and GIFs onto a window in Ignition. So let's say for example that I want to drag in my logo, and I don't have the logo as an SVG file, all I have is a PNG. So I'm going to right-click here on the image and save the image as a PNG file in my Documents folder. Once you have the image on your computer, we can upload the image to Ignition so we can view it on a screen. So in order to view it, we have to use the Image component that's under the Display tab of our Component Palette. We can drag the Image component onto our screen, and by default, it shows nothing. What we have to do is go down here to the property called Image Path and set that to the path of the image we want to show. We can do that by clicking on the little magnifying glass with a folder, that allows us like an image that we have in Ignition. And we do have to upload our image to Ignition in order for this to work. So I don't have the logo in here yet, so I'm going to go up here to the top, I'm going to click on the Upload new image button and find the logo. Now it's there, I can double-click on that to show it here on the screen. So we can show any JPG, PNG, or GIF. Unfortunately we do not support bitmaps.

We are experiencing playback issues from our video hosting provider. Please check back shortly.

LESSON LIST