diff --git a/foozy.html b/foozy.html new file mode 100644 index 0000000..1517063 --- /dev/null +++ b/foozy.html @@ -0,0 +1,104 @@ + + + + + Franz - client side color palettes from logos + + + + + + + +

Franz - client side color swatches

+ +
+ Upload an image +
+ + +
+ +
+
+ + +
+
+ + +
+

Try out: + lol.png, + testjubs.jpg, + stars.jpg, + 1600.jpg, + fallout.jpg +

+ +
+
+ + + +
+

+ Sort by Hue + Saturation (HSV) + Saturation (HSL) + Value (HSV) + Lightness (HSL) +

+
+ +
+
+ +
+
+ + + + + diff --git a/index2.php b/index2.php deleted file mode 100644 index 38882d8..0000000 --- a/index2.php +++ /dev/null @@ -1,218 +0,0 @@ - - - - - Franz - client side color palettes from logos - - - - - - - - -
- Set as Main Background - Set as Header Background - Set as Content Background - Set as Sidebar Background - Set as Footer Background -
- -
-
- This is an example layout -
-
-

- This is an example layout to test colors with. -

-

- Click on a color to set it for one of these layout sections! -

-
-
- Sidebar -
-
- © lol enterprises -
-
- -

Franz - client side color swatches

- -
- Upload an image -
- - -
- -
-
- - -
-
- - -
-

Try out: - lol.png, - testjubs.jpg, - stars.jpg, - 1600.jpg, - fallout.jpg -

- -
- -
- -
-

- Sort by Hue - Saturation (HSV) - Saturation (HSL) - Value (HSV) - Lightness (HSL) -

-
- -
-
- -
-
- - - - - - - diff --git a/js/expressInstall.swf b/js/expressInstall.swf new file mode 100644 index 0000000..0fbf8fc Binary files /dev/null and b/js/expressInstall.swf differ diff --git a/js/franz.js b/js/franz.js index 73b73b3..d207c56 100644 --- a/js/franz.js +++ b/js/franz.js @@ -4,8 +4,6 @@ * @Author Dominick Pham (http://twitter.com/enotionz) */ -/* Define some basic prototypes that we'll require later.. */ - if(!Array.prototype.swap) { Array.prototype.swap = function(a, b) { var tmp = this[a]; @@ -15,15 +13,60 @@ if(!Array.prototype.swap) { } } -/* allows numeric sorting for built in js sort */ -function sortNumber(a,b) { return a - b;} +var franz = function(franzProps) { + /* new franz({ + canvas: "canvas_id", + src: "image_src", + callback: fn() { ... } + }); + + Stores a reference to our canvas and the canvas context for future use. Accepts + an optional callback function to tie this into further methods. + + Note: Since there's no way to get the type of support we need in Internet Explorer, + we actually branch the codepath here - IE gets a small flash applet that handles pulling color data out. We additionally serve + this if, for some reason, support is lacking or broken in newer browser (or Firefox 2, etc). + + The data is still parsed via JS by using externalInterface() callbacks into the Flash applet, so it's safe to + assume that anything occuring after getColors() is back in global-browser-use land. + */ + this.canvas_id = franzProps.canvas; + if(typeof document.getElementById(franzProps.canvas).getContext === "function") { + /* Canvas is natively supported, go down the normal path... */ + this.canvas = document.getElementById(franzProps.canvas); + this.ctx = this.canvas.getContext('2d'); + if(typeof franzProps.callback !== "undefined" && typeof franzProps.callback === "function") franzProps.callback(); + } else { + /* We're dealing with something that belongs in an old folks home; throw in the life support. (Embed Flash junk) :( + Inject SWFObject so we can deal with Flash embedding in a sane manner... + */ + if(typeof swfobject === "undefined") { + var newScript = document.createElement("script"); + newScript.type = "text/javascript"; + newScript.src = "/js/swfobject.js"; + document.body.appendChild(newScript); -/* Franz - this is where the magic happens, pay close attention. ;) */ -var franz = { - canvas: {}, - ctx: {}, - img: {}, - + if(typeof franzProps.callback !== "undefined" && typeof franzProps.callback === "function") { + // Catch the callback function for IE... + newScript.onreadystatechange = function() { + if(newScript.readyState == "loaded" || newScript.readyState == "complete") franzProps.callback(); + return false; + } + + // Catch all other misguided browsers, just in case (Really old versions of Safari that don't have good support will fail totally, but that's far too much to care about) + newScript.onload = function() { + franzProps.callback(); + return false; + } + } + return false; + } + // If swfobject was already appended once, just catch the callback and run + if(typeof franzProps.callback !== "undefined" && typeof franzProps.callback === "function") franzProps.callback(); + } +} + +franz.prototype = { alpha: [], red: [], green: [], @@ -36,60 +79,38 @@ var franz = { light: [], origIndex: [], - - init: function(canvas_id) { - franz.canvas = document.getElementById(canvas_id); - franz.ctx = franz.canvas.getContext('2d'); - return false; - }, - - clone: function(obj) { - if(typeof obj !== "undefined") { - /* Recursively iterate through objects and clone them (Don't even try to put this on the Object prototype (recursion fail)) */ - var returnObj = (obj instanceof Array) ? [] : {}; - - for(i in obj) { - if(i == 'clone') continue; - if(obj[i] != null && typeof obj[i] == "object") { - returnObj[i] = franz.clone(obj[i]); - } else { - returnObj[i] = obj[i]; - } - } - - return returnObj; - } - }, - + loadImg: function(img_src) { - franz.img = new Image(); - franz.img.onload = function() { - franz.ctx.drawImage(franz.img, 0, 0, 100, 100); - setTimeout(function() { franz.getColors(); }, 100); + /* If you're looking for the non- portion of this, check the associated Flash files. */ + var working = this; + working.img = new Image(); + working.img.onload = function() { + working.ctx.drawImage(working.img, 0, 0, 100, 100); + setTimeout(function() { working.getColors(); }, 100); } - franz.img.src = img_src; - return false; + working.img.src = img_src; }, getColors: function() { + /* If you're looking for the non- portion of this, check the associated Flash files. */ var hidden_canvas = document.getElementById("lol_hidden"), extra_ctx = hidden_canvas.getContext('2d'); - extra_ctx.drawImage(franz.img, 0, 0, 33, 33); + extra_ctx.drawImage(this.img, 0, 0, 33, 33); var imageData = extra_ctx.getImageData(1, 1, 32, 32).data; for(var i = 0; i*4 < imageData.length; i++) { - franz.red[i] = imageData[i*4]; - franz.green[i] = imageData[i*4 + 1]; - franz.blue[i] = imageData[i*4 + 2]; - franz.alpha[i] = imageData[i*4 + 3]; + this.red[i] = imageData[i*4]; + this.green[i] = imageData[i*4 + 1]; + this.blue[i] = imageData[i*4 + 2]; + this.alpha[i] = imageData[i*4 + 3]; } /* get hue sat val array */ - franz.RGBtoHSVHL(); + this.RGBtoHSVHL(); /* show original image */ - franz.displayImg(); + this.displayImg(); return false; }, @@ -98,13 +119,13 @@ var franz = { RGBtoHSVHL: function() { var min, max; - for(var i = 0; i < franz.alpha.length; i++) { - franz.value[i] = franz.getValHSV(franz.red[i],franz.green[i],franz.blue[i]); - franz.satV[i] = franz.getSatHSV(franz.red[i],franz.green[i],franz.blue[i]); - franz.hue[i] = franz.getHue(franz.red[i],franz.green[i],franz.blue[i]); + for(var i = 0; i < this.alpha.length; i++) { + this.value[i] = this.getValHSV(this.red[i], this.green[i], this.blue[i]); + this.satV[i] = this.getSatHSV(this.red[i], this.green[i], this.blue[i]); + this.hue[i] = this.getHue(this.red[i], this.green[i], this.blue[i]); - franz.satL[i] = franz.getSatHSL(franz.red[i],franz.green[i],franz.blue[i]); - franz.light[i] = franz.getLightHSL(franz.red[i],franz.green[i],franz.blue[i]); + this.satL[i] = this.getSatHSL(this.red[i], this.green[i], this.blue[i]); + this.light[i] = this.getLightHSL(this.red[i], this.green[i], this.blue[i]); } return false @@ -148,7 +169,7 @@ var franz = { getSatHSL: function(red, green, blue) { var min = Math.min(red, Math.min(green, blue)), max = Math.max(red, Math.max(green, blue)), - lightness = franz.getLightHSL(), + lightness = this.getLightHSL(), sat; if(min == max) return 0; @@ -166,10 +187,11 @@ var franz = { }, displayColors: function(order_array) { + console.log("displaying colors"); var docStr = ""; - for(var i = 0; i < franz.alpha.length; i++) { - docStr += '
'; + for(var i = 0; i < this.alpha.length; i++) { + docStr += '
'; } document.getElementById("log_colors").innerHTML = docStr; @@ -182,48 +204,39 @@ var franz = { return false; }, - 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 < franz.alpha.length; i++) { - franz.origIndex[i] = i; - } - return false; - }, - displayImg: function() { - franz.resetIndex(); - franz.displayColors(franz.origIndex); + this.resetIndex(); + this.displayColors(this.origIndex); return false; }, displayHue: function() { - franz.indexSort(franz.clone(franz.hue), 0, franz.alpha.length); - franz.displayColors(franz.origIndex); + this.indexSort(franz.util.clone(this.hue), 0, this.alpha.length); + this.displayColors(this.origIndex); return false; }, displaySat: function() { - franz.indexSort(franz.clone(franz.satV), 0, franz.alpha.length); - franz.displayColors(franz.origIndex); + this.indexSort(franz.util.clone(this.satV), 0, this.alpha.length); + this.displayColors(this.origIndex); return false; }, displayVal: function() { - franz.indexSort(franz.clone(franz.value), 0, franz.alpha.length); - franz.displayColors(franz.origIndex); + this.indexSort(franz.util.clone(this.value), 0, this.alpha.length); + this.displayColors(this.origIndex); return false; }, displaySatL: function() { - franz.indexSort(franz.clone(franz.satL), 0, franz.alpha.length); - franz.displayColors(franz.origIndex); + this.indexSort(franz.util.clone(this.satL), 0, this.alpha.length); + this.displayColors(this.origIndex); return false; }, displayLight: function() { - franz.indexSort(franz.clone(franz.light), 0, franz.alpha.length); - franz.displayColors(franz.origIndex); + this.indexSort(franz.util.clone(this.light), 0, this.alpha.length); + this.displayColors(this.origIndex); return false; }, @@ -242,7 +255,6 @@ var franz = { count++; } } - console.log("frequency of values between " + i*step + " and " + (i*step + interval) + " = " + count); densityArray[i] = count; } @@ -251,18 +263,45 @@ var franz = { /* bubble sort floats around and pops in your face */ indexSort: function(inputArray, start, end) { - franz.resetIndex(); + this.resetIndex(); for (var i = start; i < end; i++) { for (var j = end-1; j >= start; j--) { var diff = inputArray[j] - inputArray[i] if (diff > 0) { inputArray.swap(i,j+1); - franz.origIndex.swap(i,j+1); + this.origIndex.swap(i,j+1); } } } }, + 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.alpha.length; i++) { + this.origIndex[i] = i; + } + return false; + } +} + +franz.util = { + clone: function(obj) { + /* Utility function for deep cloning */ + if(typeof obj !== "undefined") { + var returnObj = (obj instanceof Array) ? [] : {}; + + for(i in obj) { + if(obj[i] != null && typeof obj[i] == "object") { + returnObj[i] = franz.util.clone(obj[i]); + } else { + returnObj[i] = obj[i]; + } + } + + return returnObj; + } + }, + RGBtoHex: function(rgb) { var hex = []; diff --git a/js/swfobject.js b/js/swfobject.js new file mode 100644 index 0000000..03fd016 --- /dev/null +++ b/js/swfobject.js @@ -0,0 +1,4 @@ +/* SWFObject v2.2 + is released under the MIT License +*/ +var swfobject=function(){var D="undefined",r="object",S="Shockwave Flash",W="ShockwaveFlash.ShockwaveFlash",q="application/x-shockwave-flash",R="SWFObjectExprInst",x="onreadystatechange",O=window,j=document,t=navigator,T=false,U=[h],o=[],N=[],I=[],l,Q,E,B,J=false,a=false,n,G,m=true,M=function(){var aa=typeof j.getElementById!=D&&typeof j.getElementsByTagName!=D&&typeof j.createElement!=D,ah=t.userAgent.toLowerCase(),Y=t.platform.toLowerCase(),ae=Y?/win/.test(Y):/win/.test(ah),ac=Y?/mac/.test(Y):/mac/.test(ah),af=/webkit/.test(ah)?parseFloat(ah.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):false,X=!+"\v1",ag=[0,0,0],ab=null;if(typeof t.plugins!=D&&typeof t.plugins[S]==r){ab=t.plugins[S].description;if(ab&&!(typeof t.mimeTypes!=D&&t.mimeTypes[q]&&!t.mimeTypes[q].enabledPlugin)){T=true;X=false;ab=ab.replace(/^.*\s+(\S+\s+\S+$)/,"$1");ag[0]=parseInt(ab.replace(/^(.*)\..*$/,"$1"),10);ag[1]=parseInt(ab.replace(/^.*\.(.*)\s.*$/,"$1"),10);ag[2]=/[a-zA-Z]/.test(ab)?parseInt(ab.replace(/^.*[a-zA-Z]+(.*)$/,"$1"),10):0}}else{if(typeof O.ActiveXObject!=D){try{var ad=new ActiveXObject(W);if(ad){ab=ad.GetVariable("$version");if(ab){X=true;ab=ab.split(" ")[1].split(",");ag=[parseInt(ab[0],10),parseInt(ab[1],10),parseInt(ab[2],10)]}}}catch(Z){}}}return{w3:aa,pv:ag,wk:af,ie:X,win:ae,mac:ac}}(),k=function(){if(!M.w3){return}if((typeof j.readyState!=D&&j.readyState=="complete")||(typeof j.readyState==D&&(j.getElementsByTagName("body")[0]||j.body))){f()}if(!J){if(typeof j.addEventListener!=D){j.addEventListener("DOMContentLoaded",f,false)}if(M.ie&&M.win){j.attachEvent(x,function(){if(j.readyState=="complete"){j.detachEvent(x,arguments.callee);f()}});if(O==top){(function(){if(J){return}try{j.documentElement.doScroll("left")}catch(X){setTimeout(arguments.callee,0);return}f()})()}}if(M.wk){(function(){if(J){return}if(!/loaded|complete/.test(j.readyState)){setTimeout(arguments.callee,0);return}f()})()}s(f)}}();function f(){if(J){return}try{var Z=j.getElementsByTagName("body")[0].appendChild(C("span"));Z.parentNode.removeChild(Z)}catch(aa){return}J=true;var X=U.length;for(var Y=0;Y0){for(var af=0;af0){var ae=c(Y);if(ae){if(F(o[af].swfVersion)&&!(M.wk&&M.wk<312)){w(Y,true);if(ab){aa.success=true;aa.ref=z(Y);ab(aa)}}else{if(o[af].expressInstall&&A()){var ai={};ai.data=o[af].expressInstall;ai.width=ae.getAttribute("width")||"0";ai.height=ae.getAttribute("height")||"0";if(ae.getAttribute("class")){ai.styleclass=ae.getAttribute("class")}if(ae.getAttribute("align")){ai.align=ae.getAttribute("align")}var ah={};var X=ae.getElementsByTagName("param");var ac=X.length;for(var ad=0;ad'}}aa.outerHTML='"+af+"";N[N.length]=ai.id;X=c(ai.id)}else{var Z=C(r);Z.setAttribute("type",q);for(var ac in ai){if(ai[ac]!=Object.prototype[ac]){if(ac.toLowerCase()=="styleclass"){Z.setAttribute("class",ai[ac])}else{if(ac.toLowerCase()!="classid"){Z.setAttribute(ac,ai[ac])}}}}for(var ab in ag){if(ag[ab]!=Object.prototype[ab]&&ab.toLowerCase()!="movie"){e(Z,ab,ag[ab])}}aa.parentNode.replaceChild(Z,aa);X=Z}}return X}function e(Z,X,Y){var aa=C("param");aa.setAttribute("name",X);aa.setAttribute("value",Y);Z.appendChild(aa)}function y(Y){var X=c(Y);if(X&&X.nodeName=="OBJECT"){if(M.ie&&M.win){X.style.display="none";(function(){if(X.readyState==4){b(Y)}else{setTimeout(arguments.callee,10)}})()}else{X.parentNode.removeChild(X)}}}function b(Z){var Y=c(Z);if(Y){for(var X in Y){if(typeof Y[X]=="function"){Y[X]=null}}Y.parentNode.removeChild(Y)}}function c(Z){var X=null;try{X=j.getElementById(Z)}catch(Y){}return X}function C(X){return j.createElement(X)}function i(Z,X,Y){Z.attachEvent(X,Y);I[I.length]=[Z,X,Y]}function F(Z){var Y=M.pv,X=Z.split(".");X[0]=parseInt(X[0],10);X[1]=parseInt(X[1],10)||0;X[2]=parseInt(X[2],10)||0;return(Y[0]>X[0]||(Y[0]==X[0]&&Y[1]>X[1])||(Y[0]==X[0]&&Y[1]==X[1]&&Y[2]>=X[2]))?true:false}function v(ac,Y,ad,ab){if(M.ie&&M.mac){return}var aa=j.getElementsByTagName("head")[0];if(!aa){return}var X=(ad&&typeof ad=="string")?ad:"screen";if(ab){n=null;G=null}if(!n||G!=X){var Z=C("style");Z.setAttribute("type","text/css");Z.setAttribute("media",X);n=aa.appendChild(Z);if(M.ie&&M.win&&typeof j.styleSheets!=D&&j.styleSheets.length>0){n=j.styleSheets[j.styleSheets.length-1]}G=X}if(M.ie&&M.win){if(n&&typeof n.addRule==r){n.addRule(ac,Y)}}else{if(n&&typeof j.createTextNode!=D){n.appendChild(j.createTextNode(ac+" {"+Y+"}"))}}}function w(Z,X){if(!m){return}var Y=X?"visible":"hidden";if(J&&c(Z)){c(Z).style.visibility=Y}else{v("#"+Z,"visibility:"+Y)}}function L(Y){var Z=/[\\\"<>\.;]/;var X=Z.exec(Y)!=null;return X&&typeof encodeURIComponent!=D?encodeURIComponent(Y):Y}var d=function(){if(M.ie&&M.win){window.attachEvent("onunload",function(){var ac=I.length;for(var ab=0;ab