https://github.com/coderwelsch/wled-2d-pixel-drawer
Vuejs 3 frontend to draw and control 2D-Pixel-Matrices via WIFI (locally)
https://github.com/coderwelsch/wled-2d-pixel-drawer
2d frontend led pixel-art pixel-matrix vuejs vuejs3 web wled
Last synced: 15 days ago
JSON representation
Vuejs 3 frontend to draw and control 2D-Pixel-Matrices via WIFI (locally)
- Host: GitHub
- URL: https://github.com/coderwelsch/wled-2d-pixel-drawer
- Owner: Coderwelsch
- Created: 2025-01-31T13:18:12.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-05-27T21:39:51.000Z (about 2 months ago)
- Last Synced: 2025-05-27T22:28:25.716Z (about 2 months ago)
- Topics: 2d, frontend, led, pixel-art, pixel-matrix, vuejs, vuejs3, web, wled
- Language: Vue
- Homepage:
- Size: 1.72 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WLED 2D Pixel Matrix Drawer
> 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](https://github.com/Coderwelsch/WLED-With-2D-Pixel-Drawer), so please check out that other repo too 😇.
## Features
- 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](./.env.example) variables
## Installation
### Clone Repository
```bash
git clone [email protected]://github.com/Coderwelsch/wled-2d-pixel-drawer.git
cd wled-2d-pixel-drawer
yarn install
cp .env.example .env
```
### Configure Environment Variables
Copy the `.env.example` file to `.env` and configure the environment variables
according to your setup and amount of pixels etc.
```bash
# 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=30
```
## Build Project
The 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:
```bash
yarn build
```
---
## Credits
Thanks for the awesome work of [yoksel](https://github.com/yoksel) and her beautiful svg animation skills. The headline animation is taken from her [Animated text with Snapsvg](https://codepen.io/yoksel/pen/yNJYyE) codepen project. Love it ❤️!
[WLED](https://github.com/Aircoookie/WLED) is also one of the coolest open source projects I know. Thanks to the developers and maintainers for their great work!