Skip to end of metadata
Go to start of metadata


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.

 

On this page ...

IULocgo


Images in Perspective




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


  1. Drag an Image component from the component palette onto the container.



  2. At the top of the Designer in the Menu Bar, select  Tools > Image Management.  
  3. In the Image Management tool, look through the different folders for an image file you want.
  4. Right click on the image to copy the path for the image.



  5. 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
  1. In the Designer, open the view in which you want to put the image. 
  2. 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. 


  3. 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.



  4. 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.




  5. 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.

  1. Locate the image on your computer and drag it onto the view.
  2. 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.



  3. Click Embed to embed the image.


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.

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:

<Ignition Installation Directory>/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: 

  1. 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>
    
  2. 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\data\modules\com.inductiveautomation.perspective\icons



  3. Next, we'll need to restart our Designer for the changes to be recognized.
  4. 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. 

  5. 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

    PropertyValue
    props.items.0.enabledtrue
    props.items.0.icon.pathexample/one
    props.items.0.icon.color

    #4747FF

    props.items.0.labelProposal
    props.items.0.style.color#4747FF
    props.items.0.style.fontFamilyVerdana
    props.items.1.enabledtrue
    props.items.1.iconexample/two
    props.items.1.color

    #008000

    props.items.1.labelProject Documents
    props.items.1.style.color#008000
    props.items.1.style.fontFamilyVerdana
    props.items.2.enabledtrue
    props.items.2.icon.pathmaterial/folder_special
    props.items.2.icon.color

    #AC00AC

    props.items.2.labelAppendix
    props.items.2.style.color#AC00AC
    props.items.2.style.fontFamilyVerdana
    props.style.borderBottomStyledouble
    props.style.borderLeftStylenone
    props.style.borderRightStylenone
    props.style.borderTopStyledouble
    props.style.borderTopWidth4
    props.style.borderBottomWidth4
  6. When we put the Designer into Preview  mode. The component appears as follows:




  • No labels