diff --git a/css/example.css b/css/example.css
index fae0a06..1b1a1fc 100644
--- a/css/example.css
+++ b/css/example.css
@@ -71,8 +71,6 @@ h1 {
#options { display: none; padding-top: 6px; }
-#options a:first-child { margin-left: 66px; /* Huzzah for decent CSS support, but horrid CSS right here. :D */ }
-
a, a:visited { color: #f4d496; text-decoration: none; }
a:hover { text-decoration: underline; }
@@ -112,7 +110,7 @@ a:hover { text-decoration: underline; }
width: 370px;
}
-.img_submit, #hsv a {
+.img_submit, #hsv a, #hsl a {
border: 1px solid #55a2c9;
background-color: #498fb2;
color: #fff;
@@ -121,16 +119,18 @@ a:hover { text-decoration: underline; }
-webkit-border-radius: 4px;
}
-#hsv a {
+#hsv a, #hsl a {
display: block;
- width: 120px;
- padding: 3px 5px;
+ width: 135px;
+ padding: 3px 0;
text-align: center;
float: left;
- margin-right: 15px;
+ margin-right: 10px;
text-decoration: none;
}
+#options a:last-child { margin-right: 0px; }
+
#try_these {
clear: both;
}
@@ -148,7 +148,6 @@ a:hover { text-decoration: underline; }
width: 70px;
}
-
#log_colors { padding-left: 4px; }
.color_box {
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a5be9f7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,92 @@
+
+
+
+
+ Franz - client side color palettes from logos
+
+
+
+
+
+
+
+Franz - client side color swatches
+
+
+
+
+
+
+
+
+
diff --git a/index.php b/index.php
index f7e40a5..f3ed6f0 100644
--- a/index.php
+++ b/index.php
@@ -21,8 +21,25 @@
img_input = document.getElementById("img_input");
$("#franz_form").submit(lol);
+
+ $("#upload_button").click(function() {
+ var f_form = $("#franz_form"),
+ uploader = $("#uploader");
+
+ if(f_form[0].style.display == "none") {
+ uploader.hide();
+ f_form.fadeIn("slow");
+ $(this).html("Upload an image");
+ } else {
+ f_form.hide();
+ uploader.fadeIn("slow");
+ $(this).html("Use an existing image?");
+ }
+
+ return false;
+ });
- $("#try_these a").click(function() {
+ $("#try_these a").click(function() {
img_input.value = this.innerHTML;
return false;
});
@@ -46,23 +63,17 @@
franz.displayVal();
return false;
});
+
+ $("#sort_light").click(function() {
+ franz.displayLight();
+ return false;
+ });
+
+ $("#sort_satL").click(function() {
+ franz.displaySatL();
+ return false;
+ });
- $("#upload_button").click(function() {
- var f_form = $("#franz_form"),
- uploader = $("#uploader");
-
- if(f_form[0].style.display == "none") {
- uploader.hide();
- f_form.fadeIn("slow");
- $(this).html("Upload an image");
- } else {
- f_form.hide();
- uploader.fadeIn("slow");
- $(this).html("Use an existing image?");
- }
-
- return false;
- });
});
@@ -107,8 +118,9 @@
diff --git a/js/franz.js b/js/franz.js
index ba781a6..e80c2c8 100644
--- a/js/franz.js
+++ b/js/franz.js
@@ -18,7 +18,6 @@ var franz = {
canvas: {},
ctx: {},
img: {},
- final_colors: [],
red: [],
green: [],
blue: [],
@@ -26,6 +25,8 @@ var franz = {
hue: [],
sat: [],
val: [],
+ satL: [],
+ light: [],
origIndex: [],
init: function(canvas_id) {
@@ -75,54 +76,31 @@ var franz = {
}
/* get hue sat val array */
- franz.RGBtoHSV();
+ franz.RGBtoHSVHL();
/* show original image */
franz.displayImg();
return false;
},
-
- displayImg: function() {
- var docString = "";
-
- for(var i = 0; i < franz.alpha.length; i++) {
- docString += '';
- }
-
- document.getElementById("log_colors").innerHTML = docString;
- $("#container_bottom").fadeIn("slow");
-
- return false;
- },
- /* Converts RGB to the Hue/Saturation/Value model */
- RGBtoHSV: function() {
- var min, max, delta;
+ /* Converts RGB to the Hue/Saturation/Value, Saturation/Lightness model */
+ RGBtoHSVHL: function() {
+ var min, max;
for(var i = 0; i < franz.alpha.length; i++) {
franz.val[i] = franz.getValHSV(franz.red[i],franz.green[i],franz.blue[i]);
franz.sat[i] = franz.getSatHSV(franz.red[i],franz.green[i],franz.blue[i]);
- franz.hue[i] = franz.getHueHSV(franz.red[i],franz.green[i],franz.blue[i]);
+ franz.hue[i] = franz.getHue(franz.red[i],franz.green[i],franz.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]);
}
return false
},
-
- getValHSV: function(red, green, blue) { return Math.max(red,Math.max(green,blue)); },
-
- getSatHSV: function(red, green, blue) {
- var min, max, delta, sat;
-
- min = Math.min(red,Math.min(green,blue));
- max = Math.max(red,Math.max(green,blue));
- delta = max - min;
- sat = delta / max;
-
- return sat;
- },
- getHueHSV: function(red,green,blue) {
+ getHue: function(red,green,blue) {
var min, max, delta, hue;
min = Math.min(red,Math.min(green,blue));
@@ -147,19 +125,47 @@ var franz = {
return hue;
},
- displayHue: function() {
+ getSatHSV: function(red, green, blue) {
+ var min, max, delta, sat;
+
+ min = Math.min(red,Math.min(green,blue));
+ max = Math.max(red,Math.max(green,blue));
+ delta = max - min;
+ sat = delta / max;
+
+ return sat;
+ },
+
+ getValHSV: function(red, green, blue) { return Math.max(red,Math.max(green,blue)); },
+
+ getSatHSL: function(red, green, blue) {
+ var min, max, sat;
+ var lightness = franz.getLightHSL();
+
+ min = Math.min(red,Math.min(green,blue));
+ max = Math.max(red,Math.max(green,blue));
+
+ if (min == max) return 0;
+
+ if (lightness < 1/2) sat = (max-min)/(max+min);
+ else sat = (max-min)/(2 - (max+min));
+
+ return sat;
+ },
+
+ getLightHSL: function(red, green, blue) {
+ var min, max;
+ min = Math.min(red,Math.min(green,blue));
+ max = Math.max(red,Math.max(green,blue));
+ return 1/2*(min+max);
+ },
+
+ /* routines to display color swatches */
+ displayColors: function(order_array) {
var docString = "";
- /* 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;
- }
-
- franz.qsort(franz.clone(franz.hue), 0, franz.alpha.length);
-
for(var i = 0; i < franz.alpha.length; i++) {
- docString += '';
+ docString += '';
}
document.getElementById("log_colors").innerHTML = docString;
@@ -167,51 +173,53 @@ var franz = {
return false;
},
-
- displaySat: function() {
- var docString = "";
-
+ resetIndex: function() {
/* keep track of original index so we don't have to revert
- back to RGB just to display output */
+ back to RGB just to display output */
for (var i=0; i < franz.alpha.length; i++) {
franz.origIndex[i] = i;
}
-
- franz.qsort(franz.clone(franz.sat), 0, franz.alpha.length);
-
- for(var i = 0; i < franz.alpha.length; i++) {
- docString += '';
- }
-
- document.getElementById("log_colors").innerHTML = docString;
- $("#container_bottom").fadeIn("slow");
-
return false;
},
-
- displayVal: function() {
- var docString = "";
-
- /* 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;
- }
-
- franz.qsort(franz.clone(franz.val), 0, franz.alpha.length);
-
- for(var i = 0; i < franz.alpha.length; i++) {
- docString += '';
- }
-
- document.getElementById("log_colors").innerHTML = docString;
- $("#container_bottom").fadeIn("slow");
-
+
+ displayImg: function() {
+ franz.resetIndex();
+ franz.displayColors(franz.origIndex);
+ return false;
+ },
+ displayHue: function() {
+ franz.resetIndex();
+ franz.qsort(franz.clone(franz.hue), 0, franz.alpha.length);
+ franz.displayColors(franz.origIndex);
+ return false;
+ },
+ displaySat: function() {
+ franz.resetIndex();
+ franz.qsort(franz.clone(franz.sat), 0, franz.alpha.length);
+ franz.displayColors(franz.origIndex);
+ return false;
+ },
+ displayVal: function() {
+ franz.resetIndex();
+ franz.qsort(franz.clone(franz.val), 0, franz.alpha.length);
+ franz.displayColors(franz.origIndex);
+ return false;
+ },
+ displaySatL: function() {
+ franz.resetIndex();
+ franz.qsort(franz.clone(franz.satL), 0, franz.alpha.length);
+ franz.displayColors(franz.origIndex);
+ return false;
+ },
+ displayLight: function() {
+ franz.resetIndex();
+ franz.qsort(franz.clone(franz.light), 0, franz.alpha.length);
+ franz.displayColors(franz.origIndex);
return false;
},
- /* quicksort algorithm with that also swaps original index */
+ /* quicksort algorithm that also swaps an index array */
sort_Partition: function(array, begin, end, pivot) {
var piv=array[pivot];
array.swap(pivot, end-1);