Perspective Designer Interface

Perspective Menubar

There is a menubar at the top of the Designer that provides functionality that you can interact with when working in the Perspective workspace. Each menu has a host of functions as it relates to that menu. The other menus that are shared between Vision and Perspective are discussed in the General Designer Interface.

File Menu

See General Designer Interface. 

Edit Menu

The Edit Menu is similar to other applications edit menus in that it provides much of the basic copy/paste functionality. You can also right-click on an item in the browser to access this menu.

View Menu

The View Menu enables you to control the display of panels and toolbars in the Designer.

Project Menu

See General Designer Interface. 

Component Menu

The Component Menu provides links to the Event Configuration and Script Configuration screens where you can add events, actions, and message handlers to individual components.

Tools Menu

Perspective's workspace makes use of the general Tools Menu options. However the Launch Project item holds several unique sub options. 

http://127.0.0.1:9222/devtools/inspector.html?ws=127.0.0.1:9222/devtools/page/####################

Help Menu

See General Designer Interface. 

Perspective Toolbar

The Perspective Toolbar contains shortcuts to options from the menubar as well as options to set the z-order for components. 

The remainder of the icons on the Perspective toolbar are for aligning components. See aligning for more information.

Resource Tabs

The Resource Tabs allow you to change which resource is being edited in the workspace, as well as navigate to the Settings  area of the Perspective Workspace. 

Right-Click Menu

The right-click menu provides multiple ways to close one or more views.

Project Browser

The Project Browser panel allows you to view the different Designer Spaces and their component hierarchies. You can expand folders and navigate down through each folder to see elements of a project such as windows, views, containers, and components. The Project Browser shows the entire tree structure from the project level folder down to the component level. You can view or change many of the project properties settings by clicking the Project Properties icon. The Project Browser is also discussed on the General Designer Interface page. 

Badge Icons

Perspective has host of useful icons in the Project Browser that can show extra configurations on a component, such as scripting, security, deep selection, message handler, etc. These icons, as shown in the image below, are extremely useful when trying to navigate through a view to find components with extra configurations. Here is a list of the Perspective Badge icons.

Badge Icon	Name	Description
	Binding	Indicates the component has a binding script. Appears next to the name of the component.
	Custom Method	Indicates the component has a custom method. Appears next to the name of the component.
	Deep Select	Shows a selected component within a selected container. Indicates you have deeply selected into the component and not just selected the component itself. Appears next to the name of the selected component.
	Event Action	Indicates that the component has its own event actions which are related directly to the functionality of the component. Appears next to the name of the component.
	Message Handler	Shows that the component contains a user-created script that listens for a particular message. Appears next to the name of the component.
	Script	Identifies that the component has a property change script. Appears next to the name of the component.
	Security	Indicates that the component has security permissions applied to the view. Appears next to the name of the component.

Configuration Explorer

• Bindings and Transforms
• Custom Methods
• Embedded Views
• Events and Actions
• Extension Functions
• Message Handlers
• Property Change Scripts

Select a configuration and click Go To Reference to highlight the relevant view or component in the Project Browser and, if applicable, open an Edit window to view details about the selected configuration.

Tag Browser

The Tag Browser allows you browse Tags in the Designer and OPC servers. In addition, Tags can be created, edited, exported and imported directly from the Tag Browser. For more information on Tags, the different Tag types, and how they work, see Tag Browser.

Perspective Component Palette

The Perspective module contains numerous components, such as buttons, labels, and charts. Perspective utilizes modern web technologies so many of the built-in components may look reminiscent of components you may have seen on your favorite websites. Components are created by dragging the component from the Component Palette and dropping it onto a view. A complete list of components is found on the Perspective Components page.

The Component Palette is located in the upper right side of the Perspective Designer Interface. If the component palette is not visible, click Perspective Components to open. This panel defaults to auto-hide itself. Components are grouped into different categories based on functionality. Each category can be individually expanded to show all components in that category, or collapsed to hide the components in that category. 

In the Component Palette search bar, you can search for components. Start typing in the search bar and the component list will update based on the text you entered. You can also set filter options by clicking on the Search icon to expose the filter selection to make the search case sensitive, or use wildcards, regular expressions, match from start, match exactly, and match anywhere.

Perspective Property Editor

As with other areas of Ignition, the Perspective module has a dedicated Property Editor panel that allows for fine-tuning of individual objects. The Property Editor is contextual, meaning that the properties available are dependent on which object or component is selected. 

The Property Editor contains a search field, allowing you to filter properties based on the text typed into the field. The image below shows the properties that are set on a Cylindrical Tank component. There are Binding  icons to the left of each of the properties that appear when you mouse over them. If you have a Cylindrical Tank on your view and click the Binding icon for the Value property, it will open the Binding window and you can set what the Cylindrical Tank component is bound to. In following example, the Value property of the Tank is bound to a Sine2 OPC Tag. 

In the Property Editor you can also set Position properties and add Custom properties to components, as well as create Params for passing values from one view to another.  To learn more about each of the categories in the Property Editor, refer to the Perspective Component Properties page. 

The Property Editor will allows show warnings if there an an issue with the selected component. This is commonly used to show when the quality on a property is non-good, or if there is some other configuration issue with a property. Clicking the red triangle in the upper right corner of the property category will display additional information. 

Page Configuration

Pages are how you navigate within a Perspective project. Each page represents a collection of views that are displayed in a single space. Just like a single tab of a web browser, this represents a single page (at a time). Before you begin to configure a page, it's important to understand the page layout. It has several specific regions and each behave differently: Top Dock, Bottom Dock, Left Dock, Right Dock, and a Primary View. The type of content you create and the design strategy you use for your views will determine where you place them on the page layout. For example, you may want a staff schedule to be available on every page, but not displayed all the time on the page. What you could do is configure the view on a docked window, thus making it available on demand when someone wants to see it by clicking on a tab in a sesson to view it, and clicking the tab again to hide it. Pages in Perspective describes in detail about page layout, page configuration, configuring docked views, and more. 

Open the Page Configuration window by clicking on the Settings  icon in the lower left corner. This is where you'll configure your pages in Perspective.

Initially, Shared Settings allow you to apply configuration changes to all pages (such as adding an omnipresent docked view), as well as specify the Corner Priority.

To the right of the Page Configuration column, the following buttons are present:

• Add - Creates a new Page Configuration.
• Trash -  Removes the selected Page Configuration.

Recently Modified Views

You'll also notice in the Page Configuration image below, there is a Recent Modified Views list. These are your most recent modified views along with a timestamp denoting when the last edit to the view was made and who made the modifications. If the project does not contain any views, the listing will be empty.

Keyboard Shortcuts

There are a lot of ways to speed up development once you are familiar with how Ignition works. There are many keyboard shortcuts in Perspective Designer that are listed throughout the Designer interface alongside menu options. To learn about keyboard shortcuts, go to the Keyboard Shortcuts page.

Vertical and Horizontal Guides

In the Designer workspace, you can set vertical and horizontal guides to help you align components. To set a vertical guide, slide your cursor along the top horizonal ruler and click it where you want it. The number of pixels will be displayed in the top ruler and a red vertical line will appear the length of your workspace. To remove the guide, click on the guide and drag it to the left into the vertical ruler and it will disappear. 

To set a horizontal guide, slide your cursor in the vertical ruler and click it where you want it. The number of pixels will be displayed in the left ruler and a red horizontal line will appear on the width of your workspace. To remove the guide, click on the guide and drag it to the top into the horizontal ruler and it will dsappear. 

You can add multiple vertical and horizontal guides. 

The Perspective Designer toolbar also has options for aligning components.