From 22b27ffb97e99fb9856fc00094ad9ff87c6d56b1 Mon Sep 17 00:00:00 2001
From: jvalkeal <janne.valkealahti@gmail.com>
Date: Fri, 30 Dec 2011 18:23:14 +0000
Subject: [PATCH] Adding bin packing algorithm to organise windows.

---
 .../hyperic/layout/RectanglePacker.js         | 208 ++++++++++++++
 .../hyperic/tests/test_rectanglepacker1.html  | 271 ++++++++++++++++++
 .../hyperic/tests/test_rectanglepacker2.html  | 271 ++++++++++++++++++
 3 files changed, 750 insertions(+)
 create mode 100644 dojo-release-1.5.0-src/hyperic/layout/RectanglePacker.js
 create mode 100644 dojo-release-1.5.0-src/hyperic/tests/test_rectanglepacker1.html
 create mode 100644 dojo-release-1.5.0-src/hyperic/tests/test_rectanglepacker2.html

diff --git a/dojo-release-1.5.0-src/hyperic/layout/RectanglePacker.js b/dojo-release-1.5.0-src/hyperic/layout/RectanglePacker.js
new file mode 100644
index 0000000..c695b68
--- /dev/null
+++ b/dojo-release-1.5.0-src/hyperic/layout/RectanglePacker.js
@@ -0,0 +1,208 @@
+/**
+ * NOTE: This copyright does *not* cover user programs that use HQ
+ * program services by normal system calls through the application
+ * program interfaces provided as part of the Hyperic Plug-in Development
+ * Kit or the Hyperic Client Development Kit - this is merely considered
+ * normal use of the program, and does *not* fall under the heading of
+ *  "derived work".
+ *
+ *  Copyright (C) [2011], VMware, Inc.
+ *  This file is part of HQ.
+ *
+ *  HQ is free software; you can redistribute it and/or modify
+ *  it under the terms version 2 of the GNU General Public License as
+ *  published by the Free Software Foundation. This program is distributed
+ *  in the hope that it will be useful, but WITHOUT ANY WARRANTY; without
+ *  even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+ *  PARTICULAR PURPOSE. See the GNU General Public License for more
+ *  details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program; if not, write to the Free Software
+ *  Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307
+ *  USA.
+ *
+ */
+dojo.provide("hyperic.layout.RectanglePacker");
+
+dojo.declare("hyperic.layout.RectanglePacker",
+    null, {
+    // summary:
+	//     Class to implement bin packing algorithm to organise
+	//     and scale window positions automatically.
+	// 
+	// credits:
+	//     <http://www.blackpawn.com/texts/lightmaps/default.html>
+	//     <http://pollinimini.net/blog/rectangle-packing-2d-packing>
+
+    constructor: function(width, height){
+        this.root = {};
+        this.reset( width, height );
+    },
+
+    reset: function(width, height){
+        this.root.x = 0;
+        this.root.y = 0;
+        this.root.w = width;
+        this.root.h = height;
+        delete this.root.left;
+        delete this.root.right;
+
+        this.reservedWidth = 0;
+        this.reservedHeight = 0;
+    },
+
+    rawpack: function(/*Array*/blocks, sortfunc, xField, yField, wField, hField){
+        // summary:
+        //     Tries to pack given blocks to fit into existing dimensions.
+    	//
+        // description:
+        //     Packs given blocks to reserved canvas size. This method doesn't
+    	//     unsure successful packing. Fitted and non-fitted objects
+    	//     are returned separately in different arrays.
+
+        var _x = xField || 'x';
+        var _y = yField || 'y';
+        var _w = wField || 'w';
+        var _h = hField || 'h';
+
+        var clone = dojo.clone(blocks);
+        //this.reset();
+        var fit = [];
+        var nofit = [];
+        for (var i=0; i<clone.length; i++) {
+            var coords = this.find(clone[i][_w], clone[i][_h]);
+            if (coords) {
+                fit.push();
+                clone[i][_x] = coords.x;
+                clone[i][_y] = coords.y;
+                fit.push(clone[i]);
+            } else {
+                nofit.push(clone[i]);
+            } 			
+        }
+        return {fit: fit, nofit: nofit};
+    },
+
+    scalepack: function(/*Array*/blocks, sortfunc, xField, yField, wField, hField){
+        // summary:
+        //     Scales blocks to find optimal pack combination to fit blocks.
+        //
+        // description:
+        //     This method will try to rescale object to find optimal
+        //     pack combination. Instead of rawpack method, this won't fail
+        //     to pack all blocks.
+        //     In case block pack fails, total canvas area is increased until
+        //     all blocks are fitted. If first attempt to pack succeeds, canvas
+        //     area is decreased until optimal size if found.
+        //     When optimal pack is found, blocks are rescaled to match orinigal
+        //     canvas aspect ratio.
+
+        var _x = xField || 'x';
+        var _y = yField || 'y';
+        var _w = wField || 'w';
+        var _h = hField || 'h';
+        
+        // need original dimensions, we use these
+        // 
+        var origWidth = this.root.w;
+        var origHeight = this.root.h;
+        var origRatio = this.root.w / this.root.h;
+        var lastHeight = origHeight;
+
+        // do first pack attempt
+        var last = this.rawpack(blocks, sortfunc, xField, yField, wField, hField);
+        var scaleUp = (last.nofit.length == 0);
+
+        // do max 10 packs to find optimal ratio
+        for (var i=0; i<20; i++) {
+            if(scaleUp) {
+            	// fit all, scale up to find better pack
+            	this.reset(this.root.w-(this.root.w/10), this.root.h-(this.root.h/10));
+                var ret = this.rawpack(blocks, sortfunc, xField, yField, wField, hField);
+                if(ret.nofit.length == 0) {
+                	last = ret;
+                	lastHeight = this.root.h;
+                } else {
+                	break;
+                }
+            } else {
+            	// missed some blocks, scale down
+            	this.reset(this.root.w+(this.root.w/10), this.root.h+(this.root.h/10));
+                var ret = this.rawpack(blocks, sortfunc, xField, yField, wField, hField);
+            	lastHeight = this.root.h;
+            	last = ret;
+                if(ret.nofit.length == 0) {
+                	break;
+                }            	
+            }
+        	
+        }
+
+        var ratio = origHeight / lastHeight;
+        for (var i=0; i<last.fit.length; i++) {
+        	last.fit[i][_x] = last.fit[i][_x] * ratio; 
+        	last.fit[i][_y] = last.fit[i][_y] * ratio; 
+        	last.fit[i][_w] = last.fit[i][_w] * ratio; 
+        	last.fit[i][_h] = last.fit[i][_h] * ratio; 
+        }
+
+        return last;
+    },
+
+    getDimensions: function(){
+        return { w: this.reservedWidth, h: this.reservedHeight };
+    },
+
+    find: function(w, h){
+        var coords = this._recursive( this.root, w, h );
+        if (coords) {
+            if ( this.reservedWidth < coords.x + w )
+                this.reservedWidth = coords.x + w;
+            if ( this.reservedHeight < coords.y + h )
+                this.reservedHeight = coords.y + h;
+        }
+        return coords;
+    },
+
+    _recursive: function(node, w, h){
+        if (node.left) {
+            var coords = this._recursive(node.left, w, h);
+            return coords ? coords : this._recursive(node.right, w, h);	
+        } else {
+            if (node.used || w > node.w || h > node.h)
+                return null;
+
+            if (w == node.w && h == node.h) {
+                node.used = true;
+                return {x: node.x, y: node.y};
+            }
+
+            node.left = this._cloneNode(node);
+            node.right = this._cloneNode(node);
+
+            if (node.w - w > node.h - h) {
+                node.left.w = w;
+                node.right.x = node.x + w;
+                node.right.w = node.w - w;	
+            } else {
+                node.left.h = h;
+                node.right.y = node.y + h;
+                node.right.h = node.h - h;							
+            }
+
+            return this._recursive(node.left, w, h);
+        }
+
+    },
+
+    _cloneNode: function(node) {
+        return {
+            x: node.x,
+            y: node.y,
+            w: node.w,
+            h: node.h};
+    }
+
+
+});
\ No newline at end of file
diff --git a/dojo-release-1.5.0-src/hyperic/tests/test_rectanglepacker1.html b/dojo-release-1.5.0-src/hyperic/tests/test_rectanglepacker1.html
new file mode 100644
index 0000000..0c70c09
--- /dev/null
+++ b/dojo-release-1.5.0-src/hyperic/tests/test_rectanglepacker1.html
@@ -0,0 +1,271 @@
+<html>
+    <head>
+        <title>Rectangle Packing Test 1 - rawpack</title>
+        <style type="text/css">
+        @import "../../dojo/resources/dojo.css";
+        @import "../../dijit/themes/tundra/tundra.css";
+        @import "../../dijit/themes/dijit.css";
+        @import "../../dijit/tests/css/dijitTests.css";
+        @import "../../dojox/form/resources/RangeSlider.css";
+        </style>
+    <link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css">
+
+    <style type="text/css" media="screen">
+    #canvasContainer {
+        float: left;
+        width: 645px;
+        height: 510px;
+        text-align: center;
+        border: 1px solid #ddd;
+    }
+    #controls {
+        margin-left: 650px;
+        width: 12em !important;
+        width: auto;
+        padding: 1em;
+    }
+
+    </style>
+
+    <script type="text/javascript" src="../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
+    <script type="text/javascript">
+        dojo.require("hyperic.layout.RectanglePacker");
+        dojo.require("dijit.form.NumberSpinner");
+        dojo.require("dijit.form.DropDownButton");
+        dojo.require("dijit.form.Select");
+        dojo.require("dijit.form.CheckBox");
+        dojo.require("dojox.gfx");
+        dojo.require("hyperic.util.FontUtil");
+
+        createSurface = function(){
+	    surface = dojox.gfx.createSurface("canvas", 650, 500);
+	    surface.whenLoaded(refresh);
+        };
+
+        makeText = function(surface, text, font, fill, x, y, w, h){
+            var params = {x: x+w/2, y: y+ (h-(h*0.22)), text: text, align: "middle"};
+            var t = surface.createText(params);
+            if(font)   t.setFont(font);
+            if(fill)   t.setFill(fill);
+            return t;
+        };
+
+        refresh = function(){
+            var params = {};
+            var canvasSize = dijit.byId("canvasSize").get('value').split('x');
+		
+            params.canvasWidth = parseInt(canvasSize[0]);
+            params.canvasHeight = parseInt(canvasSize[1]);
+	
+            params.blocks = dijit.byId("blocksNo").get('value');
+            params.minWidth = dijit.byId("minWidth").get('value');
+            params.maxWidth = dijit.byId("maxWidth").get('value');
+            params.minHeight = dijit.byId("minHeight").get('value');
+            params.maxHeight = dijit.byId("maxHeight").get('value');
+            params.sort = dijit.byId("sort").get('value');
+            params.reverse = dijit.byId("reverse").get('checked');	
+		
+            render(params)	
+        }
+
+        render = function(params){
+
+            var sorting = {
+                'none'	: function (a,b) { return  0 },
+                'width'	: function (a,b) { return a.w - b.w },
+                'height': function (a,b) { return a.h - b.h },
+                'area'  : function (a,b) { return a.w*a.h - b.w*b.h },
+                'magic' : function (a,b) { return Math.max(a.w,a.h) - Math.max(b.w,b.h) }
+            }		
+
+            var rblocks = []
+            for (var i=0; i<params.blocks; i++) {
+                rblocks[i] = { 
+                    w: params.minWidth + Math.round((params.maxWidth-params.minWidth) * Math.random()),
+                    h: params.minHeight + Math.round((params.maxHeight-params.minHeight) * Math.random())
+                };
+            }
+
+            rblocks.sort(sorting[params.sort]);		
+            if (params.reverse)
+                rblocks.reverse();
+		
+            var packer = new hyperic.layout.RectanglePacker(params.canvasWidth, params.canvasHeight);
+
+            var totalArea = 0, fitted = 0;
+
+            packer.reset(params.canvasWidth, params.canvasHeight);
+            var res = packer.rawpack(rblocks);
+            
+            var blocks = [];
+            for (var i=0; i<res.fit.length; i++) {
+                blocks.push(res.fit[i]);
+            }
+            for (var i=0; i<res.nofit.length; i++) {
+                var tmp = res.nofit[i];
+                tmp.noFit = true;
+                blocks.push(tmp);
+            }
+
+            surface.clear();
+
+            surface.createRect({x: 1, y: 1, width: params.canvasWidth, height: params.canvasHeight}).
+                setFill("white").setStroke({
+                    color: "black",
+                    width: 1,
+                    join: "round"
+            });
+
+
+            var nofittext = "";
+
+            for (var i=0; i<blocks.length; i++) {
+
+                if (blocks[i].noFit) {
+                    nofittext = nofittext + "<li>" + i + " " + blocks[i].w + 'x' + blocks[i].h + "</li>";
+                    continue;
+                }
+                fitted++;
+                totalArea += blocks[i].w * blocks[i].h;
+
+
+                //console.log("block:"+blocks[i]);
+                surface.createRect({x: blocks[i].x+1, y: blocks[i].y+1, width: blocks[i].w, height: blocks[i].h}).
+                    setFill("yellow").setStroke({
+                        color: "black",
+                        width: 1,
+                        join: "round"
+                });
+
+                var tmpsize = hyperic.util.FontUtil.findGoodSizeFontByRect(i,blocks[i].w,blocks[i].h);
+                makeText(surface,
+                    i,
+                    {family: "Helvetica", size: tmpsize+"px", weight: "bold"},
+                    "black",
+                    blocks[i].x,
+                    blocks[i].y,
+                    blocks[i].w,
+                    blocks[i].h);
+
+            }
+
+            dojo.byId("nofit").innerHTML = nofittext;
+
+            var dim = packer.getDimensions();
+            dojo.byId("statusCalcSize").innerHTML = dim.w + 'x' + dim.h;
+            dojo.byId("statusFilled").innerHTML = ((totalArea*100) / (dim.w*dim.h)).toFixed(2);
+            dojo.byId("statusFitted").innerHTML = ((fitted*100) / blocks.length).toFixed(0);
+        }
+
+
+        dojo.addOnLoad(createSurface);
+    </script>
+
+    </head>
+
+    <body class="claro">
+        <h1>Rectangle Packing Test 1 - rawpack</h1>
+        <div id="canvasContainer">
+            <div id="status">
+                <a class="refresh" href="#" onclick="refresh(); return false;">Refresh</a>
+                <span class="label">Calculated size:</span> <span id="statusCalcSize">000x000</span> 
+              | <span class="label">% Filled:</span> <span id="statusFilled">00</span>%
+              | <span class="label">% Blocks Fitted:</span> <span id="statusFitted">00</span>%
+            </div>
+
+            <div id="canvas"></div>
+        </div>
+	
+        <div id="controls">
+            <label for="canvasSize">Max Canvas Size</label>
+            <select dojoType="dijit.form.Select" 
+                id="canvasSize"
+                name="canvasSize"
+                dojoAttachPoint="titleposition"
+                class="textbox"
+                intermediateChanges="true"
+                onChange="refresh">
+                <option value="600x400">600 x 400</option>
+                <option value="500x300">500 x 300</option>
+                <option value="400x300">400 x 300</option>
+                <option value="300x200">300 x 200</option>
+            </select>
+            <br/>
+
+            <label for="blocksNo">Blocks No.</label>
+            <input dojoType="dijit.form.NumberSpinner"
+                onChange="refresh"
+                intermediateChanges="true"
+                value="5"
+                constraints="{max:200,min:1}"
+                name="blocksNo"
+                id="blocksNo">
+
+            <label for="minWidth">minWidth</label>
+            <input dojoType="dijit.form.NumberSpinner"
+                onChange="refresh"
+                intermediateChanges="true"
+                value="20"
+                constraints="{max:200,min:1}"
+                name="minWidth"
+                id="minWidth">
+
+            <label for="maxWidth">maxWidth</label>
+            <input dojoType="dijit.form.NumberSpinner"
+                onChange="refresh"
+                intermediateChanges="true"
+                value="130"
+                constraints="{max:200,min:1}"
+                name="maxWidth"
+                id="maxWidth">
+
+            <label for="minHeight">minHeight</label>
+            <input dojoType="dijit.form.NumberSpinner"
+                onChange="refresh"
+                intermediateChanges="true"
+                value="10"
+                constraints="{max:200,min:1}"
+                name="minHeight"
+                id="minHeight">
+
+            <label for="maxHeight">maxHeight</label>
+            <input dojoType="dijit.form.NumberSpinner"
+                onChange="refresh"
+                intermediateChanges="true"
+                value="100"
+                constraints="{max:200,min:1}"
+                name="maxHeight"
+                id="maxHeight">
+
+            <label for="sort">Sort Method</label>
+            <select dojoType="dijit.form.Select" 
+                id="sort"
+                name="sort"
+                dojoAttachPoint="titleposition"
+                class="textbox"
+                intermediateChanges="true"
+                onChange="refresh">
+                <option value="none">None</option>
+                <option value="width">Width</option>
+                <option value="height">Height</option>
+                <option value="area">Area</option>
+                <option value="magic">Magic</option>
+            </select>
+            <br/>
+
+            <label for="reverse">Reverse Sorting?</label>
+            <input name="reverse" 
+                id="reverse"
+                type="checkbox"
+                value="false"
+                dojoType="dijit.form.CheckBox"
+                onClick="refresh">
+	
+            <h3 class="nofit">Nofit blocks</h3>
+            <ul id="nofit">
+            </ul>
+
+        </div>
+
+    </body>
+</html>
diff --git a/dojo-release-1.5.0-src/hyperic/tests/test_rectanglepacker2.html b/dojo-release-1.5.0-src/hyperic/tests/test_rectanglepacker2.html
new file mode 100644
index 0000000..6cd3fe2
--- /dev/null
+++ b/dojo-release-1.5.0-src/hyperic/tests/test_rectanglepacker2.html
@@ -0,0 +1,271 @@
+<html>
+    <head>
+        <title>Rectangle Packing Test 2 - scalepack</title>
+        <style type="text/css">
+        @import "../../dojo/resources/dojo.css";
+        @import "../../dijit/themes/tundra/tundra.css";
+        @import "../../dijit/themes/dijit.css";
+        @import "../../dijit/tests/css/dijitTests.css";
+        @import "../../dojox/form/resources/RangeSlider.css";
+        </style>
+    <link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css">
+
+    <style type="text/css" media="screen">
+    #canvasContainer {
+        float: left;
+        width: 645px;
+        height: 510px;
+        text-align: center;
+        border: 1px solid #ddd;
+    }
+    #controls {
+        margin-left: 650px;
+        width: 12em !important;
+        width: auto;
+        padding: 1em;
+    }
+
+    </style>
+
+    <script type="text/javascript" src="../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
+    <script type="text/javascript">
+        dojo.require("hyperic.layout.RectanglePacker");
+        dojo.require("dijit.form.NumberSpinner");
+        dojo.require("dijit.form.DropDownButton");
+        dojo.require("dijit.form.Select");
+        dojo.require("dijit.form.CheckBox");
+        dojo.require("dojox.gfx");
+        dojo.require("hyperic.util.FontUtil");
+
+        createSurface = function(){
+        surface = dojox.gfx.createSurface("canvas", 650, 500);
+        surface.whenLoaded(refresh);
+        };
+
+        makeText = function(surface, text, font, fill, x, y, w, h){
+            var params = {x: x+w/2, y: y+ (h-(h*0.22)), text: text, align: "middle"};
+            var t = surface.createText(params);
+            if(font)   t.setFont(font);
+            if(fill)   t.setFill(fill);
+            return t;
+        };
+
+        refresh = function(){
+            var params = {};
+            var canvasSize = dijit.byId("canvasSize").get('value').split('x');
+        
+            params.canvasWidth = parseInt(canvasSize[0]);
+            params.canvasHeight = parseInt(canvasSize[1]);
+    
+            params.blocks = dijit.byId("blocksNo").get('value');
+            params.minWidth = dijit.byId("minWidth").get('value');
+            params.maxWidth = dijit.byId("maxWidth").get('value');
+            params.minHeight = dijit.byId("minHeight").get('value');
+            params.maxHeight = dijit.byId("maxHeight").get('value');
+            params.sort = dijit.byId("sort").get('value');
+            params.reverse = dijit.byId("reverse").get('checked');  
+        
+            render(params)  
+        }
+
+        render = function(params){
+
+            var sorting = {
+                'none'  : function (a,b) { return  0 },
+                'width' : function (a,b) { return a.w - b.w },
+                'height': function (a,b) { return a.h - b.h },
+                'area'  : function (a,b) { return a.w*a.h - b.w*b.h },
+                'magic' : function (a,b) { return Math.max(a.w,a.h) - Math.max(b.w,b.h) }
+            }       
+
+            var rblocks = []
+            for (var i=0; i<params.blocks; i++) {
+                rblocks[i] = { 
+                    w: params.minWidth + Math.round((params.maxWidth-params.minWidth) * Math.random()),
+                    h: params.minHeight + Math.round((params.maxHeight-params.minHeight) * Math.random())
+                };
+            }
+
+            rblocks.sort(sorting[params.sort]);     
+            if (params.reverse)
+                rblocks.reverse();
+        
+            var packer = new hyperic.layout.RectanglePacker(params.canvasWidth, params.canvasHeight);
+
+            var totalArea = 0, fitted = 0;
+
+            packer.reset(params.canvasWidth, params.canvasHeight);
+            var res = packer.scalepack(rblocks);
+            
+            var blocks = [];
+            for (var i=0; i<res.fit.length; i++) {
+                blocks.push(res.fit[i]);
+            }
+            for (var i=0; i<res.nofit.length; i++) {
+                var tmp = res.nofit[i];
+                tmp.noFit = true;
+                blocks.push(tmp);
+            }
+
+            surface.clear();
+
+            surface.createRect({x: 1, y: 1, width: params.canvasWidth, height: params.canvasHeight}).
+                setFill("white").setStroke({
+                    color: "black",
+                    width: 1,
+                    join: "round"
+            });
+
+
+            var nofittext = "";
+
+            for (var i=0; i<blocks.length; i++) {
+
+                if (blocks[i].noFit) {
+                    nofittext = nofittext + "<li>" + i + " " + blocks[i].w + 'x' + blocks[i].h + "</li>";
+                    continue;
+                }
+                fitted++;
+                totalArea += blocks[i].w * blocks[i].h;
+
+
+                //console.log("block:"+blocks[i]);
+                surface.createRect({x: blocks[i].x+1, y: blocks[i].y+1, width: blocks[i].w, height: blocks[i].h}).
+                    setFill("yellow").setStroke({
+                        color: "black",
+                        width: 1,
+                        join: "round"
+                });
+
+                var tmpsize = hyperic.util.FontUtil.findGoodSizeFontByRect(i,blocks[i].w,blocks[i].h);
+                makeText(surface,
+                    i,
+                    {family: "Helvetica", size: tmpsize+"px", weight: "bold"},
+                    "black",
+                    blocks[i].x,
+                    blocks[i].y,
+                    blocks[i].w,
+                    blocks[i].h);
+
+            }
+
+            dojo.byId("nofit").innerHTML = nofittext;
+
+            var dim = packer.getDimensions();
+            dojo.byId("statusCalcSize").innerHTML = dim.w + 'x' + dim.h;
+            dojo.byId("statusFilled").innerHTML = ((totalArea*100) / (dim.w*dim.h)).toFixed(2);
+            dojo.byId("statusFitted").innerHTML = ((fitted*100) / blocks.length).toFixed(0);
+        }
+
+
+        dojo.addOnLoad(createSurface);
+    </script>
+
+    </head>
+
+    <body class="claro">
+        <h1>Rectangle Packing Test 2 - scalepack</h1>
+        <div id="canvasContainer">
+            <div id="status">
+                <a class="refresh" href="#" onclick="refresh(); return false;">Refresh</a>
+                <span class="label">Calculated size:</span> <span id="statusCalcSize">000x000</span> 
+              | <span class="label">% Filled:</span> <span id="statusFilled">00</span>%
+              | <span class="label">% Blocks Fitted:</span> <span id="statusFitted">00</span>%
+            </div>
+
+            <div id="canvas"></div>
+        </div>
+    
+        <div id="controls">
+            <label for="canvasSize">Max Canvas Size</label>
+            <select dojoType="dijit.form.Select" 
+                id="canvasSize"
+                name="canvasSize"
+                dojoAttachPoint="titleposition"
+                class="textbox"
+                intermediateChanges="true"
+                onChange="refresh">
+                <option value="600x400">600 x 400</option>
+                <option value="500x300">500 x 300</option>
+                <option value="400x300">400 x 300</option>
+                <option value="300x200">300 x 200</option>
+            </select>
+            <br/>
+
+            <label for="blocksNo">Blocks No.</label>
+            <input dojoType="dijit.form.NumberSpinner"
+                onChange="refresh"
+                intermediateChanges="true"
+                value="5"
+                constraints="{max:200,min:1}"
+                name="blocksNo"
+                id="blocksNo">
+
+            <label for="minWidth">minWidth</label>
+            <input dojoType="dijit.form.NumberSpinner"
+                onChange="refresh"
+                intermediateChanges="true"
+                value="20"
+                constraints="{max:200,min:1}"
+                name="minWidth"
+                id="minWidth">
+
+            <label for="maxWidth">maxWidth</label>
+            <input dojoType="dijit.form.NumberSpinner"
+                onChange="refresh"
+                intermediateChanges="true"
+                value="130"
+                constraints="{max:200,min:1}"
+                name="maxWidth"
+                id="maxWidth">
+
+            <label for="minHeight">minHeight</label>
+            <input dojoType="dijit.form.NumberSpinner"
+                onChange="refresh"
+                intermediateChanges="true"
+                value="10"
+                constraints="{max:200,min:1}"
+                name="minHeight"
+                id="minHeight">
+
+            <label for="maxHeight">maxHeight</label>
+            <input dojoType="dijit.form.NumberSpinner"
+                onChange="refresh"
+                intermediateChanges="true"
+                value="100"
+                constraints="{max:200,min:1}"
+                name="maxHeight"
+                id="maxHeight">
+
+            <label for="sort">Sort Method</label>
+            <select dojoType="dijit.form.Select" 
+                id="sort"
+                name="sort"
+                dojoAttachPoint="titleposition"
+                class="textbox"
+                intermediateChanges="true"
+                onChange="refresh">
+                <option value="none">None</option>
+                <option value="width">Width</option>
+                <option value="height">Height</option>
+                <option value="area">Area</option>
+                <option value="magic">Magic</option>
+            </select>
+            <br/>
+
+            <label for="reverse">Reverse Sorting?</label>
+            <input name="reverse" 
+                id="reverse"
+                type="checkbox"
+                value="false"
+                dojoType="dijit.form.CheckBox"
+                onClick="refresh">
+    
+            <h3 class="nofit">Nofit blocks</h3>
+            <ul id="nofit">
+            </ul>
+
+        </div>
+
+    </body>
+</html>