Archive for May, 2012

Debugging Web Workers

Tuesday, May 29th, 2012

While working on FileReader.js Web Worker file processing with FileReaderSync, I needed to figure out what was going on with the script inside a web worker. It can be very difficult to track down errors without standard developer tool support, like logging and debugging. Luckily, in Chrome Devtools, this is possible.

How to do it

It can be a little tricky to find, but click over to the ‘Scripts’ panel, and expand the ‘Workers’ accordion on the right. Then check the ‘Pause on Start’ checkbox and you will enter the debugging mode once the worker gets fired up. Here is a screenshot of the relevant checkbox:


Screencast

Here is a screencast of me playing with this feature:

Unable to display content. Adobe Flash is required.

Posted in Developer Tools | Tags:  | No Comments »

Load Web Workers Without A JavaScript File

Friday, May 25th, 2012

Ever want to load a JavaScript Web Worker without specifying an external JavaScript file? There are a couple of different ways to do this by creating a blog and object URL – I wrapped this functionality up into a little plugin to share.

Here is the code. Or checkout out a working jsfiddle demo

 
var WorkerHelper = (function() {
 
    var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
    var URL = window.URL || window.webkitURL;
 
    function getURL (script) {
        if (window.Worker && BlobBuilder && URL) {
            var bb = new BlobBuilder();
            bb.append(script);
            return URL.createObjectURL(bb.getBlob());
        }
 
        return null;
    };
 
    function getWorker (script, onmessage) {
        var url = getURL(script);
        if (url) {
            var worker = new Worker(url);
            worker.onmessage = onmessage;
            return worker;
        }
 
        return null;
    };
 
    return {
        getURL: getURL,
        getWorker: getWorker     
    }
 
})();
 
<div id='log'></div>
 
<script type='text/worker' id='worker-script'>
    self.addEventListener('message', function(e) { 
        postMessage(e.data / 2); 
    },false);
</script>​
 
<script type='text/javascript'>
 
// Load a worker from a string, and manually initialize the worker
var inlineWorkerURL = WorkerHelper.getURL(
    "self.addEventListener('message', function(e) { postMessage(e.data * 2); } ,false);"
);
var inlineWorker = new Worker(inlineWorkerURL);
inlineWorker.onmessage = function(e) {
    document.getElementById('log').innerHTML += '<br />Inline: ' + e.data;
};
 
 
// Load a worker from a script of type=text/worker, and use the getWorker helper
var scriptTagWorker = WorkerHelper.getWorker(
    document.getElementById('worker-script').textContent,
    function(e) {
        document.getElementById('log').innerHTML += '<br />Script Tag: ' + e.data;
    }
);
 
inlineWorker.postMessage(1);
inlineWorker.postMessage(2);
inlineWorker.postMessage(100);
scriptTagWorker.postMessage(1);
scriptTagWorker.postMessage(2);
scriptTagWorker.postMessage(100);
 
</script>

Posted in All, Open Source, Plugins, Web Development | Tags: , ,  | 2 Comments »

Drag Out Images and Canvas With Filenames

Thursday, May 10th, 2012

It can be annoying that when you drag out images of a browser window, they are named png.png (or something equally useless). I was playing around with fixing this – it is a little inconvenience in my CSS Sprite Generator that would be nice to have working (naming the file based on their input). Here is what I came up with (no library dependancies):

function dragoutImages() {
 
    if (!document.addEventListener) {
        return;
    }
 
    document.addEventListener("dragstart", function(e) {
        var element = e.target;
        var src;
 
        if (element.tagName === "IMG" && element.src.indexOf("data:") === 0) {
            src = element.src;
        }
 
        if (element.tagName === "CANVAS") {
            try {
                src = element.toDataURL();
            }
            catch(e) {  }
        }
 
        if (src) {
            var name = element.getAttribute("alt") || "download";
            var mime = src.split(";")[0].split("data:")[1];
            var ext = mime.split("/")[1] || "png";
            var download = mime + ":" + name + "." + ext + ":" + src;
 
            e.dataTransfer.setData("DownloadURL", download);   
        }
    }, false);
}

You just need to specify the alt attribute on the image or canvas to specify your name (along with the draggable attribute on canvas elements) and the script should handle the rest.

Browser Support

I am not 100% sure on browser support. This used to be Chrome only according to this HTML5rocks article, but maybe other browsers have picked it up by now. It is a neat little addition when available though.

Demos

See the full demo: drag out images with custom file name. This shows the ability to drag out both image and canvas tags.

On this page, you should be able to drag out the following colorpicker screenshot, which will be called spectrum.png.

spectrum

Posted in Open Source, Plugins | Tags: , ,  | No Comments »

Astar Graph Search – Variable Costs

Tuesday, May 8th, 2012

I’ve been working on updating my A* Graph Search Algorithm (A* on Github) and toying with the idea of adding variable costs to the grid, also known as weighted paths.

I opened an issue to add weighting to graph nodes a while ago, but am a little stuck on the implementation details. My initial thought was to change the semantics of the graph. Right now, here is a sample graph:

 
var GraphNodeType = { 
    OPEN: 0, 
    WALL: 1 
};
 
// 0 represents an open node, 1 represents a wall 
var graph = new Graph([
    [0,0,0,0],
    [1,0,0,1],
    [1,1,0,0]
]);

My initial plan for adding weighting was something like this:

 
var GraphNodeType = { 
    WALL: 0,
};
 
// Anything > 0 represents the cost to travel to that node, 0 represents a wall
var graph = new Graph([
    [2,1,3,4],
    [0,1,1,0],
    [0,0,3,10]
]);

One major issue with that is that it breaks backwards compatibility with the plugin. A user, spellfork, on the Github issue came up with a neat solution, basically passing in two separate arrays to the graph function, where one represents the “obstacle map” (walls), and the second represents the “terrain map” (costs).

 
// First array: 0 represents an open node, 1 represents a wall 
// Second array: movement costs are represented by numeric value 
var graph = new Graph([
    [0,0,0,0],
    [1,0,0,1],
    [1,1,0,0]
],[
    [2,1,3,4],
    [0,1,1,0],
    [0,0,3,10]
]);

This is nice because the terrain map is optional, but not as nice if you need to do a lot of work to generate the two separate maps.

Maybe there is a better solution that I am not thinking of? Any ideas about the best way to implement this? Drop a comment here or over in the Github issue to help get this implemented!

Posted in Algorithms, Open Source, Web Development | Tags: , ,  | 6 Comments »