Merge pull request 'Hehe Tehtud, veel mitte.' (#1) from kauririivik/litsimaja:master into feature/visualizer

Reviewed-on: pvx/litsimaja#1

.gitignore

@@ -1,5 +0,0 @@
-.idea/
-.git/
-__pycache__/
-*.pyc
-*.swp

README.md

@@ -1,27 +1,3 @@
 # litsimaja
 
-Projekt Litsimaja - Lapikute tagatoa seintele programmeeritavad ARGB ribad
-
-#### Running the program
-```python run.py```
-
-#### Running with emulation
-This is mainly for testing, development.
-
-In ``lib/Litsimaja.py`` change the following:
-```
-# from lib.strip.TkinterStrip import TkinterStrip
-
-    def __init__(self):
-        self._strip = PixelStrip(290, 18, 800000, 10, False, 255, 0, 4104)
-```
-to
-```
-from lib.strip.TkinterStrip import TkinterStrip
-
-    def __init__(self):
-        self._strip = TkinterStrip(290, 18, 800000, 10, False, 255, 0, 4104)
-```
-Now when you run the program, you will see a Tkinter window pop up with a rectangle simulating the LED strip.
-
-Don't commit this change.
+Projekt Litsimaja - Lapikute tagatoa seintele programmeeritavad ARGB ribad

pyleds/lib/Color.py

@@ -1,52 +0,0 @@
-Color = lambda r, g, b: (r << 16) | (g << 8) | b
-
-
-def Color_to_list(color):
-    rgb = [(color >> 16) & 255, (color >> 8) & 255, color & 255]
-    w = (color >> 24) & 255
-    if w:
-        rgb.append(w)
-    return rgb
-
-
-def Color_to_hex(color):
-    s = [(color >> 16) & 255, (color >> 8) & 255, color & 255]
-    return "#"+''.join(map(lambda y: ("0" + hex(int(y))[2:])[-2:], s))
-
-
-def Color_to_rgb(color):
-    return (color >> 16) & 255, (color >> 8) & 255, color & 255
-
-
-def hex_to_rgb(value):
-    value = value.lstrip('#') if value[0] == "#" else value
-    lv = len(value)
-    return [int(value[i:i + lv // 3], 16) for i in range(0, lv, lv // 3)]
-
-
-def to_Color(value):
-    if type(value) == str:
-        r, g, b = hex_to_rgb(value)
-        return Color(r, g, b)
-    if type(value) == int:
-        if 0 <= value <= 16777215:
-            return value
-        else:
-            raise ValueError("RGB Int exceeded the lower and upper limits")
-    if type(value) == list or type(value) == tuple:
-        out = []
-        for n, code in enumerate(value):
-            if not str(code).isnumeric():
-                raise ValueError("RGB color must be numeric")
-            if n > 4:
-                raise ValueError("RGB contains more than 4 values")
-            _code = int(code)
-            if _code < 0:
-                print(f"RGB value under 0")
-                out.append(0)
-            elif _code > 255:
-                print(f"RGB value over 255")
-                out.append(255)
-            else:
-                out.append(_code)
-        return Color(out[0], out[1], out[2])

pyleds/lib/FakeStrip.py

@@ -1,15 +1,15 @@
+from rpi_ws281x import PixelStrip
 import atexit
-from lib.Color import Color
+from tkinter import Tk, Canvas
+from threading import Thread
 
 
 class _LedData(object):
+    _led: []
 
     def __init__(self, channel, size):
         self.size = size
         self.channel = channel
-        self._led = {}
-        for i in range(size):
-            self._led[i] = 0
 
     def __getitem__(self, pos):
         """Return the 24-bit RGB color value at the provided position or slice
@@ -19,6 +19,7 @@ class _LedData(object):
         # and returning them in a list.
         if isinstance(pos, slice):
             return [self._led[n] for n in range(*pos.indices(self.size))]
+        # Else assume the passed in value is a number to the position.
         else:
             return self._led[pos]
 
@@ -34,11 +35,11 @@ class _LedData(object):
                 self._led[n] = value[index]
                 index += 1
             # Else assume the passed in value is a number to the position.
-        else:
+            # else:
             self._led[pos] = value
 
 
-class FakeStrip(object):
+class FakeStrip(PixelStrip):
     _brightness: int
 
     def __init__(self, num, pin, freq_hz=800000, dma=10, invert=False,
@@ -64,6 +65,15 @@ class FakeStrip(object):
         # Substitute for __del__, traps an exit condition and cleans up properly
         atexit.register(self._cleanup)
 
+        self.viz = Tk()
+        self.x = 1000
+        self.y = 500
+        self.viz.geometry(f'{self.x}x{self.y}')
+        self.canv = Canvas(self.viz)
+        self.canv.pack(expand=1)
+        self.th.start()
+        self.th = Thread(target=self.viz.mainloop)
+
     def _cleanup(self):
         # Clean up memory used by the library when not needed anymore.
         if self._channel is not None:
@@ -79,7 +89,43 @@ class FakeStrip(object):
 
     def show(self):
         """Update the display with the data from the LED buffer."""
-        return
+        self.canv.delete("all")
+        size = 10.5
+        bp = [47, 97, 191, 242, 289]
+        for s in range(self.numPixels()):
+            x1 = 0
+            y1 = 0
+            x2 = 0
+            y2 = 0
+
+            if s < bp[0]:
+                x1 = (self.x / 2) + s * size
+                y1 = 0
+                x2 = x1 + size
+                y2 = size
+            elif s < bp[1]:
+                x1 = self.x - size
+                y1 = -(bp[0] - s) * size
+                x2 = x1 + size
+                y2 = y1 + size
+            elif s < bp[2]:
+                x1 = self.x + (bp[1] - s) * size
+                y1 = self.y
+                x2 = x1 - size
+                y2 = y1 - size
+            elif s < bp[3]:
+                x1 = 0
+                y1 = self.y + (bp[2] - s) * size
+                x2 = x1 + size
+                y2 = y1 - size
+            elif s < bp[4]:
+                x1 = size * - (bp[3] - s)
+                y1 = 0
+                x2 = x1 + size
+                y2 = y1 + size
+
+            rgb = self.getPixelColorRGB(s)
+            self.canv.create_rectangle(x1, y1, x2, y2, fill="#%02x%02x%02x" % (rgb.r, rgb.g, rgb.b))
 
     def getBrightness(self) -> int:
         return self._brightness
@@ -93,32 +139,3 @@ class FakeStrip(object):
     def numPixels(self):
         """Return the number of pixels in the display."""
         return self._led_data.size
-
-    def setPixelColor(self, n, color):
-        """Set LED at position n to the provided 24-bit color value (in RGB order).
-        """
-        self._led_data[n] = color
-
-    def setPixelColorRGB(self, n, red, green, blue):
-        """Set LED at position n to the provided red, green, and blue color.
-        Each color component should be a value from 0 to 255 (where 0 is the
-        lowest intensity and 255 is the highest intensity).
-        """
-        self.setPixelColor(n, Color(red, green, blue))
-
-    def getPixels(self):
-        """Return an object which allows access to the LED display data as if
-        it were a sequence of 24-bit RGB values.
-        """
-        return self._led_data
-
-    def getPixelColor(self, n):
-        """Get the 24-bit RGB color value for the LED at position n."""
-        return self._led_data[n]
-
-    def getPixelColorRGB(self, n):
-        c = lambda: None
-        setattr(c, 'r', self._led_data[n] >> 16 & 0xff)
-        setattr(c, 'g', self._led_data[n] >> 8 & 0xff)
-        setattr(c, 'b', self._led_data[n] & 0xff)
-        return c

pyleds/lib/Litsimaja.py

@@ -1,21 +1,21 @@
 from rpi_ws281x import PixelStrip
-# from lib.strip.WindowStrip import WindowStrip
-# from lib.strip.TkinterStrip import TkinterStrip
+from lib.FakeStrip import FakeStrip
 from lib.LoopSwitch import LoopSwitch
 
 
 class Litsimaja(object):
+    _strip: PixelStrip
     _loops: []
 
     def __init__(self):
-        self._strip = PixelStrip(290, 18, 800000, 10, False, 255, 0, 4104)
+        self._strip = FakeStrip(290, 18, 800000, 10, False, 255, 0, 4104)
         self._loops = []
         self._strip.begin()
 
     def count_pixels(self) -> int:
         return self._strip.numPixels()
 
-    def get_strip(self):
+    def get_strip(self) -> PixelStrip:
         return self._strip
 
     def set_pixel_color(self, n: int, color: int) -> None:
@@ -25,7 +25,6 @@ class Litsimaja(object):
         self._strip.show()
 
     def add_loop(self, loop: LoopSwitch):
-        self.clear_loops()
         self._loops.append(loop)
 
     def clear_loops(self):

pyleds/lib/strip/TkinterStrip.py

@@ -1,73 +0,0 @@
-from threading import Thread
-from tkinter import Tk, Label
-from .FakeStrip import FakeStrip
-from lib.Color import Color_to_list
-from time import sleep
-import numpy as np
-from PIL import Image, ImageTk
-
-
-class Visualizer(Thread):
-
-    def __init__(self, x, y, multi):
-        Thread.__init__(self)
-        self.x, self.y = x, y
-        self.multi = multi
-        self.root = None
-        self.panel = None
-        self.first_loop = True
-        self.start()
-        sleep(0.04)
-
-    def run(self):
-        self.root = Tk()
-        self.root.title("RGB Visualizer")
-        self.panel = Label(self.root)
-        self.root.geometry(f'{int(self.x * self.multi)}x{int(self.y * self.multi)}')
-        self.panel.pack()
-        self.root.mainloop()
-
-    def print_image(self, frame):
-        self.panel.configure(image=frame)
-        self.panel.frame = frame
-
-
-class TkinterStrip(FakeStrip):
-
-    def __init__(self, num, pin, freq_hz=800000, dma=10, invert=False,
-                 brightness=255, channel=0, strip_type=None, gamma=None):
-        super().__init__(num, pin, freq_hz, dma, invert, brightness, channel, strip_type, gamma)
-        self.viz = Visualizer(95, 50, 6)
-        # self.ms = time() * 1000.0
-        self.show()
-
-    def show(self):
-        """Update the display with the data from the LED buffer."""
-        bp = [49, 99, 194, 244, 290]
-        x = self.viz.x
-        y = self.viz.y
-
-        data = np.zeros((y, x, 3), dtype=np.uint8)
-
-        for s in range(self.numPixels()):
-            x1 = y1 = 0
-            if s < 49:
-                x1 = x / 2 + s - 1
-            elif s < 99:
-                x1 = x - 1
-                y1 = (s - 49)
-            elif s < 194:
-                x1 = x + (99 - s) - 1
-                y1 = y - 1
-            elif s < 244:
-                y1 = y + (194 - s) - 1
-            elif s < 290:
-                x1 = s - 244
-            x1 = int(x1)
-            y1 = int(y1)
-            data[y1, x1] = Color_to_list(self.getPixelColor(s))
-        img = Image.fromarray(data, 'RGB').resize((int(self.viz.x * self.viz.multi), int(self.viz.y * self.viz.multi)))
-        self.viz.print_image(ImageTk.PhotoImage(img))
-        # ms = time() * 1000.0
-        # print(ms - self.ms)
-        # self.ms = ms

pyleds/lib/strip/WindowStrip.py

@@ -1,79 +0,0 @@
-from threading import Thread
-from tkinter import Tk, Canvas
-from lib.strip.FakeStrip import FakeStrip
-import time
-
-
-class Visualizer(Thread):
-
-    def __init__(self):
-        Thread.__init__(self)
-        self.x, self.y = 1000, 500
-        self.first_loop = True
-        self.start()
-        time.sleep(0.01)
-
-    def run(self):
-        self.root = Tk()
-        self.canvas = Canvas(self.root, width=self.x, height=self.y)
-        self.root.geometry(f'{self.x}x{self.y}')
-        self.canvas.grid()
-        self.root.mainloop()
-
-
-class WindowStrip(FakeStrip):
-
-    def __init__(self, num, pin, freq_hz=800000, dma=10, invert=False,
-                 brightness=255, channel=0, strip_type=None, gamma=None):
-        super().__init__(num, pin, freq_hz, dma, invert, brightness, channel, strip_type, gamma)
-        self.viz = Visualizer()
-        self.show()
-
-    def show(self):
-        """Update the display with the data from the LED buffer."""
-        size = 10.5
-        bp = [47, 97, 191, 242, 289]
-        x = self.viz.x
-        y = self.viz.y
-        first_loop = self.viz.first_loop
-
-        for s in range(self.numPixels()):
-            rgb_int = self.getPixelColor(s)
-            r = rgb_int & 255
-            g = (rgb_int >> 8) & 255
-            b = (rgb_int >> 16) & 255
-
-            if not first_loop:
-                self.viz.canvas.itemconfig(s + 1, fill="#%02x%02x%02x" % (r, g, b))
-            else:
-                x1 = 0
-                y1 = 0
-                x2 = 0
-                y2 = 0
-                if s < bp[0]:
-                    x1 = (x / 2) + s * size
-                    y1 = 0
-                    x2 = x1 + size
-                    y2 = size
-                elif s < bp[1]:
-                    x1 = x - size
-                    y1 = -(bp[0] - s) * size
-                    x2 = x1 + size
-                    y2 = y1 + size
-                elif s < bp[2]:
-                    x1 = x + (bp[1] - s) * size
-                    y1 = y
-                    x2 = x1 - size
-                    y2 = y1 - size
-                elif s < bp[3]:
-                    x1 = 0
-                    y1 = y + (bp[2] - s) * size
-                    x2 = x1 + size
-                    y2 = y1 - size
-                elif s < bp[4]:
-                    x1 = size * - (bp[3] - s)
-                    y1 = 0
-                    x2 = x1 + size
-                    y2 = y1 + size
-                self.viz.canvas.create_rectangle(x1, y1, x2, y2, fill="#%02x%02x%02x" % (r, g, b), outline="")
-        self.viz.first_loop = False

pyleds/program/peter/DiskoPidu.py

@@ -1,36 +0,0 @@
-#!/usr/bin/env python3
-# Ported by Peter
-# Palun!
-
-from lib.Program import Program
-import time
-import random
-
-
-def name():
-    return 'DiskoPidu'
-
-
-class DiskoPidu(Program):
-
-    def disco(self, segmentLength, wait_ms):
-        color = random.randint(0, 0xffffff)
-        totalLength = self._lm.count_pixels()
-        for p in range(totalLength):
-            if p % segmentLength == 0:
-                color = random.randint(0, 0xffffff)
-            self._lm.set_pixel_color(p, color)
-        self._lm.show()
-        time.sleep(wait_ms / 1000.0)
-
-    # Main program logic follows:
-    def run(self, args=None):
-        loop = False
-        if 'loop' in args and args['loop']:
-            loop = args['loop']
-
-        while self.get_loop().status():
-            self.disco(10, 500)
-
-            if not loop:
-                break

pyleds/program/peter/MegaMix.py

@@ -1,63 +0,0 @@
-#!/usr/bin/env python3
-# MegaMix
-# Mis m6tted tulevad kui kuuled "MegaMix"?
-# m6tlen et millal jooma saaks hakata
-
-from lib.Program import Program
-import time
-import random
-
-
-def name():
-    return 'MegaMix'
-
-
-class MegaMix(Program):
-
-    preset_colors = ["ffa500", "e56717", "e18b6b", "c36241", "ed9121", "f5deb3", "c35817", "ff8400", "efb261",
-                     "c78023", "cc6600", "e66c2c", "ff8040", "ff7f50", "ffc594", "f88158", "e67451", "fc7f03",
-                     "deaa88", "f87217", "db4200", "ff7e75"]
-    current_colors = []
-
-    # from https://chase-seibert.github.io/blog/2011/07/29/python-calculate-lighterdarker-rgb-colors.html
-    # edited to my own liking
-    def color_variant(self, hex_color, brightness_offset = 1):
-        """ takes a color like #87c95f and produces a lighter or darker variant """
-        if len(hex_color) != 6:
-            print("Passed %s into color_variant(), needs to be in 87c95f format." % hex_color)
-            return "000000"
-        rgb_hex = [hex_color[x:x+2] for x in [0, 2, 4]]
-        new_rgb_int = [int(hex_value, 16) + brightness_offset for hex_value in rgb_hex]
-        new_rgb_int = [min([255, max([0, i])]) for i in new_rgb_int] # make sure new values are between 0 and 255
-        # hex() produces "0x88", we want just "88"
-        new_hex_list = [hex(i)[2:].zfill(2) for i in new_rgb_int]
-        new_hex = "".join(new_hex_list)
-        return new_hex
-
-    def disco(self, wait_ms):
-        total_length = self._lm.count_pixels()
-        for p in range(total_length):
-            if len(self.current_colors) == total_length:
-                color = self.current_colors[p]
-                color = int(self.color_variant(color, random.randint(1, 10)), 16)
-                if color >= 16777215:
-                    color = int(random.choice(self.preset_colors), 16)
-                self.current_colors[p] = hex(color)[2:]
-            else:
-                color = int(random.choice(self.preset_colors), 16)
-                self.current_colors.append(hex(color)[2:])
-            self._lm.set_pixel_color(p, color)
-        self._lm.show()
-        time.sleep(wait_ms / 1000.0)
-
-    # Main program logic follows:
-    def run(self, args=None):
-        loop = False
-        if 'loop' in args and args['loop']:
-            loop = args['loop']
-
-        while self.get_loop().status():
-            self.disco(300)
-
-            if not loop:
-                break

pyleds/program/siinus/Wipes.py

@@ -1,13 +1,6 @@
 from lib.Program import Program
 from lib.Litsimaja import Litsimaja
-
-
-def Color(red, green, blue):
-    """Convert the provided red, green, blue color to a 24-bit color value.
-    Each color component should be a value 0-255 where 0 is the lowest intensity
-    and 255 is the highest intensity.
-    """
-    return (red << 16) | (green << 8) | blue
+from rpi_ws281x import Color
 
 
 def name():

pyleds/run.py

@@ -1,6 +1,7 @@
 #!/usr/bin/env python3
 import logging
 import sys
+import json
 
 import lib.ProgramLoading as Pl
 from lib.Litsimaja import Litsimaja
@@ -19,7 +20,8 @@ logger.addHandler(stdout_handler)
 
 # start litsimaja
 lm = Litsimaja()
-app = Flask(__name__, static_url_path='', static_folder='templates')
+app = Flask(__name__)
+# Pl.run('siinus', 'Static', lm, logger, {'color': [50, 50, 50]})
 
 
 @app.route('/', methods=['GET'])
@@ -27,6 +29,11 @@ def respondroot():
     return render_template('index.html', programs=Pl.list_all(True))
 
 
+@app.route('/jscolor.js', methods=['GET'])
+def respondjs():
+    return render_template('jscolor.js')
+
+
 @app.route('/run')
 def run():
     Pl.run('siinus', 'MyProgram', lm, logger, {'color': [50, 50, 50]})

pyleds/templates/custom.css

@@ -1,30 +0,0 @@
-.section-rgb {
-    height: 20rem;
-    text-align: center;
-}
-
-select {
-    width: 100%;
-    height: calc(100% - 1.5rem);
-}
-
-.colorpicker {
-    display: inline-block;
-    height: 38px;
-    padding: 0 30px;
-    width: 100%;
-    color: #555;
-    background-color: transparent;
-    border-radius: 4px;
-    border: 1px solid #bbb;
-    cursor: pointer;
-    box-sizing: border-box; }
-.colorpicker:hover,
-.colorpicker:focus {
-    color: #333;
-    border-color: #888;
-    outline: 0; }
-
-.spacer-row {
-    height: 2rem;
-}

pyleds/templates/index.html

@@ -1,109 +1,103 @@
 <html>
 <head>
-    <title>Litsimaja</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="normalize.css">
-    <link rel="stylesheet" href="skeleton.css">
-    <link rel="stylesheet" href="custom.css">
+    <title>litsimaja</title>
+    <script src="jscolor.js"></script>
 
     <script type="text/javascript">
-        const hexToRgb = hex =>
-            hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
-                ,(m, r, g, b) => '#' + r + r + g + g + b + b)
-                .substring(1).match(/.{2}/g)
-                .map(x => parseInt(x, 16));
-
-        function show_loading(visible) {
-            document.getElementById('loading').style.visibility = visible ? 'visible' : 'hidden';
-        }
-
-        function send_get(url) {
-            show_loading(true);
-            var http = new XMLHttpRequest();
-            http.open('GET', url, true);
-            http.onreadystatechange = function() {
-                if (http.readyState == 4 && http.status == 200) {
-                    show_loading(false);
-                }
-            };
-            http.send();
-        }
-
-        function send_post(url, data) {
-            show_loading(true);
-            var http = new XMLHttpRequest();
-            http.open('POST', url, true);
-            http.setRequestHeader('Content-Type', 'application/json');
-            http.onreadystatechange = function() {
-                if (http.readyState == 4 && http.status == 200) {
-                    show_loading(false);
-                }
-            };
-            let json = JSON.stringify(data);
-            http.send(json);
-        }
-
-        function getProgramSelection() {
-            let select = document.getElementById('program');
-            return select.value;
-        }
-
-        function isLoop() {
-            let looping = document.getElementById('looping');
-            return looping.checked;
-        }
-
-        function isChanged(value) {
-            let rgb = hexToRgb(value);
-            let data = {color: [Number(rgb[0]), Number(rgb[1]), Number(rgb[2])], loop: isLoop()};
-            send_post('program/' + getProgramSelection(), data);
-        }
-
-        function doInit() {
-            send_post('/program/siinus.Wipes', {color: [100, 50, 0]})
-        }
-
-        function doBlind() {
-            send_post('/program/siinus.Static', {color: [0, 0, 0]})
-        }
-
-        function doCancel() {
-            send_get('/crash');
-        }
+jscolor.presets.default = {
+	format:'rgb', previewPosition:'right', previewSize:700, width:800, 
+	height:400, sliderSize:50
+};
+
+	function show_loading(visible)
+	{
+		document.getElementById('loading').style.visibility = visible ? 'visible' : 'hidden';
+	}
+
+function send_get(url)
+{
+	show_loading(true);
+	var http = new XMLHttpRequest();
+	http.open('GET', url, true);
+	http.onreadystatechange = function() {
+		if (http.readyState == 4 && http.status == 200) {
+			show_loading(false);
+		}
+	}
+	http.send();
+}
+
+function send_post(url, data)
+{
+	show_loading(true);
+	var http = new XMLHttpRequest();
+	http.open('POST', url, true);
+	http.setRequestHeader('Content-Type', 'application/json');
+	http.onreadystatechange = function() {
+		if (http.readyState == 4 && http.status == 200) {
+			show_loading(false);
+		}
+	}
+	let json = JSON.stringify(data);
+	http.send(json);
+}
+
+function getProgramSelection()
+{
+    let select = document.getElementById('program');
+    return select.value;
+}
+
+function isLoop()
+{
+    let looping = document.getElementById('looping');
+    return looping.checked;
+}
+
+	function isChanged(value)
+	{
+			let rgb = value.split('(')[1].split(')')[0].split(',');
+			let data = {color: [Number(rgb[0]), Number(rgb[1]), Number(rgb[2])], loop: isLoop()};
+		send_post('program/' + getProgramSelection(), data);
+	}
+
+	function doInit()
+	{
+		send_post('/program/siinus.Wipes', {color: [100, 50, 0]})
+	}
+
+	function doBlind()
+	{
+		send_post('/program/siinus.Static', {color: [0, 0, 0]})
+	}
+
+	function doCancel()
+	{
+	    send_get('/crash');
+	}
+
+
+
     </script>
 </head>
 
 <body>
-    <div class="spacer-row"></div>
-    <div class="container">
-        <div class="row">
-            <button onclick="doInit()">init</button>
-            <button onclick="doCancel()">end loop</button>
-            <button onclick="doBlind()">off</button>
-
-            <label><input type="checkbox" id="looping" /><b> loop</b></label>
-        </div>
-        <div class="row" id='loading' style="visibility: hidden"><b>LOADING!</b></div>
-        <div class="section-rgb">
-            <div class="row">
-                <div class="one-third column">
-                    <select id="program" size="10">
-                        {% for group in programs %}
-                            <optgroup label="{{ group.group }}">
-                                {% for program in group.programs %}
-                                    <option value="{{ program.prg }}">{{ program.name }}</option>
-                                {% endfor %}
-                            </optgroup>
-                        {% endfor %}
-                    </select>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class ="one-third column">
-                <input class="colorpicker" type="color" value="#ff0000" oninput="isChanged(this.value)">
-            </div>
-        </div>
-    </div>
+
+<button onclick="doInit()">init</button>
+<button onclick="doCancel()">end loop</button>
+<button onclick="doBlind()">off</button>
+<label><input type="checkbox" id="looping"/>loop</label>
+<div id='loading' style="visibility: hidden">LOADING!</div>
+<select id="program" size="10">
+    {% for group in programs %}
+    <optgroup label="{{ group.group }}">
+        {% for program in group.programs %}
+        <option label="{{ program.name }}">{{ program.prg }}</option>
+        {% endfor %}
+    </optgroup>
+    {% endfor %}
+</select>
+<input id="rgbinput" data-jscolor="" onchange="isChanged(this.value)">
+
 </body>
 </html>

pyleds/templates/normalize.css

@@ -1,427 +0,0 @@
-/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
-
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-
-html {
-  font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
- * Remove default margin.
- */
-
-body {
-  margin: 0;
-}
-
-/* HTML5 display definitions
-   ========================================================================== */
-
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-
-/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
-}
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
- */
-
-[hidden],
-template {
-  display: none;
-}
-
-/* Links
-   ========================================================================== */
-
-/**
- * Remove the gray background color from active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-
-a:active,
-a:hover {
-  outline: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-
-b,
-strong {
-  font-weight: bold;
-}
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/**
- * Address styling not present in IE 8/9.
- */
-
-mark {
-  background: #ff0;
-  color: #000;
-}
-
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-
-img {
-  border: 0;
-}
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * Address margin not present in IE 8/9 and Safari.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * Address differences between Firefox and other browsers.
- */
-
-hr {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  height: 0;
-}
-
-/**
- * Contain overflow in all browsers.
- */
-
-pre {
-  overflow: auto;
-}
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-
-/**
- * 1. Correct color not being inherited.
- *    Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit; /* 1 */
-  font: inherit; /* 2 */
-  margin: 0; /* 3 */
-}
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-
-button {
-  overflow: visible;
-}
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-
-button,
-select {
-  text-transform: none;
-}
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
- */
-
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-  cursor: pointer; /* 3 */
-}
-
-/**
- * Re-set default cursor for disabled elements.
- */
-
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-
-input {
-  line-height: normal;
-}
-
-/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
- *    (include `-moz` to future-proof).
- */
-
-input[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box; /* 2 */
-  box-sizing: content-box;
-}
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * Define consistent border, margin, and padding.
- */
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-
-legend {
-  border: 0; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
-/* Tables
-   ========================================================================== */
-
-/**
- * Remove most spacing between table cells.
- */
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}

pyleds/templates/skeleton.css

@@ -1,418 +0,0 @@
-/*
-* Skeleton V2.0.4
-* Copyright 2014, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 12/29/2014
-*/
-
-
-/* Table of contents
-––––––––––––––––––––––––––––––––––––––––––––––––––
-- Grid
-- Base Styles
-- Typography
-- Links
-- Buttons
-- Forms
-- Lists
-- Code
-- Tables
-- Spacing
-- Utilities
-- Clearing
-- Media Queries
-*/
-
-
-/* Grid
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.container {
-  position: relative;
-  width: 100%;
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 20px;
-  box-sizing: border-box; }
-.column,
-.columns {
-  width: 100%;
-  float: left;
-  box-sizing: border-box; }
-
-/* For devices larger than 400px */
-@media (min-width: 400px) {
-  .container {
-    width: 85%;
-    padding: 0; }
-}
-
-/* For devices larger than 550px */
-@media (min-width: 550px) {
-  .container {
-    width: 80%; }
-  .column,
-  .columns {
-    margin-left: 4%; }
-  .column:first-child,
-  .columns:first-child {
-    margin-left: 0; }
-
-  .one.column,
-  .one.columns                    { width: 4.66666666667%; }
-  .two.columns                    { width: 13.3333333333%; }
-  .three.columns                  { width: 22%;            }
-  .four.columns                   { width: 30.6666666667%; }
-  .five.columns                   { width: 39.3333333333%; }
-  .six.columns                    { width: 48%;            }
-  .seven.columns                  { width: 56.6666666667%; }
-  .eight.columns                  { width: 65.3333333333%; }
-  .nine.columns                   { width: 74.0%;          }
-  .ten.columns                    { width: 82.6666666667%; }
-  .eleven.columns                 { width: 91.3333333333%; }
-  .twelve.columns                 { width: 100%; margin-left: 0; }
-
-  .one-third.column               { width: 30.6666666667%; }
-  .two-thirds.column              { width: 65.3333333333%; }
-
-  .one-half.column                { width: 48%; }
-
-  /* Offsets */
-  .offset-by-one.column,
-  .offset-by-one.columns          { margin-left: 8.66666666667%; }
-  .offset-by-two.column,
-  .offset-by-two.columns          { margin-left: 17.3333333333%; }
-  .offset-by-three.column,
-  .offset-by-three.columns        { margin-left: 26%;            }
-  .offset-by-four.column,
-  .offset-by-four.columns         { margin-left: 34.6666666667%; }
-  .offset-by-five.column,
-  .offset-by-five.columns         { margin-left: 43.3333333333%; }
-  .offset-by-six.column,
-  .offset-by-six.columns          { margin-left: 52%;            }
-  .offset-by-seven.column,
-  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
-  .offset-by-eight.column,
-  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
-  .offset-by-nine.column,
-  .offset-by-nine.columns         { margin-left: 78.0%;          }
-  .offset-by-ten.column,
-  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
-  .offset-by-eleven.column,
-  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
-
-  .offset-by-one-third.column,
-  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
-  .offset-by-two-thirds.column,
-  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
-
-  .offset-by-one-half.column,
-  .offset-by-one-half.columns     { margin-left: 52%; }
-
-}
-
-
-/* Base Styles
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-/* NOTE
-html is set to 62.5% so that all the REM measurements throughout Skeleton
-are based on 10px sizing. So basically 1.5rem = 15px :) */
-html {
-  font-size: 62.5%; }
-body {
-  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
-  line-height: 1.6;
-  font-weight: 400;
-  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #222; }
-
-
-/* Typography
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: 2rem;
-  font-weight: 300; }
-h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
-h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
-h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
-h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
-h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
-h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
-
-/* Larger than phablet */
-@media (min-width: 550px) {
-  h1 { font-size: 5.0rem; }
-  h2 { font-size: 4.2rem; }
-  h3 { font-size: 3.6rem; }
-  h4 { font-size: 3.0rem; }
-  h5 { font-size: 2.4rem; }
-  h6 { font-size: 1.5rem; }
-}
-
-p {
-  margin-top: 0; }
-
-
-/* Links
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-a {
-  color: #1EAEDB; }
-a:hover {
-  color: #0FA0CE; }
-
-
-/* Buttons
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  display: inline-block;
-  height: 38px;
-  padding: 0 30px;
-  color: #555;
-  text-align: center;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 38px;
-  letter-spacing: .1rem;
-  text-transform: uppercase;
-  text-decoration: none;
-  white-space: nowrap;
-  background-color: transparent;
-  border-radius: 4px;
-  border: 1px solid #bbb;
-  cursor: pointer;
-  box-sizing: border-box; }
-.button:hover,
-button:hover,
-input[type="submit"]:hover,
-input[type="reset"]:hover,
-input[type="button"]:hover,
-.button:focus,
-button:focus,
-input[type="submit"]:focus,
-input[type="reset"]:focus,
-input[type="button"]:focus {
-  color: #333;
-  border-color: #888;
-  outline: 0; }
-.button.button-primary,
-button.button-primary,
-input[type="submit"].button-primary,
-input[type="reset"].button-primary,
-input[type="button"].button-primary {
-  color: #FFF;
-  background-color: #33C3F0;
-  border-color: #33C3F0; }
-.button.button-primary:hover,
-button.button-primary:hover,
-input[type="submit"].button-primary:hover,
-input[type="reset"].button-primary:hover,
-input[type="button"].button-primary:hover,
-.button.button-primary:focus,
-button.button-primary:focus,
-input[type="submit"].button-primary:focus,
-input[type="reset"].button-primary:focus,
-input[type="button"].button-primary:focus {
-  color: #FFF;
-  background-color: #1EAEDB;
-  border-color: #1EAEDB; }
-
-
-/* Forms
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea,
-select {
-  height: 38px;
-  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
-  background-color: #fff;
-  border: 1px solid #D1D1D1;
-  border-radius: 4px;
-  box-shadow: none;
-  box-sizing: border-box; }
-/* Removes awkward default styles on some inputs for iOS */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none; }
-textarea {
-  min-height: 65px;
-  padding-top: 6px;
-  padding-bottom: 6px; }
-input[type="email"]:focus,
-input[type="number"]:focus,
-input[type="search"]:focus,
-input[type="text"]:focus,
-input[type="tel"]:focus,
-input[type="url"]:focus,
-input[type="password"]:focus,
-textarea:focus,
-select:focus {
-  border: 1px solid #33C3F0;
-  outline: 0; }
-label,
-legend {
-  display: block;
-  margin-bottom: .5rem;
-  font-weight: 600; }
-fieldset {
-  padding: 0;
-  border-width: 0; }
-input[type="checkbox"],
-input[type="radio"] {
-  display: inline; }
-label > .label-body {
-  display: inline-block;
-  margin-left: .5rem;
-  font-weight: normal; }
-
-
-/* Lists
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-ul {
-  list-style: circle inside; }
-ol {
-  list-style: decimal inside; }
-ol, ul {
-  padding-left: 0;
-  margin-top: 0; }
-ul ul,
-ul ol,
-ol ol,
-ol ul {
-  margin: 1.5rem 0 1.5rem 3rem;
-  font-size: 90%; }
-li {
-  margin-bottom: 1rem; }
-
-
-/* Code
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-code {
-  padding: .2rem .5rem;
-  margin: 0 .2rem;
-  font-size: 90%;
-  white-space: nowrap;
-  background: #F1F1F1;
-  border: 1px solid #E1E1E1;
-  border-radius: 4px; }
-pre > code {
-  display: block;
-  padding: 1rem 1.5rem;
-  white-space: pre; }
-
-
-/* Tables
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-th,
-td {
-  padding: 12px 15px;
-  text-align: left;
-  border-bottom: 1px solid #E1E1E1; }
-th:first-child,
-td:first-child {
-  padding-left: 0; }
-th:last-child,
-td:last-child {
-  padding-right: 0; }
-
-
-/* Spacing
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-button,
-.button {
-  margin-bottom: 1rem; }
-input,
-textarea,
-select,
-fieldset {
-  margin-bottom: 1.5rem; }
-pre,
-blockquote,
-dl,
-figure,
-table,
-p,
-ul,
-ol,
-form {
-  margin-bottom: 2.5rem; }
-
-
-/* Utilities
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.u-full-width {
-  width: 100%;
-  box-sizing: border-box; }
-.u-max-full-width {
-  max-width: 100%;
-  box-sizing: border-box; }
-.u-pull-right {
-  float: right; }
-.u-pull-left {
-  float: left; }
-
-
-/* Misc
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-hr {
-  margin-top: 3rem;
-  margin-bottom: 3.5rem;
-  border-width: 0;
-  border-top: 1px solid #E1E1E1; }
-
-
-/* Clearing
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-
-/* Self Clearing Goodness */
-.container:after,
-.row:after,
-.u-cf {
-  content: "";
-  display: table;
-  clear: both; }
-
-
-/* Media Queries
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-/*
-Note: The best way to structure the use of media queries is to create the queries
-near the relevant code. For example, if you wanted to change the styles for buttons
-on small devices, paste the mobile query code up in the buttons section and style it
-there.
-*/
-
-
-/* Larger than mobile */
-@media (min-width: 400px) {}
-
-/* Larger than phablet (also point when grid becomes active) */
-@media (min-width: 550px) {}
-
-/* Larger than tablet */
-@media (min-width: 750px) {}
-
-/* Larger than desktop */
-@media (min-width: 1000px) {}
-
-/* Larger than Desktop HD */
-@media (min-width: 1200px) {}