<!DOCTYPE html> <html><head> <title>Minimal Read Example</title> <meta charset="UTF-8"> <!-- CSS styles for HTML content --> <style> html, body { width:100%; height: 100%; margin: 0; } </style> <!-- Refresh display every 2 seconds NOTE: this example doesn't contain any error handling! --> <script language="javascript"> function doReload() { var request = new XMLHttpRequest(); // readData.php is the server-side script that communicates with WebJson and delivers the answer request.open("POST", "readData.php", true); request.setRequestHeader("Content-Type", "application/json"); request.addEventListener('load', function(event) { // this code is executed after an answer arrives // TODO: error handling is missing var j = JSON.parse(request.responseText); var ti = j['data']['Memory.TestInteger']; // apply value var ratio = Number((ti['value'] / 65535).toFixed(3)); document.getElementById("stop1").offset.baseVal = ratio; document.getElementById("stop2").offset.baseVal = ratio; var percent = Number((ti['value'] * 100 / 65535).toFixed(1)); document.getElementById("text1").innerHTML = percent + '%'; // request again in 2 seconds window.setTimeout(doReload, 2000); }); // this is the request: read "Memory.TestInteger" // there may be multiple values in the request list request.send('{"opcode":"read", "seq":0, "name":["Memory.TestInteger"]}'); } </script> <!-- the doReload() starts the periodical request --> </head><body onload="doReload();"> <!-- main page content --> <svg width="100%" height="100%" viewBox="0 0 4000 3000" preserveAspectRatio="xMidYMid meet"> <rect x="0" y="0" width="4000" height="3000" style="fill:#CCCCCC" /> <!-- progress bar --> <linearGradient id="bar1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#0000FF; stop-opacity:1" /> <stop offset="10%" style="stop-color:#0000FF; stop-opacity:1" id="stop1" /> <stop offset="10%" style="stop-color:#000000; stop-opacity:1" id="stop2" /> <stop offset="100%" style="stop-color:#000000; stop-opacity:1" /> </linearGradient> <text x="100" y="600" style="fill:#000000; font-size:500px;">Bar</text> <rect x="100" y="700" width="3800" height="1000" style="fill:url(#bar1)" /> <!-- numeric value --> <text x="100" y="2100" style="fill:#000000; font-size:500px;">Value</text> <text x="100" y="2600" style="fill:#000000; font-size:500px;" id="text1">10%</text> </svg> </body></html>