Images and Icons in Perspective

Perspective supports the import and display of images, including PNGs, JPGs, JPEGs, GIFs, and SVGs. Images can be loaded into Perspective via the Image Management utility, dragged and dropped directly into a View, or derived from an external web address. Regardless of approach, the Image component is used to display desired images, either as linked images with associated URLs, or as embedded images stored within the View. Each of these approaches is detailed below.

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 .

Click here for Image Management Utility steps

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 and select Copy Path.
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.

Click here for Drag and Drop steps

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. To save the image as a link, make sure the Save and Link radio button is selected and then click Upload. This will save the image in the Image Management Tool where 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.

Embedding Images

If you don't want the image to be brought into the Image Management tool you can embed the image instead. Embedded images can degrade performance, but can also allow you to view and modify image elements directly in the Property Editor.

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.

On this page ...

Images in Perspective

Watch the Video

Using Icons

Icons in Perspective are specially curated SVG (Scalable Vector Graphic) images chosen to be helpful in Perspective design. Perspective includes a starting collection of icons, and provides ways of including your own (see "Use a Custom Icon Repository" below). Icons can be used in Perspective directly using the Icon component, or integrated into the configurations of other components, as with the Horizontal Menu, Map, and Accordion components.

Choosing Icons

The bulk of the icons included with Perspective are derived from the materials icon library, which is fully detailed, with included icon names, here (external link). Icons are referenced using icon paths within Perspective. For example, the path material/location_on will reference the location_on material design icon.

The following feature is new in Ignition version 8.1.6
Click here to check out the other new features

All icon properties (via the Icon Component or other applicable components) include an interface for selecting icons from configured libraries, both built-in and custom. On the right-hand side of the icon path, the

icon can be used to browse and search for available icons. The icons will be arranged into headings based on the originating icon files on the Gateway.

Icons

Watch the Video

Use a Custom Icon Repository

The materials icon repository is a great source for icons, but if you have a custom library of icons, you can set it up to be accessible by Ignition. All icon repositories are stored as SVG files within the Gateway's Installation Directory. A typical path to an icon file will look like:

Windows

C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\icons\<repository name>.svg

MacOS

/usr/local/ignition/data/modules/com.inductiveautomation.perspective/icons/<repository name>.svg

Linux

/usr/local/bin/ignition/data/modules/com.inductiveautomation.perspective/icons/<repository name>.svg

You can create custom libraries by adding your own SVG file at this path. The properties inside the file are defined using XML, which should follow the pattern provided below. Note that each icon is placed in an enclosing SVG tag that defines values for the id attribute, which is used to specify the name of each icon, and the viewbox attribute, which must have large enough dimensions to fully enclose the graphic.

<?xml version="1.0" encoding="utf-8"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    
    <!--Red Circle-->
	<svg viewBox="0 0 24 24" id="red-circle">
		<circle cx="12" cy="12" r="6" stroke="black" stroke-width="1" fill="red" />  
	</svg> 
    
    <!--Blue Circle-->
	<svg viewBox="0 0 24 24" id="blue-circle">
		<circle cx="12" cy="12" r="6" stroke="black" stroke-width="1" fill="blue" />  
	</svg>
</svg>

Once an icon file has been added, a Designer restart is required to pull the new icons into the Designer for development.

Click here for the custom icon repository example

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 for Proposal, Project Documents, and Appendix headings.

First we created the repository file in xml.

Click here to see the icon repository code

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">	

	<!--a red circle-->
	<svg viewBox="0 0 24 24" id="red-circle">
		<circle cx="12" cy="12" r="6" stroke="black" stroke-width="1" fill="red" />  
	</svg> 

	<!--a blue circle-->
	<svg viewBox="0 0 24 24" id="blue-circle">
		<circle cx="12" cy="12" r="6" stroke="black" stroke-width="1" fill="blue" />  
	</svg> 

	<!--a triangle-->
	<svg viewBox="0 0 24 24" id="triangle">
        <path d="M12 0 L3 22 L21 22 Z" />
    </svg>
		
	<!--roman numeral one icon-->
	<svg viewBox="0 0 24 24">
		<g id="one">
			<rect
			   id="rect3723" width="15.09025" height="3.0526078" x="4.4548745" y="2.4385488" />
			<rect
			   id="rect3723-3" width="15.09025" height="3.0526078" x="4.4548745" y="19.510113"/>
			<rect
			   id="rect3755" width="3.4557824" height="16.990929" x="10.272108" y="3.5045362" />
		</g>
	</svg>
	<!--roman numeral two icon-->	
	<svg viewBox="0 0 24 24">
		<g id="two">
			<rect
			   id="rect3723" width="15.09025" height="3.0526078" x="4.4548745" y="2.4385488" />
			<rect
			   id="rect3723-3" width="15.09025" height="3.0526078" x="4.4548745" y="19.510113" />
			<rect
			   id="rect3755" width="3.4557824" height="16.990929"  x="6.8435426" y="3.5045362" />
			<rect
			   id="rect3755-9" width="3.4557824" height="16.990929" x="13.700686" y="3.5045002"/>
		</g>
	</svg>	
</svg>

Once created, save the file in the following directory (assuming a Windows install and the default choice of install folder):

C:Program Files\Inductive Automation\Ignition \data\modules\com.inductiveautomation.perspective\icons
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	#4747FF
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	#008000
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	#AC00AC
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 Preview mode, the Horizontal Menu appears.

Converting SVG-based Perspective Components to Drawings

The following feature is new in Ignition version 8.1.22
Click here to check out the other new features

Click here for information on converting select Perspective components to drawings

Right-clicking on a built-in SVG-based Perspective component will give an option to convert the SVG into a drawing.

Converting the component to a drawing will result in the component having different properties. For example, the Cylindrical Tank component props list changes to include properties like viewBox, preserveAspectRatio, and elements instead when converted to a drawing.

Properties as a component:

Properties as a drawing:

OTHER USER MANUAL VERSIONS

GETTING STARTED

OTHER EDITIONS

LAUNCHERS

MODULES

PLATFORM

APPENDIX

TUTORIALS & HELPFUL TRICKS

PARTNER LINKS

RESOURCES

OTHER USER MANUALS

Offline Ignition Manual

Employees