WebView EWO JavaScript Interface Examples

Getting Started

Create an empty file with the file ending ".html" inside of the /data/html/ folder of your project. Inside of this file the JavaScript and HTML Code is placed which should be displayed within the EWO.

Inside of a WinCC OA Panel for the WebView EWO the function loadSnippet must be called inside of the Initialize script of the EWO. It has to be considered that the file must be stated as relative path to the web server.

In case of a local usage it might look like this:

WebView_ewo1.loadSnippet("/data/html/myHtmlFile.html");

The JavaScript Code inside of the .html file is triggered as soon as the EWO is opened.

The oaJsApi library is automatically available by using loadSnippet.

Example

To call dpGet() simply add following example code to your stated .html file:

<script>
oaJsApi.dpGet('System1:_MemoryCheck.AvailKB:_original.._value',
  {  success: function (data)

      console.log("DP Value: " + data);
    }
  });
</script>

To call the dpGet() function the oaJsApi must be used as interface between JavaScript and Control. As the functions are performed asynchronously the value of the data point is returned within the success callback of the function. Within this callback the return value of the dpGet function is passed as data and can be used accordingly. Within the example above the return value is written to the LogViewer.

Depending on the used functions the success callback may return different objects or structures. This can be checked within the oaJsApi function documentation.

For using external JavaScript libraries they must be loaded manually within your code.

Trend Example

The following example demonstrates how to quickly implement a simple trend that displays live values from a data point. The used library is the plotly.js framework and the necessary steps may differ depending on your used JavaScript library. Please refer to the corresponding library documentation on how to correctly configure and add values to the objects.

The basic configuration steps for the WebView EWO must be performed before adding the plotly library to your project. Within the empty .js file of your WebView EWO you can add the example code below to display a live trend for the data point elements "_MemoryCheck.AvailKB" and "_MemoryCheck.UsedKB".

Figure: Live Trend Eample

After saving the file and opening the panel containing the WebView EWO the JavaScript code is loaded and the trend is displayed similarly to the picture above.

Example

<!--Trend container in which the plotly trend will be displayed-->
<div id="trend"></div>
<!--Script that will create the JavaScript trend and connect it to your WinCC OA values-->
<script type="text/javascript">
  url = "https://cdn.plot.ly/plotly-latest.min.js";
  //url = "/data/html/plotly.js-1.34.0/dist/plotly.min.js"
  //If no internet connection is available the Plotly libraries can be downloaded seperately
  //and placed on your local machine or network (e.g. your projects /data/html folder)
  $.getScript(url, function () {
    //$(document).ready(function() {
    //Adds a new plot area to the "trend" container
    Plotly.newPlot('trend',
      [{
        type: 'scatter'
      }],
      {
        //Trend Caption
        title: 'Memory Information',
        //X-axis label and formatting
        xaxis:
        {
          title: 'Time',
          type: 'date',
        },
        //Y-axis label
        yaxis:
        {
          title: 'RAM [kb]'
        }
      });
    //Adds a new trace/trend line to the plot area
    Plotly.addTraces('trend', {
      x: [new Date()],
      y: [0],
      name: 'AvailKB'
    }, 0);
    //Adds a second new trace/trend line to the plot area
    Plotly.addTraces('trend', {
      x: [new Date()],
      y: [0],
      name: 'UsedKB'
    }, 1);
    //dpConnect to the data points _MemoryCheck.AvailKB and System1:_MemoryCheck.UsedKB
    oaJsApi.dpConnect(['System1:_MemoryCheck.AvailKB:_original.._value',
      'System1:_MemoryCheck.UsedKB:_original.._value'], false, {
        success: function (data) {
          //success callback of the dpConnect function
          //Displays the content of the data object inside of the WebInspector Console log as well as inside of the WinCC OA LogViewer
          console.log(data);
          //time variable used to display the time inside of axis caption
          var time = new Date();
          //Adds the data point value (data.value[0]) of the first stated data point (_MemoryCheck.AvailKB)
          //at the current time to the first trace (ID:0)
          Plotly.extendTraces('trend', {
            x: [[time]],
            y: [[data.value[0]]]
          }, [0]);
          //Adds the data point value (data.value[1]) of the second stated data point (_MemoryCheck.UsedKB)
          //at the current time to the second trace (ID:1)
          Plotly.extendTraces('trend', {
            x: [[time]],
            y: [[data.value[1]]]
          }, [1]);
        }
      });
  });
</script>