--- /dev/null
+<!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>