{"id":25216499,"url":"https://github.com/coderwelsch/wled-2d-pixel-drawer","last_synced_at":"2025-06-28T08:34:22.871Z","repository":{"id":275310492,"uuid":"925221145","full_name":"Coderwelsch/wled-2d-pixel-drawer","owner":"Coderwelsch","description":"Vuejs 3 frontend to draw and control 2D-Pixel-Matrices via WIFI (locally)","archived":false,"fork":false,"pushed_at":"2025-05-27T21:39:51.000Z","size":1804,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-27T22:28:25.716Z","etag":null,"topics":["2d","frontend","led","pixel-art","pixel-matrix","vuejs","vuejs3","web","wled"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Coderwelsch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-31T13:18:12.000Z","updated_at":"2025-05-27T21:39:55.000Z","dependencies_parsed_at":"2025-05-12T21:36:32.436Z","dependency_job_id":"ae756a73-153b-4f3a-9e9b-8c82b25b5cda","html_url":"https://github.com/Coderwelsch/wled-2d-pixel-drawer","commit_stats":null,"previous_names":["coderwelsch/wled-2d-pixel-drawer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Coderwelsch/wled-2d-pixel-drawer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coderwelsch%2Fwled-2d-pixel-drawer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coderwelsch%2Fwled-2d-pixel-drawer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coderwelsch%2Fwled-2d-pixel-drawer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coderwelsch%2Fwled-2d-pixel-drawer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Coderwelsch","download_url":"https://codeload.github.com/Coderwelsch/wled-2d-pixel-drawer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Coderwelsch%2Fwled-2d-pixel-drawer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262401904,"owners_count":23305633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d","frontend","led","pixel-art","pixel-matrix","vuejs","vuejs3","web","wled"],"created_at":"2025-02-10T19:18:22.406Z","updated_at":"2025-06-28T08:34:22.864Z","avatar_url":"https://github.com/Coderwelsch.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"![teaser.png](docs/teaser.png)\n\n# WLED 2D Pixel Matrix Drawer\n\n\u003e Vue.js 3 frontend to draw and control wled 2d pixel matrices projects via wled’s json api.\n\n---\n\nThe 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.\n\nThis 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 😇.\n\n## Features\n\n- simple canvas to draw on pixel matrix projects\n- switch between canvas mode and 2d effects mode\n- link to original WLED settings\n- optional controls for brightness and ip / hostname of the wled device\n- features and settings can be turned off/on and can be changed via [.env](./.env.example) variables\n\n![frontend.png](docs/frontend.png)\n\n## Installation\n\n### Clone Repository\n\n```bash\ngit clone git@github.https://github.com/Coderwelsch/wled-2d-pixel-drawer.git\n\ncd wled-2d-pixel-drawer\n\nyarn install\n\ncp .env.example .env\n```\n\n### Configure Environment Variables\n\nCopy the `.env.example` file to `.env` and configure the environment variables\naccording to your setup and amount of pixels etc.\n\n```bash\n# Disables / enables the effects list and route\nVITE_DISABLE_WLED_EFFECTS=false\n\n# Disables the brightness input field\nVITE_DISABLE_BRIGHTNESS_CHANGE=false\nVITE_DEFAUT_BRIGHTNESS=50\n\n# Disables the ip / hostname input field\nVITE_DISABLE_HOSTNAME_CHANGE=false\n# Default hostname of the ESP32 when running on the esp chip in the captive portal\nVITE_DEFAULT_HOSTNAME=4.3.2.1\n\n# The width and height of the matrix in pixels\nVITE_MATRIX_WIDTH=30\nVITE_MATRIX_HEIGHT=30\n```\n\n## Build Project\n\nThe 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.\n\nTo build the project run:\n\n```bash\nyarn build\n```\n\n---\n\n\n## Credits\n\nThanks 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 ❤️!\n\n[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!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderwelsch%2Fwled-2d-pixel-drawer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoderwelsch%2Fwled-2d-pixel-drawer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderwelsch%2Fwled-2d-pixel-drawer/lists"}