Experiments in controlling LEDs using Guile + Arduino
[clinton/scratch.git] / picker / picker.html
diff --git a/picker/picker.html b/picker/picker.html
new file mode 100644 (file)
index 0000000..9087602
--- /dev/null
@@ -0,0 +1,163 @@
+<!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>