This is another bug on processing.js that I’ve been working on. It is much simpler than the other bug I am working on, so I switched to working on this one yesterday to have something ready for release by today.
The bug is here
The issue: If you try running processing.js in IE9’s compatibility mode without the Doctype directive, processing.js will not work, because without the directive IE9 will render the web page and run java-script as IE5 would. [1].
The Test: Navigate to this URL and try to run the following sketch in Internet Explorer 9’s compatibility mode:
void setup ()
{
size( 200, 200 );
}
void draw ()
{
for ( int i = 0; i < 5; i++ )
{
fill(random(200));
ellipse(random(width),random(height),random(100),random(100));
}
filter( BLUR );
}
Now try it again, at this URL. Notice the only difference between the two pages is the doctype directive is missing on the second page, and so the Output box on the page also shows an error in processing the java-script.
The Fix: Add a check to make sure that if the doctype directive is missing in the HTML code, and the browser is IE9 running in compatibility mode, the user or the developer would be aware of it.
This is what I came up with:
/* IE9 Compatibility mode fix */
if (navigator.appName == 'Microsoft Internet Explorer') {
var vMode = document.documentMode; // get the documentMode if browser is IE
if (vMode == 9) {
var doctype = document.doctype;
if (doctype == "null") { // if browser is IE9, check to make sure the doctype for html 5 is declared, or warn the user/developer
// alert("Doctype Directive is missing");
throw("DocType directive is missing. The recommended DocType in IE 9 is the HTML 5 DocType: <!DOCTYPE html>"); }
}
}
/* IE9 Compatibility mode fix end */
Most of it is self-explanatory if not already explained in the comments. The bigger issue I had was where do I insert the code. Intuitively, it should go somewhere right in the beginning when the sketch is being setup. So I ran through a sketch in FF, to use Firebug’s java-script debugging tool to trace the method call stack. It seems this is the code that keeps the loop function running:
looping = window.setInterval(function() {
try {
curSketch.onFrameStart();
p.redraw();
curSketch.onFrameEnd();
} catch(e_loop) {
window.clearInterval(looping);
throw e_loop;
}
}, curMsPerFrame);
But this is obviously called once the loop() gets going. Just browsing through the top of the main processing.js file to see what’s the first thing that is run, (since js is compiled from top-bottom), I found some code that were browser fixes. Figuring this is where my code should go too, I inserted it there, and tested it in IE9 by using alerts(). I know alerts() is probably a horrible way to test, but sometimes I find it simpler to just find out the value in a variable as script sees it. I need to get more use to firebug’s java-script debugger 🙂
My commits, for what should be 0.2: https://github.com/anuragbhatnagar/processing-js/commits/t1606
Trackbacks