Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Images such as PNGs, JPGs, GIFs, or SVGs can be uploaded to the Image Management tool and used inside of containers in Perspective. The Image  Management tool, available from the Tools > Image Management menu, provides an interface to upload, download, or select images.  

 


New_in
Version8.0.3


The Designer gives you the option to either save the image and link to its location or embed the image directly in the view. However, images larger than 100KB may degrade performance. Save and link is recommended for larger images.

Note

The Image Management tool does not support bitmap files.


On_this_page


Iulink
URLhttps://www.inductiveuniversity.com/videos/images/8.0 inductiveuniversity.com
NameImages in Perspective






Using the Image Component

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.

Expand
titleClick here for the Image Component 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.



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

Expand
titleClick here for steps to drag and drop an image


  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 that we already resized this image in a graphics editing program so that it is the size we want. 

    New_in
    Version8.0.3


  3. Starting in version 8.0.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. Note that 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.


Manage Images in the Image Management Tool

There are additional ways to manage images into the Image Management tool.

Upload an Image to the Image Management Tool

Expand
titleClick here for steps to upload an image
  1. At the top of the Designer in the Menu Bar, select Tools > Image Management.
  2. Next, drag and drop the image from the local file system directly onto the Image Management window.



Alternatively, the Image Management window has an Upload button to pass images in. Locate the directory you wish to upload the image. You may use the root folder, or create a new folder to keep your images organized.

  1. In the Image Management tool, click on the Upload New Image icon. An Open dialog window appears. 
  2. Navigate to your image on the local system. 
  3. Select the image, then click Open to upload it.

 

You can also use a file path to a local image. Enter the file path in the source property for the Image  component . This is done by prefixing the file path with  file:///  . An example Image Path would look like this:

file : / / / C: / Users / Public /Public Pictures / chrysanthemum.jpg

It is important to understand that this will only work if the image is accessible from where the client is running. So if you access an image from the designer on the local machine, clients that launch elsewhere may not have the image stored in the same location.

Download Images from the Image Management Tool

Expand
titleClick here for steps to download an Image

Single images, as well as entire directories, may be downloaded from the Image Management tool. This is useful when migrating a project to another Gateway. Image downloads can be taken from either the Image Management or Image Browser windows.

  1. At the top of the Designer in the Menu Bar, select Tools > Image Management .
  2. Select the image, images, or folder you want and click the Save As   icon.
  3. Choose a destination folder for the downloaded files.



  4. Click Save. All images and subfolders in the selected folder will be copied to the selected directory.


Import SVGs

Ignition can import SVGs (Scalable Vector Graphic) into Perspective containers. Once imported, SVGs can be resized and style elements can be applied to them.

Make this visible and change "Converting SVG-based Perspective Components to Drawings" to H3 upon 8.1.22 release

Converting SVG-based Perspective Components to Drawings

Expand
titleClick here for the steps to import SVGs
  1. To use an SVG in your project, find the file on your local system.

    Note

    When working with images found online, make sure to follow all applicable copyright laws.

  2. Drag the SVG file directly onto the View or Container you want the SVG to appear on. 



  3. Starting in version 8.0.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. Note that this will save the image in the Image Management Tool and it can be used repeatedly.
  4. Sometimes the way the SVG imports may result in the SVG appearing very small. You can resize the SVG by dragging one of the handles or entering width and height properties in the Property Editor.

  5. You can also apply Style properties such as a border and background color to the image. For more information, see Styles and Style Classes.
Editor_notes
New_in
Version8.1.22
Expand
titleClick 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:

Image Removed

Converting the component to a drawing will result in the component having different properties. See the Cylindrical Tank below:

Properties as a component:

Image Removed

Properties as a drawing:

Image Removed

Iulink
URLhttps://www.inductiveuniversity.com/videos/svgs/8.0
NameSVGs



New_in
Version8.0.3


Embed an Image in a View

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. Note that if the image is larger than 100KB, you see a warning message in the confirmation popup.



  3. Click Embed to embed the image.



Using Icons

Icons can also be placed into Perspective containers using the Icon component. Several components, such as the Horizontal Menu, have icon properties that enable you to embed icons into the component. The materials icon library is a great source for icons, see https://fonts.google.com/icons?selected=Material+Icons. For additional information, see Perspective - Icon.

Use a Custom Icon Repository 

While materials icon library is a great source for icons, if you have a custom library of icons you can also set it up to be accessible by Ignition.  When using a custom icon repository, the format for the file should use the following pattern. Note that each icon is place in an outer enclosing SVG tag that defines values for the viewbox attribute, which is mandatory for icons: 

Code Block
languagexml
<?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> 

Once you have the file built, you need to place it in the icons directory within your Ignition Installation Directory, for example 

Ignition Installation Directory\data\modules\com.inductiveautomation.perspective\icons


Iulink
URLhttps://www.inductiveuniversity.com/videos/icons/8.0
NameIcons


Expand
titleClick 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 as follows; 

  1. First we created the repository file in xml.   

    Expand
    titleClick here to see the icon repository code
    Code Block
    languagexml
    <?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 saved the file in the following directory: 

    C:Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\icons



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

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

           

  5. When we put the Designer into Preview  mode. The component appears as follows: