Use this library with FlashCanvas

[refda]

Hello, I try using this with FlashCanvas because many browser does not supporting your library (Android, Safari on Mac, Mac Browsers, older IE...)!

Could you help my implenting this? I have set up a test page here: http://goo.gl/XGM3B. You could see the modified sphere.js here: http://goo.gl/NY3Sk.

Thanks very much for your help. I build a free community for photo spheres (also in English with android app)!

Issue on Stackoverflow: http://stackoverflow.com/questions/13541605/use-flashcanvas-with-three-js

[kennydude]

Thanks

I'll try my best! But I don't have much of a clue :')

Joe :) On 24 Nov 2012 13:30, "refda" notifications@github.com wrote:

Hello, I try using this with FlashCanvas because many browser does not supporting your library (Android, Safari on Mac, Mac Browsers, older IE...)!

Could you help my implenting this? I have set up a test page here: http://goo.gl/XGM3B. You could see the modified sphere.js here: http://goo.gl/NY3Sk.

Thanks very much for your help. I build a free community for photo spheres (also in English with android app)!

Issue on Stackoverflow: http://stackoverflow.com/questions/13541605/use-flashcanvas-with-three-js

— Reply to this email directly or view it on GitHubhttps://github.com/kennydude/photosphere/issues/4.

[refda]

Thanks for your reply.

Could you please have a look on my new community (http://photo.merq.org)? I've build in a zoom in / out with +/- keys. But the "zooming in too far" fix does not work right:

[...] 
if (e.keyCode == 107) { 

proposed = self.camera.fov + 1;
if(proposed > 10 && proposed < 100){

    self.camera.fov -= 1;
    self.camera.updateProjectionMatrix();

    self.render();
       return false;
    }}
[...]

Thanks very much! PS: Have you an idea how to implent the FlashCanvas? I try, try and try - but it doesn't work :(

[kennydude]

It seems to work for me, so I'm not really sure why it isn't working.

Although, you have it wrong as you are checking if the FOV is increased by 1, but if it passes the test, it is decremented by 1.

I'm fairly busy at the moment, but when I can I will look into it. Although, you're free to fork and add your edits in :)

[refda]

It work not 100%: You could zoom more in with the +/- as with the mouse wheel. After zooming max with "+" I couldn't zoom out with "-"!

[kennydude]

Yes, that's expected because you have coded it wrong. Fixed:

[...] 
if (e.keyCode == 107) { 

   proposed = self.camera.fov + 1; // zoom in, need to check +1 won't exceed maximum
   if(proposed > 10 && proposed < 100){ // accepted?

         self.camera.fov += 1; // now we increase.
         self.camera.updateProjectionMatrix(); // do some crazy stuff I don't understand

         self.render();
         return false;
 }}
 [...]

[refda]

Thanks! Now this works like a charm! Only a fix for unsupported Browsers is needed. I thought FlashCanvas is a possibility, or? But I don't know what is wrong:

This is in the HTML: script type="text/javascript" src="bin/flashcanvas.js" /script (escaped)

And this is in the "sphere.js":

Photosphere.prototype.canUseCanvas = function() {
    var elem = document.createElement('canvas');
     if (typeof FlashCanvas != "undefined") {
        FlashCanvas.initElement( elem );
    }
    return !!(elem.getContext && elem.getContext('2d'));
};

Photosphere.prototype.cropImage = function(){
    img = new Image();
    self = this;

    img.onload = function(){
        canvas = document.createElement('canvas');
        canvas.width = self.exif['full_width'];
        canvas.height = self.exif['full_height'];

             if (typeof FlashCanvas != "undefined") {
        FlashCanvas.initElement( canvas );
    }

        context = canvas.getContext("2d");

        context.fillStyle = "#000";
        context.fillRect(0,0,canvas.width,canvas.height);
        context.drawImage(img, self.exif['x'], self.exif['y'], self.exif['crop_width'], self.exif['crop_height']);
        self.start3D( canvas.toDataURL("image/png") );
    }
    img.src = this.image;
};

Photosphere.prototype.canDoWebGL = function(){
    var canvas, ctx, exts;

    try {
        canvas  = document.createElement('canvas');

             if (typeof FlashCanvas != "undefined") {
        FlashCanvas.initElement( canvas );
    }

        ctx     = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
        exts    = ctx.getSupportedExtensions();
    }
    catch (e) {
        return false;
    }

    if (ctx === undefined) {
        return false;
    }
    else {
        return true;
    }
};

The "FlashCanvas.initElement(...)"s are important!

[kennydude]

I'm looking into it as I need to port Three.JS to work with it and my canvas code

[refda]

Please have a look at http://goo.gl/AvEPA. I try to use pan0 but I don't know how to set the parameters. You could check the source here: https://github.com/mikeage/fspp/blob/master/pan0.as#L627 (near this line I tried some values...).

Thanks for helping ;)