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