├── data ├── cfg.txt ├── cplusplus.png ├── index.html ├── config.html └── js │ ├── bootstrap.min.js │ └── jquery.min.js ├── images ├── home-page.png └── config-page.png ├── LICENSE ├── README.md ├── README.html └── ESP8266-MyWidget-Demo.ino /data/cfg.txt: -------------------------------------------------------------------------------- 1 | 512:8:default1:default2 -------------------------------------------------------------------------------- /data/cplusplus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onewithhammer/ESP8266-MyWidget-Demo/HEAD/data/cplusplus.png -------------------------------------------------------------------------------- /images/home-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onewithhammer/ESP8266-MyWidget-Demo/HEAD/images/home-page.png -------------------------------------------------------------------------------- /images/config-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onewithhammer/ESP8266-MyWidget-Demo/HEAD/images/config-page.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Tony Keith 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /data/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | ESP8266 MyWidget - Home Page 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

20 | 21 | 41 |

42 |

43 |

44 |

This Demo Features

45 |

46 |

48 |
49 | ESP8266 Development 50 |
51 |
52 | mDNS - multicast DNS Support (mywidget.local) 53 |
54 |
55 | Async Web Server (ESPAsyncWebServer) 56 |
57 |
58 | Async Web Services (ESPAsyncWebServer) 59 |
60 |
61 | Async MQTT (PangolinMQTT) 62 |
63 |
64 | LittleFS File System 65 |
66 |
67 | Embedded Bootstrap (3.4.1) 68 |
69 |
70 | Embedded html, css, JS and Images 71 |
72 |
73 | Save/Load Config File (text) 74 |
75 |
76 | OTA (Over the Air) Updates 77 |
78 |
79 | HTTP GET/POST Method w TEXT/JSON response 80 |
81 |
82 | API Web Services 83 |
84 |
85 | Dynamically Updating Web Site (Web Services using JS) 86 |
87 |
88 | Multiple Interrupt Timers (ESP8266TimerInterrupt) 89 |
90 |
91 | Flash Onboard LED Using Interrupt Timer 92 |
93 |

95 |

96 |

97 |

98 |

99 |

100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ESP8266-MyWidget 2 | 3 | [![GitHub release](https://img.shields.io/github/release/onewithhammer/ESP8266-MyWidget-Demo.svg)](https://github.com/onewithhammer/ESP8266-MyWidget-Demo/releases) 4 | [![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/onewithhammer/ESP8266-MyWidget-Demo/blob/master/LICENSE) 5 | [![GitHub issues](https://img.shields.io/github/issues/onewithhammer/ESP8266-MyWidget-Demo.svg)](http://github.com/onewithhammer/ESP8266-MyWidget-Demo/issues) 6 | 7 | ![Config Page](images/config-page.png) 8 | 9 | This project can be used as a framework, learning tool or as a template for starting a new ESP8266 project. 10 | It contains many of the components to build a ESP8266 project with dynamic web interface. 11 | 12 | This project includes: 13 | 14 | - ESP8266 Development 15 | - mDNS - multicast DNS (mywidget.local) 16 | - Asynchronous Web Server (ESPAsyncWebServer) 17 | - Asynchronous Web Services (ESPAsyncWebServer) 18 | - Asynchronous MQTT (PangolinMQTT) 19 | - LittleFS File System 20 | - Embedded Bootstrap (3.4.1) 21 | - Embedded jQuery (3.5.1) 22 | - Embedded html, css, JS and Images 23 | - Save/Load Config File (text) 24 | - OTA (Over the Air) Updates 25 | - HTTP API Supports HTTP GET/POST 26 | - Dynamically Updating Web Site (Web Services using JS) 27 | - Multiple Interrupt Timers (ESP8266TimerInterrupt) 28 | - Flash Onboard LED Using Interrupt Timer 29 | - Plus much more... 30 | 31 | ## History 32 | 33 | I purchased several [ESPixelSticks](https://www.amazon.com/dp/B072XT1V77/ref=cm_sw_em_r_mt_dp_-RscGb7XH5PQ3) from Amazon for my synchronized LED Christmas light display. After using the ESPixelSticks, I became interested in how the ESP8266 worked and how to program it. So I began to review the [ESPixelStick](https://github.com/forkineye/ESPixelStick) source code and the specifications of the ESP8266. It didn't take long to find out there is an add-on for the Arduino IDE that allows you to program the ESP8266 using the Arduino IDE and its programming language. A few years back, I had created some simple projects using Arduino UNO R3 and programmed using the Arduino IDE. Since I was already familiar with the Arduino IDE, I started by modifying some of the simple examples and playing with different libraries. I wasn't very interested in the low level hardware or interfacing to a sensor/module but I was more interested in an interactive UI and different ways to communicate with this device. I didn't have a particular project in mind so I created ESP8266-MyWidget; A project template for ESP8266. 34 | 35 | ESP8266-MyWidget can be used as a learning tool or as a template for starting a new ESP8266 project. I tried to incorporate many APIs that may be useful for a ESP8266 project with a web interface. 36 | 37 | ## Requirements 38 | 39 | ESP8266-based development board - I used the Wemos D1 Mini 40 | 41 | Along with the Arduino IDE, you'll need the following software to build this project: 42 | 43 | - [Adruino for ESP8266](https://github.com/esp8266/Arduino) - Arduino core for ESP8266 44 | - [Arduino ESP8266 LittleFS Filesystem Uploader](https://github.com/esp8266/arduino-esp8266fs-plugin) - Arduino plugin for uploading files to LittleFS 45 | 46 | The following libraries are required: 47 | 48 | Extract the folder in each of these zip files and place it in the "library" folder under your arduino environment 49 | 50 | - [ESPAsyncTCP](https://github.com/me-no-dev/ESPAsyncTCP) - Asynchronous TCP Library 51 | - [ESPAsyncWebServer](https://github.com/me-no-dev/ESPAsyncWebServer) - Asynchronous HTTP and WebSocket Server for ESP8266 Arduino 52 | - [PangolinMQTT](https://github.com/philbowles/PangolinMQTT) - Asynchronous MQTT client library 53 | - [ESP8266TimerInterrupt](https://github.com/khoih-prog/ESP8266TimerInterrupt) - Supports 16 ISR-based timers 54 | 55 | ## Features 56 | 57 | --- 58 | 59 | ## mDNS - multicast DNS 60 | 61 | - Mulicast DNS allows you to use a local DNS name (mywidget.local) to access the web interface. 62 | - There is no need to know the local IP address obtained from the WIFI connection. 63 | - mDNS will resolve the IP address for you. 64 | 65 | - Enter the following into browser ``http://mywidget.local`` 66 | 67 | ## Web Services 68 | 69 | - Asynchronous 70 | - Supports GET and SET ACTIONS 71 | - Formats: 72 | - cmd:get:action 73 | - cmd:set:action 74 | - All requests and responses are in TEXT format. 75 | 76 | - GET ACTIONS 77 | 78 | - Uptime - Returns device uptime in milliseconds. 79 | - Request: ''cmd:get:uptime'' 80 | - Response: ''cmd:get:uptime:NNNNNNNN'' 81 | - where NNNNNNNN is the device uptime in milliseconds 82 | 83 | - Status - Returns status of light (0/1) 84 | - Request: ''cmd:get:status'' 85 | - Response: ''cmd:get:status:N'' 86 | - where N is "0" or "1" representing "OFF" or "ON" of light 87 | 88 | - Speed - Returns timer speed of interrupt handler 89 | - Request: ''cmd:get:speed:X'' 90 | - Response: ''cmd:get:speed:X:N'' 91 | - where X is the "1" to "3" representing the number of the interrupt handler 92 | - where N is "1" to "4" representing speed of the interrupt timer 93 | 94 | - Config - Returns current configuration parameters. Read from /cfg.txt file. 95 | - Request: ''cmd:get:config'' 96 | - Response: ''cmd:get:config:channels:ports:user1:user2'' 97 | - where channels is NNN, ports is NN, user1 is XXXXX, user2 is XXXXXX 98 | 99 | - SET ACTIONS 100 | 101 | - Toggle - Toggles the current light from 0 to 1 or 1 to 0 102 | - Request: ''cmd:set:toggle'' 103 | - Response: ''cmd:set:toggle:N'' 104 | - where N is "0" or "1" representing "OFF" or "ON" of light 105 | 106 | - Speed - Sets the timer speed of interrupt handler 107 | - Request: ''cmd:set:speed:X:N'' 108 | - Response: ''cmd:set:speed:X:N'' 109 | - where X is the "1" to "3" representing the number of the interrupt handler 110 | - where N is "1" to "4" representing speed of the interrupt timer 111 | 112 | - Config - Sets current configuration parameters. Saved to /cfg.txt file. 113 | - Request: ''cmd:set:config:config:channels:ports:user1:user2'' 114 | - Response: ''cmd:set:config:channels:ports:user1:user2'' 115 | - where channels is NNN, ports is NN, user1 is XXXXX, user2 is XXXXXX 116 | 117 | ## Web Server 118 | 119 | - Asynchronous 120 | - Supports serving embedded html, css, js files 121 | - Supports serving embedded images 122 | - Sets default to index.html 123 | - Serves two embedded web pages (index.html & config.html) 124 | - Supports file not found message 125 | 126 | ## User Interface 127 | 128 | - Nav Bar Menu 129 | - Home and Config pages implemented 130 | - Displays Current Light Output 131 | - State1 field updates on page load and when the "Toggle" button is pressed 132 | - Displays Current Device Configuration 133 | - Channels, ports, user1 and user2 fields update on page load 134 | - Channels, ports, user1 and user2 are input fields 135 | - Channels, ports, user1 and user2 can be modified and are saved when "Save Changes" button is pressed 136 | - Displays Current Device Uptime 137 | - Uptime is updated on a 1 second basis 138 | - Uptime format is: "N days, HH:MM:SS" 139 | - Displays Current LED Flash Speed 140 | - Select input allows onboard LED speed to be changed 141 | - LED speed is updated on select input change 142 | - All messages to/from config page use Web Services 143 | - Web Services has queue implemented if server is busy 144 | - Implemented using embedded Bootstrap (3.4.1) 145 | - Implemented using embedded JQuery (3.5.1) 146 | 147 | ## HTTP API - GET and POST 148 | 149 | - Asynchronous 150 | - HTTP GET FREE HEAP (TEXT) 151 | - URL: `http://mywidget.local/heap` 152 | - Returns free heap space 153 | - Request: 154 | - Name/Value Pair: N/A 155 | - Response: 156 | - freeHeap=[Free Heap] 157 | - Example Request: 158 | - `http://mywidget.local/heap` 159 | - Example Response: 160 | - `freeHeap=38616` 161 | 162 | - HTTP GET INTERRUPT COUNT (TEXT) 163 | - URL: `http://mywidget.local/intcount + optional query string parameters` 164 | - Returns interrupt counter(s) based on query string parameters, if no query string parameters, then intcount1 165 | - Request: 166 | - Query String Parameters: N/A 167 | - Response: 168 | - `:intcount1=[Interrupt Counter]` 169 | - Example Request: 170 | - `http://mywidget.local/intcount` 171 | - Example Response: 172 | - `:intcount1=4533456` 173 | 174 | - Query string parameters (optional): 175 | - Request: 176 | - 1=true, 2=true, 3=true 177 | - Response: 178 | - Interrupt Counter(s) based on query string 179 | - Name value pairs are delimited using colon ":". 180 | - Name and value fields are delimited using a equal "=" sign. 181 | - Example Request: 182 | - `http://mywidget.local/intcount?1=true&2=true&3=true` 183 | - Example Response: 184 | - `:intcount1=4533456:intcount2=23236:intcount3=98434445` 185 | - Example Request: 186 | - `http://mywidget.local/intcount?3=true` 187 | - Example Response: 188 | - `:intcount3=98434445` 189 | 190 | - HTTP GET INTERRUPT COUNT2 (TEXT) 191 | - URL: `http://mywidget.local/intcount2` 192 | - Returns interrupt counter 2 - interruptCounter2 variable 193 | - Request: 194 | - Query String Parameters: N/A 195 | - Response: 196 | - `:intcount2=[Interrupt Counter 2]` 197 | - Example Request: 198 | - `http://mywidget.local/intcount2` 199 | - Example Response: 200 | - `:intcount2=23236` 201 | 202 | - HTTP GET INTERRUPT COUNT3 (TEXT) 203 | - URL: `http://mywidget.local/intcount3` 204 | - Returns interrupt counter 3 - interruptCounter3 variable 205 | - Request: 206 | - Query String Parameters: N/A 207 | - Response: 208 | - `:intcount3=[Interrupt Counter 3]` 209 | - Example Request: 210 | - `http://mywidget.local/intcount3` 211 | - Example Response: 212 | - `:intcount3=98434445` 213 | 214 | - HTTP GET STATUS (TEXT) 215 | - URL: `http://mywidget.local/status + query string (name/value pairs)` 216 | - Returns status about network, filesystem, signal, heap and chip info in text format. 217 | - Name value pairs are delimited using colon ":". 218 | - Name and value fields are delimited using a equal "=" sign. 219 | 220 | - HTTP GET SYSTEM STATUS (JSON) 221 | - URL: `http://mywidget.local/status-json + query string (name/value pairs)` 222 | - Returns status about network, filesystem, signal, heap and chip info. 223 | 224 | - Query string (name/value pairs) parameters: 225 | 226 | - Network 227 | - Request: 228 | - Name/Value Pair: network=true 229 | - Response:: 230 | - ssid=[SSID] 231 | - hostname=[Hostname] 232 | - ip=[IP Address] 233 | - gateway=[Gateway] 234 | - netmask=[Netmask] 235 | 236 | - Filesystem 237 | - Request: 238 | - Name/Value Pair: fs=true 239 | - Response:: 240 | - totalBytes=[Total Bytes] 241 | - usedBytes=[Used Bytes] 242 | 243 | - Signal 244 | - Request: 245 | - Name/Value Pair: signal=true 246 | - Response:: 247 | - strength=[Signal Strength] 248 | 249 | - Heap 250 | - Request: 251 | - Name/Value Pair: heap=true 252 | - Response:: 253 | - freeHeap=[Free Heap] 254 | 255 | - Chip Info 256 | - Request: 257 | - Name/Value Pair: chipInfo=true 258 | - Response:: 259 | - chipId=[Chip ID] 260 | - flashChipId=[Flash Chip ID] 261 | - flashChipSize=[Flash Chip Size] 262 | - flashChipRealSize=[Flash Chip Real Size] 263 | 264 | - Example Request: 265 | - `http://mywidget.local/status?network=true&fs=true&signal=true&heap=true&chipInfo=true` 266 | - Example Response (TEXT): 267 | - `:network=true:ssid=MyWifi:hostname=mywidget:ip=192.168.0.20:gateway=192.168.0.1:netmask=255.255.255.0:signal=true:strength=-68:chipInfo=true:chipId=3016621:flashChipId=1458392:flashChipSize=4194304:flashChipRealSize=4194304:heap=true:freeHeap=38216:fs=true:totalBytes=1024000:usedBytes=327680` 268 | 269 | - Example Request: 270 | - `http://mywidget.local/status-json?network=true&fs=true&signal=true&heap=true&chipInfo=true` 271 | - Example Response (JSON): 272 | 273 | `{"network": { 274 | "ssid": "MyWifi", 275 | "hostname": "mywidget", 276 | "ip": "192.168.0.20", 277 | "gateway": "192.168.0.1", 278 | "netmask": "255.255.255.0" 279 | }, 280 | "signal": { 281 | "strength": "-78" 282 | }, 283 | "chipInfo": { 284 | "chipId": "3016621", 285 | "flashChipId": "1458392", 286 | "flashChipSize": "4194304", 287 | "flashChipRealSize": "4194304" 288 | }, 289 | "heap": { 290 | "freeHeap": "38024" 291 | }, 292 | "fs": { 293 | "totalBytes": "1024000", 294 | "usedBytes": "327680" 295 | }}` 296 | 297 | - HTTP POST COUNTER 298 | - `http://mywidget.local/counter + query string (name/value pairs) in Request Body` 299 | - Sets the internal counter to Request counter value. Range 1 to 9999 300 | - Request: 301 | - Name/Value Pair: counter=XXXX 302 | - Response: 303 | - "POST: Counter set to: XXXX" 304 | 305 | - Example Request: 306 | - `POST ' 307 | - `form data in Request Body - counter=109` 308 | 309 | - Example Response (TEXT): 310 | - `POST: Counter set to: 109` 311 | 312 | ## File System 313 | 314 | This project is implmented using the LittleFS file system. All data is placed in a 'data' directory. 315 | 316 | Here is the directory and files associated with this project. 317 | 318 | data (Directory)` 319 | css (Style Sheet Directory) 320 | bootstrap.min.css (bootstrap CSS file) 321 | js (Java Script directory) 322 | bootstrap.min.js (bootstrap JS file) 323 | jquery.min.js (jquery JS file) 324 | cfg.txt (config file - text format) 325 | index.html (index file - HTML page) 326 | config.html (config file - HTML page) 327 | cplusplus.png (image file) 328 | 329 | If you modify a file locally, you must upload to device using [Arduino ESP8266 LittleFS Filesystem Uploader](https://github.com/esp8266/arduino-esp8266fs-plugin) 330 | 331 | The LittleFS implementation for the ESP8266 supports filenames of up to 31 characters + terminating zero (i.e. char filename[32]), and as many subdirectories as space permits. Keep your filenames + directories names short! 332 | 333 | ## MQTT (Message Queuing Telemetry Transport) - IoT messaging 334 | 335 | MQTT is implemented when a subscribe message is received, a corresponding publish message is sent. 336 | 337 | - Subscribe 338 | - esp32/get/uptime - Request uptime 339 | - Response: Publish: esp32/uptime (payload:text:"NNNNNNNN") 340 | - where NNNNNNNN is the device uptime in milliseconds 341 | 342 | - esp32/get/heap - Request current heap size 343 | - Response: Publish: esp32/heap (payload:text:"NNNNNN") 344 | - where NNNNNN is the current heap size 345 | 346 | - esp32/get/counter - Request current counter value and increment 347 | - Response: Publish: esp32/counter (payload:text:"NNNNNN") 348 | - where NNNNNN is the current counter value. 349 | - Counter is incremented after every esp32/get/counter received. Range 1 to 9999 350 | 351 | - esp32/set/counter (payload:"NNNNNN") - Set counter value to payload value (text) 352 | - Response: Publish: esp32/counter (payload:text:"NNNNNN") 353 | - where NNNNNN is the current counter value (text). Range 1 to 9999 354 | 355 | ## OTA (Over The Air) Updates 356 | 357 | OTA (Over The Air) Updates allows you to update the firmware on the device without being connected via a USB cable. The updates can occur after the device is connected to WIFI. The initial firmware installation requires using a USB cable but all subsequent updates can be perform remotely over WIFI. 358 | 359 | ## Interrupt Handler 360 | 361 | This project has a interrupt timer used to flash the onboard LED. 362 | 363 | - ESP8266 has only 2 hardware timers, named Timer0 and Timer1 364 | - Timer0 has been used for WiFi and it's not advisable to use while using WiFi 365 | - This means there is only 1 usable timer 366 | 367 | The original implementation used timer1 368 | 369 | Then I discovered [ESP8266TimerInterrupt](https://github.com/khoih-prog/ESP8266TimerInterrupt) which supports 16 ISR-based timers. 370 | 371 | - The main interrupt timer is setup for 10 millisecond interval 372 | 373 | - One ISR-based timer is used to flash the onboard timer and increment counter 374 | - interruptCounter1 (changeable speed / freq) 375 | - Second ISR-based timer is used to increment counter 376 | - interruptCounter2 (fixed speed / freq) 377 | - Third ISR-based timer is used to increment counter 378 | - interruptCounter3 (fixed speed / freq) 379 | 380 | ## Test & Debug 381 | 382 | I used a few different tools to test and debug. The source code was mainly debugged using Serial.print() messages and the Serial Monitor (Tools->Serial Monitor) in the Arduino IDE. 383 | 384 | I also used the Firefox web developer tools (console & network) debug the JavaScript and web services requests / responses. 385 | 386 | To test and debug the HTTP GET and POST requests/response messages, I used [POSTMAN](https://www.postman.com/) 387 | 388 | To test and debug MQTT, I used Mosquitto and Node-Red. 389 | 390 | ## Notes 391 | 392 | I orginally tried to send / receive JSON messages using the popular Arduino JSON Library [ArduinoJson](https://github.com/bblanchon/ArduinoJson) but I couldn't make it stable. I kept getting exceptions happening in various places, while stress testing (calling GET heap repeatively), so I eventually removed the ArduinoJson library and references. I converted all Web Services messages to send/receive text messages. I also converted files to save as text files (cfg.txt) instead of JSON. 393 | 394 | Later I went back and added an HTTP GET with JSON response example without any JSON libraries. 395 | 396 | - The Web Services messages text using fields delimited with colons ":". 397 | - The config files are also text using fields delimited with colons ":". 398 | 399 | ## Future Enhancements 400 | 401 | - [X] Support multiple interrupt timers (ESP8266TimerInterrupt) 402 | - [X] Support dynamic interval timers on config page 403 | - [X] Support HTTP GET INTERRUPT COUNT with optional parameters 404 | - [X] Embedded image support 405 | - [ ] Asynch NTP support 406 | - [ ] More code comments 407 | - [ ] Other? 408 | 409 | ## References 410 | 411 | - [LittleFS](https://arduino-esp8266.readthedocs.io/en/latest/filesystem.html) - Little File System 412 | - [BootStrap](https://getbootstrap.com/docs/3.4/) - BootStrap(3.4.1) - HTML, CSS, and JS framework 413 | - [jQuery](https://jquery.com/) - JS utility library 414 | - [OTA with Arduino IDE](https://arduino-esp8266.readthedocs.io/en/latest/ota_updates/readme.html#arduino-ide) - How to setup and config IDE for OTA updates 415 | - [Random Nerd Tutorials](https://randomnerdtutorials.com/) - Lots of good information on ESP8266 projects here 416 | 417 | ## Credits 418 | 419 | - Lots of great information and the webservices JS script in config.html is from [ESPixelStick](https://github.com/forkineye/ESPixelStick) 420 | -------------------------------------------------------------------------------- /data/config.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | ESP8266 MyWidget - Config Page 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

20 | 21 | 41 | 42 |

43 |

44 |

45 |

46 |

Light Output

47 |

48 | State1: Updating... 49 |

50 |

51 |

52 |

53 |

Image

54 |

55 |

56 |

57 |

58 |

59 |

60 |

61 |

Device Configuration

62 |

63 | 89 |

90 |

91 |

92 |

93 |

Device Uptime

94 |

95 | Updating... 96 |

97 |

98 |

99 |

100 |

101 |

Interrupt Speed

102 |

103 |

104 |

105 | Interrupt 1: 106 |

107 | 113 |

114 | Interrupt 2: 115 |

116 | 122 |

123 | Interrupt 3: 124 |

125 | 131 |

132 |

133 |

134 |

135 |

136 |

137 |

138 |

139 |

140 | 141 | 142 | 143 | 144 | 145 | 459 | 460 | 461 | 462 | -------------------------------------------------------------------------------- /README.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

ESP8266-MyWidget

4 | 5 | This project can be used as a learning tool or as a template for starting a new ESP8266 project. 6 | It contains many of the components to build a ESP8266 project with web interface. 7 |
8 | This demo includes: 9 |

ESP8266 Development
mDNS - multicast DNS (mywidget.local)
Asynchronous Web Server (ESPAsyncWebServer)
Asynchronous Web Services (ESPAsyncWebServer)
Asynchronous MQTT (PangolinMQTT)
LittleFS File System
Embedded Bootstrap (3.4.1)
Embedded jquery (3.5.1)
Save/Load Config File (text)
OTA (Over the Air) Updates
HTTP API Supports HTTP GET/POST
Auto Updating Web Site (Web Services using JS)
Multiple Interrupt Timers (ESP8266TimerInterrupt)
Flash Onboard LED Using Interrupt Timer
Plus much more...

26 | 27 |

History

28 | 29 | I purchased several ESPixelSticks from Amazon for my synchronized LED Christmas light display. After using the ESPixelSticks, I became interested in how the ESP8266 worked and how to program it. So I began to review the ESPixelStick source code and the specifications of the ESP8266. It didn't take long to find out there is an add-on for the Arduino IDE that allows you to program the ESP8266 using the Arduino IDE and its programming language. A few years back, I had created some simple projects using Arduino UNO R3 and programmed using the Arduino IDE. Since I was already familiar with the Arduino IDE, I started by modifying some of the simple examples and playing with different libraries. I wasn't very interested in the low level hardware or interfacing to a sensor/module but I was more interested in an interactive UI and different ways to communicate with this device. I didn't have a particular project in mind so I created ESP8266-MyWidget; A project template for ESP8266.
30 |
31 | ESP8266-MyWidget can be used as a learning tool or as a template for starting a new ESP8266 project. I tried to incorporate many APIs that may be useful for a ESP8266 project with a web interface.
32 | 33 |

Requirements

34 | 35 | Along with the Arduino IDE, you'll need the following software to build this project:
36 |

Adruino for ESP8266 - Arduino core for ESP8266
Arduino ESP8266 LittleFS Filesystem Uploader - Arduino plugin for uploading files to LittleFS

40 | 41 | The following libraries are required:
42 | Extract the folder in each of these zip files and place it in the "library" folder under your arduino environment 43 |

ESPAsyncTCP - Asynchronous TCP Library
ESPAsyncWebServer - Asynchronous HTTP and WebSocket Server for ESP8266 Arduino
PangolinMQTT - Asynchronous MQTT client library
ESP8266TimerInterrupt - Supports 16 ISR-based timers 48 |

49 | 50 |

Features

51 | 52 |

mDNS - multicast DNS

53 |

Mulicast DNS allows you to use a local DNS name (mywidget.local) to access the web interface.
There is no need to know the local IP address obtained from the WIFI connection.
mDNS will resolve the IP address for you.

Enter the following into browser: http://mywidget.local

60 |

Web Services

61 |

Asynchronous
Supports GET and SET ACTIONS
Formats:

cmd:get:action
cmd:set:action

All requests and responses are in TEXT format.

GET ACTIONS

Uptime - Returns device uptime in milliseconds.
Request: ''cmd:get:uptime''
Response: ''cmd:get:uptime:NNNNNNNN''

where NNNNNNNN is the device uptime in milliseconds

Status - Returns status of light (0/1)
Request: ''cmd:get:status''
Response: ''cmd:get:status:N''

where N is "0" or "1" representing "OFF" or "ON" of light

Speed - Returns timer speed of the interrupt handler
Request: ''cmd:get:speed:X''
Response: ''cmd:get:speed:X:N''

where X is the "1" to "3" representing the number of the interrupt handler
where N is "1" to "4" representing the speed of the interrupt timer

Config - Returns current configuration parameters. Read from /cfg.txt file.

Request: ''cmd:get:config''
Response: ''cmd:get:config:channels:ports:user1:user2''

where channels is NNN, ports is NN, user1 is XXXXX, user2 is XXXXXX

SET ACTIONS

Toggle - Toggles the current light from 0 to 1 or 1 to 0
Request: ''cmd:set:toggle''
Response: ''cmd:set:toggle:N''

where N is "0" or "1" representing "OFF" or "ON" of light

Speeds - Sets the timer speed of interrupt handler
Request: ''cmd:set:speed:X:N''
Response: ''cmd:set:speed:X:N''

where X is the "1" to "3" representing the number of the interrupt handler
where N is "1" to "4" representing the speed of the interrupt timer

Config - Sets current configuration parameters. Saved to /cfg.txt file.
Request: ''cmd:set:config:config:channels:ports:user1:user2''
Response: ''cmd:set:config:channels:ports:user1:user2''

where channels is NNN, ports is NN, user1 is XXXXX, user2 is XXXXXX

142 | 143 |

Web Server

144 |

Asynchronous
Supports serving html, css, js files
Sets default to index.html
Serves two embedded web pages (index.html & config.html)
Supports file not found message

151 | 152 |

User Interface

153 |

Nav Bar Menu
Home and config pages implemented
Displays Current Light Output

State1 field updates on page load and when the "Toggle" button is pressed

Displays Current Device Configuration

Channels, ports, user1 and user2 fields update on page load
Channels, ports, user1 and user2 are input fields
Channels, ports, user1 and user2 can be modified and are saved when "Save Changes" button is pressed

Displays Current Device Uptime

Uptime is updated on a 1 second basis
Uptime format is: "N days, HH:MM:SS"

Current LED Flash Speed

Select input allows onboard LED speed to be changed
LED speed is updated on select input change

All messages to/from config page use Web Services
Web Services has queue implemented if server is busy
Implemented using embedded Bootstrap (3.4.1)
Implemented using embedded JQuery (3.5.1)

181 | 182 |

HTTP API - GET and POST

183 | 184 |

Asynchronous

HTTP GET FREE HEAP (TEXT)

URL: http://mywidget.local/heap
Returns free heap space
Request:

Name/Value Pair: N/A

Response:

freeHeap=[Free Heap]

Example Request:

http://mywidget.local/heap

Example Response:

freeHeap=38616

HTTP GET INTERRUPT COUNT (TEXT)

URL: http://mywidget.local/intcount + optional query string parameters
Returns interrupt counter(s) based on query string parameters, if no query string parameters, then intcount1
Request:

Query String Parameters (optional): N/A

Response:

:intcount1=[Interrupt Counter1]

Example Request:

http://mywidget.local/intcount

Example Response:

:intcount=4533456

Query string parameters (optional):

Request:

1=true, 2=true, 3=true

Response:

Interrupt Counter(s) based on query string
Name value pairs are delimited using colon ":".
Name and value fields are delimited using a equal "=" sign.

Example Request:

http://mywidget.local/intcount?1=true&2=true&3=true

Example Response:

:intcount1=4533456:intcount2=23236:intcount3=98434445

Example Request:

http://mywidget.local/intcount?3=true

Example Response:

:intcount3=98434445

HTTP GET INTERRUPT COUNT2 (TEXT)

URL: http://mywidget.local/intcount2
Returns interrupt counter - interruptCounter2 variable
Request:

Query String Parameters: N/A

Response:

:intcount2=[Interrupt Counter 2]

Example Request:

http://mywidget.local/intcount2

Example Response:

Interrupt Counter=23236

HTTP GET INTERRUPT COUNT3 (TEXT)

URL: http://mywidget.local/intcount3
Returns interrupt counter - interruptCounter3 variable
Request:

Query String Parameters: N/A

Response:

:intcount3=[Interrupt Counter 3]

Example Request:

http://mywidget.local/intcount3

Example Response:

Interrupt Counter3=98434445

HTTP GET STATUS (TEXT)

URL: http://mywidget.local/status + query string (name/value pairs)
Returns status about network, filesystem, signal, heap and chip info in text format.

Name value pairs are delimited using colon ":".
Name and value fields are delimited using a equal "=" sign.

HTTP GET STATUS (JSON)

URL: http://mywidget.local/status-json + query string (name/value pairs)
Returns status about network, filesystem, signal, heap and chip info.

Query string (name/value pairs) parameters:

Network

Request:

Name/Value Pair: network=true

Response:

ssid=[SSID]
hostname=[Hostname]
ip=[IP Address]
gateway=[Gateway]
netmask=[Netmask]

Filesystem

Request:

Name/Value Pair: fs=true

Response:

totalBytes=[Total Bytes]
usedBytes=[Used Bytes]

Signal

Request:

Name/Value Pair: signal=true

Response:

strength=[Signal Strength]

Heap

Request:

Name/Value Pair: heap=true

Response:

freeHeap=[Free Heap]

Chip Info

Request:

Name/Value Pair: chipInfo=true

Response:

chipId=[Chip ID]
flashChipId=[Flash Chip ID]
flashChipSize=[Flash Chip Size]
flashChipRealSize=[Flash Chip Real Size]

Example Request:

http://mywidget.local/status?network=true&fs=true&signal=true&heap=true&chipInfo=true

Example Response (TEXT):

=:network=true:ssid=MyWifi:hostname=mywidget:ip=192.168.0.20:gateway=192.168.0.1:netmask=255.255.255.0:signal=true:strength=-68:chipInfo=true:chipId=3016621:flashChipId=1458392:flashChipSize=4194304:flashChipRealSize=4194304:heap=true:freeHeap=38216:fs=true:totalBytes=1024000:usedBytes=327680

Example Request:

http://mywidget.local/status-json?network=true&fs=true&signal=true&heap=true&chipInfo=true

Example Response (JSON):

{"network": {
408 | "ssid": "MyWifi",
409 | "hostname": "mywidget",
410 | "ip": "192.168.0.20",
411 | "gateway": "192.168.0.1",
412 | "netmask": "255.255.255.0"
413 | },
414 | "signal": {
415 | "strength": "-78"
416 | },
417 | "chipInfo": {
418 | "chipId": "3016621",
419 | "flashChipId": "1458392",
420 | "flashChipSize": "4194304",
421 | "flashChipRealSize": "4194304"
422 | },
423 | "heap": {
424 | "freeHeap": "38024"
425 | },
426 | "fs": {
427 | "totalBytes": "1024000",
428 | "usedBytes": "327680"}}

HTTP POST COUNTER

URL: http://mywidget.local/counter + query string (name/value pairs) in Request Body
Sets the internal counter to Request counter value. Range 1 to 9999
Request:

Name/Value Pair: counter=XXXX

Response:

POST: Counter set to: XXXX

Example Request:

POST http://mywidget.local/counter
form data in Request Body - counter=109

Example Response (TEXT):

POST: Counter set to: 109

456 | 457 |

File System

458 | 459 | This project is implmented using the LittleFS file system. All data is placed in a 'data' directory. 460 |
461 | Here is the directory and files associated with this project: 462 |
463 |

data (Directory)

css (Style Sheet Directory)

bootstrap.min.css (bootstrap CSS file)

js (Java Script directory)

bootstrap.min.js (bootstrap JS file)
jquery.min.js (jquery JS file)

cfg.txt (config file - text format)
index.html (index file - HTML page)
config.html (config file - HTML page)

480 | If you modify a file locally, you must upload to device using Arduino ESP8266 LittleFS Filesystem Uploader. 481 |
482 | The LittleFS implementation for the ESP8266 supports filenames of up to 31 characters + terminating zero (i.e. char filename[32]), and as many subdirectories as space permits. 483 |
484 | Keep your filenames + directories names short! 485 | 486 |

MQTT (Message Queuing Telemetry Transport) - IoT messaging

487 | 488 | MQTT is implemented when a subscribe message is received, a corresponding publish message is sent. 489 | 490 |

esp32/get/uptime - Request uptime

Response: Publish: esp32/uptime (payload:text:"NNNNNNNN")

where NNNNNNNN is the device uptime in milliseconds

esp32/get/heap - Request current heap size

Response: Publish: esp32/heap (payload:text:"NNNNNN")

where NNNNNN is the current heap size

esp32/get/counter - Request current counter value and increment

Response: Publish: esp32/counter (payload:text:"NNNNNN")

where NNNNNN is the current counter value.
Counter is incremented after every esp32/get/counter received. Range 1 to 9999

esp32/set/counter (payload:"NNNNNN") - Set counter value to payload value (text)

Response: Publish: esp32/counter (payload:text:"NNNNNN")

where NNNNNN is the current counter value (text). Range 1 to 9999

OTA (Over The Air) Updates

Interrupt Hander

ESP8266 has only 2 hardware timers, named Timer0 and Timer1
Timer0 has been used for WiFi and it's not advisable to use while using WiFi
This means there is only 1 usable timer

The main interrupt timer is setup for 10 millisecond interval

One ISR-based timer is used to flash the onboard timer and increment counter

interruptCounter1 (changeable speed / freq)

Second ISR-based timer is used to increment counter

interruptCounter2 (fixed speed / freq)

Third ISR-based timer is used to increment counter

interruptCounter3 (fixed speed / freq) 557 |

Test Debug

Notes

The Web Services messages text using fields delimited with colons ":".
The config files are also text using fields delimited with colons ":".

Future Enhancements

[X] Support multiple interrupt timers (ESP8266TimerInterrupt)
[X] Support dynamic interval timers on config page
[X] Support HTTP GET INTERRUPT COUNT with optional parameters
[ ] Asynch NTP support
[ ] More code comments
[ ] Other?

References

Random Nerd Tutorials

Credits

ESPixelStick

29 | #include 30 | #include 31 | #include 32 | #include 33 | #include 34 | #include 35 | #include 36 | #include 37 | #include 38 | #include 39 | 40 | #define LIBRARY "PangolinMQTT "PANGO_VERSION 41 | 42 | // MQTT Delay 43 | #define RECONNECT_DELAY_M 3 44 | // WIFI Delay 45 | #define RECONNECT_DELAY_W 5 46 | 47 | // MQTT Port 48 | #define MQTT_PORT 1883 49 | #define START_WITH_CLEAN_SESSION true 50 | 51 | // 1uS * 10000 = 10mS 52 | #define HW_TIMER_INTERVAL 10000 53 | 54 | // define timer dividers for onboard LED flash speed 55 | #define INT_SLOW 1000 // 1hz 56 | #define INT_MED 500 // 5 hz 57 | #define INT_FAST 100 // 10 hz 58 | #define INT_FASTEST 50 // 20 hz 59 | 60 | // Your ssid and password here 61 | const char* ssid = "YOUR-SSID"; 62 | const char* password = "YOUR-SSID-PASSWORD"; 63 | 64 | // Your MQTT broker address here 65 | #define MQTT_HOST IPAddress(192, 168, 0, 100) 66 | 67 | // host name 68 | const char* host = "mywidget"; 69 | 70 | // global LED state 71 | bool ledState1 = 0; 72 | // global MQTT publish counter 73 | int counter = 1; 74 | 75 | // interrupt variables 76 | volatile unsigned long interruptCounter1 = 0; 77 | volatile unsigned long interruptCounter2 = 0; 78 | volatile unsigned long interruptCounter3 = 0; 79 | 80 | // timer intervals 81 | unsigned long interruptInterval1 = INT_SLOW; 82 | unsigned long interruptInterval2 = INT_FAST; 83 | unsigned long interruptInterval3 = INT_FASTEST; 84 | 85 | // interrupt interval index for changeInterval() 86 | int timer1_idx=0; // ledTimerISR() 87 | int timer2_idx=0; // counterTimer1ISR() 88 | int timer3_idx=0; // counterTimer2ISR() 89 | 90 | // init ESP8266 timer 91 | ESP8266Timer ITimer; 92 | ESP8266_ISR_Timer ISR_Timer; 93 | 94 | // interrupt timer handler 95 | void ICACHE_RAM_ATTR timerHandler() { 96 | ISR_Timer.run(); 97 | } // timerHandler() 98 | 99 | // interrupt handler to Toggle LED 100 | void ICACHE_RAM_ATTR ledTimerISR() { 101 | // Toggle LED Pin 102 | digitalWrite(LED_BUILTIN,!(digitalRead(LED_BUILTIN))); 103 | // inc counter 104 | interruptCounter1++; 105 | } // ledTimerISR() 106 | 107 | // interrupt handler to increment counter 108 | void ICACHE_RAM_ATTR counterTimer1ISR() { 109 | // inc counter 110 | interruptCounter2++; 111 | } // counterTimer1ISR() 112 | 113 | // interrupt handler to increment counter 114 | void ICACHE_RAM_ATTR counterTimer2ISR() { 115 | // inc counter 116 | interruptCounter3++; 117 | } // counterTimer2ISR() 118 | 119 | // file system structure 120 | FSInfo fs_info; 121 | 122 | PangolinMQTT mqttClient; 123 | 124 | Ticker mqttReconnectTimer,wifiReconnectTimer; 125 | 126 | WiFiEventHandler wifiConnectHandler; 127 | WiFiEventHandler wifiDisconnectHandler; 128 | 129 | AsyncWebServer webServer(80); 130 | AsyncWebSocket webSocket("/ws"); 131 | 132 | void handleWebSocketMessage(AsyncWebSocket *server, AsyncWebSocketClient *client, void *arg, uint8_t *data, size_t len) { 133 | AwsFrameInfo *info = (AwsFrameInfo*)arg; 134 | 135 | if (info->final && info->index == 0 && info->len == len) { 136 | if(info->opcode == WS_TEXT) { 137 | char buffer[100]; 138 | 139 | memcpy(buffer, data, len); 140 | buffer[len] = 0; 141 | Serial.printf("Handle WS: %s - len: %d\n", buffer, len); 142 | 143 | char *token = strtok(buffer, ":"); 144 | 145 | if(!strcmp("cmd", token)) { 146 | // Serial.println("cmd"); 147 | token = strtok(NULL, ":"); 148 | if (!strcmp("get", token)) { 149 | // GET ACTIONS 150 | // Serial.println("get"); 151 | token = strtok(NULL, ":"); 152 | // Serial.println(token); 153 | if (!strcmp("uptime", token)) { 154 | // uptime 155 | Serial.println("uptime:" + String(millis())); 156 | client->text("cmd:get:uptime:" + String(millis())); 157 | } else if (!strcmp("status", token)) { 158 | // status 159 | client->text("cmd:get:status:" + String(ledState1)); 160 | } else if (!strcmp("speed", token)) { 161 | String speed = "1"; 162 | // speed - cmd:get:speed:interrupt:speed 163 | char *intNum = strtok(NULL, ":"); 164 | Serial.println("interrupt:" + String(intNum)); 165 | if(intNum[0] == '1') { 166 | // interrupt - 1 167 | if(interruptInterval1 == INT_SLOW) 168 | speed = "1"; 169 | else if(interruptInterval1 == INT_MED) 170 | speed = "2"; 171 | else if(interruptInterval1 == INT_FAST) 172 | speed = "3"; 173 | else if(interruptInterval1 == INT_FASTEST) 174 | speed = "4"; 175 | } else if(intNum[0] == '2') { 176 | // interrupt - 2 177 | if(interruptInterval2 == INT_SLOW) 178 | speed = "1"; 179 | else if(interruptInterval2 == INT_MED) 180 | speed = "2"; 181 | else if(interruptInterval2 == INT_FAST) 182 | speed = "3"; 183 | else if(interruptInterval2 == INT_FASTEST) 184 | speed = "4"; 185 | } else if(intNum[0] == '3') { 186 | // interrupt - 3 187 | if(interruptInterval3 == INT_SLOW) 188 | speed = "1"; 189 | else if(interruptInterval3 == INT_MED) 190 | speed = "2"; 191 | else if(interruptInterval3 == INT_FAST) 192 | speed = "3"; 193 | else if(interruptInterval3 == INT_FASTEST) 194 | speed = "4"; 195 | } 196 | client->text("cmd:get:speed:" + String(intNum) + ":" + String(speed)); 197 | } else if (!strcmp("config", token)) { 198 | // config 199 | String fileData; 200 | 201 | File f = LittleFS.open("/cfg.txt", "r"); 202 | if (!f) { 203 | Serial.println("file open failed"); 204 | } else { 205 | f.seek (0, SeekSet); 206 | fileData = f.readString (); 207 | f.close (); 208 | } 209 | client->text("cmd:get:config:" + fileData); 210 | } else { 211 | Serial.println("Unknown get action"); 212 | client->text("Unknown get action"); 213 | } 214 | } else if (!strcmp("set", token)) { 215 | // SET ACTIONS 216 | // Serial.println("set"); 217 | token = strtok(NULL, ":"); 218 | // Serial.println(token); 219 | if (!strcmp("toggle", token)) { 220 | // toggle 221 | ledState1 = !ledState1; 222 | client->text("cmd:set:toggle:" + String(ledState1)); 223 | } else if (!strcmp("speed", token)) { 224 | // default to slow 225 | unsigned long tmpSpeed = INT_SLOW; 226 | // speed - cmd:set:speed:interrupt:speed 227 | char *intNum = strtok(NULL, ":"); 228 | Serial.println("interrupt:" + String(intNum)); 229 | char *speed = strtok(NULL, ":"); 230 | Serial.println("speed:" + String(speed)); 231 | 232 | if(strlen(speed) == 1) { 233 | if(speed[0] == '1') 234 | tmpSpeed = INT_SLOW; 235 | else if (speed[0] == '2') 236 | tmpSpeed = INT_MED; 237 | else if (speed[0] == '3') 238 | tmpSpeed = INT_FAST; 239 | else if (speed[0] == '4') 240 | tmpSpeed = INT_FASTEST; 241 | } 242 | if(intNum[0] == '1') { 243 | // interrupt - 1 244 | if(tmpSpeed != interruptInterval1) { 245 | interruptInterval1 = tmpSpeed; 246 | // update the interval 247 | ISR_Timer.changeInterval(timer1_idx, interruptInterval1); 248 | } 249 | } else if(intNum[0] == '2') { 250 | // interrupt - 2 251 | if(tmpSpeed != interruptInterval2) { 252 | interruptInterval2 = tmpSpeed; 253 | // update the interval 254 | ISR_Timer.changeInterval(timer2_idx, interruptInterval2); 255 | } 256 | } else if(intNum[0] == '3') { 257 | // interrupt - 3 258 | if(tmpSpeed != interruptInterval2) { 259 | interruptInterval3 = tmpSpeed; 260 | // update the interval 261 | ISR_Timer.changeInterval(timer3_idx, interruptInterval3); 262 | } 263 | } 264 | client->text("cmd:set:speed:" + String(intNum) + ":" + String(speed)); 265 | } else if (!strcmp("config", token)) { 266 | String(buf); 267 | // config 268 | 269 | // channels:ports:user1:user2 270 | char *channels = strtok(NULL, ":"); 271 | Serial.println(channels); 272 | char *ports = strtok(NULL, ":"); 273 | Serial.println(ports); 274 | char *user1 = strtok(NULL, ":"); 275 | Serial.println(user1); 276 | char *user2 = strtok(NULL, ":"); 277 | Serial.println(user2); 278 | 279 | // channels:ports:user1:user2 280 | buf += String(channels) + ":" + String(ports) + ":" + String(user1) + ":" + String(user2); 281 | 282 | Serial.println(buf); 283 | 284 | File f = LittleFS.open("/cfg.txt", "w"); 285 | if (!f) { 286 | Serial.println("file open failed"); 287 | } else { 288 | f.seek (0, SeekSet); 289 | f.print (buf); 290 | f.close (); 291 | Serial.println("Config File Saved"); 292 | } 293 | client->text("cmd:set:config:" + String(buf)); 294 | } else { 295 | Serial.println("Unknown set action"); 296 | client->text("Unknown set action"); 297 | } 298 | } else { 299 | Serial.println("Unknown request"); 300 | client->text("Unknown request"); 301 | } // get cmd 302 | } else { 303 | Serial.println("Unknown cmd"); 304 | client->text("Unknown cmd"); 305 | } // cmd 306 | } else { 307 | client->binary("I got your binary message"); 308 | } 309 | } else { 310 | // message is comprised of multiple frames or the frame is split into multiple packets 311 | if(info->index == 0){ 312 | if(info->num == 0) 313 | Serial.printf("ws[%s][%u] %s-message start\n", server->url(), client->id(), (info->message_opcode == WS_TEXT)?"text":"binary"); 314 | Serial.printf("ws[%s][%u] frame[%u] start[%llu]\n", server->url(), client->id(), info->num, info->len); 315 | } 316 | 317 | Serial.printf("ws[%s][%u] frame[%u] %s[%llu - %llu]: ", server->url(), client->id(), info->num, (info->message_opcode == WS_TEXT)?"text":"binary", info->index, info->index + len); 318 | if(info->message_opcode == WS_TEXT){ 319 | data[len] = 0; 320 | Serial.printf("%s\n", (char*)data); 321 | } else { 322 | for(size_t i=0; i < len; i++) { 323 | Serial.printf("%02x ", data[i]); 324 | } 325 | Serial.printf("\n"); 326 | } 327 | if((info->index + len) == info->len) { 328 | Serial.printf("ws[%s][%u] frame[%u] end[%llu]\n", server->url(), client->id(), info->num, info->len); 329 | if(info->final) { 330 | Serial.printf("ws[%s][%u] %s-message end\n", server->url(), client->id(), (info->message_opcode == WS_TEXT)?"text":"binary"); 331 | if(info->message_opcode == WS_TEXT) 332 | client->text("I got your text message"); 333 | else 334 | client->binary("I got your binary message"); 335 | } 336 | } 337 | } 338 | } // handleWebSocketMessage() 339 | 340 | void onMqttConnect(bool sessionPresent) { 341 | Serial.printf("Connected to MQTT session=%d max payload size=%d\n", sessionPresent,mqttClient.getMaxPayloadSize()); 342 | Serial.println("Subscribing at QoS 2"); 343 | 344 | mqttClient.subscribe("esp32/get/uptime", 2); 345 | mqttClient.subscribe("esp32/get/heap", 2); 346 | mqttClient.subscribe("esp32/get/counter", 2); 347 | mqttClient.subscribe("esp32/set/counter", 2); 348 | } // onMqttConnect() 349 | 350 | void onMqttMessage(const char* topic, const uint8_t* payload, size_t len,uint8_t qos,bool retain,bool dup) { 351 | Serial.printf("\nH=%u Message %s qos%d dup=%d retain=%d len=%d\n",ESP.getFreeHeap(),topic,qos,dup,retain,len); 352 | PANGO::dumphex(payload,len,16); 353 | 354 | if(!strcmp(topic,"esp32/get/uptime") ) { 355 | Serial.println("esp32/get/uptime"); 356 | mqttClient.publish("esp32/uptime", millis(),"%u"); 357 | 358 | } else if (!strcmp(topic,"esp32/get/heap")) { 359 | Serial.println("esp32/get/heap"); 360 | mqttClient.publish("esp32/heap", ESP.getFreeHeap(),"%u"); 361 | } else if (!strcmp(topic,"esp32/get/counter")) { 362 | Serial.println("esp32/get/counter"); 363 | mqttClient.publish("esp32/counter", counter, "%u"); 364 | if(++counter > 9999) 365 | counter=1; 366 | } else if (!strcmp(topic,"esp32/set/counter")) { 367 | if(len > 0 && len < 6) { 368 | char buf[6]; 369 | memcpy(buf, payload, len); 370 | buf[len] = 0; 371 | counter = atoi(buf); 372 | } 373 | Serial.println("esp32/set/counter"); 374 | mqttClient.publish("esp32/counter", counter, "%u"); 375 | } 376 | } // onMqttMessage() 377 | 378 | void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, 379 | void *arg, uint8_t *data, size_t len) { 380 | switch (type) { 381 | case WS_EVT_CONNECT: 382 | Serial.printf("WebSocket client #%u connected from %s\n", client->id(), client->remoteIP().toString().c_str()); 383 | break; 384 | case WS_EVT_DISCONNECT: 385 | Serial.printf("WebSocket client #%u disconnected\n", client->id()); 386 | break; 387 | case WS_EVT_DATA: 388 | handleWebSocketMessage(server, client, arg, data, len); 389 | break; 390 | case WS_EVT_PONG: 391 | Serial.println("ping"); 392 | break; 393 | case WS_EVT_ERROR: 394 | Serial.println("error"); 395 | break; 396 | } 397 | } // onEvent() 398 | 399 | // 400 | // Based on args, return status of network, signal, chipInfo, heap, filesystem (fs) in JSON format 401 | // 402 | void handleStatusJson(AsyncWebServerRequest* request) 403 | { 404 | String json = "{"; 405 | bool n = false; 406 | 407 | Serial.println("GET status-json"); 408 | if (request->arg("network") == "true") { 409 | // Serial.println("network"); 410 | if(n) json += ","; 411 | json += "\"network\":{"; 412 | json += "\"ssid\":\"" + String(ssid) + "\""; 413 | json += ",\"hostname\":\"" + String(host) + "\""; 414 | json += ",\"ip\":\"" + WiFi.localIP().toString() + "\""; 415 | json += ",\"gateway\":\"" + WiFi.gatewayIP().toString() + "\""; 416 | json += ",\"netmask\":\"" + WiFi.subnetMask().toString() + "\""; 417 | json += "}"; 418 | n = true; 419 | } 420 | 421 | if (request->arg("signal")== "true") { 422 | // Serial.println("signal"); 423 | if(n) json += ","; 424 | json += "\"signal\":{"; 425 | json += "\"strength\":\"" + String(WiFi.RSSI()) + "\""; 426 | json += "}"; 427 | n = true; 428 | } 429 | 430 | if (request->arg("chipInfo")== "true") { 431 | // Serial.println("chipInfo"); 432 | if(n) json += ","; 433 | json += "\"chipInfo\":{"; 434 | json += "\"chipId\":\"" + String(ESP.getChipId()) + "\""; 435 | json += ",\"flashChipId\":\"" + String(ESP.getFlashChipId()) + "\""; 436 | json += ",\"flashChipSize\":\"" + String(ESP.getFlashChipSize()) + "\""; 437 | json += ",\"flashChipRealSize\":\"" + String(ESP.getFlashChipRealSize()) + "\""; 438 | json += "}"; 439 | n = true; 440 | } 441 | 442 | if (request->arg("heap")== "true") { 443 | // Serial.println("heap"); 444 | if(n) json += ","; 445 | json += "\"heap\":{"; 446 | json += "\"freeHeap\":\"" + String(ESP.getFreeHeap()) + "\""; 447 | json += "}"; 448 | n = true; 449 | } 450 | 451 | if (request->arg("fs")== "true") { 452 | // Serial.println("fs"); 453 | if(n) json += ","; 454 | json += "\"fs\":{"; 455 | json += "\"totalBytes\":\"" + String(fs_info.totalBytes) + "\""; 456 | json += ",\"usedBytes\":\"" + String(fs_info.usedBytes) + "\""; 457 | json += "}"; 458 | n = true; 459 | } 460 | json += "}"; 461 | request->send(200, "application/json", json); 462 | } // handleStatusJson() 463 | // 464 | // Based on args, return interrupt counters 465 | // 466 | void handleIntCounter(AsyncWebServerRequest* request) 467 | { 468 | String buf; 469 | Serial.println("GET intcount"); 470 | 471 | if(request->params() != 0) { 472 | if (request->arg("1") == "true") { 473 | Serial.println("intcount1"); 474 | buf += ":intcount1=" + String(interruptCounter1); 475 | } 476 | if (request->arg("2") == "true") { 477 | Serial.println("intcount2"); 478 | buf += ":intcount2=" + String(interruptCounter2); 479 | } 480 | if (request->arg("3") == "true") { 481 | Serial.println("intcount3"); 482 | buf += ":intcount3=" + String(interruptCounter3); 483 | } 484 | 485 | } else { 486 | buf += ":intcount1=" + String(interruptCounter1); 487 | } 488 | request->send(200, "text/plain", buf); 489 | } // handleIntCounter() 490 | 491 | void handleStatus(AsyncWebServerRequest* request) 492 | { 493 | String buf; 494 | Serial.println("GET status"); 495 | 496 | // not necessary - just additional info 497 | int params = request->params(); 498 | for(int i=0;igetParam(i); 500 | Serial.printf("_GET[%s]: %s\n", p->name().c_str(), p->value().c_str()); 501 | } 502 | 503 | if (request->arg("network") == "true") { 504 | // Serial.println("network"); 505 | buf += ":network=true"; 506 | buf += ":ssid=" + String(ssid); 507 | buf += ":hostname=" + String(host); 508 | buf += ":ip=" + WiFi.localIP().toString(); 509 | buf += ":gateway=" + WiFi.gatewayIP().toString(); 510 | buf += ":netmask=" + WiFi.subnetMask().toString(); 511 | } 512 | 513 | if (request->arg("signal")== "true") { 514 | // Serial.println("signal"); 515 | buf += ":signal=true"; 516 | buf += ":strength=" + String(WiFi.RSSI()); 517 | } 518 | 519 | if (request->arg("chipInfo")== "true") { 520 | // Serial.println("chipInfo"); 521 | buf += ":chipInfo=true"; 522 | buf += ":chipId=" + String(ESP.getChipId()); 523 | buf += ":flashChipId=" + String(ESP.getFlashChipId()); 524 | buf += ":flashChipSize=" + String(ESP.getFlashChipSize()); 525 | buf += ":flashChipRealSize=" + String(ESP.getFlashChipRealSize()); 526 | } 527 | 528 | if (request->arg("heap")== "true") { 529 | // Serial.println("heap"); 530 | buf += ":heap=true"; 531 | buf += ":freeHeap=" + String(ESP.getFreeHeap()); 532 | } 533 | 534 | if (request->arg("fs")== "true") { 535 | // Serial.println("fs"); 536 | buf += ":fs=true"; 537 | buf += ":totalBytes=" + String(fs_info.totalBytes); 538 | buf += ":usedBytes=" + String(fs_info.usedBytes); 539 | } 540 | 541 | request->send(200, "text/plain", buf); 542 | } // handleStatus() 543 | 544 | void initWeb() { 545 | webSocket.onEvent(onEvent); 546 | webServer.addHandler(&webSocket); 547 | 548 | // get heap (TEXT response) 549 | webServer.on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) { 550 | Serial.println("GET heap"); 551 | request->send(200, "text/plain", "freeHeap=" + String(ESP.getFreeHeap())); 552 | }); 553 | // get intcount with optional parameters (TEXT response) 554 | webServer.on("/intcount", HTTP_GET, [](AsyncWebServerRequest *request) { 555 | handleIntCounter(request); 556 | }); 557 | // get intcount2 (TEXT response) 558 | webServer.on("/intcount2", HTTP_GET, [](AsyncWebServerRequest *request) { 559 | Serial.println("GET intcount2"); 560 | request->send(200, "text/plain", ":intcount2=" + String(interruptCounter2)); 561 | }); 562 | // get intcount3 (TEXT response) 563 | webServer.on("/intcount3", HTTP_GET, [](AsyncWebServerRequest *request) { 564 | Serial.println("GET intcount3"); 565 | request->send(200, "text/plain", ":intcount3=" + String(interruptCounter3)); 566 | }); 567 | // get status (TEXT response) 568 | webServer.on("/status", HTTP_GET, [](AsyncWebServerRequest* request) { 569 | handleStatus(request); 570 | }); 571 | // get status (JSON response) 572 | webServer.on("/status-json", HTTP_GET, [](AsyncWebServerRequest* request) { 573 | handleStatusJson(request); 574 | }); 575 | // post counter (TEXT response) 576 | webServer.on("/counter", HTTP_POST, [](AsyncWebServerRequest *request){ 577 | String message; 578 | Serial.println("POST:counter"); 579 | int i=0; 580 | 581 | // counter must be in request 582 | if (request->hasParam("counter", true)) { 583 | message = request->getParam("counter", true)->value(); 584 | i = atoi(String(message).c_str()); 585 | if(i>0 && i<=9999) 586 | counter = i; 587 | } 588 | request->send(200, "text/plain", "POST: Counter set to: " + String(i)); 589 | }); 590 | // page not found message 591 | webServer.onNotFound([](AsyncWebServerRequest *request) { 592 | request->send(404, "text/plain", "Page not found"); 593 | }); 594 | // default to index page 595 | webServer.serveStatic("/", LittleFS, "/").setDefaultFile("index.html"); 596 | // serve up image 597 | webServer.on("/cplusplus", HTTP_GET, [](AsyncWebServerRequest *request){ 598 | request->send(LittleFS, "/cplusplus.png", "image/png"); 599 | }); 600 | webServer.begin(); 601 | Serial.println("WebServer Started"); 602 | } // initWeb() 603 | 604 | void connectToMqtt() { 605 | Serial.println("Connecting to MQTT..."); 606 | mqttClient.connect(); 607 | } // connectToMqtt() 608 | 609 | void connectToWifi() { 610 | if(!WiFi.isConnected()) { 611 | Serial.printf("Connecting to Wi-Fi... SSID=%s\n", ssid); 612 | WiFi.begin(ssid, password); 613 | } else { 614 | Serial.printf("Already connected\n"); 615 | } 616 | } // connectToWifi() 617 | 618 | void onWifiConnect(const WiFiEventStationModeGotIP& event) { 619 | Serial.println("IP address: "); 620 | Serial.println(WiFi.localIP()); 621 | if (MDNS.begin(host)) { 622 | Serial.printf("Open http://%s", host); 623 | Serial.println(".local to open ESP8266-MyWidget-Demo"); 624 | } else { 625 | Serial.println("Error setting up MDNS responder!"); 626 | } 627 | 628 | MDNS.addService("http", "tcp", 80); 629 | ArduinoOTA.onStart([]() { 630 | Serial.println("Start"); 631 | }); 632 | 633 | ArduinoOTA.onEnd([]() { 634 | Serial.println("\nEnd"); 635 | }); 636 | 637 | ArduinoOTA.onProgress([](unsigned int progress, unsigned int total) { 638 | Serial.printf("Progress: %u%%\r", (progress / (total / 100))); 639 | }); 640 | 641 | ArduinoOTA.onError([](ota_error_t error) { 642 | Serial.printf("Error[%u]: ", error); 643 | if (error == OTA_AUTH_ERROR) Serial.println("Auth Failed"); 644 | else if (error == OTA_BEGIN_ERROR) Serial.println("Begin Failed"); 645 | else if (error == OTA_CONNECT_ERROR) Serial.println("Connect Failed"); 646 | else if (error == OTA_RECEIVE_ERROR) Serial.println("Receive Failed"); 647 | else if (error == OTA_END_ERROR) Serial.println("End Failed"); 648 | }); 649 | 650 | initWeb(); 651 | 652 | ArduinoOTA.begin(); 653 | 654 | connectToMqtt(); 655 | } // onWifiConnect() 656 | 657 | void onWifiDisconnect(const WiFiEventStationModeDisconnected& event) { 658 | Serial.printf("Disconnected from Wi-Fi event=%d\n",event.reason); 659 | mqttReconnectTimer.detach(); // ensure we don't reconnect to MQTT while reconnecting to Wi-Fi 660 | wifiReconnectTimer.once(RECONNECT_DELAY_W, connectToWifi); 661 | } // onWifiDisconnect() 662 | 663 | void setup() { 664 | Serial.begin(115200); 665 | 666 | wifiConnectHandler = WiFi.onStationModeGotIP(onWifiConnect); 667 | wifiDisconnectHandler = WiFi.onStationModeDisconnected(onWifiDisconnect); 668 | 669 | mqttClient.onConnect(onMqttConnect); 670 | mqttClient.onDisconnect(onMqttDisconnect); 671 | mqttClient.onMessage(onMqttMessage); 672 | mqttClient.setServer(MQTT_HOST, MQTT_PORT); 673 | mqttClient.setWill("DIED",2,false,"probably still some bugs"); 674 | mqttClient.onError(onMqttError); 675 | mqttClient.setCleanSession(START_WITH_CLEAN_SESSION); 676 | mqttClient.setKeepAlive(RECONNECT_DELAY_M *3); 677 | 678 | connectToWifi(); 679 | 680 | LittleFS.begin(); 681 | if(LittleFS.info(fs_info)) { 682 | Serial.printf("LittleFS File System Size: "); 683 | Serial.println(fs_info.totalBytes); 684 | Serial.printf("Used: "); 685 | Serial.println(fs_info.usedBytes); 686 | } 687 | Serial.println("LittlFS started. Contents:"); 688 | Dir dir = LittleFS.openDir("/"); 689 | while (dir.next()) { 690 | Serial.printf("%s - %d bytes\n", dir.fileName().c_str(), dir.fileSize()); 691 | } 692 | dir = LittleFS.openDir("/css"); 693 | while (dir.next()) { 694 | Serial.printf("%s - %d bytes\n", dir.fileName().c_str(), dir.fileSize()); 695 | } 696 | dir = LittleFS.openDir("/js"); 697 | while (dir.next()) { 698 | Serial.printf("%s - %d bytes\n", dir.fileName().c_str(), dir.fileSize()); 699 | } 700 | 701 | // Initialize the LED_BUILTIN pin as an output 702 | pinMode(LED_BUILTIN, OUTPUT); 703 | 704 | // set timer to 100000/100 = 1000 hz 705 | if (! ITimer.attachInterruptInterval(HW_TIMER_INTERVAL, timerHandler)) { 706 | Serial.println("Can't set ITimer correctly. Select another freq. or interval"); 707 | } 708 | 709 | // The timers of the RTC are not affected by the CPU speed setting. 710 | // A given timer divisor produces the same rate of change of the RTC timer's COUNT register with both speed settings. 711 | 712 | // 100 = 1 hz (SLOW) 713 | // 50 = 5 hz (MEDIUM) 714 | // 10 = 10 hz (FAST) 715 | // 5 = 20 hz (FASTEST) 716 | 717 | timer1_idx = ISR_Timer.setInterval(interruptInterval1, ledTimerISR); 718 | timer2_idx = ISR_Timer.setInterval(interruptInterval2, counterTimer1ISR); 719 | timer3_idx = ISR_Timer.setInterval(interruptInterval3, counterTimer2ISR); 720 | 721 | Serial.printf("Timer1 Index=%d\n",timer1_idx); 722 | Serial.printf("Timer2 Index=%d\n",timer2_idx); 723 | Serial.printf("Timer3 Index=%d\n",timer3_idx); 724 | } // setup() 725 | 726 | void onMqttDisconnect(int8_t reason) { 727 | Serial.printf("Disconnected from MQTT reason=%d\n",reason); 728 | mqttReconnectTimer.once(RECONNECT_DELAY_M, connectToMqtt); 729 | } // onMqttDisconnect() 730 | 731 | void onMqttError(uint8_t e,uint32_t info) { 732 | switch(e) { 733 | case TCP_DISCONNECTED: 734 | // usually because your structure is wrong and you called a function before onMqttConnect 735 | Serial.printf("ERROR: NOT CONNECTED info=%d\n",info); 736 | break; 737 | case MQTT_SERVER_UNAVAILABLE: 738 | // server has gone away - network problem? server crash? 739 | Serial.printf("ERROR: MQTT_SERVER_UNAVAILABLE info=%d\n",info); 740 | break; 741 | case UNRECOVERABLE_CONNECT_FAIL: 742 | // there is something wrong with your connection parameters? IP:port incorrect? user credentials typo'd? 743 | Serial.printf("ERROR: UNRECOVERABLE_CONNECT_FAIL info=%d\n",info); 744 | break; 745 | case TLS_BAD_FINGERPRINT: 746 | Serial.printf("ERROR: TLS_BAD_FINGERPRINT info=%d\n",info); 747 | break; 748 | case SUBSCRIBE_FAIL: 749 | // you tried to subscribe to an invalid topic 750 | Serial.printf("ERROR: SUBSCRIBE_FAIL info=%d\n",info); 751 | break; 752 | case INBOUND_QOS_ACK_FAIL: 753 | Serial.printf("ERROR: OUTBOUND_QOS_ACK_FAIL id=%d\n",info); 754 | break; 755 | case OUTBOUND_QOS_ACK_FAIL: 756 | Serial.printf("ERROR: OUTBOUND_QOS_ACK_FAIL id=%d\n",info); 757 | break; 758 | case INBOUND_PUB_TOO_BIG: 759 | // someone sent you a p[acket that this MCU does not have enough FLASH to handle 760 | Serial.printf("ERROR: INBOUND_PUB_TOO_BIG size=%d Max=%d\n",e,mqttClient.getMaxPayloadSize()); 761 | break; 762 | case OUTBOUND_PUB_TOO_BIG: 763 | // you tried to send a packet that this MCU does not have enough FLASH to handle 764 | Serial.printf("ERROR: OUTBOUND_PUB_TOO_BIG size=%d Max=%d\n",e,mqttClient.getMaxPayloadSize()); 765 | break; 766 | case BOGUS_PACKET: // Your server sent a control packet type unknown to MQTT 3.1.1 767 | // 99.99% unlikely to ever happen, but this message is better than a crash, non? 768 | Serial.printf("ERROR: BOGUS_PACKET TYPE=%02x\n",e,info); 769 | break; 770 | case X_INVALID_LENGTH: // An x function rcvd a msg with an unexpected length: probale data corruption or malicious msg 771 | // 99.99% unlikely to ever happen, but this message is better than a crash, non? 772 | Serial.printf("ERROR: X_INVALID_LENGTH TYPE=%02x\n",e,info); 773 | break; 774 | default: 775 | Serial.printf("UNKNOWN ERROR: %u extra info %d",e,info); 776 | break; 777 | } 778 | } // onMqttError() 779 | 780 | void loop() { 781 | MDNS.update(); 782 | ArduinoOTA.handle(); 783 | } // loop() 784 | 785 | // End of File 786 | -------------------------------------------------------------------------------- /data/js/bootstrap.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v3.4.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2019 Twitter, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");!function(t){"use strict";var e=jQuery.fn.jquery.split(" ")[0].split(".");if(e[0]<2&&e[1]<9||1==e[0]&&9==e[1]&&e[2]<1||3this.$items.length-1||t<0))return this.sliding?this.$element.one("slid.bs.carousel",function(){e.to(t)}):i==t?this.pause().cycle():this.slide(idocument.documentElement.clientHeight;this.$element.css({paddingLeft:!this.bodyIsOverflowing&&t?this.scrollbarWidth:"",paddingRight:this.bodyIsOverflowing&&!t?this.scrollbarWidth:""})},s.prototype.resetAdjustments=function(){this.$element.css({paddingLeft:"",paddingRight:""})},s.prototype.checkScrollbar=function(){var t=window.innerWidth;if(!t){var e=document.documentElement.getBoundingClientRect();t=e.right-Math.abs(e.left)}this.bodyIsOverflowing=document.body.clientWidth