-
Notifications
You must be signed in to change notification settings - Fork 364
features: Add Pixel Art Generator Guide #118
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| --- | ||
| title: Pixel Art Converter | ||
| hide: | ||
| # - navigation | ||
| # - toc | ||
| --- | ||
|
|
||
| The Pixel Art Converter tool aims to make it easier to show pixel art on a LED matrix panel, by converting any image to 2D pixel art and sending it to the WLED device. The file types PNG, JPG, WEBP and GIF have been tested to work with the tool. | ||
|
|
||
| ## Installation Approaches | ||
|
|
||
| There are three ways to install the pixel art converter: | ||
|
|
||
| 1. Local web browser. Will a web page run on the local machine connecting to the WLED device but will require fetching an extra file. Supported from WLED release [v0.14.0-b1](https://github.com/Aircoookie/WLED/blob/main/CHANGELOG.md#wled-release-0140-b1) or later | ||
| 2. Include the pixel art converter in the binary and compile it from the source code. Allows access to the pixel art converter on any device that has a connection to the WLED device. Supported from WLED release [v0.14.0-b2](https://github.com/Aircoookie/WLED/blob/main/CHANGELOG.md#build-2301240) (PR [#3042](https://github.com/Aircoookie/WLED/pull/3042)) | ||
| 3. WLED editor mode. Upload the web page to your WLED device while it is running | ||
|
|
||
| ### Approach 1: Local Browser | ||
|
|
||
| 1. Download the `pixartmin.htm` from the [WLED-PixelArtConverter](https://github.com/werkstrom/WLED-PixelArtConverter/) repository | ||
| 2. Open `pixartmin.htm` in a browser | ||
| 3. Head over to the [Setup 2D Matrix](#setup-2d-matrix) point | ||
|
|
||
|
|
||
|
|
||
| ### Approach 2: Include Pixart Converter In Build Files | ||
| !!! warning "Compilation required" | ||
| Compiling WLED from the source code is required. Follow the instructions on [compiling WLED](../../advanced/compiling-wled) to do this. | ||
|
|
||
| 1. Follow the instructions under [Making a custom environment](../../advanced/compiling-wled/#making-a-custom-environment) and set the flag `-D WLED_ENABLE_PIXART` under the line that starts with `build_flags =` in `platformio_override.ini` | ||
| 2. Compile and flash the binary to the ESP board | ||
| 3. Power on board and connect via WiFi using the [default login](../../basics/getting-started/) | ||
| 4. It is now time to [Setup the 2D Matrix](#setup-2d-matrix) | ||
|
|
||
| ### Approach 3: WLED Editor Mode | ||
|
|
||
| !!! note "Network connection" | ||
| A network connection is required to connect to the CDN, hosting the JS library [Ace](https://github.com/ajaxorg/ace), an embedded code editor. | ||
|
|
||
| 1. Download the `pixartmin.html` file from the [WLED-PixelArtConverter](https://github.com/werkstrom/WLED-PixelArtConverter/) repository | ||
| 2. Go to the URL `http://[device_ip_address]/edit` | ||
| 3. Upload the `pixartmin.html` file using the UI | ||
| 4. Go to `http://[device_ip_address]/pixartmin.html` | ||
| 5. Now head to the [Setup 2D Matrix](#setup-2d-matrix) point | ||
|
|
||
| ## Setup 2D Matrix | ||
| 2D LED panels are natively supported by WLED but need some configuration for the software to show the 2D grid correctly. | ||
|
|
||
| 1. Head into the `2D Configuration` settings menu in WLED | ||
| 2. Set the option "Strip or panel" to `2D Matrix` | ||
| 3. Setup rest of the LED panel layout according to the specifics of your LED panel | ||
|
|
||
| !!! tip "Serpentine option" | ||
| Setting the serpentine LED panel option incorrectly can lead to very confusing results that look almost correct but not quite. Enabling or Disabling the option depends on the characteristics of the 2D matrix | ||
|
|
||
| ## Usage | ||
| The Pixel Art Generator does not yet have a link in the WLED front-end, therefore head over to the web page: `http://[device_ip_address]/pixart.htm` (default DHCP IP-address [link](http://4.3.2.1/pixart.htm)). | ||
|
|
||
| On the web page: | ||
|
|
||
| 1. Set the option "LED setup" to 2D matrix or serpentine accordingly. | ||
| 2. Select an image that should be shown on the matrix display | ||
|
|
||
|  | ||
|
|
||
| This example uses a 16x16 pixel, happy version of the WLED mascot Akemi by [Aircoookie](https://github.com/Aircoookie/Akemi). | ||
|
|
||
| 3. A preview is displayed further down the web page. | ||
|
|
||
| !!! tip "Scaling option" | ||
| It can help to use the `Scale image` option, depending on the image size used. | ||
|
|
||
|  | ||
|
|
||
| 4. Click on "Send to device" to push the generated image to the WLED device. | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.