How to Visualize Sparkplug B Data in a WPF .NET Application
Open Automation Software can connect directly to Sparkplug B Edge of Network Node devices to read Metric data. All OAS data can be viewed with a Windows Presentation Foundation .NET application. OAS Host Application interface also supports writes to Sparkplug B Metric values, providing updates from WPF. This tutorial walks you through downloading and installing OAS, configuring a Sparkplug B driver, automating tag creation with the Host Application interface, and visualizing tag data in .NET WPF with either C# or VB. Programming is not required if you use the designer interface.
Step 1. Download and Install the Open Automation Software and Start the OAS Service
If you have not already done so, you will need to download and install the OAS platform. Fully functional trial versions of the software are available for Windows, Windows IoT Core, Linux, Raspberry Pi and Docker on our downloads page.
On Windows run the downloaded Setup.exe file to install one or more of the Open Automation Software features. Select the default Typical installation if you are not sure what features to use or the Custom installation if you want to save disk space on the target system. When prompted agree to the End User License Agreement to continue the installation.
For more detailed instructions and video tutorials, visit the installation guide for your system:
Windows Installation | Linux Installation | Raspberry Pi Installation | Dockers Installation
When the installation is finished the OAS Service Control application will appear. Use this application to start the 4 Services. If this is the first time installing the software it will automatically enter Runtime with an example Tag Configuration.
Step 2. Set Up Sparkplug B Host App to Access EoN Node Data.
Select Configure-Drivers.
Enter a meaningful Driver Interface Name that you will refer to this connection and define the properties.
Set the driver to Sparkplug B.
Enter the Host property to the IP Address of the of the host broker or just use localhost for a local broker.
Set the Port property of the host broker to connect to. The default port is 1883 or 8883 for SSL.
Note: The OAS MQTT Broker can be used to host data locally. To use another broker on the default ports on the same computer change the OAS MQTT Broker Port under Configure-Options-MQTT Broker.
Enter the User Name and Password if required.
Set the MQTT Protocol Version to V311 or V500.
Set the Client ID to a unique value, each driver interface must have a specific value different than all other clients connecting to the host.
Set the Mode to Host App for OAS to control the online state of each Edge of Node defined to the shared Host Application ID. Or set to Client App to access EoN Node data without controlling their state.
Set the Host ID to the specific value that the Edge of Nodes will be using as the Host Application ID.
Set the Sparkplug B Version to 2.2 or 3.0.
To automatically add tags for each Metric from the matching Group, Edge of Nodes, and Devices enable the property Add Client Tags Automatically.
When enabled optionally set the Filter Groups, Edge Nodes, and Devices that tags should be added from for each of their Metrics. Leave the Filter fields blank to include all Edge of Nodes publishing data to the broker.
Select the Add Driver button in the left part of the form to add the Driver Interface as an available selection when defining Tags in the next step.
You are now ready to add tags for specific Sparkplug B EoN Node Metric values.
Note: If the Driver Interface property Add Client Tags Automatically was enabled tags will be created for you, you can skip this step to add tags manually.
Select Configure-Tags.
Note: You can add organizational Groups as many levels deep as you prefer and add tags to groups. To do this first add a Group to Tags Group at the root level, then right click on the Group in the right window to add additional Groups or Tags.
Select Add Tag.
Change the Data Source Tag property to Sparkplug B.
Select the correct Driver Interface from the Driver Interface pull down list.
Specify the Client Group ID, Client Edge Node ID, Client Device ID, and Client Metric Name for the Edge of Node Metric value to read and write.
Select the Data Type of the Tag to match the data type of the Metric.
Select Apply Changes and the current value for the Metric should appear with Good Quality.
Select the Save button from the toolbar to save your configuration.
You can view the Getting Started with Sparkplug B Video to familiarize yourself with the above steps to setup OAS as a Sparkplug B Edge of Network Node and a Host Application
- 00:00 – Introduction
- 01:10 – Download OAS
- 01:46 – Quick Start
- 02:08 – Edge of Network Node
- 05:52 – EoN Tags
- 07:04 – Host Application
- 09:20 – SpB Client Tags
- 10:22 – Programatic Interface
- 10:59 – CSV Export / Import
- 12:27 – Multiple Metric Tags
- 13:46 – Modbus
- 16:10 – DCMD Metric Write
- 17:00 – Data Route
- 17:58 – Networking
- 18:17 – Save Configuration
- 18:56 – OAS Platform
Step 3. Visualize Your Data with .NET
Project Setup
HMI applications can be developed using Microsoft Visual Studio 2010 (or later). Programming is not required if you use the visual editor.
Open your existing Visual Studio application or start a new one, either VB or C#. Specify WPF App (.NET Framework) as the project type.
Verify that the Target Framework is Version 4.61 or greater.
If you have installed Open Automation Software after installing Visual Studio you should see the Open Automation Software group in your toolbox. If it is not there you can add a reference in your project to the OPCWPFDashboard.dll. It will be in your installation folder, most likely: C:\Program Files\Open Automation Software\OAS. Add the tools by right clicking on the toolbox and selecting Choose Items. In the Choose Toolbox Items dialog box under the WPF tab, select all of the items that start with OPCWPF and say OK.
Add a Viewbox
If you are unfamiliar with the Viewbox control in WPF it is very useful. By setting it’s Stretch property to Uniform, it will automatically transform it’s contents to fit the user’s screen. It is easier to develop with the Stretch Property set to “None” and then set it back to “Uniform” at the end. You will want your Grid inside of your Viewbox. Your XAML should look like this:
Add a Label Control
Add an OPCWPFLabel control to the window by double clicking on it in the toolbox. Set the Content_Tag property of the label to the Tag property that you want the label to display. Do this by either typing it in the box if you know the name (they are case-sensitive) or use the ellipse next to the property box. If you are using the demo tag configuration that installs with Open Automation Software use Ramp.Value.
Referencing Tags
In the tag browser, you will need to select your network node and then the tag and the property you want to display. Your network node will be the location you have Open Automation Software installed on. If it is your local machine, it will be localhost, otherwise, it could be a registered domain name or an IP address. Here are some examples of referencing tags based on their location:
Local Tag: myTag.Value Local Tag in a Group: myGroup. myTag.Value Basic Networking: \\192.168.0.1\myGroup.myTag.Value Live Data Cloud Networking from Local OAS Engine: RemoteSCADAHosting.myLiveDataCloudNode.myGroup.myTag.Value Live Data Cloud Networking from Remote OAS Engine \\192.168.0.1\RemoteSCADAHosting.myLiveDataCloudNode.myGroup.myTag.Value
Add a Button Control
Next, add a button to the window by double clicking on OPCWPFButton on the toolbox. Use the Pump tag for the button, it is a Boolean data type. Set Content_Tag in the properties window to Pump.Value. In the ContentFormatBooleanFalse property enter The Pump is On and the in the ContentFormatBooleanTrue property enter The Pump is Off. That way the button text will be something more meaningful than simply True or False.
To change the color of the button when it’s value changes, use the Background01_Tag property. Set it to Pump.Value. The BackgroundFalse and BackgroundQualityBad properties control the background color for when the value is false and bad quality.
Next, SetValue_Tag property to Pump.Value. This specifies what value to change when the button is clicked.
Add a Radial Gauge
Drag an OPCWPFRadialGauge onto the screen. Click the ellipse next to the Needles property. This will open the Needles Collection dialog box. Click the Add button. This adds a Needle to the Radial Gauge. Set the Value_Tag property to Ramp.Value, the Ramp Tag again. It is a Float Data Type, enter 0 for the ValueFormatFloat property.
Click F5 to compile and run your project. Your screen should look similar to this.
For more detailed instructions on using OAS with WPF, visit .NET WPF HMI in our knowledge base or watch the video below:
Also, see Getting Started – .NET Trend and Getting Started – .NET Alarm.