[clinton/scratch.git] / picker / picker.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Color Picker — Raphaël</title>
        <style media="screen">
            body {
                background: #333;
                color: #999;
                font: 300 100.01%/1.2 "Segoe UI", "Helvetica Neue", Helvetica, "Arial Unicode", Arial, sans-serif;
                margin: 0 30px;
            }
            #content {
                width: 640px;
                height: 480px;
                position: relative;
            }
            h1 {
                font-weight: 300;
                font-size: 3em;
                position: absolute;
                right: 10px;
                bottom: 50px;
            }
            p {
                font-size: 2em;
            }
            #benefits {
                margin-top: 350px;
            }
            #copy a {
                color: #666;
                text-decoration: none;
            }
            #picker2 {
                width: 300px;
                position: absolute;
                top: 250px;
                left: 50%;
                margin-left: -150px;
            }
            #benefits {
                margin-bottom: 0;
            }
            #output {
                background: #eee;
                position: absolute;
                font-size: 30px;
                bottom: 10px;
                left: 20px;
                font-family: monospace;
                margin-top: -20px;
            }
            #copy {
                position: absolute;
                right: 10px;
                bottom: 10px;
                margin: 0;
                font-size: .6em;
                color: #666;
            }
            #values {
                position: absolute;
                left: 20px;
                top: 363px;
                font-size: .7em;
            }
        </style>
        <script src="raphael.js"></script>
        <script src="colorpicker.js"></script>
        <script src="colorwheel.js"></script>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
        Raphael(function () {
            var out = document.getElementById("output"),
                vr = document.getElementById("vr"),
                vg = document.getElementById("vg"),
                vb = document.getElementById("vb"),
                vh = document.getElementById("vh"),
                vh2 = document.getElementById("vh2"),
                vs = document.getElementById("vs"),
                vs2 = document.getElementById("vs2"),
                vv = document.getElementById("vv"),
                vl = document.getElementById("vl"),
            
            // this is where colorpicker created
                cp = Raphael.colorpicker(40, 20, 300, "#eee"),
                cp2 = Raphael.colorwheel(360, 20, 300, "#eee"),
            
                clr = Raphael.color("#eee");
            vr.innerHTML = clr.r;
            vg.innerHTML = clr.g;
            vb.innerHTML = clr.b;
            vh.innerHTML = vh2.innerHTML = Math.round(clr.h * 360) + "°";
            vs.innerHTML = vs2.innerHTML = Math.round(clr.s * 100) + "%";
            vv.innerHTML = Math.round(clr.v * 100) + "%";
            vl.innerHTML = Math.round(clr.l * 100) + "%";
            out.onkeyup = function () {
                cp.color(this.value);
                cp2.color(this.value);
            };
            // assigning onchange event handler
            var onchange = function (item) {
                return function (clr) {
                    out.value = clr.replace(/^#(.)\1(.)\2(.)\3$/, "#$1$2$3");
                    item.color(clr);
                    out.style.background = clr;
                    out.style.color = Raphael.rgb2hsb(clr).b < .5 ? "#fff" : "#000";
                    clr = Raphael.color(clr);
	            $.get ("http://localhost:8080/set/".concat
            (clr.r.toString (), "/", clr.g.toString (), "/", clr.b.toString ()));
                    vr.innerHTML = clr.r;
                    vg.innerHTML = clr.g;
                    vb.innerHTML = clr.b;
                    vh.innerHTML = vh2.innerHTML = Math.round(clr.h * 360) + "°";
                    vs.innerHTML = vs2.innerHTML = Math.round(clr.s * 100) + "%";
                    vv.innerHTML = Math.round(clr.v * 100) + "%";
                    vl.innerHTML = Math.round(clr.l * 100) + "%";
                };
            };
            cp.onchange = onchange(cp2);
            cp2.onchange = onchange(cp);
            // that’s it. Too easy
        });
        </script>
    </head>
    <body>
        <div id="content">
            <h1 id="h1">Color Picker</h1>
            <table id="values">
                <tr>
                    <th>R</th>
                    <td id="vr"></td>
                    <th>H</th>
                    <td id="vh"></td>
                    <th>H</th>
                    <td id="vh2"></td>
                </tr>
                <tr>
                    <th>G</th>
                    <td id="vg"></td>
                    <th>S</th>
                    <td id="vs"></td>
                    <th>S</th>
                    <td id="vs2"></td>
                </tr>
                <tr>
                    <th>B</th>
                    <td id="vb"></td>
                    <th>B</th>
                    <td id="vv"></td>
                    <th>L</th>
                    <td id="vl"></td>
                </tr>
            </table>
            <input type="text" id="output" value="#eeeeee">
            <p id="copy">
                Powered by <a href="http://raphaeljs.com/">Raphaël</a>
            </p>
        </div>
        <div id="picker2"></div>
    </body>
</html>
Commit	Line	Data
fa726f85 CE	1	<!DOCTYPE html>
	2	<html lang="en">
	3	<head>
	4	<meta charset="utf-8">
	5	<title>Color Picker — Raphaël</title>
	6	<style media="screen">
	7	body {
	8	background: #333;
	9	color: #999;
	10	font: 300 100.01%/1.2 "Segoe UI", "Helvetica Neue", Helvetica, "Arial Unicode", Arial, sans-serif;
	11	margin: 0 30px;
	12	}
	13	#content {
	14	width: 640px;
	15	height: 480px;
	16	position: relative;
	17	}
	18	h1 {
	19	font-weight: 300;
	20	font-size: 3em;
	21	position: absolute;
	22	right: 10px;
	23	bottom: 50px;
	24	}
	25	p {
	26	font-size: 2em;
	27	}
	28	#benefits {
	29	margin-top: 350px;
	30	}
	31	#copy a {
	32	color: #666;
	33	text-decoration: none;
	34	}
	35	#picker2 {
	36	width: 300px;
	37	position: absolute;
	38	top: 250px;
	39	left: 50%;
	40	margin-left: -150px;
	41	}
	42	#benefits {
	43	margin-bottom: 0;
	44	}
	45	#output {
	46	background: #eee;
	47	position: absolute;
	48	font-size: 30px;
	49	bottom: 10px;
	50	left: 20px;
	51	font-family: monospace;
	52	margin-top: -20px;
	53	}
	54	#copy {
	55	position: absolute;
	56	right: 10px;
	57	bottom: 10px;
	58	margin: 0;
	59	font-size: .6em;
	60	color: #666;
	61	}
	62	#values {
	63	position: absolute;
	64	left: 20px;
65	top: 363px;
66	font-size: .7em;
67	}
68	</style>
69	<script src="raphael.js"></script>
70	<script src="colorpicker.js"></script>
71	<script src="colorwheel.js"></script>
72	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
73	<script>
74	Raphael(function () {
75	var out = document.getElementById("output"),
76	vr = document.getElementById("vr"),
77	vg = document.getElementById("vg"),
78	vb = document.getElementById("vb"),
79	vh = document.getElementById("vh"),
80	vh2 = document.getElementById("vh2"),
81	vs = document.getElementById("vs"),
82	vs2 = document.getElementById("vs2"),
83	vv = document.getElementById("vv"),
84	vl = document.getElementById("vl"),
85
86	// this is where colorpicker created
87	cp = Raphael.colorpicker(40, 20, 300, "#eee"),
88	cp2 = Raphael.colorwheel(360, 20, 300, "#eee"),
89
90	clr = Raphael.color("#eee");
91	vr.innerHTML = clr.r;
92	vg.innerHTML = clr.g;
93	vb.innerHTML = clr.b;
94	vh.innerHTML = vh2.innerHTML = Math.round(clr.h * 360) + "°";
95	vs.innerHTML = vs2.innerHTML = Math.round(clr.s * 100) + "%";
96	vv.innerHTML = Math.round(clr.v * 100) + "%";
97	vl.innerHTML = Math.round(clr.l * 100) + "%";
98	out.onkeyup = function () {
99	cp.color(this.value);
100	cp2.color(this.value);
101	};
102	// assigning onchange event handler
103	var onchange = function (item) {
104	return function (clr) {
105	out.value = clr.replace(/^#(.)\1(.)\2(.)\3$/, "#$1$2$3");
106	item.color(clr);
107	out.style.background = clr;
108	out.style.color = Raphael.rgb2hsb(clr).b < .5 ? "#fff" : "#000";
109	clr = Raphael.color(clr);
110	$.get ("http://localhost:8080/set/".concat
111	(clr.r.toString (), "/", clr.g.toString (), "/", clr.b.toString ()));
112	vr.innerHTML = clr.r;
113	vg.innerHTML = clr.g;
114	vb.innerHTML = clr.b;
115	vh.innerHTML = vh2.innerHTML = Math.round(clr.h * 360) + "°";
116	vs.innerHTML = vs2.innerHTML = Math.round(clr.s * 100) + "%";
117	vv.innerHTML = Math.round(clr.v * 100) + "%";
118	vl.innerHTML = Math.round(clr.l * 100) + "%";
119	};
120	};
121	cp.onchange = onchange(cp2);
122	cp2.onchange = onchange(cp);
123	// that’s it. Too easy
124	});
125	</script>
126	</head>
127	<body>
128	<div id="content">
129	<h1 id="h1">Color Picker</h1>
130	<table id="values">
131	<tr>
132	<th>R</th>
133	<td id="vr"></td>
134	<th>H</th>
135	<td id="vh"></td>
136	<th>H</th>
137	<td id="vh2"></td>
138	</tr>
139	<tr>
140	<th>G</th>
141	<td id="vg"></td>
142	<th>S</th>
143	<td id="vs"></td>
144	<th>S</th>
145	<td id="vs2"></td>
146	</tr>
147	<tr>
148	<th>B</th>
149	<td id="vb"></td>
150	<th>B</th>
151	<td id="vv"></td>
152	<th>L</th>
153	<td id="vl"></td>
154	</tr>
155	</table>
156	<input type="text" id="output" value="#eeeeee">
157	<p id="copy">
158	Powered by <a href="http://raphaeljs.com/">Raphaël</a>
159	</p>
160	</div>
161	<div id="picker2"></div>
162	</body>
163	</html>