index.htm 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <h3>Current Data</h3>
  2. x:
  3. <span id="x"></span>
  4. <br/> y:
  5. <span id="y"></span>
  6. <h6>Last updated
  7. <span id="ut"></span> seconds ago.
  8. <span id="status"></span>
  9. </h6>
  10. <h3>Update Data</h3>
  11. <form id="xform" onsubmit="return transmit(this)">
  12. x:
  13. <input type="number" name="x" />
  14. <input type="submit" />
  15. </form>
  16. <form id="yform" onsubmit="return transmit(this)">
  17. y:
  18. <input type="text" name="y" />
  19. <input type="submit" />
  20. </form>
  21. <a href="wifi.htm">WiFi settings</a>
  22. <script>
  23. function g(i) { return document.getElementById(i) };
  24. var xhttp, updateTime;
  25. function transmit(f) {
  26. if (!xhttp) { //prevent simultaneous requests
  27. g("status").innerHTML = "updating...";
  28. xhttp = new XMLHttpRequest();
  29. xhttp.open("POST", "/api");
  30. xhttp.send(f ? (new FormData(f)) : "");
  31. xhttp.onreadystatechange = function () {
  32. if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
  33. var data = JSON.parse(xhttp.responseText);
  34. g("x").innerHTML = data.x;
  35. g("y").innerHTML = data.y;
  36. xhttp = null;
  37. g("status").innerHTML = "";
  38. updateTime = 0;
  39. }
  40. }
  41. }
  42. return false; //prevent form redirect
  43. }
  44. transmit();
  45. setInterval(function () { g("ut").innerHTML = ++updateTime; }, 1000);
  46. setInterval(transmit, 5000); //autoupdate display every 5s
  47. </script>