ESP8266 Christmas Tree Web UI Tour
Many years ago, I built a clone of @JasonCoon's Tree v2 project. His documentation was detailed and generous, and he freely provides (to this day) the bill of materials, wiring scheme, LED maps and firmware code. My tree has been an annual fixture in our holiday decorations ever since.
When I began teaching high school computer science a couple of years ago, I decided it was time to refresh my web design skills. I found the Jquery and Bootstrap-based UI to be a bit slow and austere–it did the job well, but wasn't very exciting to use. However, the backend APIs were solid, allowing me to easily rewrite the frontend as I caught up on more than a decade of web development concepts. Aside from a few simple python flask projects, I hadn't focused much on frontend work since the HTML 4.0 days. I switched from Bootstrap to an all new design using Bulma and (yes, still Jquery) roundslider controls.
That was a couple of years ago, and produced the basis of the new version I'm publishing today. This year, I made some much bigger changes to the original code, while also factoring in some improvements Jason and collaborators have made and released under his esp8266-fastled-web-server project, which provides configurations for many of his other LED projects. In my version, I've completely rewritten the field management library, implemented a custom WiFi connection manager, a custom firmware upgrade feature, and an all new brightness scheduling feature. The web UI is responsive and fun to use (IMO).
There's more work to be done, of course. In particular the filesystem upgrade doesn't work yet–it needs rewritten to accept a zip of the data folder and upload file-by-file to avoid overflowing the storage trying to send a 1MB bin–and the sunset-based evening time for the brightness scheduler needs more testing. Oh, and I'll need to release an update for the timezone selection box in the web UI to convert from the IANA timezones provided to the POSIX timezones used by the Espressif time.h library. I have a backlog of other features I'd like to eventually add as well, such as pattern and palette enabling/disabling from the frontend, pattern-based slider visibility (some sliders only affect certain patterns), and matching frontends for the Pride Playground and Color Waves Playground. I'm fairly satisfied with the progress I made over the past couple of weeks, though!
Check out the project at https://github.com/kylebeck/tree
