WS_WIFI.cpp 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. #include "WS_WIFI.h"
  2. const char *ssid = STASSID; // Name of the WIFI you want to connect to
  3. const char *password = STAPSK; // The WIFI password to connect to
  4. WebServer server(80); // Declare the WebServer object
  5. char ipStr[16];
  6. bool WIFI_Connection = 0;
  7. void handleRoot() {
  8. String myhtmlPage =
  9. String("") +
  10. "<html>"+
  11. "<head>"+
  12. " <meta charset=\"utf-8\">"+
  13. " <title>ESP32 S3 Relay 6CH</title>"+
  14. " <style>" +
  15. " body {" +
  16. " font-family: Arial, sans-serif;" +
  17. " background-color: #f0f0f0;" +
  18. " margin: 0;" +
  19. " padding: 0;" +
  20. " }" +
  21. " .header {" +
  22. " text-align: center;" +
  23. " padding: 20px 0;" +
  24. " background-color: #333;" +
  25. " color: #fff;" +
  26. " margin-bottom: 20px;" +
  27. " }" +
  28. " .container {" +
  29. " max-width: 600px;" +
  30. " margin: 0 auto;" +
  31. " padding: 20px;" +
  32. " background-color: #fff;" +
  33. " border-radius: 5px;" +
  34. " box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);" +
  35. " }" +
  36. " .input-container {//" +
  37. " display: flex;" +
  38. " align-items: center;" +
  39. " margin-bottom: 10px;" +
  40. " }" +
  41. " .input-container label {" +
  42. " width: 80px;" +
  43. " margin-right: 10px;" +
  44. " }" +
  45. " .input-container input[type=\"text\"] {" +
  46. " flex: 1;" +
  47. " padding: 5px;" +
  48. " border: 1px solid #ccc;" +
  49. " border-radius: 3px;" +
  50. " margin-right: 10px; "+
  51. " }" +
  52. " .input-container button {" +
  53. " padding: 5px 10px;" +
  54. " background-color: #333;" +
  55. " color: #fff;" +
  56. " font-size: 14px;" +
  57. " font-weight: bold;" +
  58. " border: none;" +
  59. " border-radius: 3px;" +
  60. " text-transform: uppercase;" +
  61. " cursor: pointer;" +
  62. " }" +
  63. " .button-container {" +
  64. " margin-top: 20px;" +
  65. " text-align: center;" +
  66. " }" +
  67. " .button-container button {" +
  68. " margin: 0 5px;" +
  69. " padding: 10px 15px;" +
  70. " background-color: #333;" +
  71. " color: #fff;" +
  72. " font-size: 14px;" +
  73. " font-weight: bold;" +
  74. " border: none;" +
  75. " border-radius: 3px;" +
  76. " text-transform: uppercase;" +
  77. " cursor: pointer;" +
  78. " }" +
  79. " .button-container button:hover {" +
  80. " background-color: #555;" +
  81. " }" +
  82. " </style>" +
  83. "</head>"+
  84. "<body>"+
  85. " <script defer=\"defer\">"+
  86. " function ledSwitch(ledNumber) {"+
  87. " var xhttp = new XMLHttpRequest();" +
  88. " xhttp.onreadystatechange = function() {" +
  89. " if (this.readyState == 4 && this.status == 200) {" +
  90. " console.log('LED ' + ledNumber + ' state changed');" +
  91. " }" +
  92. " };" +
  93. " if (ledNumber < 7) {" +
  94. " xhttp.open('GET', '/Switch' + ledNumber, true);" +
  95. " }" +
  96. " else if(ledNumber == 7){" +
  97. " xhttp.open('GET', '/AllOn', true);" +
  98. " }" +
  99. " else if(ledNumber == 8){" +
  100. " xhttp.open('GET', '/AllOff', true);" +
  101. " }" +
  102. " xhttp.send();" +
  103. " }" +
  104. " function updateData() {"+
  105. " var xhr = new XMLHttpRequest();"+
  106. " xhr.open('GET', '/getData', true);"+
  107. // " displayErrorTextBox(false);"+
  108. " xhr.onreadystatechange = function() {"+
  109. " if (xhr.readyState === 4 && xhr.status === 200) {"+
  110. " var dataArray = JSON.parse(xhr.responseText);"+
  111. " document.getElementById('ch1').value = dataArray[0];"+
  112. " document.getElementById('ch2').value = dataArray[1];"+
  113. " document.getElementById('ch3').value = dataArray[2];"+
  114. " document.getElementById('ch4').value = dataArray[3];"+
  115. " document.getElementById('ch5').value = dataArray[4];"+
  116. " document.getElementById('ch6').value = dataArray[5];"+
  117. // " // 移除按钮的 disabled 属性,使其变为可点击状态"+
  118. " document.getElementById('btn1').removeAttribute(\'disabled\');"+
  119. " document.getElementById('btn2').removeAttribute(\'disabled\');"+
  120. " document.getElementById('btn3').removeAttribute(\'disabled\');"+
  121. " document.getElementById('btn4').removeAttribute(\'disabled\');"+
  122. " document.getElementById('btn5').removeAttribute(\'disabled\');"+
  123. " document.getElementById('btn6').removeAttribute(\'disabled\');"+
  124. " document.getElementById('btn7').removeAttribute(\'disabled\');"+
  125. " document.getElementById('btn8').removeAttribute(\'disabled\');"+
  126. // " resetErrorTextBox();"+
  127. // " displayErrorTextBox(false);"+
  128. " }"+
  129. " else if (xhr.readyState === 4 && xhr.status !== 200) {"+
  130. " displayErrorTextBox(true);"+
  131. " }"+
  132. " };"+
  133. " xhr.send();"+
  134. " }"+
  135. " function displayErrorTextBox(show) {"+
  136. " var errorTextbox = document.getElementById('errorTextbox');"+
  137. " errorTextbox.style.display = show ? 'block' : 'none';"+
  138. " }"+
  139. " function resetErrorTextBox() {"+
  140. " document.getElementById(\'errorTextbox\').value = \'\';"+
  141. " }"+
  142. " var refreshInterval = 10;"+ // Define a variable for timing, 100ms
  143. " setInterval(updateData, refreshInterval);"+ // The updateData function is executed periodically every 100ms
  144. " </script>" +
  145. "</head>"+
  146. "<body>"+
  147. " <div class=\"header\">"+
  148. " <h1>ESP32-S3-Relay-6CH</h1>"+
  149. " </div>"+
  150. " <div class=\"container\">"+
  151. " <div class=\"input-container\" style=\"margin-left: 140px;\">"+
  152. " <label for=\"input1\">CH1</label>"+
  153. " <input type=\"text\" id=\"ch1\" />"+
  154. " <button value=\"Switch1\" id=\"btn1\" disabled onclick=\"ledSwitch(1)\">Button 1</button>"+
  155. " </div>"+
  156. " <div class=\"input-container\" style=\"margin-left: 140px;\">"+
  157. " <label for=\"input2\">CH2</label>"+
  158. " <input type=\"text\" id=\"ch2\" />"+
  159. " <button value=\"Switch2\" id=\"btn2\" disabled onclick=\"ledSwitch(2)\">Button 2</button>"+
  160. " </div>"+
  161. " <div class=\"input-container\" style=\"margin-left: 140px;\">"+
  162. " <label for=\"input3\">CH3</label>"+
  163. " <input type=\"text\" id=\"ch3\" />"+
  164. " <button value=\"Switch3\" id=\"btn3\" disabled onclick=\"ledSwitch(3)\">Button 3</button>"+
  165. " </div>"+
  166. " <div class=\"input-container\" style=\"margin-left: 140px;\">"+
  167. " <label for=\"input4\">CH4</label>"+
  168. " <input type=\"text\" id=\"ch4\" />"+
  169. " <button value=\"Switch4\" id=\"btn4\" disabled onclick=\"ledSwitch(4)\">Button 4</button>"+
  170. " </div>"+
  171. " <div class=\"input-container\" style=\"margin-left: 140px;\">"+
  172. " <label for=\"input5\">CH5</label>"+
  173. " <input type=\"text\" id=\"ch5\" />"+
  174. " <button value=\"Switch5\" id=\"btn5\" disabled onclick=\"ledSwitch(5)\">Button 5</button>"+
  175. " </div>"+
  176. " <div class=\"input-container\" style=\"margin-left: 140px;\">"+
  177. " <label for=\"input6\">CH6</label>"+
  178. " <input type=\"text\" id=\"ch6\" />"+
  179. " <button value=\"Switch6\" id=\"btn6\" disabled onclick=\"ledSwitch(6)\">Button 6</button>"+
  180. " </div>"+
  181. " <div class=\"button-container\">"+
  182. " <button value=\"AllOn\" id=\"btn7\" disabled onclick=\"ledSwitch(7)\">All On</button>"+
  183. " <button value=\"AllOff\" id=\"btn8\" disabled onclick=\"ledSwitch(8)\">All Off</button>"+
  184. " </div>"+
  185. " <div id=\"errorTextbox\" style=\"display: none;\"> "+
  186. " <p>Please refresh the page</p>"+
  187. " <p>Chinese:请刷新页面</p>"+
  188. " </div>"+
  189. " </div>"+
  190. "</body>"+
  191. "</html>";
  192. server.send(200, "text/html", myhtmlPage);
  193. printf("The user visited the home page\r\n");
  194. }
  195. void handleGetData() {
  196. String json = "[";
  197. for (int i = 0; i < sizeof(Relay_Flag) / sizeof(Relay_Flag[0]); i++) {
  198. json += String(Relay_Flag[i]);
  199. if (i < sizeof(Relay_Flag) / sizeof(Relay_Flag[0]) - 1) {
  200. json += ",";
  201. }
  202. }
  203. json += "]";
  204. server.send(200, "application/json", json);
  205. }
  206. void handleSwitch(int ledNumber) {
  207. uint8_t Data[1]={0};
  208. Data[0]=ledNumber+48;
  209. Relay_Analysis(Data,WIFI_Mode);
  210. server.send(200, "text/plain", "OK");
  211. }
  212. void handleSwitch1() { handleSwitch(1); }
  213. void handleSwitch2() { handleSwitch(2); }
  214. void handleSwitch3() { handleSwitch(3); }
  215. void handleSwitch4() { handleSwitch(4); }
  216. void handleSwitch5() { handleSwitch(5); }
  217. void handleSwitch6() { handleSwitch(6); }
  218. void handleSwitch7() { handleSwitch(7); }
  219. void handleSwitch8() { handleSwitch(8); }
  220. void WIFI_Init()
  221. {
  222. uint8_t Count = 0;
  223. WiFi.mode(WIFI_STA);
  224. WiFi.setSleep(true);
  225. WiFi.begin(ssid, password); // Connect to the specified Wi-Fi network
  226. while (WiFi.status() != WL_CONNECTED)
  227. {
  228. Count++;
  229. delay(500);
  230. printf(".\r\n");
  231. if(Count % 2 == 0 && Count != 0){
  232. RGB_Light(60, 0, 0);
  233. delay(1000);
  234. RGB_Light(0, 0, 0);
  235. }
  236. if(Count % 10 == 0){ // 10 attempts failed to connect, cancel the connection, try again
  237. WiFi.disconnect();
  238. delay(100);
  239. WiFi.mode(WIFI_OFF);
  240. delay(100);
  241. WiFi.mode(WIFI_STA);
  242. delay(100);
  243. WiFi.begin(ssid, password);
  244. }
  245. if(Count > 22){ // connection fail
  246. break;
  247. }
  248. }
  249. delay(100);
  250. if(Count < 23){
  251. WIFI_Connection = 1;
  252. RGB_Light(0, 60, 0);
  253. delay(1000);
  254. RGB_Light(0, 0, 0);
  255. IPAddress myIP = WiFi.localIP();
  256. printf("IP Address: ");
  257. sprintf(ipStr, "%d.%d.%d.%d", myIP[0], myIP[1], myIP[2], myIP[3]);
  258. printf("%s\r\n", ipStr);
  259. // 注册回调函数
  260. server.on("/", handleRoot);
  261. server.on("/getData", handleGetData);
  262. server.on("/Switch1", handleSwitch1);
  263. server.on("/Switch2", handleSwitch2);
  264. server.on("/Switch3", handleSwitch3);
  265. server.on("/Switch4", handleSwitch4);
  266. server.on("/Switch5", handleSwitch5);
  267. server.on("/Switch6", handleSwitch6);
  268. server.on("/AllOn" , handleSwitch7);
  269. server.on("/AllOff" , handleSwitch8);
  270. server.begin(); //启动服务器
  271. printf("Web server started\r\n");
  272. }
  273. else{
  274. WIFI_Connection = 0;
  275. printf("WIFI connection fails, you can use the Bluetooth debugging Assistant to control the device.\r\n");
  276. RGB_Light(60, 0, 0);
  277. }
  278. }
  279. void WIFI_Loop()
  280. {
  281. if(WIFI_Connection == 1)
  282. server.handleClient(); // Processing requests from clients
  283. }