code/franz
Archived
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

if the canvas element exists, call the draw method with the canvas_id as parameter, added a reset image button to undo the HSB sort

Browse source
This commit is contained in:
Dominick Pham 2010-05-08 15:24:47 -04:00
parent e1ca9115ea
commit fdffdafca8
2 changed files with 26 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

19
foozy.html
View file

@ -27,20 +27,10 @@
return false;
});
$("#sort_hue").click(function() {
lol.displayHue();
return false;
});
$("#sort_sat").click(function() {
lol.displaySat();
return false;
});
$("#sort_val").click(function() {
lol.displayBright();
return false;
});
$("#sort_reset").click( function() { lol.displayImg(); return false; });
$("#sort_hue").click( function() { lol.displayHue(); return false; });
$("#sort_sat").click( function() { lol.displaySat(); return false; });
$("#sort_val").click( function() { lol.displayBright(); return false; });
});
</script>
</head>
@ -79,6 +69,7 @@
<div id="options">
<p id="hsv">
<a href="#" id="sort_reset" title="Reset to original">Reset</a>
<a href="#" id="sort_hue" title="Sort by Hue">Sort by Hue</a>
<a href="#" id="sort_sat" title="Sort by Saturation">Saturation</a>
<a href="#" id="sort_val" title="Sort by Brightness">Brightness</a>

43
js/franz.js
View file

@ -46,7 +46,7 @@ var franz = function(franzProps) {
var that = this;
franz.util.loadEvent(function() {
document.body.appendChild(that.canvas);
that.draw();
typeof that.canvas_id !== 'undefined' ? that.draw(that.canvas_id) : that.draw();
if(typeof franzProps.callback !== "undefined" && typeof franzProps.callback === "function") franzProps.callback();
});
} else {
@ -83,7 +83,6 @@ franz.prototype = {
rgba: [],
hsb: [],
hsl: [],
origIndex: [],
extra_canvas: null,
extra_ctx: null,
@ -141,11 +140,15 @@ franz.prototype = {
},
displayColors: function(order_array) {
console.log("displaying colors");
var docStr = "";
for(var i = 0; i < this.rgba.length; i++) {
docStr += '<div class="color_boxd" style="background-color: rgb(' + this.rgba[order_array[i]][0] + ', ' + this.rgba[order_array[i]][1] + ',' + this.rgba[order_array[i]][2] + ');"></div>';
if (typeof order_array === 'undefined'){
for(var i = 0; i < this.rgba.length; i++) {
docStr += '<div class="color_boxd" style="background-color: rgb(' + this.rgba[i][0] + ', ' + this.rgba[i][1] + ',' + this.rgba[i][2] + ');"></div>';
}
} else {
for(var i = 0; i < this.rgba.length; i++) {
docStr += '<div class="color_boxd" style="background-color: rgb(' + this.rgba[order_array[i]][0] + ', ' + this.rgba[order_array[i]][1] + ',' + this.rgba[order_array[i]][2] + ');"></div>';
}
}
document.getElementById("log_colors").innerHTML = docStr;
@ -159,14 +162,19 @@ franz.prototype = {
},
displayImg: function() {
this.resetIndex();
this.displayColors(this.origIndex);
this.displayColors();
return false;
},
displayHue: function() { this.sortArray(this.hsb,0); },
displaySat: function() { this.sortArray(this.hsb,1); },
displayBright: function() { this.sortArray(this.hsb,2); },
displayHue: function() { this.sortArray(this.hsb,0); this.displayOut(this.hsb); },
displaySat: function() { this.sortArray(this.hsb,1); this.displayOut(this.hsb);},
displayBright: function() { this.sortArray(this.hsb,2); this.displayOut(this.hsb);},
displayOut: function(array) {
var index = [];
for(var i=0;i<array.length;i++){index[i] = array[i][3];} /* rebuilding index */
this.displayColors(index);
return false;
},
/* array should be a (rgba.length)x4 2d array where position 0,1, or 2
eg: pass in hsb ==> hsb[] = [h,s,b,index][]
@ -176,11 +184,6 @@ franz.prototype = {
*/
sortArray: function(array,position) {
array.sort(function(a,b){ return a[position] - b[position]; });
var index = [];
for(var i=0;i<array.length;i++){index[i] = array[i][3];} /* rebuilding index */
this.displayColors(index);
return false;
},
/* calculates density of array data given interval and step size - both controlling data error
@ -202,14 +205,6 @@ franz.prototype = {
}
return densityArray;
},
resetIndex: function() {
/* keep track of original index so we don't have to revert back to RGB just to display output */
for(var i = 0; i < this.rgba.length; i++) {
this.origIndex[i] = i;
}
return false;
}
}