How To Articles > How to View Sparkplug B Data in No-Code User Interface

How to View Sparkplug B Data in No-Code User Interface

Open Automation Software allows for direct connection to Sparkplug B Edge of Network Node devices, providing the ability to read and write metric data. This data can then be visualized in the Open UIEngine No-Code User Interface. The Open UIEngine is a web-based interface that allows you to create HMI screens using a simple click and drag interface. This tutorial walks you though downloading and installing OAS, configuring a Sparkplug B driver, configuring tags and building a screen using Open UIEngine.

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

The OAS Service Control application will appear when the installation finishes on Windows. Use this application to start the 3 Services. Run the Configure OAS application on Windows and select Configure-Tags; if the first time running, the AdminCreate utility will run to create an Administrator login as shown in Step 1 of Getting Started – Security.

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. View in No-Code User Interface

The OAS Open UIEngine allows you to build and publish interactive UIs, HMIs and web applications powered by the OAS Platform and your real time data without writing any code.

Open the OAS Configuration application and select Configure > Options, then select the network node (localhost if working on the local machine) and click Select. Under the Networking tab, locate the field for REST API and Web Port Number. The default is 58725 but can be changed. If you are accessing the server from a remote client, you will also need to make sure your machine and/or company firewalls allow TCP traffic on the selected port. If you are using SSL we suggest using a different port number such as 58726 to avoid port conflicts. You can find more detailed information in our knowledge base article Configuring OAS Web Services.

Accessing the UIEngine interface

The UIEngine web application is included as part of your OAS platform installation and can be accessed on the following URL (based on the above configuration):

http://localhost:58725/app/uiengine

You should see a login screen like this:

To configure Open UIEngine security see the Security section of the Open UIEngine Docs.

View your data in UIEngine

Follow the steps in this section to create a new UIEngine project and screen with a label that displays your tag value data.

In the left hand side panel, click on the green plus sign next to PROJECTS to create a new project.
In the popup window, type in a project name and click on the Create Project button.
Your new project will appear in the side panel. Now click on the green plus sign next to your project to create a new screen.
In the popup window, type in a screen name and click on the Create Screen button.
Your new screen will appear in the side panel. Click on your new screen and then press the Edit button in the top toolbar.
In the Toolbox on the right hand side of the window, click on the Label object to create a new label.
A new label will appear on your canvas. Click on it to select it. In the properties panel on the right hand side, select the TEXT section. Click on the tag icon next to the text box and then again in the second text box that appears.
In the popup window, select a tag that you created in the previous section of this guide and then click on Value to map the label value to the value of the tag. In this example we will use the MyDataTag tag.
Once you’ve selected the tag, its name and property value will appear in the text box and the tag icon will turn green. You’ve now mapped a tag to the label.
To see the tag’s value in real-time, click on the RUN button.
As the data changes in your data source, you should see the value update in UIEngine.

Well done, you’ve now successfully mapped a tag’s value to a label.

Styling your label

You can now play around with the various styling options to make your label look great. The following video shows you how you can adjust various properties to make your tag value stand out.

Optional Steps

View the Water Tank Demo project

The default OAS installation includes a number pre-configured demo tags that will be used in a simple water tank visualization using Open UIEngine. These tags can be found in the Configure > Tags screen under the Tanks tag group. You can use this example to understand how to assign tags to elements such as symbols, labels and gauges to create interactive and dynamic graphic visualizations.

Download the Water Tank Demo project file from the UIEngine Demo Projects page.

Load the demo configuration file by following the steps on Loading a Config.

Open the Tank HMI screen in the Tanks project to view the visualization.
Click on the pump and valves to see how the colors and the tank water level changes dynamically.

Open UIEngine deployment types

You can leverage the OAS networking capabilities and Live Data Cloud to implement different security architectures and communicate with multiple remote OAS server instances.

Some typical architectures include:

Single server – Single OAS instance where tag data collection and the Open UIEngine are hosted on a single physical machine or container
Multiple servers, same network – One or more dedicated OAS instance(s) for data collection and a dedicated OAS instance for hosting Open UIEngine
Multiple servers, different networks – One or more dedicated OAS instance(s) for data collection in one or more private networks and a dedicated OAS instance in a separate public or private network.

Accssing remote tags

You can use OAS Basic Networking to allow the Open UIEngine instance to access remote tag values using the remote tag address notation where the IP address of the remote OAS instance is static and accessible. This can be written as:

\\192.168.1.116\TagName.Value

In Open UIEngine you can specify tag names using this notation. In the following example we will set the FILL COLOR based on a tag value.

Click on the tag symbol to open the DYNAMIC COLORS context window.
Click on the tag symbol inside the OAS Tag text box.

When you click on the tag icon a tag selection window will appear. To select a remote tag follow these steps:

Enter the remote OAS instance IP in the OAS Server text box
Click on the connect icon
Select the tag
Select the tag’s Value variable

You will now see the remote tag notation in the tag text box. This means Open UIEngine is now sourcing its tag value from a remote OAS instance tag.

Create your own visualizations

You can now go ahead and create your own screens and add components that link to the tags you added from your own data source. The Open UIEngine Quick Start Guide will get you started in no time.

You can find more information about the features and capabilities of Open UIEngine in the following resources:

Knowledge Base