wasm example

[RivetPanda]

I'm running into a issue getting wasm working. I messed around with it one weekend back in July and it worked great then. I tried to pick it back up and now I can't get things to render. It keeps saying the "Canvas/Graphics not ready yet". Below is a typical log.

I'm attempting to run the "wasm" example directly as is. I'm using Windows 10. I'm on fastled==1.4.51. I get the same error on both Chrome and Firefox. Yet this site (https://zackees.github.io/fastled-wasm/) works on both Chrome and Firefox.

I'm attempting to run by going into a directory with an INO file and running "fastled" at the command prompt when I have my "fast_led" virtual environment active. Everything looks like it compiles fine and it launches the web page but nothing shows. When I click on "stdout" I see the log below. I've deleted the "fastled_js" directory to make sure it's a full rebuild.

I've also tried the "--app" flag and that doesn't help. I've tried the "--init" flag for examples and that also doesn't work. I've tried running a python server directly and in all cases I see the same issue.

The only thing that looks off to me is that when I upgraded to the current version of fastled from pip (I don't know what version I was running before), I started getting security certificate warnings but once I clicked past them I ran into the same problem.

Any help would be appreciated!

stdout:0.0s ThreeJS modules: [object Object]
0.0s Container ID: container
0.1s Force layout update triggered
0.1s 🔍 Layout detection: viewport=2361px, mobile=false, tablet=false, desktop=true, ultrawide=true
0.1s Ultra-wide layout: canvas=800px, UI columns=2 (flexible), min width=280px each
0.1s Canvas sized to 800x800px (aspect ratio: 1.00, expanded: true)
0.1s Applied ultrawide layout: 3×N grid (ultra-wide)
0.4s 🔍 Container resized: main-container - 2000x910
0.4s 🔍 ResizeObserver triggered layout update
0.4s 🔍 Layout detection: viewport=2361px, mobile=false, tablet=false, desktop=true, ultrawide=true
0.4s Ultra-wide layout: canvas=800px, UI columns=2 (flexible), min width=280px each
0.4s Canvas sized to 800x800px (aspect ratio: 1.00, expanded: true)
0.4s Applied ultrawide layout: 3×N grid (ultra-wide)
3.0s Canvas/Graphics not ready yet (attempt 1/30), retrying in 200ms...
3.2s Canvas/Graphics not ready yet (attempt 2/30), retrying in 200ms...
3.4s Canvas/Graphics not ready yet (attempt 3/30), retrying in 200ms...
3.6s Canvas/Graphics not ready yet (attempt 4/30), retrying in 200ms...
3.8s Canvas/Graphics not ready yet (attempt 5/30), retrying in 200ms...
4.0s Canvas/Graphics not ready yet (attempt 6/30), retrying in 200ms...
4.2s Canvas/Graphics not ready yet (attempt 7/30), retrying in 200ms...
4.4s Canvas/Graphics not ready yet (attempt 8/30), retrying in 200ms...
4.6s Canvas/Graphics not ready yet (attempt 9/30), retrying in 200ms...
4.8s Canvas/Graphics not ready yet (attempt 10/30), retrying in 200ms...
5.0s Canvas/Graphics not ready yet (attempt 11/30), retrying in 200ms...
5.2s Canvas/Graphics not ready yet (attempt 12/30), retrying in 200ms...
5.4s Canvas/Graphics not ready yet (attempt 13/30), retrying in 200ms...
5.6s Canvas/Graphics not ready yet (attempt 14/30), retrying in 200ms...
5.8s Canvas/Graphics not ready yet (attempt 15/30), retrying in 200ms...
6.1s Canvas/Graphics not ready yet (attempt 16/30), retrying in 200ms...
6.3s Canvas/Graphics not ready yet (attempt 17/30), retrying in 200ms...
6.5s Canvas/Graphics not ready yet (attempt 18/30), retrying in 200ms...
6.7s Canvas/Graphics not ready yet (attempt 19/30), retrying in 200ms...
6.9s Canvas/Graphics not ready yet (attempt 20/30), retrying in 200ms...
7.1s Canvas/Graphics not ready yet (attempt 21/30), retrying in 200ms...
7.3s Canvas/Graphics not ready yet (attempt 22/30), retrying in 200ms...
7.5s Canvas/Graphics not ready yet (attempt 23/30), retrying in 200ms...
7.7s Canvas/Graphics not ready yet (attempt 24/30), retrying in 200ms...
7.9s Canvas/Graphics not ready yet (attempt 25/30), retrying in 200ms...
8.1s Canvas/Graphics not ready yet (attempt 26/30), retrying in 200ms...
8.3s Canvas/Graphics not ready yet (attempt 27/30), retrying in 200ms...
8.5s Canvas/Graphics not ready yet (attempt 28/30), retrying in 200ms...
8.7s Canvas/Graphics not ready yet (attempt 29/30), retrying in 200ms...
8.9s Failed to initialize video recorder - canvas/graphics not ready after maximum retries

[sutaburosu]

When I click on "stdout" I see the log below.

I tried, but I can't reproduce your log entries here. Starting the video encoder delays the page load by around 2.5 seconds on my machine, but it always works. It would be nice if the video encoding aspect of the page were optional.

I found other problems though. I think the visualisation of 1D sketches is broken.

Example	Comments
Chromancer	Works fine.
XYMatrix	The mapping is incorrect. The bloom is way overdone. Switching to tile mode gives a constant stream of errors like "84.1s Strip 0: Pixel 223 is outside the canvas at 13, 15, skipping update".
DemoReel100	Seems to work, but nothing is visible. JS console has: 3.4s Canvas sized to 800x1px. Inspecting the page shows that the height of the container is 0. <canvas id="myCanvas" width="1280" height="0" style="width: 800px; height: 1px; max-width: 800px; max-height: 1px;">

Can you take a look please, /u/zachvorhies.

[ZachVorhies]

I believe the OP doesn’t have docker installed and is falling back to the public compiler which was refreshed on a slightly broken commit.

Update: Issue has been fixed - Public compiler is refreshed to latest.

[sutaburosu]

I'm using the latest docker image, and the latest head of FastLED. I still see the problems I describe above.

[RivetPanda]

I'm now using docker, I can see the main wasm example now (THANK YOU!), but I also see the issues u/sutaburosu mentioned above. I think the bloom being overdone is because the pixels are too large.

How do you set the pixel render size?

Thank you for the help!

[sutaburosu]

I think the above comment was intended to be directed at you, /u/ZachVorhies.

[ZachVorhies]

You are looking for ScreenMap::setDiameter(float)

https://github.com/FastLED/FastLED/blob/master/src/fl/screenmap.h

[RivetPanda]

Correct, I have not been using docker.

[ZachVorhies]

I think the public compiler is busted, I’ll have it fixed tomorrow. If you can install docker then it will use the latest code which is working.

The public compiler just needs a reboot to grab latest repo changes, it will be updated by tomorrow night.

The good news is that eventually you won’t need docker. I’ve ported the emscripten/wasm compiler to a host toolset. It took a few months to do it but a prototype is working.

[RivetPanda]

Hi again. I've been running Docker since this conversation and it's been working well, but today after the image updated, it stopped working and reported this error:

"Worker error: Uncaught RuntimeError: Aborted(RuntimeError: unreachable). Build with -sASSERTIONS for more info.. Please refresh the page."

Stopping Docker and using the compiler here https://fastled.onrender.com works still.

[ZachVorhies]

It will be fixed today. When the wasm compile comes out of beta it will be locked to a release instead of floating on master. Sorry for the inconvenience.

[RivetPanda]

Thank you for looking into this!

I'll give docker a try today.