"WLED Matrix tool": new image & scrolling text interface

[DedeHai]

replaces the pixel magic tool. This implements a much more feature-rich and user friendly way of displaying images.

Features:

• Display all images on the controller, will be displayed on the selected segment. If another segment already has an image being played, its unloaded (if warning is confirmed)
• If not a gif, a warning is displayed and the image is loaded up for conversion, "use pixel magic tool" as an alternative, also those get a red frame
• Button to automatically install pxmagic tool or switch to pxmagic if its already installed (fetches .gz file from github, uploads it to file system automatically)

Image conversion tool:

• Upload any image that the browser supports (canvas)
• Crop any area of that image, crop area can be resized by dragging the frame (includes mobile support).
• Animated gifs are supported as well: frames are loaded, cropped and saved (uses 2.5k extra flash)
• Image can be panned and zoomed for detailed work (no pinch zoom support to not bloat code)
• Preview area of what the resulting image will look like.
• Automatically adjusts output size to selected segment size but can be overriden
• Background color: transparent PNGs will use the selected color.
• "Dark pixel cutoff" to remove "almost black" pixels for a crisp display. Threshold can be set from "none" up to "everything". This can also be used to apply a background to non transparend images or to create transparency masks when using overlapping segments.
• Input file name to store: warning if file already exists in file system.

Scrolling Text tool:

• Simple UI to enter text and add all supported tokens with local controls for the FX.

Total additional flash usage: 2.5k

For consistency I also updated the button styling in style.css: it now also uses a hover action.

Took some inspiration from @Manut38 (https://github.com/Manut38/WLED-GifPlayer-UI)

Summary by CodeRabbit

• New Features

  • Full Matrix Tool page: image/GIF gallery, upload, crop editor, per-segment image controls, scrolling text with token palette, and client-side GIF encode/decode support.

• UI Changes

  • Pixel Magic button replaced by a "Matrix Tool" button that opens the new page; Pixel Magic invocation removed.

• Performance/Behavior

  • Matrix Tool served as its own page and uses a separate stylesheet (CSS not inlined).

• Style

  • Buttons gain smooth hover transitions via the shared stylesheet.

[coderabbitai[bot]]

Walkthrough

Adds a new PixelForge web UI and GIF library, wires build to generate html_pixelforge.h (non-inlined CSS), updates server routing/feature guards for PixelForge, replaces Pixel Magic UI entry with PixelForge, and moves some styling to an external CSS file.

Changes

Cohort / File(s)	Summary
Build system / HTML generation tools/cdata.js	Added wled00/html_pixelforge.h to output and updated writeHtmlGzipped(sourceFile, resultFile, page, inlineCss = true) signature; added invocation to generate pixelforge HTML with inlineCss=false and removed previous cpal call.
Server routing & feature guards wled00/wled_server.cpp	Inverted PxMagic guard to #ifdef WLED_ENABLE_PXMAGIC; added PixelForge header include and new /pixelforge.htm route guarded by PixelForge-related macros.
Main UI navigation wled00/data/index.htm, wled00/data/index.js	Replaced Pixel Magic button with PixelForge button (navigates to /pixelforge.htm) and removed pxmb display toggle from updateUI().
Styling wled00/data/settings.htm, wled00/data/style.css	Added @import "style.css"; removed several inline button/body styles from settings.htm; added transition and hover rules for button/.btn in style.css.
PixelForge client & GIF library wled00/data/pixelforge/pixelforge.htm, wled00/data/pixelforge/omggif.js	Added full PixelForge page (canvas/image tools, GIF/frame handling, upload UI, text tool, previews) and a bundled GIF encoder/decoder (GifWriter, GifReader, LZW encode/decode, palette/frame handling).
Legacy / formatting wled00/data/pxmagic/pxmagic.htm	Trivial formatting/newline adjustment only; no behavioral changes.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

• High attention: omggif.js (LZW, palette, frame encode/decode) and pixelforge.htm (canvas/image processing, GIF workflows).
• Verify build change in tools/cdata.js and generated html_pixelforge.h handling of inline CSS flag.
• Check server guards and new route initialization in wled_server.cpp.

Possibly related PRs

• wled/WLED#4956 — Similar changes to tools/cdata.js and HTML generation wiring for a new page; likely related to how build output and server routing are modified.

Suggested reviewers

• willmmiles

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title mentions 'WLED Matrix tool' but the PR objectives and author's final preference indicate the tool is called 'PixelForge'. The title does not accurately reflect the final naming or the complete scope of changes.	Update the title to reflect the actual tool name 'PixelForge' and clarify it replaces Pixel Magic tool, e.g., 'Replace Pixel Magic with PixelForge image and scrolling text tool'.
Docstring Coverage	⚠️ Warning	Docstring coverage is 10.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[softhack007]

@DedeHai i found an old feature request, which asks for integrating the "lametric icons" PixelArt database:

• https://github.com/wled/WLED/issues/3063#issuecomment-1759297071 maybe this would be a cool addition to your new image tools?

[DedeHai]

I added support for 1D strips now that we updated the gif player to properly handle that. Also updated to work again with latest changes to /edit handling. Also added a third tab with "Other Tools" that currently has two buttons to download my PixelPaint tool as well as the classic PixelMagic tool, more tools can be added in the future here.

@netmindz this is good to merge if no one has any concerns. I'd like to get more people to test and give feedback to find potential issues on different browsers/devices.

[DedeHai]

Since the tool now supports 1D as well and could be extended in the future with other tools, MatrixTool seems no longer appropriate. I was thinking of renaming this to "WLED PixelForge" indicating a collection of tools.Other ideas: PixelStudio or Pixel Lab but I like PixelForge better. (Also my coming-up video tool is currently named "VideoLab") Thoughts? Ideas?