Evil Genius Labs
Custom Electronic Art
Custom Electronic Art
Tweak the setting of the amazing ColorWaves and Pride FastLED animations interactively via a web UI.
ColorWavesWithPalettes and Pride2015 are brilliant animations for the FastLED library created by Mark Kriegsman. The code for both include a set of “magic numbers” or constants defined in the code. Slight changes in these numbers can cause drastic changes in the appearance of the animations. But changing them requires compiling and uploading the code. I wanted to learn more about the animations and code, and decided being able to interactively change them and immediately see the result would be beneficial.
I used my esp8266-fastled-webserver project, which already provides a web interface over wi-fi for changing settings, such as brightness, pattern, palette, etc. I extracted all of the constants from the Pride2015 and ColorWaves code, and replaced them with variables that I exposed as fields via the REST interface. No changes were needed to the web app, since it dynamically displays editors for all of the fields.
I quickly realized that a way of saving, importing and exporting the settings would be beneficial. You can save them to a JSON file which you can load, share, etc.
Load Valuesconverts the current set of field values to JSON format in the large text area, where it can be copied, modified, etc.
Set Valuesloads the contents of the text area, updates all of the changed field values in the UI, and submits them via wi-fi and the REST API.
Copycopies the contents of the text area to the clipboard.
Scroll to Topscrolls to the top of the web page. There is also a button at the top of the page to scroll to the bottom.
Savedownloads the contents of the text area to a preset file on your computer, using the filename entered in the textbox. The filename
preset1.jsonis the default, and I suggest you use the
.jsonfile extension for these files.
Openlets you browse to and open a file on your computer, and loads it into the text area. To apply the preset file, you need to then press the
You can find the source code on GitHub: https://github.com/jasoncoon/esp8266-fastled-webserver
I’ve also started porting the code to branches shared specifically for builds and products of mine, such as the Fibonacci boards pictured above: