summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEdwin Eefting <edwin@datux.nl>2012-11-29 23:22:22 (GMT)
committer Edwin Eefting <edwin@datux.nl>2012-11-29 23:22:22 (GMT)
commit0aacad7e3d892364d35a0838c4786df5175080ea (patch)
treede4ed446e02da08e55ebb0b5a8950d2ee04fe521
parent414bd9f2e34727e6158a1e8ee05958e996179ac6 (diff)
fixed for nurdspace
-rw-r--r--etc/synapse/dmx.conf118
-rw-r--r--wwwdir/dmx.html211
-rw-r--r--wwwdir/lib/jquery.ui.colorPicker.css67
-rw-r--r--wwwdir/lib/jquery.ui.colorPicker.js400
-rw-r--r--wwwdir/lib/jquery.ui.colorPicker.min.js12
5 files changed, 707 insertions, 101 deletions
diff --git a/etc/synapse/dmx.conf b/etc/synapse/dmx.conf
new file mode 100644
index 0000000..0c17ff9
--- /dev/null
+++ b/etc/synapse/dmx.conf
@@ -0,0 +1,118 @@
+{
+ "1" : {
+ "left" : 704,
+ "top" : 42,
+ "value" : 0
+ },
+ "10" : {
+ "value" : 163
+ },
+ "11" : {
+ "value" : 45
+ },
+ "12" : {
+ "left" : 687,
+ "top" : 516,
+ "value" : 162
+ },
+ "13" : {
+ "value" : 216
+ },
+ "14" : {
+ "value" : 38
+ },
+ "15" : {
+ "left" : 475,
+ "top" : 513,
+ "value" : 100
+ },
+ "151" : {
+ "value" : 107
+ },
+ "152" : {
+ "value" : 133
+ },
+ "16" : {
+ "value" : 243
+ },
+ "17" : {
+ "value" : 11
+ },
+ "18" : {
+ "left" : 55,
+ "top" : 511,
+ "value" : 29
+ },
+ "19" : {
+ "value" : 225
+ },
+ "2" : {
+ "left" : 534,
+ "top" : 320,
+ "value" : 0
+ },
+ "20" : {
+ "value" : 104
+ },
+ "21" : {
+ "left" : 315,
+ "top" : 108,
+ "value" : 42
+ },
+ "22" : {
+ "value" : 222
+ },
+ "23" : {
+ "value" : 32
+ },
+ "24" : {
+ "left" : 174,
+ "top" : 101,
+ "value" : 73
+ },
+ "25" : {
+ "value" : 192
+ },
+ "26" : {
+ "value" : 62
+ },
+ "27" : {
+ "left" : 72,
+ "top" : 208,
+ "value" : 111
+ },
+ "28" : {
+ "value" : 115
+ },
+ "29" : {
+ "value" : 143
+ },
+ "3" : {
+ "value" : 0
+ },
+ "4" : {
+ "left" : 204,
+ "top" : 79,
+ "value" : 255
+ },
+ "5" : {
+ "left" : 627,
+ "top" : 83,
+ "value" : 255
+ },
+ "6" : {
+ "left" : 907,
+ "top" : 62,
+ "value" : 255
+ },
+ "7" : {
+ "left" : 343,
+ "top" : 151,
+ "value" : 236
+ },
+ "9" : {
+ "left" : 972,
+ "top" : 98,
+ "value" : 61
+ }
+} \ No newline at end of file
diff --git a/wwwdir/dmx.html b/wwwdir/dmx.html
index 0bc58bd..6c9a901 100644
--- a/wwwdir/dmx.html
+++ b/wwwdir/dmx.html
@@ -7,8 +7,9 @@
<title>playlist test</title>
<script type="text/javascript" src="/synapse/synapse.js?1"></script>
- <script type="text/javascript" src="lib/raphael.js"></script>
- <script type="text/javascript" src="lib/colorwheel.js"></script>
+
+ <script src="lib/jquery.ui.colorPicker.js" type="text/javascript"></script>
+ <link rel="stylesheet" href="lib/jquery.ui.colorPicker.css">
<script type="text/javascript">
@@ -20,93 +21,85 @@
$('#error').html(errortxt);
});
+ synapse_register("dmx_Update",function(msg_src, msg_dst, msg_event, msg)
+ {
+ if (msg.value!=null)
+ {
+ $(".slider[_channel="+msg.channel+"]").slider("option", "value", msg.value);
+ }
+
+ if (msg.top!=null)
+ {
+ $(".draggable[_channel="+msg.channel+"]").css("top", msg.top);
+ $(".draggable[_channel="+msg.channel+"]").css("left", msg.left);
+ }
+
+ });
synapse_register("module_SessionStart",function(msg_src, msg_dst, msg_event, msg)
{
- send(0,"dmx_Get",{});
- });
-
- /// JAVA SCRIPT EVENT HANDLERS
- $(document).ready(function(){
-
- $(".slider").slider({
- orientation: 'vertical',
- min:0,
- max:255,
- slide: function(event, ui) {
- ui.value
- send(0,"dmx_Set",{
- id:1,
- channel:$(this).attr('_channel'),
- value:ui.value
- });
-
- }
-
- });
-
- $(".draggable").draggable({
- drag:function(event,ui)
- {
- send(0,"dmx_SetPosition",{
- id:1,
- channel:$(this).attr('_channel'),
- left:ui.offset.left,
- top:ui.offset.top
- });
- }
+ $(".slider").slider({
+ orientation: 'vertical',
+ min:0,
+ max:255,
+ slide: function(event, ui) {
+ ui.value
+ send(0,"dmx_Set",{
+ id:1,
+ channel:$(this).attr('_channel'),
+ value:ui.value
+ });
+
+ }
+
});
-// $(".colorwheel").each(function()
-// {
-/*
- var cw = Raphael.colorwheel(10,0,300);
- cw.onchange=function(color)
- {
- var channel=15;
- console.log(color);
- var c = Raphael.color(color);
- console.log(c);
-/// var channel=$(this).attr('_channel');
- send(0,"dmx_Set",{
- id:1,
- 'channel':channel,
- value:c.r
- });
- send(0,"dmx_Set",{
- id:1,
- 'channel':channel+1,
- value:c.g
- });
- send(0,"dmx_Set",{
- id:1,
- 'channel':channel+2,
- value:c.b
- });
- };
-
-// });
-*/
- synapse_register("dmx_Update",function(msg_src, msg_dst, msg_event, msg)
- {
- if (msg.value!=null)
- {
- $(".slider[_channel="+msg.channel+"]").slider("option", "value", msg.value);
- }
-
- if (msg.top!=null)
- {
- $(".draggable[_channel="+msg.channel+"]").css("top", msg.top);
- $(".draggable[_channel="+msg.channel+"]").css("left", msg.left);
- }
-
- });
+ $(".draggable").draggable({
+ drag:function(event,ui)
+ {
+ send(0,"dmx_SetPosition",{
+ id:1,
+ channel:$(this).attr('_channel'),
+ left:ui.offset.left,
+ top:ui.offset.top
+ });
+ }
+ });
-
+ send(0,"dmx_Get",{});
+
+ //NOTE: somehow this throws an exception but it still works.
+ $(".colorwheel").colorPicker({
+ size: 100,
+ format: 'rgb',
+ colorChange:function(e, ui)
+ {
+ var channel=parseInt($(this).attr('_channel'));
+ console.log(ui);
+ send(0,"dmx_Set",{
+ id:1,
+ channel:channel,
+ value:ui.red
+ });
+ send(0,"dmx_Set",{
+ id:1,
+ channel:channel+1,
+ value:ui.green
+ });
+ send(0,"dmx_Set",{
+ id:1,
+ channel:channel+2,
+ value:ui.blue
+ });
+ }
+
+ });
});
+
+
</script>
@@ -138,49 +131,65 @@
<body>
-<h1>Dyne village light controller</h1>
+<h1>Nurdspace light controller</h1>
<div>
- <div class='draggable' _channel='1' style='left:150px'>
- <div class='slider' _channel='1'>groen</div>
- </div>
- <div class='draggable' _channel='2' style='left:150px'>
- <div class='slider' _channel='2'>blauw</div>
- </div>
- <div class='draggable' _channel='9' style='left:150px'>
- <div class='slider' _channel='9'>9</div>
+ <div class='draggable' _channel='15' style='left:150px'>
+ <div class='colorwheel' _channel='15' >
+ </div>
</div>
- <div class='draggable' _channel='4' style='left:150px'>
- <div class='slider' _channel='4'>4</div>
+
+ <div class='draggable' _channel='18' style='left:150px'>
+ <div class='colorwheel' _channel='18' >
+ </div>
</div>
- <div class='draggable' _channel='5' style='left:150px'>
- <div class='slider' _channel='5'>5</div>
+
+ <div class='draggable' _channel='21' style='left:150px'>
+ <div class='colorwheel' _channel='21' >
+ </div>
</div>
- <div class='draggable' _channel='6' style='left:150px'>
- <div class='slider' _channel='6'>6</div>
+
+ <div class='draggable' _channel='24' style='left:150px'>
+ <div class='colorwheel' _channel='24' >
+ </div>
</div>
- <div class='draggable' _channel='7' style='left:150px'>
- <div class='slider' _channel='7'>7</div>
+
+ <div class='draggable' _channel='9' style='left:150px'>
+ <div class='colorwheel' _channel='9' >
+ </div>
</div>
+ <div class='draggable' _channel='12' style='left:150px'>
+ <div class='colorwheel' _channel='12' >
+ </div>
+ </div>
+ <div class='draggable' _channel='1' style='left:150px'>
+ <div class='slider' _channel='1'>1</div>
+ </div>
+ <div class='draggable' _channel='2' style='left:150px'>
+ <div class='slider' _channel='2'>2</div>
+ </div>
</div>
<div style='
position:fixed;
- bottom:0px;'>
+ bottom:0px;
+ right:0px'
+ >
Powered by <a href='http://lanbox.com/'>LanBox DMX controllers</a>.
- <p>
- <a href='http://events.ccc.de/camp/2011/wiki/Dyne#Projects'>Dyne village</a>
<p>
<a href='http://internetpapier.nl/p/1v2zte2s/edit.html'>Change background</a>
- <p>
- You can also drag the sliders and see how other people drag. Please put them back to the correct place when you're done playing. :) Also dont try to screwup the background too much.
</div>
+
+
+
+
+
</body>
</html>
diff --git a/wwwdir/lib/jquery.ui.colorPicker.css b/wwwdir/lib/jquery.ui.colorPicker.css
new file mode 100644
index 0000000..2a71632
--- /dev/null
+++ b/wwwdir/lib/jquery.ui.colorPicker.css
@@ -0,0 +1,67 @@
+div.colorpicker {
+ margin: 0;
+ position: relative;
+}
+div.colorpicker canvas {
+ float: left;
+}
+div.colorpicker div.circle {
+ border-radius: 100%;
+ position: absolute;
+ top: 0;
+ background-clip: padding-box;
+}
+div.colorpicker div.circle.alpha {
+ background-image: url('../images/transparent.gif');
+ opacity: 0.0;
+}
+div.colorpicker div.circle.lightness {
+ background-color: rgba(0,0,0,0.0);
+ box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+ border: 1px solid #fff;
+ margin: -1px 0 0 -1px;
+}
+div.colorpicker span.picker, div.colorpicker span.handle {
+ display: block;
+ width: 8px;
+ height: 8px;
+ border-radius: 4px;
+ background-color: rgba(0,0,0,0.4);
+ box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 4px #000 inset;
+ border: 1px solid #fff;
+ cursor: pointer;
+ margin: -5px;
+ position: absolute;
+ z-index: 2;
+}
+div.colorpicker div.slider {
+ width: 6px;
+ background-color: #fff;
+ background-clip: padding-box;
+ border-radius: 6px;
+ border: 1px solid #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.2) inset;
+ float: left;
+ margin: -1px 0 0 10px;
+}
+div.colorpicker div.slider span.handle {
+ margin: -5px -2px -5px -2px;
+}
+div.colorpicker div.slider.lightness {
+ background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
+ background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
+ background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1));
+}
+div.colorpicker div.slider.alpha {
+ background: -webkit-linear-gradient(top, rgba(255,255,255,1.0), rgba(255,255,255,0.6)), url('../images/transparent.gif') center;
+ background: -moz-linear-gradient(top, rgba(255,255,255,1.0), rgba(255,255,255,0.6)), url('../images/transparent.gif') center;
+ background: linear-gradient(top, rgba(255,255,255,1.0), rgba(255,255,255,0.6)), url('../images/transparent.gif') center;
+}
+div.colorpicker input.colorInput {
+ margin-top: 10px;
+ border: 1px solid #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+ background-color: #fafafa;
+ border-radius: 3px;
+ padding: 5px 8px;
+} \ No newline at end of file
diff --git a/wwwdir/lib/jquery.ui.colorPicker.js b/wwwdir/lib/jquery.ui.colorPicker.js
new file mode 100644
index 0000000..2343139
--- /dev/null
+++ b/wwwdir/lib/jquery.ui.colorPicker.js
@@ -0,0 +1,400 @@
+/*
+ * jQuery UI Color Picker Widget
+ *
+ * Copyright 2012, Olav Andreas Lindekleiv (http://lindekleiv.com/)
+ * Available under the BSD License
+ * See the LICENSE file or http://opensource.org/licenses/BSD-3-Clause
+ *
+ * Available on BitBucket at
+ * https://bitbucket.org/lindekleiv/jquery-ui-colorpicker
+ */
+
+var __indexOf = Array.prototype.indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+
+$.widget('oal.colorPicker', {
+ options: {
+ size: 250,
+ format: 'hsla'
+ },
+ _create: function() {
+ var alpha, lightness,
+ _this = this;
+ this.lightness = 0.0;
+ this.alpha = 1.0;
+ this.fromCenter = 0.0;
+ this.pickerPos = [0, 0];
+ this.parent = $('<div class="colorpicker"></div>');
+ this.parent.css({
+ width: this.options.size + 36
+ });
+ this.element.addClass('colorInput');
+ this.element.css({
+ width: this.options.size + 36
+ });
+ this.element.wrap(this.parent);
+ this.canvasId = "colorpicker" + (parseInt(Math.random() * 9999));
+ this.wheel = $("<canvas id='" + this.canvasId + "' width='" + this.options.size + "' height='" + this.options.size + "'></canvas>");
+ this.element.before(this.wheel);
+ this._draw();
+ lightness = $('<div class="circle lightness"></div>').css({
+ width: this.options.size,
+ height: this.options.size
+ });
+ this.element.before(lightness);
+ alpha = $('<div class="circle alpha"></div>').css({
+ width: this.options.size,
+ height: this.options.size
+ });
+ this.element.before(alpha);
+ this.lightnessSlider = $('<div class="lightness slider"><span class="handle"></span></div>').css({
+ height: this.options.size
+ });
+ this.element.before(this.lightnessSlider);
+ this.lightnessSlider.find('span.handle').draggable({
+ containment: 'parent',
+ drag: function(e, ui) {
+ return _this._setLightness(ui.position.top, true);
+ }
+ });
+ this.alphaSlider = $('<div class="alpha slider"><span class="handle"></span></div>').css({
+ height: this.options.size
+ });
+// this.element.before(this.alphaSlider);
+ this.alphaSlider.find('span.handle').draggable({
+ containment: 'parent',
+ drag: function(e, ui) {
+ return _this._setAlpha(ui.position.top, true);
+ }
+ });
+ this.picker = $('<span class="picker"></span>').css({
+ top: this.options.size / 2,
+ left: this.options.size / 2
+ });
+ this.element.before(this.picker);
+ this.picker.draggable({
+ drag: function(e, ui) {
+ var x, y;
+ x = ui.position.left - _this.options.size / 2;
+ y = ui.position.top - _this.options.size / 2;
+ return _this._setHue(x, y, true);
+ }
+ });
+/* this.element.on('change', function() {
+ var a, b, color, g, h, hsla, l, pattern, r, rgb, rgba, s, _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8;
+ color = _this.element.val();
+ if (color.indexOf('hsla(') === 0) {
+ pattern = /^hsla\((\d+),\s+(\d+(?:.\d+)?)%,\s+(\d+(?:.\d+)?)%,\s+(\d+(?:.\d+)?)\)$/;
+ _ref = pattern.exec(color), hsla = _ref[0], h = _ref[1], s = _ref[2], l = _ref[3], a = _ref[4];
+ return _this.setColor(h, s, l, a);
+ } else if (color.indexOf('hsl(') === 0) {
+ pattern = /^hsl\((\d+),\s+(\d+(?:.\d+)?)%,\s+(\d+(?:.\d+)?)%\)$/;
+ _ref2 = pattern.exec(color), hsla = _ref2[0], h = _ref2[1], s = _ref2[2], l = _ref2[3];
+ return _this.setColor(h, s, l);
+ } else if (color.indexOf('rgba(') === 0) {
+ pattern = /^rgba\((\d{1,3}),[ ]?(\d{1,3}),[ ]?(\d{1,3}),[ ]?(\d?.\d{1,2})\)$/;
+ _ref3 = pattern.exec(color), rgba = _ref3[0], r = _ref3[1], g = _ref3[2], b = _ref3[3], a = _ref3[4];
+ _ref4 = _this._toHsla(r, g, b, a), h = _ref4[0], s = _ref4[1], l = _ref4[2], a = _ref4[3];
+ return _this.setColor(h, s, l, a);
+ } else if (color.indexOf('rgb(') === 0) {
+ pattern = /^rgb\((\d{1,3}),[ ]?(\d{1,3}),[ ]?(\d{1,3})\)$/;
+ _ref5 = pattern.exec(color), rgb = _ref5[0], r = _ref5[1], g = _ref5[2], b = _ref5[3];
+ _ref6 = _this._toHsla(r, g, b), h = _ref6[0], s = _ref6[1], l = _ref6[2], a = _ref6[3];
+ return _this.setColor(h, s, l, a);
+ } else if (color.indexOf('#') === 0 && color.length === 4) {
+ r = parseInt(color[1] + color[1], 16);
+ g = parseInt(color[2] + color[2], 16);
+ b = parseInt(color[3] + color[3], 16);
+ _ref7 = _this._toHsla(r, g, b), h = _ref7[0], s = _ref7[1], l = _ref7[2], a = _ref7[3];
+ return _this.setColor(h, s, l, a);
+ } else if (color.indexOf('#') === 0 && color.length === 7) {
+ r = parseInt(color[1] + color[2], 16);
+ g = parseInt(color[3] + color[4], 16);
+ b = parseInt(color[5] + color[6], 16);
+ _ref8 = _this._toHsla(r, g, b), h = _ref8[0], s = _ref8[1], l = _ref8[2], a = _ref8[3];
+ return _this.setColor(h, s, l, a);
+ }
+ });
+ alpha.on('click', function(e) {
+ var offset, x, y;
+ offset = $(e.target).offset();
+ x = e.clientX - offset.left - (_this.options.size / 2);
+ y = e.clientY - offset.top - (_this.options.size / 2);
+ _this._setHue(x, y);
+ return _this._update();
+ });
+ this.lightnessSlider.on('click', function(e) {
+ var offset;
+ offset = $(e.target).offset();
+ lightness = Math.abs(1 - (e.clientY - offset.top) / _this.options.size) * 100;
+ _this._setLightness(lightness, false);
+ return _this._update();
+ });
+ return this.alphaSlider.on('click', function(e) {
+ var offset;
+ offset = $(e.target).offset();
+ alpha = Math.abs(1 - (e.clientY - offset.top) / _this.options.size);
+ _this._setAlpha(alpha, false);
+ return _this._update();
+ });*/
+ },
+ _draw: function() {
+ var c, canvas, color, half, i, max, radialGradient, size;
+ canvas = document.getElementById(this.canvasId);
+ c = canvas.getContext('2d');
+ size = this.options.size;
+ half = size / 2;
+ max = size * 1.25;
+ for (i = 0; 0 <= max ? i <= max : i >= max; 0 <= max ? i++ : i--) {
+ c.save();
+ color = i / max;
+ c.strokeStyle = "hsl(" + (color * 360) + ",100%,50%)";
+ c.translate(half, half);
+ c.rotate(Math.PI * 2 * i / max);
+ c.beginPath();
+ c.lineWidth = 3;
+ c.moveTo(0, 0);
+ c.lineTo(0, half);
+ c.stroke();
+ c.restore();
+ }
+ radialGradient = c.createRadialGradient(half, half, 0, half, half, half);
+ radialGradient.addColorStop(0, 'hsl(0, 0%, 50%)');
+ radialGradient.addColorStop(1, 'hsla(0, 0%, 50%, 0)');
+ c.fillStyle = radialGradient;
+ return c.fillRect(0, 0, this.options.size, this.options.size);
+ },
+ _setHue: function(x, y, pos) {
+ if (pos == null) pos = false;
+ this.fromCenter = Math.sqrt(x * x + y * y);
+ this.pickerPos = [x, y];
+ if (pos) {
+ this._update();
+ if (this.fromCenter >= this.options.size / 2) return false;
+ } else {
+ return this.picker.css({
+ top: y + this.options.size / 2,
+ left: x + this.options.size / 2
+ });
+ }
+ },
+ _setLightness: function(l, pos) {
+ var color;
+ if (pos == null) pos = false;
+ if (pos) {
+ this.lightness = (l / this.options.size) - 0.5;
+ this._update();
+ } else {
+ this.lightness = 0.5 - (l / 100);
+ this.lightnessSlider.find('span.handle').css({
+ top: (this.lightness + 0.5) * this.options.size
+ });
+ }
+ if (this.lightness < 0) {
+ color = "rgba(255,255,255," + (Math.abs(this.lightness * 2)) + ")";
+ } else {
+ color = "rgba(0,0,0," + (this.lightness * 2) + ")";
+ }
+ return this.wheel.next().css({
+ backgroundColor: color
+ });
+ },
+ _setAlpha: function(a, pos) {
+ if (pos == null) pos = false;
+ if (pos) {
+ this.alpha = Math.abs(1 - a / this.options.size);
+ this._update();
+ } else {
+ this.alpha = a;
+ this.alphaSlider.find('span.handle').css({
+ top: Math.abs(1 - this.alpha) * this.options.size
+ });
+ }
+ return this.wheel.next().next().css({
+ opacity: Math.abs(1 - this.alpha)
+ });
+ },
+ _generateColor: function() {
+ var a, h, l, s;
+ h = parseInt(180 - (Math.atan2(this.pickerPos[0], this.pickerPos[1]) + Math.PI) / (Math.PI * 2) * 360);
+ if (h < 0) h += 360;
+ s = this.fromCenter / this.options.size * 100 * 2;
+ l = Math.abs(this.lightness - 0.5) * 100;
+ a = this.alpha;
+ if (h > 360) h = 360;
+ if (s > 100) s = 100;
+ if (l > 100) l = 100;
+ if (a > 1.0) a = 1.0;
+ s = Math.round(s * 100) / 100;
+ l = Math.round(l * 100) / 100;
+ a = Math.round(a * 100) / 100;
+ return [h, s, l, a];
+ },
+ _update: function() {
+ var a, b, bs, colorString, g, gs, h, l, r, response, rs, s, _ref, _ref2, _ref3, _ref4, _ref5;
+ _ref = this._generateColor(), h = _ref[0], s = _ref[1], l = _ref[2], a = _ref[3];
+ switch (this.options.format) {
+ case 'hsla':
+ colorString = "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")";
+ break;
+ case 'hsl':
+ colorString = "hsl(" + h + ", " + s + "%, " + l + "%)";
+ break;
+ case 'rgba':
+ _ref2 = this._toRgba(h, s, l, a), r = _ref2[0], g = _ref2[1], b = _ref2[2], a = _ref2[3];
+ colorString = "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
+ break;
+ case 'rgb':
+ _ref3 = this._toRgba(h, s, l), r = _ref3[0], g = _ref3[1], b = _ref3[2], a = _ref3[3];
+ colorString = "rgb(" + r + ", " + g + ", " + b + ")";
+ break;
+ case 'hex':
+ _ref4 = this._toRgba(h, s, l), r = _ref4[0], g = _ref4[1], b = _ref4[2], a = _ref4[3];
+ rs = r.toString(16);
+ gs = g.toString(16);
+ bs = b.toString(16);
+ if (rs.length === 1) rs = '0' + rs;
+ if (gs.length === 1) gs = '0' + gs;
+ if (bs.length === 1) bs = '0' + bs;
+ colorString = "#" + rs + gs + bs;
+ break;
+ default:
+ console.error('Color format not supported!');
+ }
+ this.element.val(colorString);
+ this.picker.css({
+ background: colorString
+ });
+ if ((_ref5 = this.options.format) === 'hsl' || _ref5 === 'hsla') {
+ response = {
+ hue: h,
+ saturation: s,
+ lightness: l
+ };
+ } else {
+ response = {
+ red: r,
+ green: g,
+ blue: b
+ };
+ }
+ if (__indexOf.call(this.options.format, 'a') >= 0) response.alpha = a;
+ response.color = colorString;
+ return this._trigger('colorChange', null, response);
+ },
+ _toRgba: function(h, s, l, a) {
+ var b, g, hue2rgb, p, q, r;
+ if (a == null) a = 1.0;
+ h = h / 360;
+ s = s / 100;
+ l = l / 100;
+ if (s === 0.0) {
+ r = l;
+ g = l;
+ b = l;
+ } else {
+ hue2rgb = function(p, q, t) {
+ if (t < 0) t += 1;
+ if (t > 1) t -= 1;
+ if (t < 1 / 6) return p + (q - p) * 6 * t;
+ if (t < 1 / 2) return q;
+ if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+ return p;
+ };
+ if (l < 0.5) {
+ q = l * (1 + s);
+ } else {
+ q = l + s - l * s;
+ }
+ p = 2 * l - q;
+ r = hue2rgb(p, q, h + 1 / 3);
+ g = hue2rgb(p, q, h);
+ b = hue2rgb(p, q, h - 1 / 3);
+ }
+ return [parseInt(r * 255), parseInt(g * 255), parseInt(b * 255), a];
+ },
+ _toHsla: function(r, g, b, a) {
+ var add, d, h, l, max, min, s;
+ if (a == null) a = 1.0;
+ r /= 255;
+ g /= 255;
+ b /= 255;
+ max = Math.max(r, g, b);
+ min = Math.min(r, g, b);
+ h = (max + min) / 2;
+ s = h;
+ l = h;
+ if (max === min) {
+ h = 0;
+ s = 0;
+ } else {
+ d = max - min;
+ if (l > 0.5) {
+ s = d / (2 - max - min);
+ } else {
+ s = d / (max + min);
+ }
+ switch (max) {
+ case r:
+ if (g < b) {
+ add = 6;
+ } else {
+ add = 0;
+ }
+ h = (g - b) / d + add;
+ break;
+ case g:
+ h = (b - r) / d + 2;
+ break;
+ case b:
+ h = (r - g) / d + 4;
+ }
+ h /= 6;
+ }
+ return [parseInt(h * 360), Math.round(s * 1000) / 10, Math.round(l * 1000) / 10, a];
+ },
+ setColor: function(h, s, l, a) {
+ var dist, x, y;
+ if (a == null) a = 1.0;
+ if (typeof h === 'string' && (h.indexOf('hsl') === 0 || h.indexOf('rgb') === 0 || h.indexOf('#') === 0)) {
+ this.element.val(h);
+ this.element.trigger('change');
+ return true;
+ }
+ h = parseInt(h);
+ h += 90;
+ if (h > 360) h %= 360;
+ if (h > 0) {
+ dist = s / 100 * (this.options.size / 2);
+ x = Math.cos(h / 360 * (Math.PI * 2)) * dist;
+ y = Math.sin(h / 360 * (Math.PI * 2)) * dist;
+ this._setHue(x, y);
+ }
+ if (s >= 0 && s <= 100) {
+ this.saturation = s;
+ } else if (s > 100) {
+ this.saturation = 100;
+ } else {
+ this.saturation = 0;
+ }
+ if (l > 100) {
+ l = 100;
+ } else if (l < 0) {
+ l = 0;
+ }
+ this._setLightness(l);
+ if (a > 1.0) {
+ a = 1.0;
+ } else if (a < 0.0) {
+ a = 0.0;
+ }
+ this._setAlpha(a);
+ return this._update();
+ },
+ _setOption: function(key, value) {
+ if (key === 'format' && (value === 'hsla' || value === 'hsl' || value === 'rgba' || value === 'rgb' || value === 'hex')) {
+ this.options.format = value;
+ this._update();
+ }
+ return $.Widget.prototype._setOption.apply(this, arguments);
+ }
+}); \ No newline at end of file
diff --git a/wwwdir/lib/jquery.ui.colorPicker.min.js b/wwwdir/lib/jquery.ui.colorPicker.min.js
new file mode 100644
index 0000000..385d5f0
--- /dev/null
+++ b/wwwdir/lib/jquery.ui.colorPicker.min.js
@@ -0,0 +1,12 @@
+/*
+ * jQuery UI Color Picker Widget
+ *
+ * Copyright 2012, Olav Andreas Lindekleiv (http://lindekleiv.com/)
+ * Available under the BSD License
+ * See the LICENSE file or http://opensource.org/licenses/BSD-3-Clause
+ *
+ * Available on BitBucket at
+ * https://bitbucket.org/lindekleiv/jquery-ui-colorpicker
+ */
+
+var __indexOf=Array.prototype.indexOf||function(a){for(var b=0,c=this.length;b<c;b++){if(b in this&&this[b]===a)return b}return-1};$.widget("oal.colorPicker",{options:{size:250,format:"hsla"},_create:function(){var a,b,c=this;this.lightness=0;this.alpha=1;this.fromCenter=0;this.pickerPos=[0,0];this.parent=$('<div class="colorpicker"></div>');this.parent.css({width:this.options.size+36});this.element.addClass("colorInput");this.element.css({width:this.options.size+36});this.element.wrap(this.parent);this.canvasId="colorpicker"+parseInt(Math.random()*9999);this.wheel=$("<canvas id='"+this.canvasId+"' width='"+this.options.size+"' height='"+this.options.size+"'></canvas>");this.element.before(this.wheel);this._draw();b=$('<div class="circle lightness"></div>').css({width:this.options.size,height:this.options.size});this.element.before(b);a=$('<div class="circle alpha"></div>').css({width:this.options.size,height:this.options.size});this.element.before(a);this.lightnessSlider=$('<div class="lightness slider"><span class="handle"></span></div>').css({height:this.options.size});this.element.before(this.lightnessSlider);this.lightnessSlider.find("span.handle").draggable({containment:"parent",drag:function(a,b){return c._setLightness(b.position.top,true)}});this.alphaSlider=$('<div class="alpha slider"><span class="handle"></span></div>').css({height:this.options.size});this.element.before(this.alphaSlider);this.alphaSlider.find("span.handle").draggable({containment:"parent",drag:function(a,b){return c._setAlpha(b.position.top,true)}});this.picker=$('<span class="picker"></span>').css({top:this.options.size/2,left:this.options.size/2});this.element.before(this.picker);this.picker.draggable({drag:function(a,b){var d,e;d=b.position.left-c.options.size/2;e=b.position.top-c.options.size/2;return c._setHue(d,e,true)}});this.element.on("change",function(){var a,b,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u;d=c.element.val();if(d.indexOf("hsla(")===0){i=/^hsla\((\d+),\s+(\d+(?:.\d+)?)%,\s+(\d+(?:.\d+)?)%,\s+(\d+(?:.\d+)?)\)$/;n=i.exec(d),g=n[0],f=n[1],m=n[2],h=n[3],a=n[4];return c.setColor(f,m,h,a)}else if(d.indexOf("hsl(")===0){i=/^hsl\((\d+),\s+(\d+(?:.\d+)?)%,\s+(\d+(?:.\d+)?)%\)$/;o=i.exec(d),g=o[0],f=o[1],m=o[2],h=o[3];return c.setColor(f,m,h)}else if(d.indexOf("rgba(")===0){i=/^rgba\((\d{1,3}),[ ]?(\d{1,3}),[ ]?(\d{1,3}),[ ]?(\d?.\d{1,2})\)$/;p=i.exec(d),l=p[0],j=p[1],e=p[2],b=p[3],a=p[4];q=c._toHsla(j,e,b,a),f=q[0],m=q[1],h=q[2],a=q[3];return c.setColor(f,m,h,a)}else if(d.indexOf("rgb(")===0){i=/^rgb\((\d{1,3}),[ ]?(\d{1,3}),[ ]?(\d{1,3})\)$/;r=i.exec(d),k=r[0],j=r[1],e=r[2],b=r[3];s=c._toHsla(j,e,b),f=s[0],m=s[1],h=s[2],a=s[3];return c.setColor(f,m,h,a)}else if(d.indexOf("#")===0&&d.length===4){j=parseInt(d[1]+d[1],16);e=parseInt(d[2]+d[2],16);b=parseInt(d[3]+d[3],16);t=c._toHsla(j,e,b),f=t[0],m=t[1],h=t[2],a=t[3];return c.setColor(f,m,h,a)}else if(d.indexOf("#")===0&&d.length===7){j=parseInt(d[1]+d[2],16);e=parseInt(d[3]+d[4],16);b=parseInt(d[5]+d[6],16);u=c._toHsla(j,e,b),f=u[0],m=u[1],h=u[2],a=u[3];return c.setColor(f,m,h,a)}});a.on("click",function(a){var b,d,e;b=$(a.target).offset();d=a.clientX-b.left-c.options.size/2;e=a.clientY-b.top-c.options.size/2;c._setHue(d,e);return c._update()});this.lightnessSlider.on("click",function(a){var d;d=$(a.target).offset();b=Math.abs(1-(a.clientY-d.top)/c.options.size)*100;c._setLightness(b,false);return c._update()});return this.alphaSlider.on("click",function(b){var d;d=$(b.target).offset();a=Math.abs(1-(b.clientY-d.top)/c.options.size);c._setAlpha(a,false);return c._update()})},_draw:function(){var a,b,c,d,e,f,g,h;b=document.getElementById(this.canvasId);a=b.getContext("2d");h=this.options.size;d=h/2;f=h*1.25;for(e=0;0<=f?e<=f:e>=f;0<=f?e++:e--){a.save();c=e/f;a.strokeStyle="hsl("+c*360+",100%,50%)";a.translate(d,d);a.rotate(Math.PI*2*e/f);a.beginPath();a.lineWidth=3;a.moveTo(0,0);a.lineTo(0,d);a.stroke();a.restore()}g=a.createRadialGradient(d,d,0,d,d,d);g.addColorStop(0,"hsl(0, 0%, 50%)");g.addColorStop(1,"hsla(0, 0%, 50%, 0)");a.fillStyle=g;return a.fillRect(0,0,this.options.size,this.options.size)},_setHue:function(a,b,c){if(c==null)c=false;this.fromCenter=Math.sqrt(a*a+b*b);this.pickerPos=[a,b];if(c){this._update();if(this.fromCenter>=this.options.size/2)return false}else{return this.picker.css({top:b+this.options.size/2,left:a+this.options.size/2})}},_setLightness:function(a,b){var c;if(b==null)b=false;if(b){this.lightness=a/this.options.size-.5;this._update()}else{this.lightness=.5-a/100;this.lightnessSlider.find("span.handle").css({top:(this.lightness+.5)*this.options.size})}if(this.lightness<0){c="rgba(255,255,255,"+Math.abs(this.lightness*2)+")"}else{c="rgba(0,0,0,"+this.lightness*2+")"}return this.wheel.next().css({backgroundColor:c})},_setAlpha:function(a,b){if(b==null)b=false;if(b){this.alpha=Math.abs(1-a/this.options.size);this._update()}else{this.alpha=a;this.alphaSlider.find("span.handle").css({top:Math.abs(1-this.alpha)*this.options.size})}return this.wheel.next().next().css({opacity:Math.abs(1-this.alpha)})},_generateColor:function(){var a,b,c,d;b=parseInt(180-(Math.atan2(this.pickerPos[0],this.pickerPos[1])+Math.PI)/(Math.PI*2)*360);if(b<0)b+=360;d=this.fromCenter/this.options.size*100*2;c=Math.abs(this.lightness-.5)*100;a=this.alpha;if(b>360)b=360;if(d>100)d=100;if(c>100)c=100;if(a>1)a=1;d=Math.round(d*100)/100;c=Math.round(c*100)/100;a=Math.round(a*100)/100;return[b,d,c,a]},_update:function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q;m=this._generateColor(),g=m[0],l=m[1],h=m[2],a=m[3];switch(this.options.format){case"hsla":d="hsla("+g+", "+l+"%, "+h+"%, "+a+")";break;case"hsl":d="hsl("+g+", "+l+"%, "+h+"%)";break;case"rgba":n=this._toRgba(g,l,h,a),i=n[0],e=n[1],b=n[2],a=n[3];d="rgba("+i+", "+e+", "+b+", "+a+")";break;case"rgb":o=this._toRgba(g,l,h),i=o[0],e=o[1],b=o[2],a=o[3];d="rgb("+i+", "+e+", "+b+")";break;case"hex":p=this._toRgba(g,l,h),i=p[0],e=p[1],b=p[2],a=p[3];k=i.toString(16);f=e.toString(16);c=b.toString(16);if(k.length===1)k="0"+k;if(f.length===1)f="0"+f;if(c.length===1)c="0"+c;d="#"+k+f+c;break;default:console.error("Color format not supported!")}this.element.val(d);this.picker.css({background:d});if((q=this.options.format)==="hsl"||q==="hsla"){j={hue:g,saturation:l,lightness:h}}else{j={red:i,green:e,blue:b}}if(__indexOf.call(this.options.format,"a")>=0)j.alpha=a;j.color=d;return this._trigger("colorChange",null,j)},_toRgba:function(a,b,c,d){var e,f,g,h,i,j;if(d==null)d=1;a=a/360;b=b/100;c=c/100;if(b===0){j=c;f=c;e=c}else{g=function(a,b,c){if(c<0)c+=1;if(c>1)c-=1;if(c<1/6)return a+(b-a)*6*c;if(c<1/2)return b;if(c<2/3)return a+(b-a)*(2/3-c)*6;return a};if(c<.5){i=c*(1+b)}else{i=c+b-c*b}h=2*c-i;j=g(h,i,a+1/3);f=g(h,i,a);e=g(h,i,a-1/3)}return[parseInt(j*255),parseInt(f*255),parseInt(e*255),d]},_toHsla:function(a,b,c,d){var e,f,g,h,i,j,k;if(d==null)d=1;a/=255;b/=255;c/=255;i=Math.max(a,b,c);j=Math.min(a,b,c);g=(i+j)/2;k=g;h=g;if(i===j){g=0;k=0}else{f=i-j;if(h>.5){k=f/(2-i-j)}else{k=f/(i+j)}switch(i){case a:if(b<c){e=6}else{e=0}g=(b-c)/f+e;break;case b:g=(c-a)/f+2;break;case c:g=(a-b)/f+4}g/=6}return[parseInt(g*360),Math.round(k*1e3)/10,Math.round(h*1e3)/10,d]},setColor:function(a,b,c,d){var e,f,g;if(d==null)d=1;if(typeof a==="string"&&(a.indexOf("hsl")===0||a.indexOf("rgb")===0||a.indexOf("#")===0)){this.element.val(a);this.element.trigger("change");return true}a=parseInt(a);a+=90;if(a>360)a%=360;if(a>0){e=b/100*(this.options.size/2);f=Math.cos(a/360*Math.PI*2)*e;g=Math.sin(a/360*Math.PI*2)*e;this._setHue(f,g)}if(b>=0&&b<=100){this.saturation=b}else if(b>100){this.saturation=100}else{this.saturation=0}if(c>100){c=100}else if(c<0){c=0}this._setLightness(c);if(d>1){d=1}else if(d<0){d=0}this._setAlpha(d);return this._update()},_setOption:function(a,b){if(a==="format"&&(b==="hsla"||b==="hsl"||b==="rgba"||b==="rgb"||b==="hex")){this.options.format=b;this._update()}return $.Widget.prototype._setOption.apply(this,arguments)}}) \ No newline at end of file