WebView EWO JavaScript Schnittstelle - Beispiele

Getting Started

Legen Sie eine leere Datei mit der Endung .html innerhalb des /data/html/ Ordners ihres Projektes an. Innerhalb dieser Datei wird der JavaScript und HTML Code hinterlegt, welcher innerhalb des EWOs angezeigt werden soll.

In Ihren WinCC OA Panels muss nun für das EWO die Funktion loadSnippet innerhalb des Initialize Skriptes aufgerufen werden. Hierbei ist darauf zu achten, dass die Datei als relativer Pfad zu ihrem WebServer angegeben werden muss.

Im Falle des lokalen Einsatzes würde der Aufruf z.B. folgendermaßen aussehen:

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

Der JavaScript Code innerhalb der .html Datei wird beim Aufschalten des EWOs ausgeführt.

Die Bibliothek oaJsApi steht durch den Einsatz von loadSnippet automatisch zur Verfügung.

Beispiel

Um dpGet() aufzurufen muss beispielsweise folgender Code innerhalb der angegebenen .html Datei aufgenommen werden:

<script>
oaJsApi.dpGet('System1:_MemoryCheck.AvailKB:_original.._value',
{
  success: function (data)
  {
    console.log("DP Value: " + data);
  }
}
);
</script>

Für den Aufruf von dpGet muss die oaJsApi als Schnittstelle zwischen JavaScript und Control verwendet werden. Da die API Funktionen asynchron durchgeführt werden muss der Rückgabewert über den success Callback der Funktion behandelt werden. Innerhalb deses Callbacks werden die Rückgabewerte der dpGet Funktion als Parameter übergeben und können entsprechend verwendet werden. Innerhalb des Beispiels oberhalb wird der Rückgabewert als Ausgabe in den LogViewer geschrieben.

Abhängig von der verwendeten Funktion unterscheiden sich die Objekte und Strukturen welche innerhalb des success Callbacks zur Verfügung stehen. Diese können innerhalb der oaJsApi Dokumentation nachgelesen werden.

Trend Beispiel

Das nachfolgende Beispiel demonstriert wie ein einfacher Trend eingebunden werden kann, der Online Werte von Datenpunkten darstellt. Die verwendete Bibliothek ist das plotly.js Framework und die erforderlichen Schritte können bei der Verwendung anderer JavaScript Bibliotheken abweichen. Bitte beachten Sie hierfür die Dokumentation der jeweiligen JavaScript Bibliotheken für die Konfiguration und Verbindung von Werten der Objekte.

Die grundlegende Konfiguration des WebView EWOs muss durchgeführt werden ehe die Plotly Bibliothek dem Projekt hinzugefügt werden kann. Innerhalb der leeren .html Datei, welche durch loadSnippet geladen wird muss folgender Beispielcode aufgenommen werden um einen Live Trend für die Datenpunktelemente "_MemoryCheck.AvailKB" und "_MemoryCheck.UsedKB" darzustellen.

Abbildung: Live Trend Beispiel

Der JavaScript Code wird nach Öffnen des Panels ausgeführt und der Trend wird vergleichbar zu dem Bild oberhalb angezeigt.

Beispiel

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