Using the Image Management Utility
The following example walks through bringing an image from the Image Management tool using an image component. For more information on the Image component and all of its properties, see Perspective - Image.
Drag an Image component from the component palette onto the container.
- At the top of the Designer in the Menu Bar, select Tools > Image Management.
- In the Image Management tool, look through the different folders for an image file you want.
- Right click on the image to copy the path for the image.
- In the Property Editor, paste the image path into the source property for the Image component. You need to add "/system/images" to the beginning of the path, to properly reference images stored by the Image Management tool.
The image now appears inside the Image component on the container.
For more information on the Image component and all of its properties, see Perspective - Image.
Drag and Drop an Image onto a View
In Perspective, you can drag and drop images from your computer onto a view. When an image is dropped, it can either be uploaded into the Image Management tool and then referenced from an Image component, or it can be embedded directly into the view. In this example, we'll pull in a .jpg photo of a sunset to use as a background on a home page for our application.
- In the Designer, open the view in which you want to put the image.
Locate the image on your computer and drag it onto the view.Note: We already resized this image in a graphics editing program so that it is the size we want.
- You have the option of saving the image as a link or embedding the image in the view. The Link Image screen is displayed. Choose the Save and Link radio button and then click Upload. This will save the image in the Image Management Tool and it can be used repeatedly.
- The image now appears in the view. Drag one of the corner nodes to make the image component border the same size of the image.
- Now your image is on the view. Save your project. We added a company logo SVG file as well as some navigation buttons to this home page.
If you don't want the image to be brought into the Image Management tool you can embed the image instead.
- Locate the image on your computer and drag it onto the view.
- After dragging the image onto the view, click the Embed image radio button. If the image is larger than 100KB, you will see a warning message in the confirmation popup, since large embedded images can degrade performance.
- Click Embed to embed the image.
Example with Custom Icon Repository
In this example we'll make a custom repository file with icons. The name of the file is
example.svg. We'll then use the icons in this file and other repositories to create a Horizontal Menu component:
First we created the repository file in xml.Click here to see the icon repository code
- Once created, we save the file in the following directory (assuming a Windows install and the default choice of install folder):
C:Program Files\Inductive Automation\Ignition
- Next, we'll need to restart our Designer for the changes to be recognized.
Now we can use the icons in this icon repository in our components. For this example, we put a Horizontal Menu component in a Coordinate view.
We use two icons from the new example repository and one from the materials repository. We set the properties as follows for the Horizontal Menu component:
Top Level Properties
Property Value props.items.0.enabled true props.items.0.icon.path example/one props.items.0.icon.color
props.items.0.label Proposal props.items.0.style.color #4747FF props.items.0.style.fontFamily Verdana props.items.1.enabled true props.items.1.icon example/two props.items.1.color
props.items.1.label Project Documents props.items.1.style.color #008000 props.items.1.style.fontFamily Verdana props.items.2.enabled true props.items.2.icon.path material/folder_special props.items.2.icon.color
props.items.2.label Appendix props.items.2.style.color #AC00AC props.items.2.style.fontFamily Verdana props.style.borderBottomStyle double props.style.borderLeftStyle none props.style.borderRightStyle none props.style.borderTopStyle double props.style.borderTopWidth 4 props.style.borderBottomWidth 4
When we put the Designer into Previewmode. The component appears as follows: