Tutorials: Using Web Technologies in WinCC OA to Build Dashboards

Back to All Topics

Introduction

WinCC OA has the ability to embed HTML/JS/CSS into a project. These features are essential for creating modern dashboards.  In this quick tutorial, you will learn how to use modern web libraries to interact with WinCC OA.

  1. Activate the WinCC OA Web server with a few clicks, simply turn your WinCC OA instance into a web server that can do many things, including hosting web pages inside of your project. The easiest way is to locate webclient_http.ctl file, then drag and drop the .ctl file onto your WinCC OA Console.  After you’ve added it to your console, you can turn it on like any other Control Manager.

Note(s)

The WinCC OA web server opens default ports and if you have other web servers on your computer it may not accept them.  If you need to, you can create your own server inside of a .ctl file by using the code httpServer(false,{the port you would like to use}).  For more information review the WinCC OA help file to check all the options of the httpServer() function.

  1. Add HTML / CSS / JS Files to the Project – Once you have some web files, you will need to add these files to the following location.
{Path to your Project}\data\html 

Most of the time your starting file will be an index.html file.

  1. Add a Webview Object to your .pnl or .xml File – Resize the WebView object as big or small as you wish.  Consider using a combination of WinCC OA’s Layout Management and CSS to make your web page 100% responsive for all types of devices.
  1. Initialize the WebView Object – After you’ve created a new .xml panel and added the WebView object. Next, you will need to add one line of code to the Initialize script. This line will embed the oaJsApi.js file that is needed into the WebView object that will enable communication between the HTML page and WinCC OA.
  1. Use JavaScript to get Data Point Values to execute DPGets() inside of the HTML page you will need to write the following code.
oaJsApi.dbConnect({your datapoints},true,{

//Your logic to do stuff


}
  1. View the Results – Image “A” shows the dashboard via a Quick client test in a normal-sized view.  The two numbers, 3 and 4, are being read from WinCC OA and will update when the datapoint changes.
Image A

Image “B” shows exact same dashboard code base displayed on a mobile device. 

Image B

Summary

HTML / CSS / JS for responsive design has been around for a long time. The toolsets are mature and readily available. If you are looking to create modern applications using WinCC OA, please feel free to contact us for guidance.

Was this article helpful?
How can we improve this article?
Scroll to Top