Ignition 8.1
Ignition 7.9
Ignition 7.8
Sepasoft - MES Modules
Cirrus Link - MQTT Modules
Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples
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.
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.
Once you have an idea of what your session will look like, you can start designing.
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.
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.
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.
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 more configurable events, along with more 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. |
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. |
| Next_link |
|---|