{"id":1111,"date":"2021-06-23T19:30:00","date_gmt":"2021-06-23T17:30:00","guid":{"rendered":"https:\/\/www.rocworks.at\/wordpress\/?p=1111"},"modified":"2021-06-23T10:32:33","modified_gmt":"2021-06-23T08:32:33","slug":"display-opc-ua-data-via-graphql-in-a-html-page","status":"publish","type":"post","link":"https:\/\/www.rocworks.at\/wordpress\/?p=1111","title":{"rendered":"Display OPC UA data via GraphQL in a HTML page …"},"content":{"rendered":"\n

Here is a simple HTML page which fetches data from the OPC UA Automation Gateway<\/a> “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.<\/p>\n\n\n\n

<html>\n  <head>\n   <script type=\"text\/javascript\" src=\"https:\/\/www.gstatic.com\/charts\/loader.js\"><\/script>\n   <script type=\"text\/javascript\">\n      google.charts.load('current', {'packages':['gauge']});\n      google.charts.setOnLoadCallback(drawChart);\n\n      var data = null\n      var options = null\n      var chart = null\n\n      function drawChart() {\n\n        data = google.visualization.arrayToDataTable([\n          ['Label', 'Value'],\n          ['Tank 1', 0],\n          ['Tank 2', 0],\n          ['Tank 3', 0],\n        ]);\n\n        options = {\n          width: 1000, height: 400,\n          redFrom: 90, redTo: 100,\n          yellowFrom: 75, yellowTo: 90,\n          minorTicks: 5\n        };\n\n        chart = new google.visualization.Gauge(document.getElementById('chart_div'));\n\n        chart.draw(data, options);\n      }\n\n      function refresh() {\n        const request = new XMLHttpRequest();\n        const url ='http:\/\/localhost:4000\/graphql';\n        request.open(\"POST\", url, true);\n        request.setRequestHeader(\"Content-Type\", \"application\/json\");\n        request_data = {\n            \"query\": `{ \n              Systems {\n                unified1 {\n                  HmiRuntime {\n                    HMI_RT_5 {\n                      Tags {\n                        Tank1_Level { Value { Value } }\n                        Tank2_Level { Value { Value } }\n                        Tank3_Level { Value { Value } }                          \n                      }\n                    }\n                  }\n                }\n              }\n            }`\n        }\n        request.send(JSON.stringify(request_data));\n\n        request.onreadystatechange = function() {\n          if (this.readyState==4 \/* DONE *\/ && this.status==200) {\n            const result = JSON.parse(request.responseText).data\n            const x = result.Systems      \n            data.setValue(0, 1, x.unified1.HmiRuntime.HMI_RT_5.Tags.Tank1_Level.Value.Value);\n            data.setValue(1, 1, x.unified1.HmiRuntime.HMI_RT_5.Tags.Tank2_Level.Value.Value);\n            data.setValue(2, 1, x.unified1.HmiRuntime.HMI_RT_5.Tags.Tank3_Level.Value.Value);\n            chart.draw(data, options);\n          } \n        }\n      }\n\n      setInterval(refresh, 250)\n    <\/script>\n\n  <\/head>\n  <body>\n    <div id=\"chart_div\" style=\"width: 400px; height: 120px;\"><\/div>\n    <!--<button name=\"refresh\" onclick=\"refresh()\">Refresh<\/button>-->\n  <\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading Display OPC UA data via GraphQL in a HTML page …<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,39],"tags":[],"class_list":["post-1111","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-frankenstein"],"_links":{"self":[{"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1111"}],"version-history":[{"count":1,"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1111\/revisions"}],"predecessor-version":[{"id":1112,"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1111\/revisions\/1112"}],"wp:attachment":[{"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rocworks.at\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}