Full RGB LED matrix, based on an ESP32 and WS2812B LEDs.
- Motivation
- Introduction
- Features
- Original Setup
- Attention
- Supported Development Boards
- Installation
- Very First Startup
- User Interface
- Details
- FAQ
- Where to change panel topology of the LED matrix?
- How to change text properties?
- The display only shows a error code, like "E4". What does that mean?
- How can I use animated icons?
- How do I know that my sensor is recognized?
- Why do I see sometimes values from the LDR in the SensorPlugin, although no LDR is installed?
- How can I use alternative icons?
- Is it possible to use a font with 8px height?
- How to configure the date/time format?
- How to configure my own list of plugins?
- Used Libraries
- Issues, Ideas And Bugs
- License
- Contribution
My initial goal was to have a remote display that would show multiple kind of information and run reliably 24/7. Can be connected to the local network via WiFi and controlled via REST API or Websocket. PIXELIX was born! :-)
The PIXELIX firmware is for ESP32 boards that controls a RGB LED matrix. It can be used to display text and animations.
- Supports 32x8 LED matrix size out of the box. Its possible to cascade another matrix to have a longer display.
- Can display static or scrolling text, as well as static or animated icons.
- Includes a web interface for configuring and controlling the LED matrix.
- Supports REST API and MQTT for remote control and integration with other systems, like Home Assistant.
- Can be extended with custom effects and animations. See list of plugins.
Please note, that not every feature might be available for all kind of development boards. E.g. for MQTT support you need 8 a development board with 8 MB flash or more. See the config<variant>.ini configuration files in ./config folder.
| Some impressions | |
|---|---|
 |
 |
 |
 |
 |
... |
The original setup for development and the first release was:
- ESP32 DevKitV1
- WS2812B 5050 8x32 RGB Flexible LED Matrix Panel
- Power supply 5 V / 4 A
The following shows the absolute minimal wiring setup e.g. for the ESP32 DevKitV1. It may differ depended on your development board.
⚠️ If you power the development board and the LED matrix via USB: Be very careful, because it may destroy your ESP32 board if the LED current is too high. Avoid increasing the LED display brightness or filling it complete with white pixels. Please use a external power supply with at least 5V / 4A.
ℹ️ To avoid any damage on your hardware and by the way to your eyes ;-), PIXELIX starts up with a low brightness setting. Additional the max. current is limited by software.
In the meantime several other boards are supported as well. You can find them in the list of boards.
With the Ulanzi TC001 smart pixel clock you even don't need to assemble the electronic and mechanic together.
If you assemble your own Pixelix hardware, its recommended to use a development board with 8 MB flash or more. 4 MB flash modules are still supported, but the functionality is limited. Also recommended is to use a esp32 dual core variant, which provides more processing power.
Additional supported variants, which were original not in focus:
- LILYGO® TTGO T-Display ESP32 WiFi and Bluetooth Module Development Board For Arduino 1.14 Inch LCD
- LILYGO® T-Display ESP32-S3 1.9 inch ST7789 LCD Display Touch Screen Development Board
Although PIXELIX was designed to show information, that is pushed or pulled via REST API, the following sensors can be directly connected and evaluated:
- Temperature and humidity sensors DHTx
- Temperature and humidity sensors SHT3x
- Digitial microphone INMP441 for some sound reactive stuff.
The following steps are necessary for the first time and to get PIXELIX initial running on the target. Once it runs, later on the firmware and filesystem can be updated via the PIXELIX web interface.
- Setup the toolchain.
- Build the software and check whether the toolchain works.
- Upload/Update the software and firmware to the target.
- Verify that the LED panel topology is correct and you see the "Hello World" on the display.
Note, that the LED panel topology and the display width/height can currently not be changed in the web interface. If its necessary, adapt first in ./config/display.ini the CONFIG_LED_MATRIX_WIDTH and CONFIG_LED_MATRIX_HEIGHT according your LED matrix and change CONFIG_LED_TOPO according to your physical panel topology. Take a look how your pixels are wired on the pcb and use the following page to choose the right one: https://github.com/Makuna/NeoPixelBus/wiki/Layout-objects
If the device starts the very first time, the wifi station SSID and passphrase settings are empty. They can be configured in two possible ways:
- Using the browser and set them in the captive portal.
- Using a terminal connecting via usb.
Restart the device and keep the button pressed until it shows the SSID of the wifi access point, spawned by PIXELIX. Search for it with your mobile device and connect.
- SSID: pixelix-<DEVICE-ID>
- Passphrase: Luke, I am your father.
Depended on the type of device you are using for connecting to PIXELIX, you may get a notification that further information is necessary and automatically routed to the captive portal. In any other case enter the URL http://192.168.4.1 in the browser address field.
Use the following default credentials to get access to the PIXELIX web interface:
- User: luke
- Password: skywalker
Connect PIXELIX with your PC via usb and start a terminal. Use the following commands to set the wifi SSID and passphrase of your home wifi network:
- Write wifi passphrase:
write wifi passphrase <your-passphrase> - Write wifi SSID:
write wifi ssid <your-ssid> - Restart PIXELIX:
reset
After configuration, restart again and voila, PIXELIX will be available in your wifi network.
For changing whats displayed, go to its web interface. Use the same credentials than for the captive portal in variant 1. In the "Display" page you can change it according to your needs.
- Pixelix can be controlled with buttons. Most of the development are supported with just one user button.
- One button control:
- 1 short pulse: Activates the next slot.
- 2 short pulses: Activates the previous slot.
- 3 short pulses: Activates next fade effect.
- 4 short pulses: IP address is shown.
- 5 short pulses: Switch device off.
- Long pressed: Increases the display brightness until maximum and then decreases until minimum. After that it will again increases it and so on.
- Two button control (LILYGO® T-Display ESP32-S3):
- Left button:
- 1 short pulses: Activates the previous slot.
- 2 short pulses: Switch device off.
- Long pressed: Decreases the display brightness until minimum.
- Right button
- 1 short pulse: Activates the next slot.
- 2 short pulses: Activates next fade effect.
- 3 short pulses: IP address is shown.
- Long pressed: Increases the display brightness until maximum.
- Left button:
- Three button control (Ulanzi TC001):
- Left button:
- 1 short pulses: Activates the previous slot.
- Long pressed: Decreases the display brightness until minimum.
- Ok button:
- 1 short pulses: Activates next fade effect.
- 2 short pulses: IP address is shown.
- Long pressed: Switch device off.
- Right button
- 1 short pulse: Activates the next slot.
- Long pressed: Increases the display brightness until maximum.
- Left button:
- One button control:
- If the display's location is hard to reach, the virtual user button can be used. It is controllable via REST API and perfect for remote buttons like the Shelly Button 1.
- If a ambilight sensor (LDR) is connected, the display brightness is automatically adapted.
- The web interface provides the possibility to install plugins, control their duration in the slots and etc.
- Some plugin's spawn a dedicated REST API, see the web page of the plugin or have a look to the REST API documentation.
Note, the websocket interface is currently only used as a service in the web interface.
For more detailed information, see the documentation.
Adapt in ./config/display.ini the CONFIG_LED_MATRIX_WIDTH and CONFIG_LED_MATRIX_HEIGHT according your LED matrix and change CONFIG_LED_TOPO according to your physical panel topology. Take a look how your pixels are wired on the pcb and use the following page to choose the right one: https://github.com/Makuna/NeoPixelBus/wiki/Layout-objects
Text properties can be changed using different keywords added to the string to be displayed.
In order to be able to use these keywords, they must be prefixed by a backslash, otherwise they will only be treated as text.
The following keywords are available:
| Keyword | Description |
|---|---|
| \#RRGGBB | Change text color (RRGGBB in hex) |
| \lalign | Alignment left |
| \ralign | Alignment right |
| \calign | Alignment center |
Note
- If theses keywords are used within the sourcecode they have to be prefixed with two backslashes (one additional for escaping).
- If these keywords are used via the REST API all unsafe ASCII characters must be replaced by the respective percent encoding (see also ASCII Encoding Reference).
- The keywords can be combined.
Examples
| Sourcecode | URL | Result |
|---|---|---|
| \\lalign\\#ff0000Hi! | %5Clalign%23ff0000Hi! | IHi! I |
| \\calign\#ff0000Hi! | %5Ccalign%23ff0000Hi! | I Hi! I |
| \\ralign\#ff0000Hi! | %5Cralign%23ff0000Hi! | I Hi!I |
This is a low level error code. Please have a look into the following table.
| Error code | Description |
|---|---|
| E1 | Something happened, which can not be further explained, but was fatal. |
| E2 | There is a problem with the two-wire (i2c) interface. |
| E3 | There is no user button available. |
| E4 | Bad filesystem, did you explicit program the filesystem too? If not, please upload it. |
| E5 | The display manager didn't start up. |
| E6 | The system message handler didn't start up. |
| E7 | The update manager didn't start up. |
Upload first the bitmap texture image (.bmp) and afterwards the sprite sheet file (.sprite). See the details here. The order is important, because if a bitmap is uploaded, it is assumed that an existing spritesheet is obsolete and will be removed.
- Check the log output from USB (not via web interface) right after startup (at this point WiFi is not connected yet).
- Install the SensorPlugin and open the SensorPlugin website. There the sensor should be shown in the drop-down.
The LDR pin is configured as input (ADC) and it seems that the pin is floating, because there is the ext. pull-down missing.
Find details here.
There are three font types defined:
- default (6px height)
- normal (6px height)
- large (8px height)
Note, the default font type is "normal".
The font type can be selected per plugin instance in the settings web page.
Example:
{
"name": "JustTextPlugin",
"uid": 32690,
"alias": "",
"fontType": "large"
}Not all plugin may support this in case they get conflicts with their layout. If a plugin don't support it, it will use the default font type.
The date/time format used by plugins, e.g. the DateTimePlugin or the SunrisePlugin, can be configured in their configuration JSON file. Use the file editor in the web interface to modify it according to your needs. The file can be found in the /configuration folder and the filename is <PLUGIN-UID>.json. The format specifiers following strftime().
Examples:
%I:%M %p: 02:30 PM%H:%M: 14:30%m/%d: 11/12%d.%m.: 11.12.%d - %b: 11 - Nov
You can colorize it by using the text properties.
The list of plugins which are available depend on the development board you use. Because board with only 4 MB flash don't have enough capacity for all. Or in case of a ESP-S2 (single core) not enough power.
To handle there are several .ini files in the ./config folder:
- configSmall.ini: Used for boards with 4 MB flash.
- configNormal.ini: Used for boards with 8 MB flash or more.
- configSmallNoI2s.ini: Used for boards with 4 MB flash and less mcu power.
Update the one you use for your needs by commenting in or out.
| Library | Description | License |
|---|---|---|
| Arduino | ESP32 Arduino framework | Apache-2.0 |
| NeoPixelBus | Controlling the LED matrix with hardware support (I2S) | LGPL-3.0 |
| ESPAsyncWebServer | Webserver | LGPL-2.1 |
| AsyncTCPSock | TCP library, Reimplementation of the API of me-no-dev/AsyncTCP using high-level BSD sockets | MIT |
| ArduinoJson | JSON handling | MIT |
| StreamUtils | Stream utilities | MIT |
| Bootstrap | CSS Framework | MIT |
| POPPER JS | POPPER JS | MIT |
| jQuery | Javascript librariy for DOM handling | MIT |
| Adafruit Unified Sensor Driver | A unified sensor abstraction layer. | Apache License 2.0 |
| Adafruit DHT sensor library | An Arduino library for the DHT series of low-cost temperature/humidity sensors. | MIT |
| arduino-sht | An Arduino library for reading the SHT3x family of temperature and humidity sensors. | BSD-3-Clause |
| TFT_eSPI | Arduino and PlatformIO IDE compatible TFT library optimised for the Raspberry Pi Pico (RP2040), STM32, ESP8266 and ESP32 that supports different driver chips | Mixed licenses: MIT, BSD, FreeBSD |
| arduinoFFT | Fast Fourier Transform for Arduino. | GPL 3.0 |
| mufonts | A collection of fonts compatible with Adafruit GFX library. These fonts were developed when creating various samples for mupplet display code. | MIT |
| JSZip | A library for creating, reading and editing .zip files with JavaScript, with a lovely and simple API. | MIT |
| JSZipUtils | A collection of cross-browser utilities to go along with JSZip. | MIT |
| FileSaver.js | FileSaver.js is the solution to saving files on the client-side. | MIT |
| Arduino client for MQTT | This library provides a client for doing simple publish/subscribe messaging with a server that supports MQTT. | MIT |
If you have further ideas or you found some bugs, great! Create a issue or if you are able and willing to fix it by yourself, clone the repository and create a pull request. For questions to the community or showing the own Pixelix, the Discord server can be used.
The whole source code is published under the MIT license. Consider the different licenses of the used third party libraries too!
Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, shall be licensed as above, without any additional terms or conditions.