| 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> |