Vue.js 3 frontend to draw and control wled 2d pixel matrices projects via wled’s json api.
The idea behind this project is to run this frontend on an ESP32 (or ESP8266) chip when a user connects to the WLED-AP wifi (captive portal). This way you can draw on the pixel matrix directly when a user connects to the WLED-AP device.
This project is a git submodule of my other forked repo WLED-With-2D-Pixel-Drawer, so please check out that other repo too 😇.
- simple canvas to draw on pixel matrix projects
- switch between canvas mode and 2d effects mode
- link to original WLED settings
- optional controls for brightness and ip / hostname of the wled device
- features and settings can be turned off/on and can be changed via .env variables
git clone [email protected]://github.com/Coderwelsch/wled-2d-pixel-drawer.git
cd wled-2d-pixel-drawer
yarn install
cp .env.example .envCopy the .env.example file to .env and configure the environment variables
according to your setup and amount of pixels etc.
# Disables / enables the effects list and route
VITE_DISABLE_WLED_EFFECTS=false
# Disables the brightness input field
VITE_DISABLE_BRIGHTNESS_CHANGE=false
VITE_DEFAUT_BRIGHTNESS=50
# Disables the ip / hostname input field
VITE_DISABLE_HOSTNAME_CHANGE=false
# Default hostname of the ESP32 when running on the esp chip in the captive portal
VITE_DEFAULT_HOSTNAME=4.3.2.1
# The width and height of the matrix in pixels
VITE_MATRIX_WIDTH=30
VITE_MATRIX_HEIGHT=30The build will output only one big html file containing all the css and js code inlined for easier deployment and serving on and from the esp chip.
To build the project run:
yarn buildThanks for the awesome work of yoksel and her beautiful svg animation skills. The headline animation is taken from her Animated text with Snapsvg codepen project. Love it ❤️!
WLED is also one of the coolest open source projects I know. Thanks to the developers and maintainers for their great work!