Compare commits
2 Commits
master
...
3c947e7ea7
| Author | SHA1 | Date | |
|---|---|---|---|
| 3c947e7ea7 | |||
|
|
29b4d65380 |
5
.gitignore
vendored
5
.gitignore
vendored
@@ -1,5 +0,0 @@
|
||||
.idea/
|
||||
.git/
|
||||
__pycache__/
|
||||
*.pyc
|
||||
*.swp
|
||||
15
README.md
15
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.
|
||||
Projekt Litsimaja - Lapikute tagatoa seintele programmeeritavad ARGB ribad
|
||||
@@ -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
|
||||
@@ -1,2 +0,0 @@
|
||||
ENVIRONMENT=dev
|
||||
USE_EMULATOR=true
|
||||
1
pyleds/.gitignore
vendored
1
pyleds/.gitignore
vendored
@@ -1,2 +1 @@
|
||||
.env
|
||||
litsimaja.log
|
||||
|
||||
@@ -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])
|
||||
@@ -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]
|
||||
@@ -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
|
||||
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -1,38 +0,0 @@
|
||||
from lib.Program import Program
|
||||
from rpi_ws281x import Color
|
||||
import time
|
||||
|
||||
def name():
|
||||
return 'Christmas Lights'
|
||||
|
||||
class ChristmasLights(Program):
|
||||
def run(self, args: [] = None):
|
||||
# Configuration
|
||||
wait_ms = 0 # Speed of the animation
|
||||
|
||||
# Define classic festive colors
|
||||
RED = Color(255, 0, 0)
|
||||
GREEN = Color(0, 255, 0)
|
||||
WARM_WHITE = Color(200, 180, 60) # A golden-ish warm white
|
||||
|
||||
colors = [RED, GREEN, WARM_WHITE]
|
||||
|
||||
# This determines how many pixels of the same color are next to each other
|
||||
group_size = 2
|
||||
|
||||
offset = 0
|
||||
while self.get_loop().status():
|
||||
num_pixels = self._lm.count_pixels()
|
||||
|
||||
for i in range(num_pixels):
|
||||
# Calculate which color index to use based on pixel position and current offset
|
||||
# This creates the "moving" effect
|
||||
color_index = ((i + offset) // group_size) % len(colors)
|
||||
self._lm.set_pixel_color(i, colors[color_index])
|
||||
|
||||
self._lm.show()
|
||||
|
||||
# Increment offset to move the lights
|
||||
offset = (offset + 1) % (len(colors) * group_size)
|
||||
self._lm.get_tempo().wait()
|
||||
time.sleep(wait_ms / 1000.0)
|
||||
@@ -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)
|
||||
@@ -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()
|
||||
@@ -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():
|
||||
|
||||
@@ -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, {})
|
||||
|
||||
|
||||
def lm_standard_xhr_response() -> Response:
|
||||
return Response(response=json.dumps(lm.build_status_array()), status=200, mimetype='application/json')
|
||||
# start litsimaja
|
||||
lm = Litsimaja()
|
||||
app = Flask(__name__)
|
||||
# Pl.run('siinus', 'Static', lm, logger, {'color': [50, 50, 50]})
|
||||
|
||||
|
||||
@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()
|
||||
)
|
||||
def respondroot():
|
||||
return render_template('index.html', programs=Pl.list_all(True))
|
||||
|
||||
|
||||
@app.route('/status', methods=['GET'])
|
||||
def respond_status():
|
||||
return lm_standard_xhr_response()
|
||||
@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]})
|
||||
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()
|
||||
return Response(status=200)
|
||||
|
||||
|
||||
@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()
|
||||
|
||||
|
||||
app.run(lm.conf('BIND_ADDR'), lm.conf('BIND_PORT'))
|
||||
app.run('0.0.0.0', 8080)
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
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 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_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.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 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 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 select = document.getElementById('program');
|
||||
return select.value;
|
||||
}
|
||||
|
||||
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 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 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 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 doBlind() {
|
||||
send_post('/program/siinus.Static', {color: [0, 0, 0]})
|
||||
}
|
||||
|
||||
function doCancel() {
|
||||
send_get('/crash');
|
||||
}
|
||||
|
||||
function switchRegion(region_id) {
|
||||
send_get('/region/' + region_id);
|
||||
}
|
||||
</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>
|
||||
|
||||
3180
pyleds/templates/jscolor.js
Normal file
3180
pyleds/templates/jscolor.js
Normal file
File diff suppressed because it is too large
Load Diff
427
pyleds/templates/normalize.css
vendored
427
pyleds/templates/normalize.css
vendored
@@ -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;
|
||||
}
|
||||
418
pyleds/templates/skeleton.css
vendored
418
pyleds/templates/skeleton.css
vendored
@@ -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) {}
|
||||
Reference in New Issue
Block a user