Add effect view capability to web UI

[rbergen]

Description

This PR adds a feature to the web UI with which one can see what the device is showing on the LEDs it is driving. In terms of practical applications, it's mainly suitable for setups where the LEDs are in some sort of matrix configuration (MATRIX_WIDTH and MATRIX_HEIGHT are both >1 in a meaningful way).

The following applies:

• The "regular" Color Data Server must be enabled (COLORDATA_SERVER_ENABLED set to 1)
• There is a delay of some seconds between what's shown on the LEDs and what the web UI shows. This is due to to the processing required to push the color data through a WebSocket and the buffering involved.
• The in-browser framerate can vary from a few frames per second to something that approaches the framerate of the "regular" Color Data Server. There seems to be a correlation between the statistics panel in the web UI being open and a lower framerate in the effect viewer, but we would love your feedback on this as well.

Most of the work on this feature, which has been on our wish list for close to two years, has been done by @KeiranHines.

This closes #356.

This PR also bumps the minimum version of FastLED to 3.9.20, in relation to the thread starting with this discussion comment. Many thanks to @zackees for his quick follow-up to the issue reported there.

Contributing requirements

• I read the contribution guidelines in CONTRIBUTING.md.
• I understand the BlinkenPerBit metric, and maximized it in this PR.
• I selected main as the target branch.
• All code herein is subjected to the license terms in COPYING.txt.

[robertlipe]

The c++ and Platformio parts lgtm.

Thanx, guys.

[robertlipe]

These should probably be vTaskDelay() so it blocks only this thread, not all of them.

Yes, we have many occurrences of thks.

[rbergen]

I actually looked it up. This is the function definition for delay() in framework-arduinoespressif32 (here, to be exact):

void delay(uint32_t ms)
{
    vTaskDelay(ms / portTICK_PERIOD_MS);
}

So, I think we're good.

[robertlipe]

Interesting. Thanks. That's another discrepancy in the Arduino docs (or at least folklore ) then. Delay doesn't block other threads.. TIL.

…

On Tue, Jun 10, 2025, 1:10 PM Rutger van Bergen ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In src/network.cpp <#724 (comment)> : > } - delay(1000); + + #if COLORDATA_WEB_SOCKET_ENABLED + wsListenersPresent = webSocketServer.HaveColorDataClients(); + #endif + + if (socket >= 0 || wsListenersPresent) + delay(10); I actually looked it up. This is the function definition for delay() in framework-arduinoespressif32 (here <https://github.com/espressif/arduino-esp32/blob/422e52684b824a3fde85989ea90abf6624f2b0eb/cores/esp32/esp32-hal-misc.c#L209>, to be exact): void delay(uint32_t ms) { vTaskDelay(ms / portTICK_PERIOD_MS); } So, I think we're good. — Reply to this email directly, view it on GitHub <#724 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACCSD33RQVCHH7WWMYPKVTL3C4NTBAVCNFSM6AAAAAB64GLD3WVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDSMJUGYZDSOJSGI> . You are receiving this because you commented.Message ID: ***@***.*** com>

[rbergen]

Interesting. Thanks. That's another discrepancy in the Arduino docs (or at least folklore ) then. Delay doesn't block other threads.. TIL.

Well, maybe. This code is part of the arduinoespressif32 framework as provided by PlatformIO, and the HAL in that context. I genuinely don't know how this compares to the actual Arduino code/behavior. For one, this is one level below what I usually concern myself with, for another the only two real Arduino sketches I ever worked on were for another YouTube content creator (Adrian Black) and single-threaded as far as my code was concerned.

This may be a case where the Arduino-like interface that PlatformIO provides behaves a little different from what Arduino does. And if that's the case then I'm glad with the difference.

[rbergen]

And thank you for your review!

[davepl]

LGTM!