Quick Start - Perspective Session

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 Tab, Breakpoint, 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 Field, Label, 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.

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.

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

2. 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.
   
   
3. 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.
   
   
   
   
4.  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...).
   
   
   
    
5. 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.
      
      
      
      
6. 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...
      
      
7. 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.
      
      
      
      
      
8. 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.
      
      
      
      

9. 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.
   
   
   
   
10. 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.

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.