Problems loading images with SDL

[Ian Brown]

Hello,

 

I'm having problems loading an image with SDL.

 

I'm using Ubuntu 12.04 32bit in VMWare Workstation 8.0.4 (on Windows 7 x64), with LLVM 3.1, git clone of emscripten a few days ago, python 2.7, firefox 14.0.1, chrome 21.0

 

python tests/runner.py browser.test_preload_file

 

runs ok, but

 

python tests/runner.py browser.test_sdl_image

 

just gets stuck at the "Preparing .*." progress bar.

 

I've edited ~/.emscripten to switch between recent builds of node, v8 and spidermonkey but all give same behaviour.

 

Also from the command line

 

./emcc tests/sdl_image.c -o sdl_image.html --preload-file tests/screenshot.jpg

 

also doesn't progress beyond the "Preparing .*." progress bar for firefox/chrome.

 

but

 

./emcc tests/hello_world_file.cpp -o hello_world_file.html --preload-file tests/hello_world_file.txt

 

runs fine.

 

Any ideas for what I should look at next?

 

(As an aside, I started off by building Me and My Shadow 0.3 on the Ubuntu box natively and it runs fine, then I built the emscripten version of Me and My Shadow 0.3, it builds ok, but it hangs at the "Preparing .*." progress bar)

 

Many thanks,
Ian.

 

[Alon Zakai]

Is there an error in the web console when it shows "Preparing..."?

And was there an error in the console where you ran the test?

Note that

> ./emcc tests/sdl_image.c -o sdl_image.html --preload-file
> tests/screenshot.jpg

will likely fail because of how tests/sdl_image.c looks for the file:
It looks in the current directory. But that preload file command will
put it in the virtual filesystem under tests/. So you should run this
command from tests/ or move the file into where you do.

- azakai

[Ian Brown]

Running:

cd tests
../emcc sdl_image.c -o sdl_image.html --preload-file screenshot.jpg
firefox sdl_image.html

Firefox reports the following error (and is stuck with the "Preparing .*." animation):

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
file:///home/ian/Dev/emscripten/tests/sdl_image.html Line: 1609

which corresponds to:

       var imagePlugin = {};
        imagePlugin['canHandle'] = function(name) {
          return name.substr(-4) in { '.jpg': 1, '.png': 1, '.bmp': 1 };
        };
        imagePlugin['handle'] = function(byteArray, name, onload, onerror) {
          var b;
          if (Browser.hasBlobConstructor) {
            b = new Blob([byteArray], { type: getMimetype(name) });  // **** this is line 1609 ****
          } else {
            var bb = new Browser.BlobBuilder();
            bb.append(byteArray.buffer);
            b = bb.getBlob();
          }
          var url = Browser.URLObject.createObjectURL(b);
          var img = new Image();
          img.onload = function() {
            assert(img.complete, 'Image ' + name + ' could not be decoded');
            var canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            Module["preloadedImages"][name] = canvas;
            Browser.URLObject.revokeObjectURL(url);
            if (onload) onload(byteArray);
          };
          img.onerror = function(event) {
            console.log('Image ' + url + ' could not be decoded');
            if (onerror) onerror();
          };
          img.src = url;
        };
        Module['preloadPlugins'].push(imagePlugin);

 

 

Thanks, Ian.

[Nikos Chantziaras]

I have the exact same problem on Gentoo Linux 64-bit. I build with "em++ -m32". Loading images and the mouse tests don't work at all. The problematic line, as reported by Firefox when clicking on the "InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable" error message, is:

  b = new Blob([byteArray], { type: getMimetype(name) });

Pretty much the only thing I can do with emscripten here is printf() :-/

I'm using LLVM 3.1, Clang 3.1, Java SDK 1.7.0.5, GCC 4.7.1, Node.js 0.9.0. All of these are installed system-wide in /usr.

[Alon Zakai]

I tested on various versions of Firefox now, and it looks like Firefox
14 - current release - does not yet have a full implementation of the
Blob constructor, causing an error there. But on Firefox 15 (beta) and
later things work fine.

15 will become stable in about two weeks, so this problem will "go
away" by itself soon. We could look for a workaround though if this is
a serious problem for anyone in the meantime.

And just to confirm, has anyone seen this problem in 15+, or just 14-?

- azakai

[Nikos Chantziaras]

I tried other browsers as well. Opera 12.01.1532, Konqueror 4.9.0, and
Chrome 21.0.1180.75 (by using a local HTTP server.) None of them work.
Konqueror displays "Downloading..." forever and opera says
"Preparing..." forever.

But, if I upload the *.html and *.data to an actual server running
Apache, then it works in Chrome. In Firefox, Opera and Konqueror is
still doesn't though. Here are the output files in case you want to
take a look at them:

http://foss.aegean.gr/~realnc/emscripten/

This has been built with:

emcc -m32 sdl_image.c --preload-file screenshot.jpg -o sdl_image.html

[Alon Zakai]

Can you get the error messages from the other browsers? I'm not that
familiar with them so not sure how to show their error logs.

- azakai

[Nikos Chantziaras]

Konqueror doesn't seem to have a JS console. It also doesn't print
anything useful on stdout when starting it from the terminal.

Opera says:

Opera/9.80 (X11; Linux x86_64; U; en) Presto/2.10.289 Version/12.01
(Core 2.10.289)
Type "clear()" to clear the console.
Type "// help()" for more information.
sdl_image.html:1489
warning: no blob constructor, cannot create blobs with mimetypes
sdl_image.html:1489
warning: no BlobBuilder
Uncaught exception: TypeError: 'Browser.BlobBuilder' is not a constructor

Error thrown at line 1611, column 12 in <anonymous function:
imagePlugin.handle>(byteArray, name, onload, onerror) in
http://foss.aegean.gr/~realnc/emscripten/sdl_image.html:

var bb = new Browser.BlobBuilder();

called from line 1346, column 14 in <anonymous function:
createPreloadedFile>(plugin) in
http://foss.aegean.gr/~realnc/emscripten/sdl_image.html:
plugin['handle'](byteArray, fullname, finish, function() {
called from line 1343, column 10 in processData(byteArray) in
http://foss.aegean.gr/~realnc/emscripten/sdl_image.html:
Module['preloadPlugins'].forEach(function(plugin) {
called from line 1361, column 10 in <anonymous function:
createPreloadedFile>(parent, name, url, canRead, canWrite, onload,
onerror) in http://foss.aegean.gr/~realnc/emscripten/sdl_image.html:
processData(url);
called from line 2895, column 6 in <anonymous function:
filePreload0.onload>() in
http://foss.aegean.gr/~realnc/emscripten/sdl_image.html:
Module['FS_createPreloadedFile']('/', 'screenshot.jpg', byteArray,
true, true, function() {
called from line 2914, column 8 in <anonymous function:
dataFile.onload>() in
http://foss.aegean.gr/~realnc/emscripten/sdl_image.html:
curr.onload();>>>

[Nikos Chantziaras]

On 11/08/12 20:29, Nikos Chantziaras wrote:
> I tried other browsers as well. Opera 12.01.1532, Konqueror 4.9.0, and
> Chrome 21.0.1180.75 (by using a local HTTP server.) None of them work.
> Konqueror displays "Downloading..." forever and opera says
> "Preparing..." forever.
>
> But, if I upload the *.html and *.data to an actual server running
> Apache, then it works in Chrome.

OK, that's not true about Chrome. I was doing it wrong. Chrome works
both locally as well as on the remote server.

I also tried Safari (5.1.1) under Mac OS X 10.6 and 10.7. They don't work:

sdl_image.html:791 ReferenceError: Can't find variable: Float64Array

I've then tried Internet Exploder 9.0 under Windows 7 and 8.0 under
Windows XP. They also don't work:

SCRIPT5009: 'Int32Array' is undefined
sdl_image.html, line 791 character 3

At this point it's safe to say that the generated code only runs in
Google Chrome, nowhere else.

[Alon Zakai]

It looks like Opera does not have the blob constructor, nor blob
builder - so until it gets those, we can't load binary assets in it.
Can you perhaps check in Opera Next too?

Safari should have Float64Array by now, it's in WebKit. I guess it
isn't in a stable release yet.

So the code works only in Chrome and Firefox 15+ it seems. We could
make it run in Firefox 14 too with some workarounds, but if they only
help Firefox 14 and that is only relevant for 2 weeks, it isn't
urgent. But if the workaround is simple enough I'll implement it.

- azakai

P.S. Thanks for reporting this and the info on different browsers!

[Alon Zakai]

Well that was simpler than I thought ;) I implemented a runtime
fallback to the blob builder if the blob constructor is present but
fails.

Please try this on the emscripten incoming branch, it should work in
Firefox 14 now too.

- azakai

[Nikos Chantziaras]

Thanks. It works in FF 14. It doesn't work in Konqueror. Neither in
Opera and Opera-Next; they both say:

Uncaught exception: DOMException: NETWORK_ERR
Error thrown at line 2924, column 4 in
file://localhost/home/realnc/opt/emscripten/tests/sdl_image.html:
if (Module['setStatus'])

IE says:

SCRIPT5009: 'Int32Array' is undefined

sdl_image.html, line 779 character 3

Safari:

sdl_image.html:779 ReferenceError: Can't find variable: Float64Array

I don't have a mobile device to test there. I doubt that they fare any
better though.

[Alon Zakai]

Thanks for the info.

Well, seems Opera is just behind in their new DOM feature support like
Blobs. I don't know what konqueror's problem is without an error. IE
will only have typed arrays in IE10 later this year (but at least we
know it will have that). And Safari is apparently still missing
Float64Array, hopefully not for long.

So overall, the other browsers have a little catching up to do with
Chrome and Firefox. But it isn't that much, hopefully later this year
the gap will close. There is no reason this code should not run in all
browsers.

- azakai

[Ian Brown]

Thanks Alon/Nikos,

 

I haven't looked at the latest branch yet, but I confirm the existing sdl_image test works ok on Firefox 15 (locally+server) and Chrome 21 (from a server).

 

As an additional reference point the existing sdl_image test does not work on Safari 6.0 on OS X Lion, it triggers the message "Image blob:http://www.... could not be decoded" at:

 

img.onerror = function(event) {console.log('Image ' + url + ' could not be decoded');if (onerror) onerror();};

 

I also confirm a current emcripten build of Me and My Shadow 0.3 runs ok on Firefox 15 (locally+server) and Chrome 21 (from a server), (but not Firefox 14).

 

Many thanks, Ian.

 

[Alon Zakai]

So sounds like Safari 6.0 does have Float64Array, but still fails due
to a "could not be decoded" issue? I don't have OS X, if you or
someone else can debug that and figure out a workaround if there is
one, that would be great.

- azakai