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