See espterm.github.io

cfg_wifi.html 6.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  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>WiFi Settings :: 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. var _demo_aps = "{\n \"result\": {\n \"inProgress\": 0,\n \"APs\": [\n {\"essid\": \"Cisco\", \"bssid\": \"88:f7:c7:52:b3:99\", \"rssi\": 205, \"rssi_perc\": 100, \"enc\": 4, \"channel\": 7},\n {\"essid\": \"UPC Wi-Free\", \"bssid\": \"8a:f7:c7:52:b3:9b\", \"rssi\": 203, \"rssi_perc\": 100, \"enc\": 5, \"channel\": 1},\n {\"essid\": \"UPC Wi-Free\", \"bssid\": \"0a:95:2a:0c:84:31\", \"rssi\": 166, \"rssi_perc\": 32, \"enc\": 5, \"channel\": 1},\n {\"essid\": \"MujO2Internet_2EEB96\", \"bssid\": \"d0:60:8c:2e:eb:96\", \"rssi\": 174, \"rssi_perc\": 48, \"enc\": 4, \"channel\": 4},\n {\"essid\": \"Internet\", \"bssid\": \"38:72:c0:32:bd:0d\", \"rssi\": 164, \"rssi_perc\": 28, \"enc\": 2, \"channel\": 10},\n {\"essid\": \"MyO2Internet_08C850\", \"bssid\": \"78:c1:a7:08:c8:50\", \"rssi\": 186, \"rssi_perc\": 72, \"enc\": 4, \"channel\": 11},\n {\"essid\": \"UPC Wi-Free\", \"bssid\": \"06:7c:34:9a:6f:7c\", \"rssi\": 167, \"rssi_perc\": 34, \"enc\": 0, \"channel\": 11},\n {\"essid\": \"Internet_B0\", \"bssid\": \"5c:f4:ab:11:3b:b3\", \"rssi\": 175, \"rssi_perc\": 50, \"enc\": 3, \"channel\": 13},\n {\"essid\": \"UPC5716805\", \"bssid\": \"08:95:2a:0c:84:3f\", \"rssi\": 165, \"rssi_perc\": 30, \"enc\": 4, \"channel\": 1}\n ]\n }\n}"; </script>
  14. </head>
  15. <body class="cfg">
  16. <div id="outer">
  17. <nav id="menu">
  18. <div id="brand" tabindex=0>ESPTerm<sup> DEMO</sup></div>
  19. <a href="term.html" class="icn-back">Back to Terminal</a>
  20. <a href="cfg_term.html" class="icn-terminal ">Terminal Settings</a><a href="cfg_wifi.html" class="icn-wifi selected">WiFi Settings</a><a href="cfg_network.html" class="icn-network ">Network Settings</a><a href="cfg_system.html" class="icn-configure ">System Settings</a><a href="help.html" class="icn-help ">Quick Reference</a><a href="about.html" class="icn-about ">About ESPTerm</a></nav>
  21. <div id="content">
  22. <img src="/img/loader.gif" alt="Loading…" id="loader">
  23. <h1>WiFi Settings</h1>
  24. <div class="Box errors hidden">
  25. <span class="lead">Validation errors for:</span>&nbsp;<span class="list"></span>
  26. </div>
  27. <div class="Box message hidden"></div>
  28. <div class="Box errmessage hidden"></div>
  29. <!-- AP -->
  30. <form class="Box str mobcol" action="wifi_set.html" method="GET" id="form-ap">
  31. <h2 tabindex=0>Built-in Access Point</h2>
  32. <div class="Row checkbox x-ap-toggle">
  33. <label>Enabled</label><!--
  34. --><span class="box" tabindex=0></span>
  35. <input type="hidden" id="ap_enabled" name="ap_enable" value="1">
  36. </div>
  37. <div class="Row x-ap-on">
  38. <label for="ap_ssid">AP SSID</label>
  39. <input type="text" name="ap_ssid" id="ap_ssid" value="TERM-027451" required>
  40. </div>
  41. <div class="Row x-ap-on">
  42. <label for="ap_password">Password</label>
  43. <input type="text" name="ap_password" id="ap_password" value="">
  44. </div>
  45. <div class="Row x-ap-on">
  46. <label for="ap_channel">Channel</label>
  47. <input type="number" name="ap_channel" id="ap_channel" min=1 max=14 value="7" required>
  48. </div>
  49. <div class="Row range x-ap-on">
  50. <label for="tpw">
  51. Transmit power <span class="display x-disp1 mq-phone"></span>
  52. </label>
  53. <input type="range" name="tpw" id="tpw" step=1 min=0 max=82 value="60">
  54. <span class="display x-disp2 mq-no-phone"></span>
  55. </div>
  56. <div class="Row checkbox x-ap-on">
  57. <label>Hide SSID</label><!--
  58. --><span class="box" tabindex=0></span>
  59. <input type="hidden" name="ap_hidden" value="0">
  60. </div>
  61. <div class="Row buttons">
  62. <a class="button icn-ok" href="#" onclick="qs('#form-ap').submit()">Apply!</a>
  63. </div>
  64. </form>
  65. <!-- STA -->
  66. <form class="Box str mobcol expanded" action="wifi_set.html" method="GET" id="form-sta">
  67. <h2 tabindex=0>Join Existing Network</h2>
  68. <div class="Row checkbox x-sta-toggle">
  69. <label>Enabled</label><!--
  70. --><span class="box" tabindex=0></span>
  71. <input type="hidden" id="sta_enabled" name="sta_enable" value="1">
  72. </div>
  73. <div class="Row explain nomargintop x-sta-on">
  74. <span class="spacer"></span>
  75. After selecting a network, press Apply to connect. </div>
  76. <input type="hidden" name="sta_ssid" id="sta_ssid" value="">
  77. <input type="hidden" name="sta_password" id="sta_password" value="">
  78. <div class="Row sta-info x-sta-on">
  79. <label>Selected</label>
  80. <div class="AP-preview hidden" id="sta-nw">
  81. <div class="wrap">
  82. <div class="inner">
  83. <div class="essid"></div>
  84. <div class="passwd">🔒 Password saved</div>
  85. <div class="nopasswd">🔓 Open access</div>
  86. <div class="ip"></div>
  87. </div>
  88. <a class="forget" href="#" id="forget-sta">×</a>
  89. </div>
  90. </div>
  91. <div class="AP-preview-nil" id="sta-nw-nil">
  92. None </div>
  93. </div>
  94. <div id="ap-box" class="x-sta-on">
  95. <label>Available networks:</label>
  96. <div id="ap-scan"><a href="#" onclick="WiFi.startScanning(); return false">Click here to start scanning!</a></div>
  97. <div id="ap-loader" class="hidden">Scanning<span class="anim-dots">.</span></div>
  98. <div id="ap-list" class="hidden"></div>
  99. </div>
  100. <div class="Row buttons">
  101. <a class="button icn-ok" href="#" onclick="qs('#form-sta').submit()">Apply!</a>
  102. </div>
  103. </form>
  104. <script>
  105. WiFi.scan_url = '/cfg/wifi/scan';
  106. WiFi.init({
  107. sta_ssid: 'Cisco',
  108. sta_password: 'Passw0rd!',
  109. sta_active_ip: '192.168.82.66',
  110. sta_active_ssid: 'Cisco',
  111. });
  112. function updateApDisp() {
  113. var a = !!parseInt($('#ap_enabled').val());
  114. $('.x-ap-on').toggleClass('hidden', !a);
  115. }
  116. $('.x-ap-toggle').on('click', function() {
  117. setTimeout(function() {
  118. updateApDisp();
  119. }, 0)
  120. });
  121. function updateStaDisp() {
  122. var a = !!parseInt($('#sta_enabled').val());
  123. $('.x-sta-on').toggleClass('hidden', !a);
  124. }
  125. $('.x-sta-toggle').on('click', function() {
  126. setTimeout(function() {
  127. updateStaDisp();
  128. }, 0)
  129. });
  130. updateApDisp();
  131. updateStaDisp();
  132. </script>
  133. <div class="botpad"></div>
  134. <div class="NotifyMsg hidden" id="notif"></div>
  135. </div>
  136. </div>
  137. </body>
  138. </html>