<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無題のページ</title>
<link rel="Stylesheet" type="text/css" href="../js/yui_2.5.1/reset-fonts-grids/reset-fonts-grids.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="doc3">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="../js/yui_2.5.1/utilities/utilities.js" />
</Scripts>
</asp:ScriptManager>
<div id="hd">header</div>
<div id="bd">
#<input type="text" id="color" />
<input type="button" id="calc" value="calc" />
<input type="text" id="hsv" />
<input type="button" id="calc2" value="calc" />
<input type="button" id="createColors" value="create" />
<div id="colors">
</div>
</div>
<div id="ft">footer</div>
</div>
</form>
<script type="text/javascript">
Test = {
init : function(){
YAHOO.util.Event.on("calc","click",this.calc_click,this,true);
YAHOO.util.Event.on("calc2","click",this.calc2_click,this,true);
YAHOO.util.Event.on("createColors","click",this.createColors_click,this,true);
}
,calc_click : function(evt){
var rgb = document.getElementById("color").value;
var hsv = this.rgbToHsv(rgb);
document.getElementById("hsv").value = hsv.h + "," + hsv.s + "," + hsv.v;
}
,calc2_click : function(evt){
var hsvstr = document.getElementById("hsv").value;
var arr = hsvstr.split(",");
var hsv = {h : arr[0],s : arr[1],v : arr[2]};
var rgb = this.hsvToRgb(hsv);
document.getElementById("color").value = rgb;
}
,createColors_click : function(evt){
var colorPanel = document.getElementById("colors");
colorPanel.innerHTML = "";
var basergb =document.getElementById("color").value;
var hsv = this.rgbToHsv(basergb);
var panel;
//base color
var colorCode = "#" + basergb;
panel = document.createElement("div");
panel.style.backgroundColor = colorCode;
panel.innerHTML = colorCode;
colorPanel.appendChild(panel);
//decrease saturation
var hsv2 = {h : hsv.h,s : hsv.s * 0.5,v : hsv.v};
colorCode = "#" + this.hsvToRgb(hsv2);
panel = document.createElement("div");
panel.style.backgroundColor = colorCode;
if(hsv2.v < 200) panel.style.color = "white";
panel.innerHTML = colorCode;
colorPanel.appendChild(panel);
hsv2 = {h : hsv.h,s : hsv.s * 0.25 ,v : hsv.v};
colorCode = "#" + this.hsvToRgb(hsv2);
panel = document.createElement("div");
panel.style.backgroundColor = colorCode;
if(hsv2.v < 200) panel.style.color = "white";
panel.innerHTML = colorCode;
colorPanel.appendChild(panel);
hsv2 = {h : hsv.h,s : hsv.s ,v : hsv.v * 0.7};
colorCode = "#" + this.hsvToRgb(hsv2);
panel = document.createElement("div");
panel.style.backgroundColor = colorCode;
if(hsv2.v < 200) panel.style.color = "white";
panel.innerHTML = colorCode;
colorPanel.appendChild(panel);
hsv2 = {h : hsv.h,s : hsv.s ,v : hsv.v * 0.49};
colorCode = "#" + this.hsvToRgb(hsv2);
panel = document.createElement("div");
panel.style.backgroundColor = colorCode;
if(hsv2.v < 200) panel.style.color = "white";
panel.innerHTML = colorCode;
colorPanel.appendChild(panel);
}
,rgbToHsv : function(rgb){
var r =hexToInt( rgb.substring(0,2) );
var g =hexToInt( rgb.substring(2,4) );
var b =hexToInt( rgb.substring(4,6) );
var hsv = { h : 0, s : 0 ,v : 0};
var min = Math.min( Math.min(r,g),b);
var max = Math.max( Math.max(r,g),b);
if(max == 0) return hsv;
hsv.v = max;
hsv.s = 255 * (max - min) / max;
if(max == min){
hsv.h = 0; //grayなのでどうでもいい
}
else{
if(r == max){
hsv.h = 60 * ( (g - b) / (max - min));
}
else if(g == max){
hsv.h = 60 * ( 2 + (b - r) / (max - min));
}
else if(b == max){
hsv.h = 60 * ( 4 + (r - g) / (max - min));
}
if(hsv.h < 0) hsv.h += 360;
if(hsv.h >= 360) hsv.h -= 360;
}
return hsv;
}
,hsvToRgb : function(hsv){
var rgb = "000000";
var r = 0;
var g = 0;
var b = 0;
if(hsv.s == 0) {
r = hsv.v;
g = hsv.v;
b = hsv.v;
}
else{
var hi = Math.floor(hsv.h / 60);
var f = 0.0;
var m = 0.0;
var n = 0.0;
var k = 0.0;
f = (hsv.h / 60) - hi ;
m = hsv.v * ( 1 - (hsv.s / 255)) + 0.0;
n = hsv.v * ( 1 - ((hsv.s / 255) * f)) + 0.0;
k = hsv.v * ( 1 - ((hsv.s / 255) * (1 - f) )) + 0.0;
switch(hi){
case 0:
r = hsv.v;g = k;b = m;
break;
case 1:
r = n;g = hsv.v;b = m;
break;
case 2:
r = m;g = hsv.v;b = k;
break;
case 3:
r = m;g = n;b = hsv.v;
break;
case 4:
r = k;g = m;b = hsv.v;
break;
case 5:
r = hsv.v;g = m;b = n;
break;
}
}
rgb = intToHex(r) + intToHex(g) + intToHex(b);
return rgb;
}
}
function hexToInt (hex){
var n = parseInt(hex,16) ;
return n;
}
function intToHex(dec){
dec = parseInt(dec , 10);
if(! isNaN(dec)){
hexChars = "0123456789ABCDEF";
if( dec > 255){
return "out of range";
}
var i = dec % 16;
var j = (dec -i) / 16;
var result = "";
result += hexChars.charAt(j) + hexChars.charAt(i);
return result;
}
else{
return NaN;
}
}
function RightString(str,len){
return str.substr(str.length - len,len)
}
YAHOO.util.Event.onDOMReady(Test.init,Test,true);
</script>
</body>
</html>
