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

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

OPC Server to UI Engine


Open Automation Software Tags can be defined to connect to Classic OPC Data Access 2.xx and 3.0 Servers with the built in OPC Interface. Once you have connected to your OPC Server Data, 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 Server 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. Configure OPC Server 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 OPC in the Data Source dropdown box.


  6. Use the Browse button to the right of the OPC Item to browse OPC Servers for the desired OPC Item.


  7. Select Local, the desired OPC Server, branch within the OPC Server, and OPC Item and click OK.


  8. Specify the desired OPC Update Rate for the Tag.

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

To add Tags with One Click OPC:

  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. To begin the One Click OPC process select the Group you would like to import to in the Tag configuration. If you want to import to the Root Level, select the Tags Group at the top of the tree. Then select the One Click Import button on the top menu bar.


  4. Click on the Import OPC DA 2.XX or 3.0 Items Button in the pop up window.


  5. Use the One Click OPC Wizard to browse for a branch as a starting position within an OPC Server or just select the OPC Server name itself to add all items from the selected OPC Server. For the best networking design select OPC Servers from Local even if you are configuring a remote OAS Service.


  6. Select to enable the options to Get Data Type from OPC Server and optionally the Descriptions. Additionally if you want to specify to Trend all of the points select Trend Points.

  7. Click Add Tags and it will automatically add all of the OPC Items from the OPC Server Branch you have selected and all of the sub Branches beneath it.

  8. Select the Save button on the toolbar at the top.

For more detailed instructions on Configuring OPC Server Tags, visit our Getting Started OPC tutorial or the One Click OPC tutorial or watch the video tutorial below:

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.

  1. In the left hand side panel, click on the green plus sign next to PROJECTS to create a new project.



  2. In the popup window, type in a project name and click on the Create Project button.



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



  4. In the popup window, type in a screen name and click on the Create Screen button.



  5. Your new screen will appear in the side panel. Click on your new screen and then press the Edit button in the top toolbar.





  6. In the Toolbox on the right hand side of the window, click on the Label object to create a new label.



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



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



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



  10. To see the tag’s value in real-time, click on the RUN button.



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

  1. Download the Water Tank Demo project file from the 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.

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.

  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.
Open UIEngine set 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
Open UIEngine select 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.

Open UIEngine Fill 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: