12x12 RGB LED Matrix based on the ESP8266 and WS2812B leds that can display GIF files from the SPIFFS, visualize audio from a microphone input and runs a small web interface.
Disclaimer: I'm not actively working on this project anymore, but it can give a decent example and guideline on how to create a more complex ESP Project with WebInterface and Rest API.
- In the
ESPController/src/directory, renameSettings-example.htoSettings.hand enter your WiFi credentials and custom settings. - Copy the contents of
WebInterface/intoESPController/data/htdocs/. For simplicity, you may want to create a symlink instead. - Open
ESPController/in PlatformIO (to open the project in Arduino IDE, renamemain.cpptoESPController.ino) and make sure, you installed all required libraries and boards. - You can now burn the SPIFFS image (
ESPController/data/) and upload the code.
This is the main Arduino Project. The code does multiple things:
- It constantly renders out an image to the LEDs.
- If Animation mode is enabled, it fetches all gif files one after another and decodes them using Craig Lindley's GifDecoder.
- If Visualization mode is enabled, a short number of samples is recorded from the microphone and passed into an FFT to get the frequency bands. Then a visualization is rendered based on the FFT.
- It waits for clients to connect via http.
- The ESP acts like an http web server: If a requested file exists in the htdocs directory, it is returned to the client. If the root path
/was requested, the index.html file is returned. - A Rest-API is running on the path
/api/, which allows asynchronous communication between the client and the ESP. A more detailed description on the api can be found by importingmatrix.postman_collection.jsoninto Postman.
- The ESP acts like an http web server: If a requested file exists in the htdocs directory, it is returned to the client. If the root path
This is the main http web inteface that runs on the ESP. It uses Vue, Vuetify and axios from a remote server to minimize the file size on the ESP.
This directory is entirely optional. As I didn't have access to the actual matrix all the time when developing, I created this emulator written in python3.
In the Settings.h file, SERIAL_MATRIX_DATA must be enabled. The Virtual Matrix script will then filter out led instructions and display them on a pygame canvas. Other debug messages are passed to the console.
For large matrices, the amount of serial data may slow down the ESP quite a bit, which can alter the speed at which gif animations are played back on a real matrix.