See espterm.github.io

cfg_wifi_conn.html 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
  7. <title>Connecting to Network :: ESPTerm</title>
  8. <link href="/css/app.8b43b1d-en.css" rel="stylesheet">
  9. <script src="/js/app.8b43b1d-en.js"></script>
  10. <script>
  11. var _root = location.host;
  12. var _demo = 1;
  13. </script>
  14. </head>
  15. <body class="">
  16. <div id="outer">
  17. <div id="content">
  18. <img src="/img/loader.gif" alt="Loading…" id="loader">
  19. <h1>Connecting to Network</h1>
  20. <div class="Box">
  21. <p><b>Status:</b> <span id="status"></span><span class="anim-dots">.</span></p>
  22. <a href="cfg_wifi.html" id="backbtn" class="button">Back to WiFi config</a>
  23. </div>
  24. <div class="Box">
  25. <p>
  26. If you're configuring ESPTerm via a smartphone, or were connected
  27. from another external network, your device may lose connection and
  28. this progress indicator won't work. Please wait a while (~ 15 seconds),
  29. then check if the connection succeeded.</p>
  30. <p>
  31. To force enable the built-in AP, hold the BOOT button until the blue LED
  32. starts flashing. Hold the button longer (until the LED flashes rapidly)
  33. for a "factory reset".</p>
  34. </div>
  35. <script>
  36. var xhr = new XMLHttpRequest();
  37. var abortTmeo;
  38. var failCounter = 0;
  39. var messages = {"disabled":"Station mode is disabled.","idle":"Idle, not connected and has no IP.","success":"Connected! Received IP ","working":"Connecting to selected AP","fail":"Connection failed, check settings & try again. Cause: "};
  40. function onFail() {
  41. $("#status").html("Telemetry lost; something went wrong, or your device disconnected.");
  42. $('.anim-dots').addClass('hidden');
  43. }
  44. function getStatus() {
  45. xhr.open("GET", 'http://'+_root+'/cfg/wifi/connstatus');
  46. xhr.onreadystatechange = function () {
  47. if (xhr.readyState == 4) {
  48. if (xhr.status == 200) {
  49. clearTimeout(abortTmeo);
  50. try {
  51. var data = JSON.parse(xhr.responseText);
  52. var done = false;
  53. var msg = messages[data.status] || '...';
  54. if (data.status == 'success') {
  55. msg += data.ip;
  56. done = true;
  57. }
  58. if (data.status == 'fail') {
  59. msg += data.cause;
  60. done = true;
  61. }
  62. $("#status").html(msg);
  63. if (done) {
  64. // $('#backbtn').removeClass('hidden');
  65. $('.anim-dots').addClass('hidden');
  66. } else {
  67. // ask again after a short delay
  68. window.setTimeout(getStatus, 1000);
  69. }
  70. } catch(e) {
  71. failCounter++;
  72. console.log(e);
  73. // repeat
  74. if (failCounter > 5) {
  75. onFail();
  76. }
  77. else {
  78. window.setTimeout(getStatus, 1000);
  79. }
  80. }
  81. } else {
  82. onFail();
  83. }
  84. }
  85. };
  86. // XHR timeout
  87. abortTmeo = setTimeout(function () {
  88. xhr.abort();
  89. onFail();
  90. }, 4000);
  91. xhr.send();
  92. }
  93. getStatus();
  94. </script>
  95. <div class="botpad"></div>
  96. <div class="NotifyMsg hidden" id="notif"></div>
  97. </div>
  98. </div>
  99. </body>
  100. </html>