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


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. 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. For a step-by-step guide in starting your first Perspective project, check out our Quick Start Guide.

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

On this page ...

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, Window, and Container 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 much 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.
  • StyleClassesStyle Classes are new too. These are groups of settings like text color and size, margins, and more. They use CSS and can be bound to components for very dynamic styling across your project.


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.
  • Will your project 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 View. 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. By default, all components will be locked in using those location properties. 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 View with other views inside it. A Flex View creates a row or column structure out of your components. For example, you could use use a Flex View 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 Views that you can use. The Column View allows you to add your components, then arrange them differently for three unique sizes of screen. The Breakpoint View allows you to show two completely different views based on the size of the screen.

And of course you can nest all of the different types of views in any combination you want. However you choose to set up your project, you will want to figure out which containers and combinations of containers will give you the look you want. Try looking at your favorite webpages for inspiration, there are a lot of great (and terrible) User Interfaces out there to give you ideas. For example, you can use a Breakpoint View that when small, contains a Flex View that is a single column of components, and when large, contains a Coordinate View that shows a diagram of your entire facility.

Docked Views and Pages

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 is a view or 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.


IULocgo


Docked Views in Perspective

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.


Inherited Projects

Another design consideration is inheritance. Outside of the look and feel of a perspective session, in Ignition 8 you can have multiple projects that inherit resources. If you have views or scripts that you want every project to be able to use, you can create a master project and tell all other projects to inherit from that. You can then use the resources or allow designers to overwrite them as needed.

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.

The library of components in Perspective is growing continually. For example, an Alarm Status Table similar to the one in Vision is currently under development. Make sure to go to the forum, the ideas portal, or download a nightly build if you want to see what is coming up. 

IULocgo


Project Inheritance


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

SessionClient

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.

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

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

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

ComponentComponentComponents, 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.
PropertyProperty

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 PropertyClient TagEvery 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 ActionsComponent ScriptingEvent and Actions are configured similarly to the Component Scripting section in Vision. However, Perspective offers many more configurable events, and many more possible responses to these events (Actions).
StylesComponent Style Properties/CustomizerStyles 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 TermDescription
TransformA 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 MessagingPerspective 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.



  • No labels