A Vision-Oriented Guide to Perspective

An Intro to Perspective

Perspective is a flexible and versatile approach to HMI/SCADA design. Whereas Vision clients run on any platform that supports Java, Perspective Sessions run anywhere that supports a web browser. Additionally, sessions can run in the Ignition Perspective App or Perspective Workstation. This opens the door for a new level of support for mobile devices and tablets. Perspective's features follow a responsive design paradigm. This added dynamic and flexibility means you'll need put a little more planning into your projects.

The purpose of this guide is to describe the core functionality of Perspective in ways that make sense for Vision users.

The largest difference between Vision and Perspective is the way they do layout and project design. Perspective is primarily designed to allow you to create mobile responsive interfaces. Perspective is an Ignition module, using the same platform as the Vision module. It has access to all of the same systems like Tags, database connections, reports, and security (though security got a few updates in Ignition 8 too).

As we developed Perspective, we took the familiar aspects of using the Ignition Designer and provided more tools and flexibility. You will find many similarities between how you design a Vision project and a Perspective project. Anyone familiar with Vision can start designing quickly. For example, you are still working with containers, components, properties, bindings, Python scripting, Tags, and databases. While it is visually different from Vision, you will find the interfaces in Perspective familiar, but updated.

In order to take full advantage of the new systems in Perspective, there are a few things that you need to think about in a different way from your past Vision projects. But first, there are a few terms that we need to define in Perspective. We will be using them a lot to talk about the differences, so please familiarize yourself with them before continuing. A more complete set of terms is provided below.

• View: Think of this as a Vision Template and Window all rolled into one. You can put components in it, you can pass parameters into it, and you can nest them inside each other. Each view has a Layout type.
• Layout: There are several types of containers in Perspective. Each has its own set of position attributes for the components inside it, which is similar to the Vision Relative vs Anchored constraints. There is more than just X, Y, width, and height now.
• Page: This is a new concept for Perspective. Instead of having a Vision Client with multiple windows open at the same time, you open a single Page at a time and navigate by switching pages. Each page has its own main View and any docked Views you want.
• Session: A session is the Perspective equivalent to a Vision Client, except it runs in the browser instead of using Java. You can have multiple browser tabs open using the same session.
• Style Classes: Style Classes are style configurations, such as text color and size, and margins. Styling on components in Perspective utilizes CSS, and Style Classes are user defined configurations that allow you to quickly add several styling rules to a component. Style Classes exhibit inheritance, so making changes to a Style Class configuration will propagate those changes down to any components using the Style Class.

Perspective Design Considerations

With Perspective, it's more important than ever to have a plan before you start designing. Here is a short list of the things you want to think about before starting to build you visualization system. Note that this assumes you already have your Tags, database, and other Gateway items taken care of.

• Make a flowchart of your project. How will users navigate, and what is the tree structure for your pages and popups?
• Make a visual outline of each page. What docked windows do you want? What will you navigation look like?
• Get an idea of what windows you want, and how you want them to look.
• Does your project need to be mobile responsive? Plan the look for both a large and small version of each window.

Once you have an idea of what your session will look like, you can start designing.

Designing Your Main Views

Deciding on headers, tab strips, navigation trees or other methods of navigation is just a start in Perspective.

If you want to keep things simple, you can use a coordinate container. This will feel extremely similar to a Vision window since all the components have an X, Y, width, and height. Just drag your components onto the View and use the handles to stretch them to the size you want. These views will behave similar to a Vision window with all components anchored only to the top and left. You can change the Mode property in the root container to "Percent" to make the components behave similar to the Relative layout mode in Vision. Many will use this with a single docked view for navigation. This will create a project very similar to the Vision Single Tier Nav project template.

Views can be nested inside each other to create more complex structures. If you want a more structured layout, you can use the flex container with other views inside it. A flex container creates a row or column structure out of your components. For example, you could use use a flex container with a header at the top, and a coordinate container filling the rest of the view. This is another simple structure that creates a similar structure to a Vision window with an anchored header and relative layout components in the main space.

If you want to make your project mobile responsive, there are other types of containers that you can use. The breakpoint container allows you to show two completely different views based on the width of the session.

Docked Views and Pages

Docked Views in Perspective

Watch the video

A session, much like a client, is made up of more than one view, and you will often see multiple views at the same time. In Vision, you have multiple windows open, and certain windows are designed to be docked or floating. In Perspective you have Pages instead. A Page contains a set of views that open and close together. Most commonly, a page will have a main View and a docked view.

Navigation in Perspective means moving from one page to another, not opening and closing multiple windows. This allows you to use the forward and back buttons on your browser as a part of your navigation strategy.

There is a shared space that all pages inherit from, so you can set up docked views there, and any page that is open will automatically have those docked views open as well.

There are many settings for your docked views. You can set these views to be expandable, auto hide depending on session width, and a number of other options.

JSON Component Properties

Perspective components have a slightly different type of property. In Vision, we used a flat property structure where everything was a basic data type like integer or string, except for datasets. If you wanted a dynamic number of properties, you had to create a dataset, then use scripting to pull the values out. In Perspective, all of the properties on a component or container are JSON objects.

This means the properties have different types. They can be a Value (int, float, string, etc), an Array (a numbered set of sub-properties), or an Object (a complex set of sub-properties with key:value pairs). For arrays and objects, the sub members can be any of the three types.

Datasets can now be stored on components as an array of objects, where each object is a row, and each object has several values that make up the columns.

Bindings and Transforms

There are more options for bindings that were not possible in Vision, and this is only partly due to the new property structure. For example, there is an HTTP binding that allows you to directly connect to a web service and download or upload data.

On top of that, any binding can have transforms on it. A transform is an expression, map, or script that takes in the value of the binding and changes the output. If you chain together multiple transforms, the output of the previous transform is in input of the next. Think of number-to-color translations. Instead of creating a custom property with an expression on it and then binding a color to that custom property, you can do it all in one binding. Just create an expression binding, then add a map transform to change the output value to a color.

Components

Because of all the differences between Perspective and Vision, the two modules necessarily have a different set of components. There is no plan to ever have a one-to-one parity between components, and not all of the Vision components will make their way into Perspective components. Some components are new to perspective like the Menu tree and the Link components. The Link component was not feasible in Vision, but with Perspective Sessions living in a browser it makes sense to have that component.

Comparison of Perspective and Vision Functionality

Here is a quick comparison of summary of basic Perspective concepts, and how they are similar to / differ from their Vision analogs.

Perspective Concept	Similar Vision Concept	Perspective Description
Session	Client	A Perspective Session is a running instance of an application, much like a Vision client. Whereas Vision clients run as independent Java programs on a user's machine, a Perspective session runs natively in a web browser (or the Ignition Perspective App). Notably, a session can run across multiple pages in the same web browser. This is similar to how sessions function elsewhere on the Internet: log into your favorite shopping website and then open several new tabs, each one knows about your current shopping cart.
Page	Desktop (A.K.A multi-monitor clients)	A page in Perspective equates to a single page in a web browser. Pages are the main navigational unit in a session, and consist of one or more views. Each page is associated with a URL, which means the Forward and Back buttons in a web browser can be used to navigate to pages that have already been visited. Multiple pages can be open as part of the same Session, similar to how multiple desktops in a Vision Client may be open simultaneously. Views can be docked to specific edges of the page, or be used as a "Main View". Each page consists of at least a main view, but multiple views can be configured on a page. A page has specific regions where you can place instances of your views.
View	Window and Template	A View is the primary unit of design for Perspective. Perspective Views fill the roles of both Windows and Templates in Vision. Thus, you could think of a view as a window that can be nested inside other windows, or as a template that can be maximized or docked. Views have a root container, much like windows in Vision. Nesting one view inside another requires the Embedded View component. Parameters may be defined on the view, and then passed into the embedded view. There are also components that may dynamically create view instances (like the Flex Repeater component). In this way, views act like templates just as they do in the Vision module. Parameters can be passed into a view from an external source.
Container	Container + Layout Constraints	Containers are objects that contain components. You can nest one container inside of another. In Perspective, the way that components reposition and resize is managed on the container, and every component contains only simple information about its size and position, which is interpreted based on the container's specifications. There are several container types, and each type is defined by the layout type it uses.
Component	Component	Components, like in Vision, are displays, buttons, charts, labels, and other objects that display information to the user viewing the session. Components are the elements displayed in the Component Palette in the Designer.
Property	Property	Properties serve as a place to change how a component looks or behaves, or store specific pieces of information. In Perspective, the property tree of a component is a JSON object, and as a result, there are only three configurable data types: value, object, and array. Rather than characterize the expected format of the property's data (e.g., integer, boolean, or string), these data types control the structure of the property tree. No further configuration of data types is required.
Session Property	Client Tag	Every session has a configurable collection of properties that can be managed from the designer. They can be referenced from any view in the project, both from property/expression bindings and from scripting.
Events and Actions	Component Scripting	Event and Actions are configured similarly to the Component Scripting section in Vision. However, Perspective offers additional configurable events along with possible responses to these events (Actions).
Styles	Component Style Properties/Customizer	Styles in Perspective use CSS, and are configurable from the properties on each component. However, Perspective also offers the ability to configure style classes, which allow you to reuse configured styles across many different components. Styles can also be configured to change based on more advanced properties, like whether a mouse is hovering over the component, or how wide the viewport of the viewing device is.

New Features in Perspective

In addition to an entirely new set of components, Perspective offers a variety of new features in the realm of Project design.

Perspective Term	Description
Transform	A transform lies between a binding and the property it modifies, and provides an opportunity to change the value or format of the binding's output. For example, if a tag binding yields 0 for Normal and 1 for Faulted, we could use a transform to map 0 to Green and 1 to Red.
Component Messaging	Perspective offers the ability to communicate between components, using a similar style of messaging that one might use to communicate between clients in Vision. You can send messages from any component using the system.perspective.sendMessage function, and you can configure message handlers on any component. This is useful for controlling the behavior of one component from another in a different view.