Sundae.js - 0.5 release

Another installation of the budding Canvas reference tester is out!

What is it?
Sundae is framework built to provide a visual pixel difference of rendered images in Html5 canvases. The focus was on providing the functionality to load an known good render result and a render result from your library.

That way when changes are made to your rendering library you can see what the results are. The results come in the form of an exact pixel comparison, plus everything is rendered beside each other for easy visual discernment.

Available here:

• sundae.js 0.5

How can you help?
Have a feature to add? Found a bug? Submit tickets at:

• Sundae.js Lighthouse

Changes in 0.5:

• asynchronous reference canvas filling
• JSON loading
• Script loading
• Basic use test suite

Changes to come: 

• Asynchronous library loading
• No loading of duplicate library URL's
• Updated API
• Pixel Blurring
• Less rigid test case requirements
• Calibration test suite
• Worker thread support

Sundae.js - getting JSON files

As with my previous post,

Sundae.js uses a JSON file to control its test cases. I define a rigid API with the expected test case format, and a user fills out a JSON file at least suppling the required field. A sample of my valid JSON file can be found here.

So in order to get a JSON file, or the contents of any file as a string you need to create a XMLHttpRequest() object. The Mozilla MDC provides detailed explanations of its attributes and expected uses and cautions.

Here are the steps I followed to get this done for Sundae.js:

1. Make a XMLHttpRequest() object.
2. Set its open parameters
3. Set its onload()
1. Very handy for managing callback functions
2. Also handy for using the objects responseText
4. Set its send to null

As usual here is a pastebin of getJSON, and there you have it. Alternatively if you aren't using valid JSON for JSON.parse(responseText) of your file, you should use eval("(" + responseText + ")").

Sundae.js - script tag injecting

Have you ever wanted to add in a Javascript file to your page? The answer is surprisingly simple. I was faced with this problem in one of my current projects Sundae.js, however the problem requires a little bit of explanation. Sundae is supposed to render canvases and display them on the page for your visual comparison, it also generates a pixel difference based on exact pixel values. So in order to let your test function render to the browser I needed to dynamically load Javascript libraries and Javascript files containing your test functions.

As with most things Javascript, you can do anything including creating a script element in the parent window. Here's how:

1. Make your script object
2. Set its onload(), very handy for utilizing callback functions
3. Set the scripts source
4. Attach the script to the document

The code I use is available here:

• Pastebin
• Sundae.js' code

The script tag's type is defaulted to Javascript thanks to HTML5. Lastly you can remove the script tag from the window by calling "removeChild(scriptObj);" if your worried about such things.

You're done now! Global attributes from the included Javascript are now within your current global scope.

0.4 Release: setting up the scaffolding

The first scheduled release of my project sundae.js for OSD700 will be released for Sunday January 30. In case this is your first time reading my blog, my project is a automated testing framework designed to test WebGL dependencies and functionality in addition to YOUR library using those very WebGL functionalities, that is sundae.js.

0.4

There are main 3 goals for the first major release of sundae.js:

Re-factor framework

The original outline of the project was largely taken from processing.js's developer tools reference tester. However as the scope of my project expanded a similar change had to be reflected in the way the code was designed. In order to facilitate this change the old reference tester has to be ripped into key sections, The test building process has to be clearly defined:

• Select the tests
• Load the tests dependencies
• Build test div and canvases
• Load test into canvas
• Load know good into canvas
• Blur both canvases
• Pixel by pixel compare each canvas
• Generate test result into canvas
• Load next test 
• Compile results

What needs to be learned for this process is how to dynamically load Javascript libraries, and then a method of how to recognize when a dependency is already loaded.

Define API

As the project expands a clearly defined programming interface is necessary to maintain workflow. This design needs to have scalability at the forefront of the decision making process. We know each test case should be treated as its own object, an example of what to expect would be: dependencies, known good, error message, test. Additional standards will be that tests will load into a canvas as will their respective last known good result, from there the rest of the test process is built in.

Define test case structure

The thought process behind this goal is to allow for an easy to implement and expandable way to get your test cases working with sundae as fast as possible. The goal is to use a JSON object structured by my API design to clearly define everything optional and required for each test. Further additions include characterize tests by a directory structure. An obvious skill gap of JSON methodology will need to be bridged, however the benefits will be far reaching.

That is everything set up for the 0.4 release of sundae.js!

• Bug tracking
• Repo
• Wiki