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

Reviewed-on: #1

.gitignore

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

README.md

@@ -1,16 +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.
-
-Create .env file:
-```cp .env.example .env```
-
-and see: ```USE_EMULATOR```
-
-Now when you run the program, you will see a Tkinter window pop up with a rectangle simulating the LED strip.

pyleds/.env.defaults

@@ -1,17 +0,0 @@
-ENVIRONMENT=prod
-USE_EMULATOR=false
-BIND_ADDR=127.0.0.1
-BIND_PORT=8080
-
-# Strip configuration
-STRIP_PIXELS=290
-STRIP_GPIO_PIN=18
-STRIP_HZ=800000
-STRIP_DMA=10
-STRIP_INVERT=false
-STRIP_BRIGHTNESS=255
-STRIP_CHANNEL=0
-STRIP_TYPE=4104
-
-REGIONS=46,96,191,241
-BPM_DEFAULT=60

pyleds/.env.example

@@ -1,2 +0,0 @@
-ENVIRONMENT=dev
-USE_EMULATOR=true

pyleds/.gitignore

@@ -1,2 +1 @@
-.env
 litsimaja.log

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/Config.py

@@ -1,38 +0,0 @@
-from dotenv import dotenv_values
-import pathlib
-
-
-def populate_values(load: {}):
-    conf = load
-    conf['IS_DEV']: bool = str.lower(load['ENVIRONMENT']) == 'dev'
-    conf['USE_EMULATOR']: bool = str.lower(load['USE_EMULATOR']) == 'true'
-    conf['BIND_PORT']: int = int(load['BIND_PORT'])
-
-    conf['STRIP_PIXELS']: int = int(load['STRIP_PIXELS'])
-    conf['STRIP_GPIO_PIN']: int = int(load['STRIP_GPIO_PIN'])
-    conf['STRIP_HZ']: int = int(load['STRIP_HZ'])
-    conf['STRIP_DMA']: int = int(load['STRIP_DMA'])
-    conf['STRIP_INVERT']: bool = str.lower(load['STRIP_INVERT']) == 'true'
-    conf['STRIP_BRIGHTNESS']: int = int(load['STRIP_BRIGHTNESS'])
-    conf['STRIP_CHANNEL']: int = int(load['STRIP_CHANNEL'])
-    conf['STRIP_TYPE']: int = int(load['STRIP_TYPE'])
-
-    conf['REGIONS']: [] = [int(x) for x in load['REGIONS'].split(',')]
-    conf['BPM_DEFAULT']: int = int(load['BPM_DEFAULT'])
-
-    return conf
-
-
-class Config(object):
-    _config: {} = {}
-
-    def __init__(self):
-        rp = str(pathlib.Path(__file__).parent.parent.absolute())
-        load_conf = {
-            **dotenv_values(rp + "/.env.defaults"),
-            **dotenv_values(rp + "/.env"),
-        }
-        self._config = populate_values(load_conf)
-
-    def get(self, key: str):
-        return self._config[key]

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,81 +1,33 @@
-from lib.Config import Config
+from rpi_ws281x import PixelStrip
+from lib.FakeStrip import FakeStrip
 from lib.LoopSwitch import LoopSwitch
-from lib.Regions import Regions
-from lib.Tempo import Tempo
 
 
 class Litsimaja(object):
-    def __init__(self):
-        self._config = Config()
-        if self.conf('USE_EMULATOR'):
-            module = __import__('lib.strip.TkinterStrip', None, None, ['TkinterStrip'])
-            class_name = 'TkinterStrip'
-        else:
-            module = __import__('rpi_ws281x', None, None, ['PixelStrip'])
-            class_name = 'PixelStrip'
+    _strip: PixelStrip
+    _loops: []
 
-        loaded_class = getattr(module, class_name)
-        self._strip = loaded_class(
-            self.conf('STRIP_PIXELS'), self.conf('STRIP_GPIO_PIN'), self.conf('STRIP_HZ'), self.conf('STRIP_DMA'),
-            self.conf('STRIP_INVERT'), self.conf('STRIP_BRIGHTNESS'), self.conf('STRIP_CHANNEL'),
-            self.conf('STRIP_TYPE')
-        )
+    def __init__(self):
+        self._strip = FakeStrip(290, 18, 800000, 10, False, 255, 0, 4104)
         self._loops = []
         self._strip.begin()
-        self._regions: Regions = Regions(self.count_pixels(), self.conf('REGIONS'))
-        self._tempo: Tempo = Tempo(self.conf('BPM_DEFAULT'))
-        self._selected_program = None
 
     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:
-        if self._regions.is_pixel_enabled(n):
-            self._strip.setPixelColor(n, color)
-        else:
-            self._strip.setPixelColor(n, 0)
+        self._strip.setPixelColor(n, color)
 
     def show(self) -> None:
         self._strip.show()
 
     def add_loop(self, loop: LoopSwitch):
-        self.clear_loops()
         self._loops.append(loop)
 
     def clear_loops(self):
         for loop in self._loops:
             loop.stop()
         self._loops.clear()
-
-    def switch_region(self, region_id: int):
-        self._regions.switch_region(region_id)
-
-    def get_region_ids(self):
-        return self._regions.list_region_ids()
-
-    def build_status_array(self):
-        data = {'success': True}
-        features = {
-            'program': self._selected_program,
-            'tempo': {
-                'bpm': self.get_tempo().get_bpm()
-            },
-        }
-        regions = []
-        for region_id in self._regions.list_region_ids():
-            regions.append(self._regions.is_region_enabled(region_id))
-        features['region'] = regions
-        data['features'] = features
-        return data
-
-    def get_tempo(self):
-        return self._tempo
-
-    def set_selected_program(self, program_name: str):
-        self._selected_program = program_name
-
-    def conf(self, key: str):
-        return self._config.get(key)

pyleds/lib/ProgramLoading.py

@@ -15,7 +15,6 @@ def run(namespace: str, class_name: str, lm: Litsimaja, logger, args: [] = None)
     program = loaded_class(lm)
     logger.info('Loaded "' + module.name() + '" from ' + namespace + '.' + class_name + ' with args: ' + repr(args))
     lm.add_loop(program.get_loop())
-    lm.set_selected_program(namespace + '.' + class_name)
     program.run(args)
 
 

pyleds/lib/Regions.py

@@ -1,38 +0,0 @@
-class Regions(object):
-    _pixelsEnabled: [] = []
-    _regions: [] = []
-
-    def __init__(self, strip_length: int, splitters: []):
-        self._length: int = strip_length
-        start_pixel = 0
-        for i in splitters:
-            if i > self._length:
-                raise ValueError('splitter out of bounds, you idiot')
-            self._regions.append([start_pixel, i + 1, True])
-            start_pixel = i + 1
-
-        self._regions.append([start_pixel, self._length, True])
-        for i in range(self._length):
-            self._pixelsEnabled.append(True)
-
-    def region_switch(self, region_id: int, enabled: bool):
-        pixel_region = self._regions[region_id]
-        for i in range(pixel_region[0], pixel_region[1]):
-            self._pixelsEnabled[i] = enabled
-        self._regions[region_id][2] = enabled
-
-    def is_pixel_enabled(self, pixel_id: int) -> bool:
-        return self._pixelsEnabled[pixel_id]
-    
-    def is_region_enabled(self, region_id: int) -> bool:
-        return self._regions[region_id][2]
-    
-    def switch_region(self, region_id: int):
-        status: bool = self._regions[region_id][2]
-        self.region_switch(region_id, not status)
-
-    def list_region_ids(self):
-        result = []
-        for i in range(len(self._regions)):
-            result.append(i)
-        return result

pyleds/lib/Tempo.py

@@ -1,45 +0,0 @@
-import time
-from typing import Optional
-
-
-class Tempo(object):
-    _last_beat: float
-    _override_beat: Optional[float] = None
-    
-    def __init__(self, bpm: float = 60):
-        self._bpm: float = bpm
-        self.update_last_beat()
-    
-    def set_bpm(self, bpm: float) -> None:
-        self._bpm = bpm
-    
-    def get_bpm(self) -> float:
-        return self._bpm
-    
-    def update_last_beat(self) -> None:
-        self._last_beat = time.time()
-    
-    def get_beat_time(self) -> float:
-        return 1000 / (self._bpm / 60)
-    
-    def get_beat_delay(self) -> Optional[float]:
-        tick = self._override_beat
-        if tick is None:
-            return None
-        self._override_beat = None
-        return tick - self._last_beat
-    
-    def sync_beat(self):
-        self._override_beat = time.time()
-        
-    def wait(self, beat_divider: int = 1):
-        now = time.time()
-        next_beat = self._last_beat + (self.get_beat_time() / beat_divider / 1000)
-        wait_time = next_beat - now
-        beat_delay = self.get_beat_delay()
-        if beat_delay is not None:
-            wait_time += beat_delay
-        if wait_time > 0:
-            time.sleep(wait_time)
-        self.update_last_beat()
-        return True

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,37 +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._lm.get_tempo().wait()
-            self.disco(10, 0)
-
-            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/Gaynbow.py

@@ -1,35 +0,0 @@
-from lib.Program import Program
-from rpi_ws281x import Color
-import time
-
-
-def name():
-    return 'RGBT Gaynbow'
-
-
-def wheel(pos):
-    """Generate rainbow colors across 0-255 positions."""
-    if pos < 85:
-        return Color(pos * 3, 255 - pos * 3, 0)
-    elif pos < 170:
-        pos -= 85
-        return Color(255 - pos * 3, 0, pos * 3)
-    else:
-        pos -= 170
-        return Color(0, pos * 3, 255 - pos * 3)
-
-
-class Gaynbow(Program):
-    def run(self, args: [] = None):
-        wait_ms = 20
-        iterations = 5
-        while self.get_loop().status():
-            """Draw rainbow that uniformly distributes itself across all pixels."""
-            for j in range(256 * iterations):
-                if not self.get_loop().status():
-                    break
-                for i in range(self._lm.count_pixels()):
-                    self._lm.set_pixel_color(i, wheel(
-                        (int(i * 256 / self._lm.count_pixels()) + j) & 255))
-                self._lm.show()
-                time.sleep(wait_ms / 1000.0)

pyleds/program/siinus/HzTick.py

@@ -1,22 +0,0 @@
-from lib.Program import Program
-import time
-
-
-def name():
-    return '1Hz tick'
-
-
-# Tick seconds like analog clock
-class HzTick(Program):
-    def run(self, args: [] = None) -> None:
-        tempo = self._lm.get_tempo()
-
-        while self.get_loop().status():
-            second = time.localtime().tm_sec
-            second_pixel = int(self._lm.count_pixels() / 60 * second)
-            color_arr = args['color']
-            for i in range(self._lm.count_pixels()):
-                self._lm.set_pixel_color(i, (color_arr[0] << 16) | (color_arr[1] << 8) | color_arr[2])
-            self._lm.set_pixel_color(second_pixel, 255)
-            self._lm.show()
-            tempo.wait()

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,54 +1,49 @@
 #!/usr/bin/env python3
 import logging
-import pathlib
 import sys
+import json
+
 import lib.ProgramLoading as Pl
 from lib.Litsimaja import Litsimaja
-from flask import Flask, request, Response, render_template, json
-
-root_path = pathlib.Path(__file__).parent.absolute()
-# start litsimaja
-lm = Litsimaja()
+from flask import Flask, request, Response, render_template
 
 # logging
 logger = logging.getLogger('litsimaja')
-logger.setLevel(logging.DEBUG if lm.conf('IS_DEV') else logging.WARN)
+logger.setLevel(logging.DEBUG)
 formatter = logging.Formatter('%(asctime)s - %(name)s - %(levelname)s - %(message)s')
-file_handler = logging.FileHandler(str(root_path) + '/litsimaja.log')
+file_handler = logging.FileHandler('litsimaja.log')
 file_handler.setFormatter(formatter)
 logger.addHandler(file_handler)
 stdout_handler = logging.StreamHandler(sys.stdout)
 stdout_handler.setFormatter(formatter)
 logger.addHandler(stdout_handler)
 
-app = Flask(__name__, static_url_path='', static_folder='templates')
-Pl.run('siinus', 'Wipes', lm, logger, {'color': [0, 0, 0]})
-Pl.run('peter', 'DiskoPidu', lm, logger, {})
+# start litsimaja
+lm = Litsimaja()
+app = Flask(__name__)
+# Pl.run('siinus', 'Static', lm, logger, {'color': [50, 50, 50]})
 
 
-def lm_standard_xhr_response() -> Response:
-    return Response(response=json.dumps(lm.build_status_array()), status=200, mimetype='application/json')
+@app.route('/', methods=['GET'])
+def respondroot():
+    return render_template('index.html', programs=Pl.list_all(True))
 
 
-@app.route('/', methods=['GET'])
-def respond_root():
-    return render_template(
-        'index.html',
-        programs=Pl.list_all(True),
-        regions=lm.get_region_ids(),
-        status=lm.build_status_array()
-    )
+@app.route('/jscolor.js', methods=['GET'])
+def respondjs():
+    return render_template('jscolor.js')
 
 
-@app.route('/status', methods=['GET'])
-def respond_status():
-    return lm_standard_xhr_response()
+@app.route('/run')
+def run():
+    Pl.run('siinus', 'MyProgram', lm, logger, {'color': [50, 50, 50]})
+    return Response(status=200)
 
 
 @app.route('/crash', methods=['GET'])
 def crash():
     lm.clear_loops()
-    return lm_standard_xhr_response()
+    return Response(status=200)
 
 
 @app.route('/program/<program>', methods=['POST'])
@@ -56,26 +51,7 @@ def run_program(program):
     args = request.get_json(force=True)
     prg = program.split('.')
     Pl.run(prg[0], prg[1], lm, logger, args)
-    return lm_standard_xhr_response()
-
-
-@app.route('/region/<region>', methods=['GET'])
-def switch_region(region):
-    lm.switch_region(int(region))
-    return lm_standard_xhr_response()
-
-
-@app.route('/tempo/set/<float:bpm>', methods=['GET'])
-def set_tempo(bpm: float):
-    tempo = lm.get_tempo()
-    tempo.set_bpm(bpm)
-    return lm_standard_xhr_response()
-
-
-@app.route('/tempo/sync', methods=['GET'])
-def sync_beat():
-    lm.get_tempo().sync_beat()
-    return lm_standard_xhr_response()
+    return Response(status=200)
 
 
-app.run(lm.conf('BIND_ADDR'), lm.conf('BIND_PORT'))
+app.run('0.0.0.0', 8080)

pyleds/templates/custom.css

@@ -1,49 +0,0 @@
-.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;
-}
-
-button.region {
-    padding: 0 15;
-}
-
-button.region_off {
-    background-color: gray !important
-}
-
-div.program_select {
-    height: 300px;
-    overflow: auto;
-    border: 1px solid gray;
-    text-align: left;
-}
-
-div.program_select ul {
-    list-style: none;
-    border-bottom: 1px solid silver;
-    margin-bottom: 0;
-}
-
-div.program_select ul li {
-    margin: auto;
-}
-
-div.program_select ul li label {
-    margin: 3px auto;
-}

pyleds/templates/index.html

@@ -1,166 +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">
-        'use strict';
-        function hexToRgb(value) {
-            var aRgbHex = value.substring(1).match(/.{1,2}/g);
-            var aRgb = [
-                parseInt(aRgbHex[0], 16),
-                parseInt(aRgbHex[1], 16),
-                parseInt(aRgbHex[2], 16)
-            ];
-            return aRgb;
-        }
-
-        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.setRequestHeader('accept', 'application/json');
-            http.onreadystatechange = function() {
-                if (http.readyState == 4 && http.status == 200) {
-                    show_loading(false);
-                    updateStatus(http.responseText);
-                }
-            };
-            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.setRequestHeader('accept', 'application/json');
-            http.onreadystatechange = function() {
-                if (http.readyState == 4 && http.status == 200) {
-                    show_loading(false);
-                }
-            };
-            let json = JSON.stringify(data);
-            http.send(json);
-        }
-
-        function updateStatus(json) {
-            let status = JSON.parse(json);
-            document.getElementById('tempo').value = status.features.tempo.bpm;
-            let regions = status.features.region;
-           for (let i = 0, len = regions.length; i < len; i++) {
-                if (regions[i]) {
-                    document.getElementById('region_' + i).classList.remove('region_off');
-                } else {
-                    document.getElementById('region_' + i).classList.add('region_off');
-                }
-            }
-            let programs = document.getElementsByName('program_select');
-            for (var i = 0, len = programs.length; i < len; i++) {
-                if (programs[i].value === status.features.program) {
-                    programs[i].checked = true;
-                }
-            }
-        }
-
-        function getProgramSelection() {
-            let radios = document.getElementsByName('program_select');
-            for (var i = 0, length = radios.length; i < length; i++) {
-                if (radios[i].checked) {
-                    return radios[i].value;
-                }
-            }
-            return null;
-        }
-
-        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');
-        }
-
-        function switchRegion(region_id) {
-            send_get('/region/' + region_id);
-        }
+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="send_get('/status')">get</button>
-            <button onclick="doInit()">intro</button>
-            <button onclick="doCancel()">halt</button>
-            <button onclick="doBlind()">leds off</button>
-
-            <label><input type="checkbox" id="looping" checked/><b> loop</b></label>
-        </div>
-        <div class="row">
-            <input id="tempo" type="number" step="0.1" onchange="send_get('/tempo/set/' + parseFloat(this.value).toFixed(2))" value="{{ status.features.tempo.bpm }}">
-            <button onclick="send_get('/tempo/sync')">sync</button>
-        </div>
-        <div class="row">
-            {% for region in regions %}
-                {% set region_off = '' %}
-                {% if not status.features.region[region] %}
-                    {% set region_off = ' region_off' %}
-                {% endif %}
-                <button id="region_{{ region }}" class="region{{ region_off }}" onclick="switchRegion({{ region }})">zone {{ region }}</button>
-            {% endfor %}
-        </div>
-        <div class="row" id='loading' style="visibility: hidden"><b>LOADING!</b></div>
-        <div class="row">
-            <div class="program_select one-half column">
-                {% for group in programs %}
-                    <ul>
-                        <li>{{ group.group }}</li>
-                        {% for program in group.programs %}
-                            {% set pr_checked = '' %}
-                            {% if status.features.program == program.prg %}
-                                {% set pr_checked = ' checked' %}
-                            {% endif %}
-                            <li>
-                                <label>
-                                    <input type="radio" name="program_select" value="{{ program.prg }}"{{ pr_checked }}>
-                                    {{ program.name }}
-                                </label>
-                            </li>
-                        {% endfor %}
-                    </ul>
-                {% endfor %}
-            </div>
-        </div>
-        <div class="row">
-            <div class ="one-third column">
-                <input id="colorpicker" class="colorpicker" type="color" value="#ff0000" oninput="isChanged(this.value)">
-            </div>
-            <button onclick="isChanged(document.getElementById('colorpicker').value)">Set</button>
-        </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) {}