Designing a Project

This document follows the Downloading and Installing Ignition guide from the previous section and assumes you have enabled the Quick Start feature on the Gateway. See the Commissioning the Gateway section for more details.

Additionally, this guide will use the Perspective module to visualize our data and project. The resources configured within the Gateway's Quick Start, including the Device Simulator, tags, Tag Historian, and Internal Alarm Journal, will also be used for this project.

The project this guide creates will start from a blank Perspective project and end with several components with bindings that interact, as well as visualizing historical tag data, and creating an alarming system that alerts users if a tag reaches a certain threshold. By the end of this guide, we will have a simple project that looks similar to this:

Creating the Project

To begin working on a project, we will first need to create one.

1. In the Designer Launcher, select the Gateway to create the project on and then click Open.... We will be using our locally installed Gateway in this guide.

2. The Designer will initialize and then prompt you for login credentials. Use the credentials you set up when first commissioning the Gateway.

3. After logging in, a list of projects on the Gateway will be displayed. Click on + New Project on the top left. This will bring you to the New Project Setup page.

   note

   Since we enabled Quick Start on the Gateway, we will already have a project titled Sample Quick Start. This project is a good example of what your own project can eventually look like, but for the purposes of this guide, we will create a new project.

4. Give your project a name and title, then click Create New Project. Your new project will initialize and open the Designer. We will call our project myProject and give it a title of My Project.

   

Your project should now be ready to build in.

Working in Perspective

This section will encompass all the steps taken within the Designer's Perspective workspace.

Creating a View

Since we are using Perspective, we will need to first create a view.

1. In the Project Browser on the top left of the Designer, expand the Perspective Module.

2. Right-click on the Views folder and select New View.... A New View configuration window will pop up.

3. Give your new view a name and choose a Root Container type, then click Create View. We will name our view myView and keep the default Coordinate Container selection.

   

Your view is now created and has a blank workspace to begin designing your project.

Preparing Perspective Components

Let's start putting components into our view. Components are the main features an operator interacts with within a project and includes things like charts, input components, and display components.

1. Begin by dragging two Cylindrical Tanks, a Slider, and a Progress Bar from the Perspective Component Palette onto your workspace and orient them on the bottom as shown in the image below. We will bind these together using tag data in a later section.

   

   tip

   You can use the Designer's red dotted guiding lines to help line up components so that they are on the same axis.

2. Next, drag an Alarm Journal Table to the space above the components from the previous step. We will use this table to display our alarm history in a later section.

   

3. Drag a Time Series Chart from the Component Palette onto the top of your workspace. Use the handles to resize the component so that it sits flush with the top of the view and the top of the Alarm Journal Table. We will use this to visualize your tag's historical data in a later section.

   

4. Save your project.

Your components are now ready to have tags bound to them to display data.

Adding Tags from a Device

Since components visualize and interact with data, they do not do anything if no tags or data is bound. This section will go over the most common way a component gets data to display, typically from PLCs or external devices through an OPC UA connection using OPC tags.

In this example, we will use the Gateway Quick Start's preconfigured Device Simulator, as this mimics an external device that tags pull data from. The steps below assume you already have a Device Simulator configured from Quick Start. See the Connecting with OPC UA section for details on creating a connection to a physical device or Device Simulator if you did not enable Quick Start.

1. Go to the Tag Browser on the bottom left of your Designer.

   

2. Click on the Add () icon, then select Browse Devices. this will bring up the Connected Devices popup.

   

3. The Ignition OPC UA Server will populate under the OPC Browser column. Go to the Device Simulator by expanding Ignition OPC UA Server > Devices. The preconfigured simulator will be called [Sample_Device].

   

4. Expand the [Sample_Device] folder and click on the Random folder. This folder contains all the tags we need for this basic project.

   note

   You can choose to import all the tags from your device. However, since we don't need the other tags on the Device Simulator, we will just import the Random folder.

5. With the Random folder selected, click on the Add () icon in the middle of the Connected Devices popup. This will add the Random folder and its tags to the staging area for import.

   

   tip

   You can add tags to a different Tag Provider than the default provider by changing the provider in the Tag Browser before importing any tags.

6. Click OK to add the Random folder.

The folder and tags within will now appear in the Tag Browser.

Creating Tags Within the Tag Browser

Besides pulling tags from a device over OPC UA, you can also create your own tag. This section will demonstrate how to create a Memory tag, which will be used in a later section.

1. In the Tag Browser, click on the Add () icon, then select New Standard Tag > Memory Tag. This will open the Tag Editor.

   

2. Give your tag a name. We will name our tag myMemoryTag. Since we are making a simple binding to a component, we do not need to configure any other properties at this time. After you have named your tag, click OK.

   

Your Memory tag is now created and ready to use.

Setting Up Tag History

Now that your tags have been created, we can set up history on the tags we will be using. This lets us record historical tag values and display them to see trends and past data.

Storing historical data typically requires setting up a database connection and a history provider.

We will be storing history to the SQLite SQL Historian resource configured by the Gateway's Quick Start when first commissioning the Gateway.

caution

Even though we are using the SQLite database connection for this example, it is NOT recommended to store history using SQLite. A dedicated external database, such as Microsoft SQL Server or MySQL, should be used instead, as they will handle the potential amount of writes and reads needed for development and production data much better.

1. In the Tag Browser, right-click on the Memory tag you created, then select Edit tag(s). This will open the Tag Editor.

2. Click on the History category of the Categories section.

   

3. Under the History Enabled property, change the field from false to true. This will enable the rest of the history fields.

4. Under the Storage Provider property, change the field to the history provider you set up previously. In this example, we will be using the Sample_SQLite_Database configured from Quick Start.

5. Click OK to save these settings.

We will now do the same thing with the tag in the Random folder that we will be binding later.

1. In the Tag Browser, expand the Random folder, right-click on RandomInteger1, and then select Edit tag(s). This will open the Tag Editor.

2. Click on the History category of the Categories section.

3. Under the History Enabled property, change the field from false to true. This will enable the rest of the history fields.

4. Under the Storage Provider property, change the field to the history provider you set up previously. In this example, we will be using the Sample_SQLite_Database configured from Quick Start.

5. Click OK to save these settings.

Binding Tags to Components

Now that we have added our Perspective components, configured our tags, and enabled history on them, we can start binding them to our Perspective components to visualize our data.

Binding the Memory Tag

We'll first bind our Memory tag to the Slider and left Cylindrical Tank. This will allow us to control our Memory tag using our Slider and easily see the tag's value through the Cylindrical Tank.

1. In the Perspective Workspace, click on the Slider component. Selecting the Slider will populate the Perspective Property Editor with the Slider's configurable settings.

   tip

   You can also select the Slider in the Project Browser by navigating through Perspective > Views > myView > root > Slider. Other components are also selectable through the Project Browser.

2. Go to the value property. You'll notice that hovering over this property will cause a light gray Add Binding () icon to appear. Click on the icon to open the Edit Binding window.

3. Click on the Tag Binding Type. This will open the Configure Tag Binding section.

   

4. Click on the Browse Tags () icon to the right of the Tag Path field. This will open a navigatable tree.

5. Within the tree, expand the Tags folder and select the Memory tag you created previously, then click OK. This will populate the Tag Path field with your Memory tag.

   

6. Toggle the Bidirectional property to enable it. This will allow our Slider to control our Memory tag.

7. Click OK.

You'll notice that changing the Slider will now also update your Memory tag. Next, we'll bind the Cylindrical Tank to display the Memory tag's value.

1. Click on the left Cylindrical Tank.

2. Click on the Add Binding () icon for the Cylindrical Tank's value property.

3. In the Edit Binding window, click on the Tag Binding Type.

4. Click on the Browse Tags () icon.

5. Expand the Tags folder, select your Memory tag, then click OK.

   note

   We did not enable the Bidirectional property for the Cylindrical Tank. This is because we are only using the Cylindrical Tank to read the tag's value without writing to it.

Your Cylindrical Tank should now be displaying your Memory tag's value. Notice that when adjusting the Slider, the Cylindrical Tank's value will also adjust.

Binding the OPC Tag

Now we'll bind our OPC tag RandomInteger1 to our Progress Bar and right Cylindrical Tank. This will allow users to see the values coming in from our RandomInteger1 tag.

1. In the Perspective Workspace, click on the Progress Bar component. Selecting the Progress Bar will populate the Perspective Property Editor with the Progress Bar's configurable settings.

2. Go to the value property and click on the Add Binding () icon. This will open the Edit Binding window.

3. Select the Tag Binding Type. This will open the Configure Tag Binding section.

4. Click on the Browse Tags () icon to the right of the Tag Path field.

5. In the tag tree, navigate to Tags > Random, select RandomInteger1, and press OK.

   

6. Click OK on the Edit Binding window. Note that we don't have to enable the Bidirectional option since the Progress Bar will only read the tag value and not write.

Your Progress Bar is now displaying your RandomInteger1 tag value. We'll now do the same for our second Cylindrical Tank.

1. Click on the right Cylindrical Tank.

2. Click on the Add Binding () icon for the Cylindrical Tank's value property.

3. In the Edit Binding window, click on the Tag Binding Type.

4. Click on the Browse Tags () icon.

5. In the tag tree, navigate to Tags > Random, select RandomInteger1, and press OK.

6. Click OK on the Edit Binding window. Similar to the Progress Bar, we don't have to enable the Bidirectional option since the Cylindrical Tank will only read the tag value and not write.

Your second Cylindrical Tank should now be displaying the same value as your Progress Bar.

Displaying Tag History

Now that we have our tags' live values displayed in our project, let's focus on displaying our tags' history. To do this, we will bind our historical data to the Time Series Chart we created in the Preparing Perspective Components section.

1. Click on The Time Series Chart to bring up its properties in the Perspective Property Editor. The property we will want to utilize is series.

2. Expand the series property, and then the 0 property if they aren't expanded already. You'll notice that unlike the previous component properties, there are additional subproperties beneath series. This is because unlike value, series is an array that contains multiple sources of data.

3. Click on the Add Binding () icon for the Chart's series > 0 > data property.

4. Select the Tag History Binding Type.

5. Change the Time Range property to Historical.

   

6. Click on the Browse Tags () icon.

7. In the tag tree, navigate to Historical Providers > Sample_SQLite_Database > myGateway:default. Select your Memory tag, and then press OK.

   

8. Press OK on the Edit Binding window.

Your Memory tag's history should now be displayed on the Time Series Chart. We'll now add the historical data from RandomInteger1.

1. Click on The Time Series Chart to bring up its properties in the Perspective Property Editor.

2. Since series is an array, we can add additional properties to it. Hovering over the series property will bring up an Add Array Element... () icon. Click on this icon to add an element to the array. This will add a new 1 property under series.

   

3. Click on the Add Binding () icon for the Chart's series > 1 > data property.

4. Select the Tag History Binding Type.

5. Change the Time Range property to Historical.

6. Click on the Browse Tags () icon.

7. In the tag tree, navigate to Historical Providers > Sample_SQLite_Database > myGateway:default > random. Select RandomInteger1, and then press OK.

   

8. Press OK on the Edit Binding window.

Your RandomInteger1 OPC tag should now also be displayed on the Time Series Chart.

Configuring Alarms

In addition to the above sections, another common task is to set up alarms on your tags. This section will demonstrate how to set up an alarm on a tag and notify a user.

Setting up an alarm consists of three different parts: an On-Call Roster, a Notification Profile, and an Alarm Notification Pipeline.

Creating an On-Call Roster

We'll first set up an On-Call Roster.

1. Go to your Gateway Webpage. If your Gateway is installed locally, you can access your Gateway at http://localhost:8088/.

2. Navigate to Services > Alarming > Rosters. The Alarm Rosters page will open.

   

3. Click on Create Alarm Roster +. The Create Alarm Roster form will be displayed.

4. Give your roster a name, then click Create Alarm Roster. We will name ours myRoster.

5. Your roster should now be created. Click on the three dots menu on the right, and then press Manage Users. The Manage Users window will appear.

   

6. Click on the Select User Source dropdown and select default. The default User Source contains the admin user you created when first commissioning the Gateway.

7. With the admin user displayed, click on the Add to Roster () icon and then press Save Changes on the bottom right.

   

Your admin user is now part of the roster you just created.

Creating an Alarm Notification Profile

Next, we'll set up a Notification Profile.

1. On the Gateway Webpage, navigate to Services > Alarming > Notification. The Alarm Notification Profiles page will open.

2. Click on Create Profile +. The Create Alarm Notification Profile form will be displayed.

3. We will be using the Email Notification option for this example. Select it, then press Next.

4. Fill out form according to your SMTP profile settings. Take note of the Username field, as you will need this value later. Once you have filled out the form, click Create Alarm Notification Profile.

   

   note

   In this example, we will be using Papercut, a lightweight SMTP server. See the Email Notification Profile User Manual page for more details on the various email notification properties.

Your Email Notification Profile has been created and is now ready to use.

Adding Contact Information

Even though we have our admin user in our On-Call Roster, we still need to add contact information to admin. Your Alarm Notification Profile will use this contact information when sending out alarm alerts.

1. On the Gateway Webpage, navgiate to Platform > Security >> User Sources to open the User Sources page.

2. Click on the three dots menu on the default user source, then select Manage Users.

   

3. Click on the three dots menu on the admin user, then select Edit.

   

4. Under the Contact section, click Add +. This will add a new row.

5. Change the Type to E-Mail, and use the Username value you had from step 4 of the previous section for the Value column.

6. Click on the Save () icon, then click Save Changes.

Your admin user is now ready to begin receiving alarm notifications.

Creating an Alarm Pipeline

Now, we'll set up an alarm pipeline.

1. In the Project Browser in the Designer, right-click on the Alarm Notification Pipelines item, then select New Alarm Pipeline. You will be prompted to name the new pipeline. We will name our pipeline myPipeline.

2. The Alarm Pipeline workspace will open. Drag a Notification block from the top down onto the workspace.

3. Click on the Notification block. The Pipeline Block Editor will update to show the properties for the selected Notification block.

   

4. In the Notification tab, click on the dropdown menu and select your Notification Profile. Ours will be called myEmailNotificationProfile.

   tip

   You can edit different things about the selected Email Notification Profile, such as the From Address of the email address. For the purposes of this example, we will leave those settings as the default vales.

5. Click on the Contacts tab and select the On-Call Roster we created previously.

6. On the Alarm Pipeline workspace, connect the START node to the IN node of your Notification block, then save your project.

   

Now that we've created an Alarm Notification Pipeline, we can use it on the tags we want to keep an eye on. In this example, we'll only set up an alarm on RandomInteger1, since our Memory tag is directly controlled by an operator.

1. Go to the view you created in your Perspective project. The Designer interface will change and show the Tag Browser again.

2. Right-click on the RandomInteger1 tag and select Edit tag(s).

3. Go down to the Alarms category, then press the Add () icon.

4. Under Alarm Mode Settings, change the Mode to Above Setpoint and the Setpoint to 85. This will cause the alarm to trip if RandomInteger1 reaches 85 or above.

5. Under Notification > Active Pipeline, select the pipeline we created previously and then click OK.

Your alarm will now send an email notification to the admin user's contact information whenever RandomInteger1 reaches our setpoint.

Displaying Alarm History

Now that we have your alarms sending notifications, we will want to see our historical alarm data.

We will be using the Alarm Journal configured by the Gateway's Quick Start. See the Alarm Journal page for more information on setting up your own Alarm Journal.

1. Click on the Alarm Journal Table component to populate the Perspective Property Editor with the Alarm Journal Table's settings.

2. Change the name property to the actual name of the Alarm Journal configured in your Gateway. If you are using the Quick Start, the name should be Sample_Alarm_Journal_Profile.

Your Alarm Journal Table should now populate with the data from the Gateway's Alarm Journal.

Accessing Your Project

Now that you have finished your project, you can launch the application to see what it looks like to an operator. You can view your project through the Designer's Preview Mode, launch the application through the Designer's Tools Menu, or use Perspective Workstation.

View Your Project in Preview Mode

Preview Mode will allow you to interact with your project as if you were an operator without needing to leave the Designer.

1. Click on the Project menu item at the top of the Designer.

2. Toggle Preview Mode to enable it.

View Your Project Through the Tools Menu

Using the Designer's Tools Menu will allow you to launch your project without using a launcher.

1. Click on the Tools menu item at the top of the Designer.

2. Navigate to the Launch Perspective... option, then click Launch Session.

View Your Project Using Perspective Workstation

Perspective Workstation is usually how operators would launch your Perspective project. Because of this, it is recommended to ensure your project launches correctly through the Perspective Workstation launcher.

1. Open the Perspective Workstation launcher we installed in the Downloading and Installing Ignition section.

2. Click Add... on the bottom of the launcher.

   

3. Select the local Gateway, then click Select Gateway.

   

4. Select the project we just created, then click Add Application(s). Your project will be added to the My Applications window.

   

5. Click on your project, then click Open....

   

Perspective Workstation will launch your project and you can now interact with it as if you were an operator.