Search

User Manual

Getting Started


Modules and Platform


Appendix


Tutorials & Helpful Tricks


Glossary


Strategic Partner Links

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

Resources

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

All Manual Versions

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


Overview

Components are what give you flexibility in designing HMI and SCADA that reflect your company's design and your site's layout. Components are the widgets you deal with every day: buttons, text areas, dropdowns, charts, gauges, linear displays, and so on. The Perspective Module comes with a host of built-in components that you can select from for use in your project. There are many ways to manipulate and arrange components when working in the Designer.

This section introduces you to how to work with components so you can learn how to quickly select, move, resize, duplicate, and customize components during the design process. Properties and specifics for individual components are covered in the Appendix

Component Categories

The Perspective Module comes with a host of built-in components that you can select from for use in your project. There are many ways to manipulate and arrange components when working in the Designer. This section introduces you to how to work with components so you can learn how to quickly select, move, resize, duplicate, and customize components during the design process. Properties and specifics for individual components are covered in the Appendix. Components are separated into the following categories in Perspective:

  • Chart - Charts allow you to display and show off your data in a graphical way.
  • Container - Containers provide a way of laying out and organizing components within a View.
  • Display - Display components display static and dynamic information. 
  • Embedding - Embedding components can be embedded in multiple views of a project. 
  • Input - Input components enable users to enter data, or select data, and even control a device.
  • Navigation - Navigation components provide you with design strategy options to navigate within a Perspective Session.

Component Properties

Properties on Perspective components are separated into categories. 

  • Props - Properties that control the configuration and provide the runtime data for the component. See individual Perspective Components for a list of the properties and their descriptions.

  • Position - Properties defined by the component’s parent container which control the location of the component. The available properties listed under this category depend entirely the container type that the component is placed in. See the Position Properties on Perspective Components for more information.

  • Custom Custom Properties defined by the designer for each component instance.
  • Meta - Properties defined by the Perspective Module itself for common things like the component’s name. See Meta Properties on Perspective Components.


On this page ...

IULocgo


Component Overview



Adding Components

To add a component, open the Perspective Components Palette. Click on the component you want and drag it onto your View.  In this example, we put a Label component under the Gauge component.  


Selecting Components

Mouse Selection

Using the mouse is the most common way to select components. Click on a component to select it, double-click on it to Deep Select it (more on that later).  

You can also select components by clicking and dragging the mouse to draw a selection rectangle. If you drag the window left-to-right, it will select all components that are completely contained within the rectangle. If you drag the window right-to-left, it will select all components that the rectangle touches. Lastly, you can start dragging a window selection and then hold-down the Alt key to use touch selection. This will draw a line as you drag, and any components that the line touches will become selected. As you're using these techniques, components that are about to become selected will be given a yellow highlight border.


Tree Selection

By selecting nodes in the Project Browser tree you can manipulate the current selection. This is a handy way to select the current view, the root for the container, and any components on the view. This is also the only way to select components that are invisible.

Deep Selection

Perspective makes great use of its many containers to help create a layout and design to fit any scenario on any device. To accommodate this, components sometimes need to be nested within a series of containers, which are themselves nested in other types of containers. With this comes a true tree of components, and selecting components nested inside containers works differently than components on the root. Deep Selection allows you to select into a container and select a component within.

To deep select a component, double click on it. Three things happen to indicate that the component is deep selected:

  • The border of the component changes to a thick solid line that can't be manipulated.
  • The surrounding area darkens. 
  • In the Project Browser, a Deep Selection icon appears next to the component. 

This lets you know that you have deeply selected into the component and not just selected the component itself. Once inside this new deep selection space, you can then select a component much like before, either by clicking or dragging to select components, or by deep selecting into another container inside the original container.

To cancel the deep selection, click anywhere outside of the component. In the following example, the Temperature component is deep selected.



Manipulating Components

Manipulating components can be done with both the mouse and the keyboard. You can move components around, resize them, and rotate them.

Moving

To move the component, click on it once then drag it anywhere within the container's bounds. 

Duplicating

Components can be easily duplicated by dragging them as if you were going to move them and holding down the Ctrl key. This will drop a copy of the component at the desired drop location. It is often useful to also hold down Shift key as you do this to ensure exact alignment. You may also use the Ctrl-D shortcut to quickly duplicate a component in place.

Resizing

When you click on the component you want to resize, you'll see eight handles displayed around the edge of the selection. When you click on a handle, the mouse cursor will change to a two-way arrow. Use the mouse to drag the handle and change the size of the component.  You can also select multiple components and resize them together. To resize around the center of the current selection, hold down Shift

You can also resize the current selection using the keyboard. To nudge the right or bottom edge of the selection in or out, use Shift combined with the arrow keys, which resizes by the nudge distance, which defaults to one pixel at a time. To nudge the top or left edge of the selection, use Ctrl-Shift combined with arrow keys. 



Size and Position

Components can also be positioned and resized with the Position Properties in the Property Editor. This window allows you to type in an exact pixel size of the component as well as x/y coordinates that the component will be at (with the upper left point of the component moving to that point). See Position Properties on Perspective Components for property definitions. 

Rotating

Components place on coordinate containers can be rotated. As of 8.0.6 the Rotate property has been moved to the Position Properties section of the Perspective Property Editor. For a definition of all the position properties, see Position Properties on Perspective Components.

The example below shows the default rotate property settings when a component is first placed on a Coordinate container.

There are two ways to rotate a component:

  • Enter a rotation angle in the props.rotate.angle property.
  • Grab the rotation handle on the component and drag it with your mouse until the component is rotates as you'd like.

The rotation anchor sets the point of rotation around which the component will be rotated.

If a component is smaller than 28px by 28px, the rotation handle and anchor + symbol are not displayed. Use the property editor to set rotation and anchor properties in this case.

The following example shows icon component at default (no rotation), at 18 degrees rotation, and then at 39deg rotation with the rotation anchor (point of rotation) placed over the earth image. In the latter, the icon has a better angle in relation to the earth graphic.


Image Source

Many components in Perspective contain a image.source property, that allows you to show an image on the component. The property expects a URL to the image, which can either be on the internet or something that is stored on the Gateway. For example, here is a Button component with an image: 

Web Address

Simply enter the wed-address for the image you wish to display. Both raster images and SVGs can be displayed via this method. 

Image Management

Images stored in Image Management are available at http://{your gateway's IP address}:{your gateway's port}/system/images/{path to your image}.

http://gatewayIpAddress:8088/system/images/Builtin/icons/24/lightbulb_on.png

For additional information on using images in Perspective, see Images and SVGs in Perspective



Related Topics ...
In This Section ...

 

  • No labels