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

How to View MTConnect Data in No-Code User Interface

MT Connect to No-Code User Interface


Open Automation Software Tags can be defined to connect to MTConnect Servers with the built in MTConnect Driver Interface. Once you have connected to your MTConnect 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 a MTConnect 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 Your MTConnect 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 MTConnect 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 MTConnect 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 MTConnect 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 MTConnect Data Source.

  7. Leave Enable and Add Tags Automatically enabled.

  8. Specify the Live Data Url for the MTConnect stream.

  9. 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 MTConnect data source, click here to see our Getting Started MTConnect tutorial or watch the video tutorial below:

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