5 <title>Color Picker — Raphaël
</title>
10 font:
300 100.01%/
1.2 "Segoe UI",
"Helvetica Neue", Helvetica,
"Arial Unicode", Arial, sans-serif;
33 text-decoration: none;
51 font-family: monospace;
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>
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"),
86 // this is where colorpicker created
87 cp
= Raphael
.colorpicker(40, 20, 300, "#eee"),
88 cp2
= Raphael
.colorwheel(360, 20, 300, "#eee"),
90 clr
= Raphael
.color("#eee");
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 () {
100 cp2
.color(this.value
);
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");
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) + "%";
121 cp
.onchange
= onchange(cp2
);
122 cp2
.onchange
= onchange(cp
);
123 // that’s it. Too easy
129 <h1 id=
"h1">Color Picker
</h1>
156 <input type=
"text" id=
"output" value=
"#eeeeee">
158 Powered by
<a href=
"http://raphaeljs.com/">Raphaël
</a>
161 <div id=
"picker2"></div>