Fastled: Online Playground for FastLED

[urish]

Hello, first of all, thank you for creating and maintaining this library! I love using it in my projects, and also found it very useful when testing my simulation code for NeoPixels.

I took the ColorPalette example an created an online playground for it on Wokwi, an Arduino teaching platform I'm working on. The playground allows you to run the code inside your browser, using an Arduino AVR simulator, so you can learn how the FastLED API works and experiment with it right from your browser, without the need to pull and connect an Arduino board to your PC:

https://wokwi.com/playground/fastled

I also created another, simpler code example with a 16x16 matrix:

https://wokwi.com/playground/neopixel-matrix

If you are interested, I'd love to send a PR and add these links to the FastLED docs. Also, if you have any feedback, I'd love to hear it.

[marmilicious]

That's quite cool, thank you for sharing. Feel free to share those links on the Reddit group too.
https://www.reddit.com/r/FastLED

[urish]

That's an awesome idea Marc, I will do it. thank you!

[systembolaget]

When one clicks on Run and waits until Building Program... has finished, nothing happens apart from a timer running above the code window.

[urish]

Which browser are you using?

[systembolaget]

Safari, Chrome and Firefox on macOS.

[urish]

And do other playgrounds work? e.g. https://wokwi.com/playground/serial
or https://wokwi.com/playground/blink

[systembolaget]

The serial example prints to the serial monitor. The blink example does not blink the LED.

[urish]

Got it! Are there any errors in the browser's console?

[systembolaget]

Lots of stuff like that below. No idea what that means.

[Warning] Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info. (main-es2015.59f275222f98e371d663.js, line 1)
Arguments:
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: en, _f: undefined, _strict: undefined, _locale: [object Object]
https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:499796
configFromString@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:531635
configFromInput@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:534157
prepareConfig@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:533972
createFromConfig@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:533569
transform@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:357284
https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:218668
al@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:218694
pg@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:457469
wi@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:162144
vi@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:160867
https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:161155
vi@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:161207
https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:161155
vi@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:161207
https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:161155
vi@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:161207
Bi@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:168077
https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:161687
vi@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:161696
https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:161155
vi@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:161207
Bi@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:168077
https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:161687
vi@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:161696
_i@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:162022
https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:168619
Zi@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:168639
detectChanges@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:174743
tick@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:239798
_loadComponent@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:240170
bootstrap@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:239514
forEach@[native code]
_moduleDoBootstrap@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:236705
https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:236467
onInvoke@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:228761
run@https://app.commentsplugin.com/polyfills-es2015.d1c682cf284b0592614c.js:1:7699
https://app.commentsplugin.com/polyfills-es2015.d1c682cf284b0592614c.js:1:18580
onInvokeTask@https://app.commentsplugin.com/main-es2015.59f275222f98e371d663.js:1:228654
runTask@https://app.commentsplugin.com/polyfills-es2015.d1c682cf284b0592614c.js:1:8318
_@https://app.commentsplugin.com/polyfills-es2015.d1c682cf284b0592614c.js:1:14900
promiseReactionJob@[native code]
[Error] Failed to load resource: the server responded with a status of 404 () (loader.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (editor.main.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (editor.main.nls.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (workerMain.js.map, line 0)

[urish]

Hmm, this seems to be a warning from the comment box at the bottom of the page, but nothing related to the simulation itself.

Another related test - can you go to https://elements.wokwi.com/?path=/story/led--red and see if clicking the "value" checkbox on the "Knobs" page at the bottom of the page blinks the LED?

Similarly, here: https://elements.wokwi.com/?path=/story/neopixel-matrix--8x8-green-background
Check if the matrix animation appears?

[systembolaget]

The LED blinks. The matrix animates. Same browsers used as before.

[urish]

Okay, this definitely helps to narrow down the problem. It seems like the simulation is running (otherwise you wouldn't get the serial prints), and that the LED component itself works.

How about the demo project here? https://stackblitz.com/edit/avr8js-6leds?file=index.html

[systembolaget]

That works.

[urish]

Thank you for all your help so far, Andreas!

I have just uploaded a version which also spits some extra diagnostics output, that hopefully will help to pinpoint the problem. Can you please try again with this link:

https://wokwi.com/playground/blink?debug=yeah

and send a copy of what you see in the browser's console?

[systembolaget]

The LED does not blink.

[urish]

Thanks, and what do you see on the browser's console now when you run it?

[elliottkember]

@urish This is seriously cool! I'd really love to use this for a project, is the code available anywhere? Happy to help out with it if I can.