WebLED.ino 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. #if defined(ARDUINO_ARCH_ESP8266)
  2. #include <ESP8266WiFi.h>
  3. #include <ESP8266WebServer.h>
  4. #elif defined(ARDUINO_ARCH_ESP32)
  5. #include <WiFi.h>
  6. #include <WebServer.h>
  7. #ifndef LED_BUILTIN
  8. #define LED_BUILTIN 2 // Adjust to the actual board
  9. #endif
  10. #endif
  11. #include "PageBuilder.h"
  12. #include "WebLED.h" // Only the LED lighting icon
  13. // Web page structure is described as follows.
  14. // It contains two tokens as {{STYLE}} and {{LEDIO}} also 'led'
  15. // parameter for GET method.
  16. static const char PROGMEM _PAGE_LED[] = R"rawliteral(
  17. <!DOCTYPE html>
  18. <html>
  19. <head>
  20. <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
  21. <title>{{ARCH}} LED Control</title>
  22. <style type="text/css">
  23. {{STYLE}}
  24. </style>
  25. </head>
  26. <body>
  27. <p>{{ARCH}} LED Control</p>
  28. <div class="one">
  29. <p><a class="button" href="/?led=on">ON</a></p>
  30. <p><a class="button" href="/?led=off">OFF</a></p>
  31. </div>
  32. <div class="img">
  33. <img src="{{LEDIO}}"/>
  34. </div>
  35. </body>
  36. </html>
  37. )rawliteral";
  38. // A style description can be separated from the page structure.
  39. // It expands from {{STYLE}} caused by declaration of 'Button' PageElement.
  40. static const char PROGMEM _STYLE_BUTTON[] = R"rawliteral(
  41. body {-webkit-appearance:none;}
  42. p {
  43. font-family:'Arial',sans-serif;
  44. font-weight:bold;
  45. text-align:center;
  46. }
  47. .button {
  48. display:block;
  49. width:150px;
  50. margin:10px auto;
  51. padding:7px 13px;
  52. text-align:center;
  53. background:#668ad8;
  54. font-size:20px;
  55. color:#ffffff;
  56. white-space:nowrap;
  57. box-sizing:border-box;
  58. -webkit-box-sizing:border-box;
  59. -moz-box-sizing:border-box;
  60. }
  61. .button:active {
  62. font-weight:bold;
  63. vertical-align:top;
  64. padding:8px 13px 6px;
  65. }
  66. .one a {text-decoration:none;}
  67. .img {text-align:center;}
  68. )rawliteral";
  69. // ONBOARD_LED is WiFi connection indicator.
  70. // LED_BUILTIN is controled by the web page.
  71. #define ONBOARD_LED 16 // Different pin assignment by each module
  72. // Get an architecture of compiled
  73. String getArch(PageArgument& args) {
  74. #if defined(ARDUINO_ARCH_ESP8266)
  75. return "ESP8266";
  76. #elif defined(ARDUINO_ARCH_ESP32)
  77. return "ESP32";
  78. #endif
  79. }
  80. // This function is the logic for LED_BUILTIN on/off.
  81. // It is called from the occurrence of the 'LEDIO' token by PageElement
  82. // 'Button' declaration as following code.
  83. String ledIO(PageArgument& args) {
  84. String ledImage = "";
  85. // Blinks LED_BUILTIN according to value of the http request parameter 'led'.
  86. if (args.hasArg("led")) {
  87. if (args.arg("led") == "on")
  88. digitalWrite(LED_BUILTIN, LOW);
  89. else if (args.arg("led") == "off")
  90. digitalWrite(LED_BUILTIN, HIGH);
  91. }
  92. delay(10);
  93. // Feedback the lighting icon depending on actual port value which
  94. // indepent from the http request parameter.
  95. if (digitalRead(LED_BUILTIN) == LOW)
  96. ledImage = FPSTR(_PNG_LED);
  97. return ledImage;
  98. }
  99. // Page construction
  100. PageElement Button(_PAGE_LED, {
  101. {"STYLE", [](PageArgument& arg) { return String(FPSTR(_STYLE_BUTTON)); }},
  102. {"ARCH", getArch },
  103. {"LEDIO", ledIO }
  104. });
  105. PageBuilder LEDPage("/", {Button});
  106. #if defined(ARDUINO_ARCH_ESP8266)
  107. ESP8266WebServer Server;
  108. #elif defined(ARDUINO_ARCH_ESP32)
  109. WebServer Server;
  110. #endif
  111. const char* SSID = "********"; // Modify for your available WiFi AP
  112. const char* PSK = "********"; // Modify for your available WiFi AP
  113. const char* username = "admin";
  114. const char* password = "espadmin";
  115. #define BAUDRATE 115200
  116. void setup() {
  117. delay(1000); // for stable the module.
  118. Serial.begin(BAUDRATE);
  119. pinMode(ONBOARD_LED, OUTPUT);
  120. digitalWrite(ONBOARD_LED, HIGH);
  121. pinMode(LED_BUILTIN, OUTPUT);
  122. digitalWrite(LED_BUILTIN, HIGH);
  123. WiFi.disconnect();
  124. WiFi.mode(WIFI_STA);
  125. WiFi.begin(SSID, PSK);
  126. do {
  127. delay(500);
  128. } while (WiFi.waitForConnectResult() != WL_CONNECTED);
  129. Serial.println("Connected to " + String(SSID));
  130. LEDPage.authentication(username, password, DIGEST_AUTH, "WebLED");
  131. LEDPage.insert(Server);
  132. Server.begin();
  133. Serial.print("Web server http://");
  134. Serial.println(WiFi.localIP());
  135. }
  136. void loop() {
  137. if (WiFi.status() == WL_CONNECTED)
  138. digitalWrite(ONBOARD_LED, LOW);
  139. else
  140. digitalWrite(ONBOARD_LED, HIGH);
  141. Server.handleClient();
  142. }