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, rename Settings-example.h to Settings.h and enter your WiFi credentials and custom settings.
• Copy the contents of WebInterface/ into ESPController/data/htdocs/. For simplicity, you may want to create a symlink instead.
• Open ESPController/ in PlatformIO (to open the project in Arduino IDE, rename main.cpp to ESPController.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 importing matrix.postman_collection.json into Postman.

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.