Working with Perspective Components

Variants

Some Perspective components have multiple pre-configurations, called variants, based on options a user might commonly use. For example, the Time Series Chart components has variants that set the chart up as a Line chart, Area chart, Bar chart, or Scatter chart.  Using a variant can save you time. Variants have a group of properties pre-set to affect the appearance and functionality of the component.

When a component has variants, a number appears next to its name or thumbnail image. Click the arrow to the left of the component to view a dropdown menu of variants. Refer to Perspective Components for information about individual components.

List View vs Tile View

As of release 8.1.2 there are two options for viewing Perspective Components in the Designer. Click on the List View  icon to see components listed just by category and name. Click on the Tile View icon to see the components listed by category and thumbnail icon.  The following image shows the Tile View of the variants for the Time Series Chart component. 

Adding Components

To add a component, open the Perspective Components palette. Click on the component you want (or click on a variant of the component) 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, where a single click on a component selects it and double clicking Deep Selects it.  

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 you have deeply selected into the component and not just selected the component itself:

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

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. 

Select Through

When working with nested containers, Alt + left clicking on a component in a container will select the clicked component, and automatically deeply select the component's parent container.  This can save time compared to first deeply selecting the container, and then selecting the component. 

Right-Click Menu

When working with components in the Designer, you can right-click to get quick access to options. 

The top portion of the menu is similar to an edit menu in that it provides much of the basic copy/paste functionality

Z-order

In the following example, we have an image component with a photo of a warehouse, an icon, and a label. We placed an icon (the truck) and a label "Local Delivery" on the view as well, and then set the z-order so the label is on top, the truck icon is in the middle, and the image in the background. 

Wrap in Container

Wrap in Container is available on the right-click menu from any Perspective component.

Modify Source View

Configure Events  

The Configure Events option takes you to the Event Configuration page where you can set up actions for the component based on events such as a mouse click or key press. For complete information, see Component Events and Actions.

Configure Scripts

The last option is Configure Scripts, which takes you to a Script Configuration page where you can set up Custom Methods Custom Methods and Message Handlers on the component.

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. 

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. 

Aligning

New alignment tools are available in the Perspective Designer Toolbar. These tools allow easy alignment of selected components within a Coordinate container including align top, bottom, left, right, as a row, and as a stack. Align as row, and align as stack include a normalize version, that adjusts the size of the selected components to match the component that was selected first. Rotated components being aligned will correctly align along the top-most, bottom-most, left-most, right-most point of the rotated component. If a rotated component is being normalized is within the group that is being aligned, normalizing the component will adjust the pre-rotated dimensions.

Align and Normalize Example

Alignment Guides 

When you drag a component near another component in a container, Alignment Guidelines appear to help you better align your elements.

• A dashed red line will appear to guide alignment to the center of the components or to the right or left edge, depending on where you drag.
• A solid red line indicates distance, in pixels, between components.

The Designer also has Vertical and Horizontal guide that can be set up to help you align components. For more information, see Vertical and Horizontal Guides.

Alignment Guides Example

Rotating

Components place on coordinate containers can be rotated. The Rotate property is located on Position Properties section of the Perspective Property Editor. For a definition of all the position properties see the individual container pages. Rotated components being aligned to other components will correctly align along the top-most, bottom-most, left-most, right-most point of the rotated component.    

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.

Rotation Examples

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 Icons in Perspective.