{"id":120,"date":"2010-06-23T08:29:26","date_gmt":"2010-06-23T15:29:26","guid":{"rendered":"http:\/\/patternweaver.com\/blog\/?p=120"},"modified":"2010-07-01T06:36:13","modified_gmt":"2010-07-01T06:36:13","slug":"imagebooth-demo-2-html5-js-image-editor","status":"publish","type":"post","link":"http:\/\/patternweaver.com\/blog\/2010\/06\/imagebooth-demo-2-html5-js-image-editor\/","title":{"rendered":"ImageBooth Demo 2: HTML5 + JS Image Editor"},"content":{"rendered":"

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<\/a>(works under webkit, slightly janky under FF, not working under IE).<\/p>\n

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:<\/p>\n

var ImBo_Brush = new Class({\r\n    name : function(){\r\n        return '';\r\n    },\r\n    \/\/ 5 x 5, fully opaque, square\r\n    brush : [\r\n        [255]\r\n    ],\r\n    getBrush : function(){\r\n        return this.brush;\r\n    }\r\n});\r\n\r\nvar ImBo_Tool = new Class({\r\n    name : function(){\r\n        return '';\r\n    },\r\n    paint: function(brush, pixels, x, y){\r\n    },\r\n    getToolIcon : function(){\r\n        return 'Graphics\/Tools\/missing.png';\r\n    }\r\n});\r\n\r\nvar ImBo_Operation = new Class({\r\n    name : function(){\r\n        return '';\r\n    },\r\n    operate: function(pixels, controls){\r\n        \/\/this is the key method to override\r\n    },\r\n    getControls : function(){\r\n        return [];\r\n    },\r\n    getLabel : function(){\r\n        return this.name();\r\n    }\r\n});\r\n\r\nvar ImBo_Filter = new Class({\r\n    name : function(){\r\n        return '';\r\n    },\r\n    filter: function(layer, controls){\r\n        \/\/this is the key method to override\r\n    },\r\n    getControls : function(){\r\n        return [];\r\n    },\r\n    getLabel : function(){\r\n        return this.name();\r\n    }\r\n});<\/code><\/pre>\n
A particular brush looks like:<\/p>\n
var ImBo_5px_Square_Brush = new Class({\r\n    Extends : ImBo_Brush,\r\n    name : function(){\r\n        return '5px_square';\r\n    },\r\n    brush : [\r\n        [255, 255, 255, 255, 255],\r\n        [255, 255, 255, 255, 255],\r\n        [255, 255, 255, 255, 255],\r\n        [255, 255, 255, 255, 255],\r\n        [255, 255, 255, 255, 255],\r\n    ]\r\n});<\/code><\/pre>\n
Then, to make the brush available:<\/p>\n
ImageBooth.registerBrush(new ImBo_5px_Square_Brush());<\/code><\/p>\n
Should be simple enough, here is some output from it:\n\t\t\t