How To Articles > How to View OPC UA Data in No-Code User Interface

How to View OPC UA Data in No-Code User Interface

OPC UA to No-Code User Interface


Open Automation Software Tags can be defined to connect to OPC UA Servers with the built in OPC UA Driver Interface. Once you have connected to your OPC UA Server, you can use the Open UIEngine No-Code User Interface to create HMI screens and visualize your data in a browser. 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 an OPC UA 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

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. Configure Your OPC UA Data Source

  1. First, you will need to open the Configure OAS application from the program group Open Automation Software.

  2. Select Configure >> License from the top menu and verify that OPC UA is one of the available Drivers in the lower left of the form. The demo license will have this by default. If you do not see OPC UA available, contact support@openautomationsoftware.com to update your license.

  3. Select Configure >> Drivers from the top menu.


  4. Select localhost or the remote service you wish to modify with the Select button to the right of the Network Node list.


  5. The Configure Drivers Screen will appear. Select Siemens from the Driver dropdown box.


  6. Enter a meaningful Driver Interface Name that you will refer to this physical connection when defining Tags with a OPC UA Data Source.

  7. Define the properties for the desired physical connection.

  8. Click the Add Driver button above the Driver list in the left pane to add the Driver Interface as an available selection when defining Tags in the next step.

For more detailed instructions on configuring your OPC DA data source, click here to see our Getting Started OPC UA tutorial.

Step 3. Configure Your Tags

OAS provides multiple ways to add and define tags:

To add a Tag manually:

  1. In the OAS Configure Application, select Configure >> Tags from the top menu.


  2. Select localhost or the remote service you wish to modify with the Select button to the right of the Network Node list.


  3. Click on the Add Tag button located at the top of the Tag browser on the left portion of the screen.


  4. A dialog box will appear. Enter a name for your new tag and click ok.

  5. A configuration screen will appear for your new tag. Select your data source type in in the Data Source dropdown box.


  6. Specify the correct data type in the Data Type dropdown box.

  7. Click Apply Changes at the bottom right of the window.

For more detailed instructions on configuring your tags, click here to see our Getting Started Tags tutorial.

Step 4. 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 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.

  1. Download a copy of the Water Tank Demo project file from the Open UIEngine Demo Projects page.

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

  3. Open the Tank HMI screen in the Tanks project to view the visualization.

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

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

  1. Click on the tag symbol to open the DYNAMIC COLORS context window.
  2. Click on the tag symbol inside the OAS Tag text box.
UI Engine set fill dynamic fill color

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

  1. Enter the remote OAS instance IP in the OAS Server text box
  2. Click on the connect icon
  3. Select the tag
  4. Select the tag’s Value variable
UI Engine tag selection window remote tag

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.

UI Engine dynamic color remote 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: