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 .


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



  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. 

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



  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. Embedded images can degrade performance, but can also allow you to view and modify image elements directly in the Property Editor.

  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.

On this page ...

IULocgo

Images in Perspective




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.

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.


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. 

  1. First we created the repository file in xml.   

    <?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, 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 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

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:

value, capacity, liquid color, tank color, liquid opacity, liquid warning color, tank warning color, warning threshold, stroke width, value display, and style

Properties as a drawing:

view box, preserve aspect ratio, elements, and style




  • No labels