You're currently browsing the Ignition 8.0 docs. Click here to view the latest docs.

Before we talk about how to add components to Perspective Views, it's important to first understand all the objects that comprise a Perspective Session.  It will help you determine your design strategy within a browser-based design environment and how components inside a View will behave before you ever drag a component into a View. 

With that in mind, we recommend reading the Perspective Sessions section of the manual to fully understand how all the objects that make up a Perspective Session work together to create dynamic pages. You may also want to peruse the page on new navigation strategies that are offered in Perspective. This Quick Start guide can be completed without reading any other topics. 

On this page we demonstrate how to add components to a View and bring them to life by showing live values, displaying Tag History data on a chart, configuring pages for navigating within a session, and launching a Perspective session.

1. Creating Views and Adding Components

Views are the primary unit of design and can be displayed across the top, bottom or sides of a page, or even a whole page in a Perspective Session. You can drag and drop components into a View, and make them display text, show Tag Values, and display Tag History data.

  1. With the Perspective Designer open, go to the Project Browser, and expand Perspective.

  2. Before you create a view, you have the option to create folders for your views which is a good way to organize your views. In this example, a Test folder was created to store views.
    1. Click on the Views folder and right click on New View... to create a View. When you enter the View Name, you'll notice that the Page URL will also be entered at the same time, unless it is your very first view in your project, then the page will be mounted to the Page URL "/" or "root" as shown in the image below. Note: The Page URL will only get created if you check the Page URL checkbox.
    2. Select the Layout from the dropdown. Each view contains one root level container which proivdes a way of laying out and organizing child components. This example uses the Coordinate layout type which is the simplest type of view, but you can also choose from TabBreakpoint, or Flex containers.
    3. Make sure your Page URL is checked if you want the Page URL to be created at the same time your view is created.

      Match the URL with the Folder Structure

      Perspective will match the Page URL with the View's folder structure upon creation. In the example below, the FirstView was created in the Test folder. Perspective knows to match the URL to the View.

      Note: If your View Name contains a space, such as "Station B", the Page URL will replace the space with a hyphen. Notice how the Page URL automatically gets filled in when the View Name is typed in.

    4. Click Create View when you have everything filled in.

  3. The Designer will refresh and now you're ready to begin adding components into your view. On the right side of the Designer, click on the grayed out Perspective Components banner to open the Components Palette. Drag the Text FieldLabel, and Cylindrical Tank components into the View. 

  4. To add Tag values to each of the components, click on the component and enter the value in the Perspective Property Editor:
    1. Cylindrical Tank - Drag a Tag from your Tag Browser on to the value property. This example uses a generic simulator Tag, Ramp1. (Note: This requires that you are connected to the Generic Simulator. Refer to the Quick Start Guide for Connecting to a Device).
    2. Label - Enter 'Tank' next to the text property.
    3. Text Field - Enter 'Hello World!' in the text property. While the component is selected you can also click and drag the arrow handles to resize them.  

      Once all the values are added to the components, they will look like the following image in your View.

  5. Another way and the simplest way to add a Tag to component is to go into the Tag Browser, select the Tag you want and drag it into your view. A popup will appear giving you several selections for components to use. In this example, select a few Tags and drag them into the view. You will see a popup asking you what type of component you want to use to show these Tag values. Select LED Display.

    Three LED Displays will be created displaying live values from the three Tags you selected.

  6. Don't forget to Save your project by selecting File > Save in the menubar.

To learn more about bindings, go to the Bindings in Perspective page.

2. Showing Tag History in a Time Series Chart

Displaying Tag History data using an Time Series Chart. This requires that you have Tag History already set up. Refer to the Quick Start Guide, Add History to Tags

Let's create a second view (i.e., SecondView), add an Time Series Chart component to show history on the values of the LED Displays.

  1. Right click on the Views → Test folder and create a new view (i.e.,SecondView).
  2. Once you have your second view created, drag an Time Series Chart component on to your view.

  3. With the Time Series Chart selected, click on the chain link Binding icon under the series > 0 > data property.

  4. Select the Tag History binding type.
  5. From the Select Tags section, click on the Tag Browse icon on the far right. Browse to select your Tag path. You can select multiple Tags if you want. We selected Realistic1 and Realistic2 from the Generic Simulator device.

  6. Now let's configure the following Tag History binding settings:
    1. Double click in the Alias column for each Tag to add an Alias
      1. Add the Alias for Realistic1 as temp.
      2. Add the Alias for Realistic2 as pressure.  
    2. Set the Point count to 100.
    3. Set Polling to 2.
    4. The Tag History binding returns a Dataset. You will see the format type in the Binding Preview in the lower left.
  7. Click OK.

  8. Now you have Tag History data in your Time Series Chart. 

  9. To add a title, scroll ot the Title object in the PROPS section and set the following values:

    1. title.visible - Set to true.
    2. title.text - Enter a title: Tank 100 Pressure and Temp Tracking.

  10. Save and Publish your project.

3. Navigating in a Perspective Session

One of the most important aspects when launching a Perspective Session is having a solid navigation design so the user knows where they are, where they've been, and where they are going. How you configure your page settings dictate how the browser navigates and displays each page of your Perspective Session.

Page is the main navigational element in a Perspective Session and represents a collection of views that are displayed in a browser window. When we created the two views in the Creating Views and Adding Component section above, we also configured the Page URL associated with each new view. You have the option of configuring the Page URL in a separate step if you don't want to do it at the time you create your new view. This is addessed in Pages in Perspective.

  1. Open the Page Configuration by clicking the Tool icon () tab at the bottom left of your Designer workspace. You'll notice that the two views (i.e., FirstView and SecondView) also have their Page URLs created. This was done at the same time we created each view.

    First View mounted to the root

    You'll notice the first View created in a project is automatically mounted to the root. The FirstView defaulted to "/" which denotes a "root" page.

  2. Now, let's create a navigation view (i.e., TopNavView) to be shared by all pages in our project. This page will contain components that will link to different pages allowing users to navigate from one from one page to another in a Perspective Session.  
    1. Select the Shared Settings option under Page Configuration.
    2. At the top of the Page Configuration, click on Create New View (i.e., TopNavView).
    3. Use the default Layout (i.e., Coordinate).
    4. Do not check the Page URL checkbox to create the URL page. This isn't necessary because it is a shared setting.
    5. Click Create View

  1. Go to the Project Browser and select your new view (i.e, TopNavView). This will show the handles for resizing the view. Resize the root container so the view looks like a banner or bar at the top of the workspace.

  2. Add two Button components to navigate between pages. 
    You can drag two Button components from the Perspective Component Palette or drag one in and duplicate (Ctrl D) the first Button.

  3.  Assign each Button component unique text. Select the first Button component, and change the 'text' property to 'FirstView' in the Perspective Property Editor.

    With the FirstView button still selected, right click and choose Configure Events... (You can also click Components on the top menubar and choose Configure Events...).

  4. This opens the Event Configuration on Button window.
    1. Expand Mouse Events, and select onClick.
    2. Under Organize Actions, click the () icon and select Navigation from the dropdown.

    3. Under Navigation Mode, click Page, and select the "/" from the dropdown which is the Page Url for the FirstView.
    4. Click OK.

  5. Now let's repeat Steps 3 and 4 for the second Button component:
    1. Select your second Button component, and change the 'text' property to 'SecondView' in the Perspective Property Editor.
    2. With the SecondView button still selected, right click and choose Configure Events...

  6. The Event Configuration on Button_0 window will open.
    1. Expand Mouse Events, and select onClick.
    2. Under Organize Actions, click the () icon and select Navigation from the dropdown.
    3. Under Navigation Mode, click Page, and select the "/second" from the dropdown which is the Page Url for the SecondView.
    4. Click OK.

  7. Lastly, set the navigation view (i.e., TopNavView) as a docked view so it appears on the top of every page in your project.
    1. Click on the Tool icon () at the bottom of your Designer workspace to open the Page Configuration.
    2. Select Shared Settings under Page Configuration, click on the Add button at the top of the Page Layout. Select your navigation view (i.e., TopNavView) from the dropdown, and press OK.

      If the dropdown is empty or you are missing views, the pages (not views) were never created. Go back to Step 2 in Navigating in a Perspective Session and configure your pages. Once your pages are configured, you will see them in the dropdown list.

      Your navigation view (i.e., TopNavView) will appear at the top of your page layout.

  8. You can edit any of the docked view properties by clicking on the name of view in the page layout. Edit any of the properties and click OK. Regardless of your TopNavView's height, the Size property here will determine the height of the view in your session.

  9. When you're finished setting up your Page Configuration, Save and Publish your project. Now the TopNavView will be shared on all the pages of your Perspective Session.

4. Launching a Perspective Session

Once your project is created and pages are configured, you're ready to launch a Perspective Session. 

There are two ways to launch a Perspective Session:

  1. From the Gateway Webpage home, click the Projects button below the Perspective logo. All the projects in your Gateway will be displayed. Click the Launch Project button for a project.
  2. Manually enter the web address of the project in your browser.
  3. From the Designer on the menubar, click Tools > Launch Perspective. This method is great if you are both a designer and a user.

See Launching a Perspective Session for more information.

Gateway Webpage

  1. Open a new browser window and enter the IP address of the Ignition project Gateway. You can also use 'localhost:8088'

  2. On the Gateway Webpage you will see the Get Started page. Under the Perspective logo, click View Projects.

  3. The window will refresh with a list of Perspective projects. Click the Launch Project button to launch the project in a Perspective Session.

Project Updates

If you have a Perspective Session open and a change was made in the Designer that was saved and published, an Update Notification window will appear in your session. Your session will automatically update in 30 seconds or you can click Update Now.

Here is what your Perspective session will look like in your browser window. Toggle between the FirstView and SecondView to switch between pages in your session. The FirstView displays the components and the SecondView displays the XY Chart.



  • No labels