You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST
Supplemental Videos
-
1:15Adding Icons to Labels and Buttons
-
1:43Color SVG Dynamically
-
2:39Tint SVG
-
1:45Tank Cutaway
-
2:17Component Animation
LESSON
Images (PNG, JPG, GIF)
Description
Images such as PNGs, JPGs, or GIFs can be imported and used inside of windows in Ignition.
Video recorded using: Ignition 8.1
Transcript
(open in window)[00:00] While it is recommended that you use SVGs as they will scale better, you may find yourself in a situation where you don't have an SVG file for the image you'd like to add to your project in this lesson. I'll demonstrate how to add a PNG, JPEG or GIF to a Vision window. I'm currently looking at a Vision window in my designer in order to add an image. The first thing I'll do is add an image component. I'll drag and drop from the component palette straight to my window here. Underneath the data properties for this component. There's an Image Path property. You can click the folder search icon to open up the image management tool and find your image to automatically fill in the image path. I have the option to choose from some built-in icons in this folder here, or I can upload one of my own images. I have an image saved as a PNG on my local machine that I'd like to upload. So I'll click the upload button select my image and click open. Now my image appears in the image management tool and I can double click it to add its path to my image component.
[01:05] This same process can be done for PNGs JPEGs or GIFs.