WinCC OA has the ability to embed HTML / JS / CSS into a project. These features are essential for creating modern dashboards. In this blog, you will explore how to use modern web libraries to interact with WinCC OA. With a few clicks, you can turn WinCC OA into a web server that can do many things, including hosting web pages inside of your project. The easiest way to enable the webserver is to locate the 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.
You can deliver HTML / CSS / JS web files, by adding them to the following project directory location. Most of the time your starting file will be an index.html file.
{Path to your Project}\data\html
Connecting your web pages to WinCC OA can be done using standard tools inside of the graphical editor (GEDI) that will allow you to build responsive designs. By using a combination of WinCC OA’s Layout Management and CSS you can build 100% responsive design for all types of devices. In this example, we’ve created a new .xml panel, added the WebView object, and an initialize script that will enable communication between the HTML page and WinCC OA.
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 “B” shows exact same dashboard code base displayed on a mobile device.
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.
For a complete step by step tutorial on this topic please visit our knowledge base article: Using Web Technologies in WinCC OA to Build Dashboards