--- a/qmsk/dmx/web.py	Sun Apr 20 22:47:56 2014 +0300
+++ b/qmsk/dmx/web.py	Sun Apr 20 23:51:57 2014 +0300
@@ -16,6 +16,8 @@
             '//code.jquery.com/jquery-2.1.0.js',
             '//code.jquery.com/ui/1.10.4/jquery-ui.js',
             '//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js',
+            
+            '/static/color-slider.js',
     )
 
     STYLE = """
@@ -32,11 +34,38 @@
 .panel {
     width: 30em;
     margin: 1em auto;
-    }
+}
+
+input.color-control {
+    width: 5em;
+}
+
+div#color {
+    width: 5em;
+    height: 5em;
+
+    margin: 1em auto;
+}
+
+div.color-slider {
+    margin: 1em;
+}
+
+div.color-slider#slider-r .ui-slider-range {
+    background: #ff0000;
+}
+
+div.color-slider#slider-g .ui-slider-range {
+    background: #00ff00;
+}
+
+div.color-slider#slider-b .ui-slider-range {
+    background: #0000ff;
+}
     """
 
     # test
-    TITLE = u"Hello World"
+    TITLE = u"DMX Control"
 
     def process (self) :
         if self.request.method == 'POST' :
@@ -61,31 +90,47 @@
         else :
             r = g = b = None
 
+        def color_swatch () :
+            return html.div(id='color',
+                    style='background-color: rgb({r}, {g}, {b})'.format(r=r, g=g, b=b)
+            )(' '),
+
         def color_input (name, value) :
             color = dict(r=0, g=0, b=0)
             bgcolor = dict(r=0, g=0, b=0)
 
             if value :
                 color[name] = value
-                alpha = value / 2
+                alpha = value / 255.0
             else :
                 alpha = 0
 
             bgcolor[name] = 255
 
-            return html.input(type='text', name=name, class_='form-control', placeholder=name,
+            return html.input(type='text', name=name,
+                    class_      = 'form-control color-control',
+                    placeholder = name,
+                    id          = name,
+
                     value   = '{v:02x}'.format(v=value) if value else None,
-                    #style   = 'background-color: #{r:02x}{g:02x}{b:02x}'.format(**color),
-                    style   = 'background-color: rgba({r}, {g}, {b}, {a})'.format(a=alpha, **bgcolor),
+                    style   = 'background-color: rgba({r}, {g}, {b}, {a:0.2f})'.format(a=alpha, **bgcolor),
             )
 
         return html.div(class_='container')(
             html.div(class_='panel')(
-                html.form(action='.', method='POST', class_='form-horizontal')(
+                color_swatch(),
+                html.div(id='slider-r', class_='color-slider')(' '),
+                html.div(id='slider-g', class_='color-slider')(' '),
+                html.div(id='slider-b', class_='color-slider')(' '),
+                html.form(action='.', method='POST', class_='form-inline')(
+                       #html.label(for_='color', class_='control-label')("Color"),
                     html.div(class_='form-group')(
-                       html.label(for_='color', class_='control-label')("Color"),
                        color_input('r', r),
+                    ),
+                    html.div(class_='form-group')(
                        color_input('g', g),
+                    ),
+                    html.div(class_='form-group')(
                        color_input('b', b),
                     ),
                     html.div(class_='form-group')(
@@ -107,9 +152,7 @@
 
     def dmx_color (self, r, g, b, a=255) :
         for c in (1, 30) :
-            # XXX: this is four separate commands... each one flushes...
-            self.dmx[c + 0:c + 26:3] = r
-            self.dmx[c + 1:c + 26:3] = g
-            self.dmx[c + 2:c + 26:3] = b
-            self.dmx[c + 28] = 255
+            # XXX: separate commands... each one flushes...
+            self.dmx[c + 0:c + 26] = (r, g, b)
+            self.dmx[c + 27] = (0, a)
 

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/static/color-slider.js	Sun Apr 20 23:51:57 2014 +0300
@@ -0,0 +1,55 @@
+$.fn.extend({
+    /*
+     * Set background to solid color
+     */
+    background_color: function (r, g, b, a) {
+        if (a == undefined)
+            a = 1.0;
+
+        this.css('background', 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')');
+    },
+});
+
+function color_slider_slide (event, ui) {
+    // $(this).css('background', 'rgba(0, 0, 0, ' + (ui.value / 255) + ')');
+
+    $('#color').background_color(
+            $('#slider-r').slider('value'),
+            $('#slider-g').slider('value'),
+            $('#slider-b').slider('value')
+    );
+    
+    $(['r', 'g', 'b']).each(function (i, c) {
+        var value = $('#slider-' + c).slider('value');
+        var input = $('#' + c);
+        var color = {r: 0, g: 0, b: 0};
+        
+        color[c] = 255;
+
+        input.val(value.toString(16));
+        input.background_color(color.r, color.b, color.g, value / 255);
+    });
+}
+
+$(function () {
+    $('.color-slider').slider({
+        orientation:    'horizontal',
+        range:          'min',
+        min:            0,
+        max:            255,
+
+        slide:          color_slider_slide,
+    });
+    
+    $(['r', 'g', 'b']).each(function (i, c) {
+        var input = $('#' + c);
+        var value;
+
+        if (input.val())
+            value = parseInt(input.val(), 16);
+        else
+            value = 0;
+        
+        $('#slider-' + c).slider('value', value);
+    });
+});