12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- <h3>Current Data</h3>
- x:
- <span id="x"></span>
- <br/> y:
- <span id="y"></span>
- <h6>Last updated
- <span id="ut"></span> seconds ago.
- <span id="status"></span>
- </h6>
- <h3>Update Data</h3>
- <form id="xform" onsubmit="return transmit(this)">
- x:
- <input type="number" name="x" />
- <input type="submit" />
- </form>
- <form id="yform" onsubmit="return transmit(this)">
- y:
- <input type="text" name="y" />
- <input type="submit" />
- </form>
- <a href="wifi.htm">WiFi settings</a>
- <script>
- function g(i) { return document.getElementById(i) };
- var xhttp, updateTime;
- function transmit(f) {
- if (!xhttp) { //prevent simultaneous requests
- g("status").innerHTML = "updating...";
- xhttp = new XMLHttpRequest();
- xhttp.open("POST", "/api");
- xhttp.send(f ? (new FormData(f)) : "");
- xhttp.onreadystatechange = function () {
- if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
- var data = JSON.parse(xhttp.responseText);
- g("x").innerHTML = data.x;
- g("y").innerHTML = data.y;
- xhttp = null;
- g("status").innerHTML = "";
- updateTime = 0;
- }
- }
- }
- return false; //prevent form redirect
- }
- transmit();
- setInterval(function () { g("ut").innerHTML = ++updateTime; }, 1000);
- setInterval(transmit, 5000); //autoupdate display every 5s
- </script>
|