Merging with Dominicks most recent work...
This commit is contained in:
Veno Server
commit
6dd80339fb
4 changed files with 216 additions and 105 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
92
index.html
Normal file
92
index.html
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Franz - client side color palettes from logos</title>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/example.css">
|
||||
<script type="text/javascript" src="http://images.webs.com/static/global/js/jquery/jquery-1.3.2.min.js"></script>
|
||||
<script type="text/javascript" src="js/franz.js"></script>
|
||||
<script type="text/javascript">
|
||||
var img_input;
|
||||
|
||||
$(document).ready(function() {
|
||||
franz.init("lol");
|
||||
|
||||
img_input = document.getElementById("img_input");
|
||||
$("#franz_form").submit(function() {
|
||||
franz.loadImg(img_input.value);
|
||||
$("#hsv").removeClass("hideme");
|
||||
$("#hsl").removeClass("hideme");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#try_these a").click(function(event){
|
||||
img_input.value = this.innerHTML;
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#sort_hue").click(function(event){
|
||||
franz.displayHue();
|
||||
return false;
|
||||
});
|
||||
$("#sort_sat").click(function(event){
|
||||
franz.displaySat();
|
||||
return false;
|
||||
});
|
||||
$("#sort_val").click(function(event){
|
||||
franz.displayVal();
|
||||
return false;
|
||||
});
|
||||
$("#sort_light").click(function(event){
|
||||
franz.displayLight();
|
||||
return false;
|
||||
});
|
||||
$("#sort_satL").click(function(event){
|
||||
franz.displaySatL();
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Franz - client side color swatches</h1>
|
||||
|
||||
<div id="container_top">
|
||||
<div id="lol_container">
|
||||
<canvas id="lol" width="100" height="100"></canvas>
|
||||
<canvas id="lol_hidden" width="19" height="19"></canvas>
|
||||
</div>
|
||||
|
||||
<div id="interface">
|
||||
<form method="post" action="#" id="franz_form">
|
||||
<input type="text" id="img_input" value="lol.png">
|
||||
<input type="submit" id="img_submit" value="Go for it!">
|
||||
</form>
|
||||
<p id="hsv" class="hideme"><a href="#" id="sort_hue">Sort Hue</a> <a href="#" id="sort_sat">Sort Saturation</a> <a href="#" id="sort_val">Sort Value</a> </p>
|
||||
<p id="hsl" class="hideme"><a href="#" id="sort_satL">Sort Saturation HSL</a> <a href="#" id="sort_light">Sort Lightness</a> </p>
|
||||
<p id="try_these"><strong>Try out:</strong> <a href="#">lol.png</a>, <a href="#">testjubs.jpg</a>, <a href="#">stars.jpg</a>, <a href="#">1600.jpg</a>, <a href="#">fallout.jpg</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- might log colors later on
|
||||
<ul id="logHSV">
|
||||
<li><p id="logHue">Hue: </p></li>
|
||||
<li><p id="logSat">Sat: </p></li>
|
||||
<li><p id="logVal">Val: </p></li>
|
||||
</ul> -->
|
||||
</div>
|
||||
|
||||
<div id="container_bottom">
|
||||
<div id="log_colors">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="footer">
|
||||
Experiment in color theme generator <br> brought to you by <a href="http://twitter.com/ryanmcgrath" title="Ryan McGrath">Ryan McGrath</a> & <a href="http://twitter.com/enotionz" title="Dominick Pham">Dominick Pham</a>,
|
||||
with some help from others.
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
44
index.php
44
index.php
|
|
@ -22,7 +22,24 @@
|
|||
img_input = document.getElementById("img_input");
|
||||
$("#franz_form").submit(lol);
|
||||
|
||||
$("#try_these a").click(function() {
|
||||
$("#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() {
|
||||
img_input.value = this.innerHTML;
|
||||
return false;
|
||||
});
|
||||
|
|
@ -47,22 +64,16 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
$("#upload_button").click(function() {
|
||||
var f_form = $("#franz_form"),
|
||||
uploader = $("#uploader");
|
||||
$("#sort_light").click(function() {
|
||||
franz.displayLight();
|
||||
return false;
|
||||
});
|
||||
|
||||
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?");
|
||||
}
|
||||
$("#sort_satL").click(function() {
|
||||
franz.displaySatL();
|
||||
return false;
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
|
@ -108,7 +119,8 @@
|
|||
<p id="hsv">
|
||||
<a href="#" id="sort_hue" title="Sort by Hue">Sort by Hue</a>
|
||||
<a href="#" id="sort_sat" title="Sort by Saturation">Sort by Saturation</a>
|
||||
<a href="#" id="sort_val" title="Sort by Value">Sort by Value</a>
|
||||
<a href="#" id="sort_satL" title="Sort by Saturation HSL">Sort by Sat HSL</a>
|
||||
<a href="#" id="sort_light" title="Sort by Lightness">Sort by Lightness</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
176
js/franz.js
176
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,7 +76,7 @@ var franz = {
|
|||
}
|
||||
|
||||
/* get hue sat val array */
|
||||
franz.RGBtoHSV();
|
||||
franz.RGBtoHSVHL();
|
||||
|
||||
/* show original image */
|
||||
franz.displayImg();
|
||||
|
|
@ -83,46 +84,23 @@ var franz = {
|
|||
return false;
|
||||
},
|
||||
|
||||
displayImg: function() {
|
||||
var docString = "";
|
||||
|
||||
for(var i = 0; i < franz.alpha.length; i++) {
|
||||
docString += '<div class="color_box" style="background-color: rgb(' + franz.red[i] + ', ' + franz.green[i] + ',' + franz.blue[i] + ');"></div>';
|
||||
}
|
||||
|
||||
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,71 +125,101 @@ var franz = {
|
|||
return hue;
|
||||
},
|
||||
|
||||
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 = "";
|
||||
|
||||
for(var i = 0; i < franz.alpha.length; i++) {
|
||||
docString += '<div class="color_box" style="background-color: rgb(' + franz.red[order_array[i]] + ', ' + franz.green[order_array[i]] + ',' + franz.blue[order_array[i]] + ');"></div>';
|
||||
}
|
||||
|
||||
document.getElementById("log_colors").innerHTML = docString;
|
||||
$("#container_bottom").fadeIn("slow");
|
||||
|
||||
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);
|
||||
return false;
|
||||
},
|
||||
displayHue: 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.resetIndex();
|
||||
franz.qsort(franz.clone(franz.hue), 0, franz.alpha.length);
|
||||
|
||||
for(var i = 0; i < franz.alpha.length; i++) {
|
||||
docString += '<div class="color_box" style="background-color: rgb(' + franz.red[franz.origIndex[i]] + ', ' + franz.green[franz.origIndex[i]] + ',' + franz.blue[franz.origIndex[i]] + ');"></div>';
|
||||
}
|
||||
|
||||
document.getElementById("log_colors").innerHTML = docString;
|
||||
$("#container_bottom").fadeIn("slow");
|
||||
|
||||
franz.displayColors(franz.origIndex);
|
||||
return false;
|
||||
},
|
||||
|
||||
displaySat: 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.resetIndex();
|
||||
franz.qsort(franz.clone(franz.sat), 0, franz.alpha.length);
|
||||
|
||||
for(var i = 0; i < franz.alpha.length; i++) {
|
||||
docString += '<div class="color_box" style="background-color: rgb(' + franz.red[franz.origIndex[i]] + ', ' + franz.green[franz.origIndex[i]] + ',' + franz.blue[franz.origIndex[i]] + ');"></div>';
|
||||
}
|
||||
|
||||
document.getElementById("log_colors").innerHTML = docString;
|
||||
$("#container_bottom").fadeIn("slow");
|
||||
|
||||
franz.displayColors(franz.origIndex);
|
||||
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.resetIndex();
|
||||
franz.qsort(franz.clone(franz.val), 0, franz.alpha.length);
|
||||
|
||||
for(var i = 0; i < franz.alpha.length; i++) {
|
||||
docString += '<div class="color_box" style="background-color: rgb(' + franz.red[franz.origIndex[i]] + ', ' + franz.green[franz.origIndex[i]] + ',' + franz.blue[franz.origIndex[i]] + ');"></div>';
|
||||
}
|
||||
|
||||
document.getElementById("log_colors").innerHTML = docString;
|
||||
$("#container_bottom").fadeIn("slow");
|
||||
|
||||
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);
|
||||
|
|
|
|||
Reference in a new issue