Allgemein, Frankenstein

Display OPC UA data via GraphQL in a HTML page …

Here is a simple HTML page which fetches data from the OPC UA Automation Gateway “Frankenstein”. It uses HTTP and simple GraphQL queries to fetch the data from the Automation Gateway and display it with Google Gauges. It is very simple and it is periodically polling the data. GraphQL can also handle subscription, but then you need to setup a Websocket connection.

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      var data = null
      var options = null
      var chart = null

      function drawChart() {

        data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Tank 1', 0],
          ['Tank 2', 0],
          ['Tank 3', 0],
        ]);

        options = {
          width: 1000, height: 400,
          redFrom: 90, redTo: 100,
          yellowFrom: 75, yellowTo: 90,
          minorTicks: 5
        };

        chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);
      }

      function refresh() {
        const request = new XMLHttpRequest();
        const url ='http://localhost:4000/graphql';
        request.open("POST", url, true);
        request.setRequestHeader("Content-Type", "application/json");
        request_data = {
            "query": `{ 
              Systems {
                unified1 {
                  HmiRuntime {
                    HMI_RT_5 {
                      Tags {
                        Tank1_Level { Value { Value } }
                        Tank2_Level { Value { Value } }
                        Tank3_Level { Value { Value } }                          
                      }
                    }
                  }
                }
              }
            }`
        }
        request.send(JSON.stringify(request_data));

        request.onreadystatechange = function() {
          if (this.readyState==4 /* DONE */ && this.status==200) {
            const result = JSON.parse(request.responseText).data
            const x = result.Systems      
            data.setValue(0, 1, x.unified1.HmiRuntime.HMI_RT_5.Tags.Tank1_Level.Value.Value);
            data.setValue(1, 1, x.unified1.HmiRuntime.HMI_RT_5.Tags.Tank2_Level.Value.Value);
            data.setValue(2, 1, x.unified1.HmiRuntime.HMI_RT_5.Tags.Tank3_Level.Value.Value);
            chart.draw(data, options);
          } 
        }
      }

      setInterval(refresh, 250)
    </script>

  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
    <!--<button name="refresh" onclick="refresh()">Refresh</button>-->
  </body>
</html>