ImageBooth Demo 2: HTML5 + JS Image Editor

After another week working on the ImageBooth JS port, I’ve had a number of successes so almost all the core interfaces are available, and there is now a brushing system which doesn’t exist on the PHP version. Go ahead and check out the demo(works under webkit, slightly janky under FF, not working under IE).

All of the GUI uses the internal ImageBooth Registry, so if you create your own component it just appears in the GUI. The base classes are as follows:

var ImBo_Brush = new Class({
    name : function(){
        return '';
    },
    // 5 x 5, fully opaque, square
    brush : [
        [255]
    ],
    getBrush : function(){
        return this.brush;
    }
});

var ImBo_Tool = new Class({
    name : function(){
        return '';
    },
    paint: function(brush, pixels, x, y){
    },
    getToolIcon : function(){
        return 'Graphics/Tools/missing.png';
    }
});

var ImBo_Operation = new Class({
    name : function(){
        return '';
    },
    operate: function(pixels, controls){
        //this is the key method to override
    },
    getControls : function(){
        return [];
    },
    getLabel : function(){
        return this.name();
    }
});

var ImBo_Filter = new Class({
    name : function(){
        return '';
    },
    filter: function(layer, controls){
        //this is the key method to override
    },
    getControls : function(){
        return [];
    },
    getLabel : function(){
        return this.name();
    }
});

A particular brush looks like:

var ImBo_5px_Square_Brush = new Class({
    Extends : ImBo_Brush,
    name : function(){
        return '5px_square';
    },
    brush : [
        [255, 255, 255, 255, 255],
        [255, 255, 255, 255, 255],
        [255, 255, 255, 255, 255],
        [255, 255, 255, 255, 255],
        [255, 255, 255, 255, 255],
    ]
});

Then, to make the brush available:

ImageBooth.registerBrush(new ImBo_5px_Square_Brush());

Should be simple enough, here is some output from it: