Startup - Perspective Session

1. With the Perspective Designer open, go to the Project Browser, and expand Perspective.
   
   
   
   
2. In Perspective, views are the primary unit of design and a container provides a way of organizing and laying out components within a view. There are a variety of container types that support different layout strategies.  
   
   To keep this example simple and get you started creating your first view, we used a Coordinate container type.
   
   1. In the Project Browser, click on the Views folder and right click on New View... 

   2. Select a Root Container Type from the dropdown. Select Coordinate container type.

   3. Check the Page URL checkbox if you want your view attached to the Page URL.

   4. Click Create View.

      
      

      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. The Page URL automatically gets filled in when the View Name is typed 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, or drag a Tag to the value property.

   Note: This example requires that you are connected to the Programmable Device Simulator and set the program to Generic. 
   
   
   1. Cylindrical Tank: Drag a Tag from your Tag Browser on to the value property. This example uses a Ramp1 Tag.
      
      
      
      
   2. Label: Enter 'Tank 100' next in the Text property field.
   3. Text Field: Enter 'Hello World!' in the Text property field. While the component is selected, you can also click and drag the arrow handles to resize them and move them in the Designer workspace.  
      
      
      
      
5. Another way and the simplest way to add a Tag to a component is to go into the Tag Browser, select the Tag (i.e., Sine0) you want and drag it into your view. A pop-up will appear giving you several selections for components to use. We selected an LED Display to show our Tag Value. 
   
   
   
   
6. Repeat that process to create two more LED Displays using Sine1 and Sine2.
   
   
   
   
7. Save your project by selecting File > Save.

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

Let's create a second view (i.e., SecondView). Add a Power Chart component to show history on the values of several Sine Tags.

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 a Power Chart component on to your view.
   
   
   
   

3. With the Power Chart selected, put your Designer in Preview Mode and click the Tags icon  in the top left of the chart. This will open the built-in Tag Browser in your Power Chart where you can add or drag Tags into your chart.  
   
   

   Note: You will need to have Tag History configured and stored in a database on the Tags you want to add to the Power Chart. If you don't see the Tag(s) you want to add in the built-in Tag Browser, you will need to enable History on the Tag in the Tag Editor.
   
   
   
   
   

4. Select some Tags and click the Add Selected Tags.  You can also change the Time Range Selector if you want to show your Tags in Realtime or Historical. In the following image, we added the Sine0, Sine1 and Sine2 Tags. We also selected Realtime, and 15 minutes as our timeframe to display the Sine values on the chart.
   
   
   
   
   

5. You'll notice that the Power Chart will immediately start plotting data and the Tags you added are shown at the bottom of the chart. That's all it takes to create a Power Chart.
   The Power Chart has a host of settings to customize how you can display your data: axes, plots, time range selector, and pen styles. To learn more, refer to the Perspective Power Chart page.
   
   

   Note: The Power Chart component has a responsive breakpoint so it fits better on mobile devices.  The default breakpoint is 750px and is configurable.  For more information, go to the Perspective Power Chart page.
   
   
   
   

6. Save your project by selecting File > Save.

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 Components 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 addressed in Pages in Perspective.

1. Open the Page Configuration by clicking the Tool icon ( ) tab at the bottom left corner 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 page to another in a Perspective Session.  
   1. At the top of the Page Configuration, click on Create New View (i.e., TopNavView).
   2. Use the default Root Container Type (i.e., Coordinate).
   3. Do not check the Page URL checkbox to create the URL page. This isn't necessary because it is a shared setting.

   4. Click Create View.
      
      
      
      

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

4. 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.
   
   
   
   
5.  Assign each Button component unique text. Select the first Button component, and change the 'text' property to 'FirstView' in the Perspective Property Editor.
   
   
   
   
6. 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...).
   
   
   
    
7. 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.
      
      
      
      
8. 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...
      
      
9. 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.
      
      
      
      
      
10. 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.
       
       
       
       
       

11. 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.
    
    
    
    
12. When you're finished setting up your Page Configuration, Save your project. Now the TopNavView will be shared on all the pages of your Perspective Session.

There are three ways to launch a Perspective Session:

1. From the Home tab on the Gateway Webpage, click the View Projects button below the Perspective Session Launcher. 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 > Launch Session. 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 Home page. Under the Perspective Session Launcher, click View Projects.
   
   
   
   
   
3. The window will refresh with a list of Perspective projects. Click the Launch Project button to launch a 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, an Update Notification window will appear in your session if this option is enabled in Project Properties of the Designer.  Your session will automatically update in 30 seconds or you can click Update Now. If the Update Notification is not enabled, your session will update immediately.