Potential for collaboration? #1
Description
I was writing up a similar project idea yesterday, which is why I searched for and found your repo. It sounds like you might already be working on something similar. I don't have time to dive into this project right now but I wanted to get my ideas down and sent it to someone who might be interested in working on it. If you're already working on something like this and want to collaborate, please let me know, and I'm happy to contribute as I have time.
High Level Idea
ESP8266/32 sketch serves its own configuration/editor interface as a mini web application, and saves the updated configuration/content back into its own filesystem.
The web app can be very simple or very complex, as it will run on a remote computer/phone and doesn't need to depend on the processing power of the ESP device. The interface to/from the ESP device should be kept relatively simple, likely just with filesystem read/writes, JSON files for configuration, image files (for example) for content. The web app could also be hosted somewhere and the same types of files loaded and saved, to configure or create content for an offline device.
Example: GIF playlist Editor, Served by AnimatedGIF Sketch
The AnimatedGIF sketch would be configured to load a JSON file playlist and referenced GIFs from a local filesystem. It would serve a GIF playlist editor web app capable of setting up and modifying a playlist with a timeline view, preview of the GIFs, uploading of GIFs into the editor, handle resizing/cropping of GIFs to fit the screen size. When saving the playlist, the JSON file and any new/modified GIFs would be saved into the local filesystem.
Implementation: Stage 1
This is done as a one-off for a specific sketch. This requires creating the web application, modifying an ESPAsyncWebServer to serve the files and save content when modified. Full stack development experience needed.
Implementation: Stage 2
Make a reusable framework for serving a web app, serving and updating files from the local filesystem, and minimize the amount of full stack development knowledge needed to get this up and running.
(My experience is mostly on the embedded side with just a little ESP WiFi/web and hardly any modern web design experience, so I may be assuming certain things are possible/straightforward when they're not)
Suggested Components:
- ESPAsyncWebServer-based library that is set up to serve/update files, with hopefully just a few lines of configuration required inside a sketch
- This will serve a webpage to run and maybe edit a p5js sketch
- https://editor.p5js.org/kjhollen/sketches/S1bVzeF8Z) (First google result for "p5js Animated GIF")
- There probably needs to be some p5js components made to load/save config/content on the local filesystem of the ESP (through ESPAsyncWebServer)
- With this in place, it should really minimize the amount of effort needed for someone who doesn't know all these technologies to make a simple web app that interacts with their ESP device. There's the possibility of making complex web apps as you can do some pretty powerful things with p5js
Example: Config Tool for LED String Art FastLED sketch
Imagine a set of LED lights and a preprogrammed ESP8266 were sold as a kit, but you had options on how you strung them up.
https://twitter.com/GeekMomProjects/status/1360460668445499396
The sketch serves a configuration/preview app in the form of a p5js sketch that lets you choose how you wire up the LEDs, shows a preview of what the effects programmed in the sketch look like, and lets you configure things like favorite effects or swapping palettes, etc.
https://twitter.com/GeekMomProjects/status/1346017653920387073
The functionality of the Arduino sketch can be significantly tweaked in a friendly way without the user needing to download the Arduino IDE or change any code.
Other Project Ideas
LED mapping editor with realtime simulation and preview on LEDs
- e.g. playing a rectangular Animated GIF in the browser, and mapping appropriate pixels onto arbitrarily placed pixels in a 2D mapping (e.g. the string art)
- Save a mapped GIF ready for playback on the LED string to the local filesystem when edited
Looping GIF creator like Noisedeck (which is/was created with p5js!) that previews with optional mapping on LEDs, resizes GIF and saves it to local filesystem
Add-on for offline/non-ESP projects, adding an ESP8266 as a configuration/control interface, so e.g. JSON files and content can be shared over the serial link but the ESP8266 takes care of serving the web application.
- A serial port will link the ESP8266 and the offline device. A library provides file read/write access over the serial link
- CLI style command/responses plus YMODEM for transferring files
- (I've started thinking about and prototyping this but it's in the real early stages)
Javascript based compiler with editor/simulator that runs in the browser, and a compiled sketch can be saved to the local filesystem for a boot loader to reflash the device
- Yes this seems like a far fetched idea, but if I understand correctly this project is actually doing it already (USB flashing though):
- https://editor.soulmatelights.com
- More details: https://www.soulmatelights.com
- I believe it's based on this AVR compiler/simulator, with FastLED simulation:
- Pixelblaze is a great example of what can be served from an ESP32 (V2 was done with an ESP8266) and run in the browser: code editor with simulator and documentation, where code is sent back to the ESP and interpreted to make LED patterns
References
- https://github.com/rwlloyd/p5-javascript-webserver
- I just found this, looks like someone already got a start on the ESP8266+ESPAsyncWebServer+p5js idea
- There's an ESPAsyncWebServer example to serve a filesystem editor, showing that it's possible to have a nice javascript based application served from the ESP8266 that can load/save files
- https://github.com/me-no-dev/ESPAsyncWebServer/tree/master/examples/ESP_AsyncFSBrowser
- It's included in WLED, which is an easy way to demo it, plus WLED's a cool project with a lot of potential
- https://install.wled.me or https://github.com/Aircoookie/WLED
- Open the WLED AP, and give it your web credentials so it's on your network (WLED needs internet access to use the editor)
- Once you get the WLED control panel up, add /edit in the address bar to see the editor
- There's a large .js file that needs to be loaded from the web, saving space on the ESP's flash