Merge branch 'css-changes' into 'main'

CSS changes

See merge request ccchh/foobazdmx!1
This commit is contained in:
Dario 2023-05-20 23:40:29 +00:00
commit 7fbee99978
4 changed files with 196 additions and 5 deletions

View file

@ -1,5 +1,7 @@
import random
import colorsys import colorsys
from time import time from time import time
from typing import Tuple
class Animation: class Animation:
@ -41,6 +43,135 @@ class Steady(Animation):
def name(self): def name(self):
return "steady" return "steady"
class RandomSingle(Animation):
"""
by Max & Lightmoll (https://lght.ml)
from 2022-06-08
"""
def __init__(self, color):
super().__init__()
self.PERIOD = 4 * 30 #frames
self.color = self._rand_color()
self.last_colors = []
self.frame_counter = 0
def update(self, index:int, count:int) -> Tuple[int, int, int]:
if index == 0:
if ((self.frame_counter % self.PERIOD) == 0):
self.last_colors = []
for _ in range(count):
self.last_colors.append(self._rand_color())
self.frame_counter += 1
try:
return self.last_colors[index]
except IndexError:
print("INDEX ERROR: ", index, len(self.last_colors))
raise Exception(f"{index}, {len(self.last_colors)}")
def _rand_color(self):
return (
round(random.random() * 255),
round(random.random() * 255),
round(random.random() * 255)
)
def __str__(self):
return "randomsingle"
def name(self):
return str(self)
class TwoColor(Steady):
"""
by Max & Lightmoll (https://lght.ml)
from 2022-06-08
"""
def __init__(self, color):
super().__init__(color)
self.start_time = time()
self.PERIOD = 0.5 #s
self.COL_1 = color #input color
self.COL_2 = (255-self.r, 255-self.g, 255-self.b) #compl. color
#of lights
def update(self, index:int, count:int) -> Tuple[int, int, int]:
time_diff = time() - self.start_time
#r,g,b
color = (0,0,0)
if (self.PERIOD / 2 > (time_diff % self.PERIOD)):
color = self.COL_1
else:
color = self.COL_2
return color
def __str__(self):
return "twocolor"
def name(self):
return str(self)
class Caramelldansen(Steady):
"""
by Max & Lightmoll (https://lght.ml)
from 2022-06-08
"""
def __init__(self, color):
super().__init__(color)
self.start_time = time()
self.PERIOD = int(0.42 * 30) #frames
self.COLORS = [
(230,50,50),
(255,0,0),
(50,230,50),
(0,255,0),
(50,50,230),
(0,0,255)
]
"""
self.COLORS = [
(255,0,0),
(0,255,0),
(0,0,255)
]
"""
self.color_index = 0
self.frame_counter = 0
def update(self, index:int, count:int) -> Tuple[int, int, int]:
time_diff = round(time() - self.start_time)
#r,g,b
if index == 0:
self.frame_counter += 1
if (((self.frame_counter % self.PERIOD) == 0) and index == 0):
self.color_index += 1
if (self.color_index == len(self.COLORS)):
#self.frame_counter = 0 #prevent big numbers
self.color_index = 0
return self.COLORS[self.color_index]
def __str__(self):
# when is this endpoint called?
return "caramelldansen"
def name(self):
return str(self)
class FadeTo(Steady): class FadeTo(Steady):
def __init__(self, color, t=2.0): def __init__(self, color, t=2.0):
@ -102,6 +233,27 @@ class Chase(Steady):
return "chase" return "chase"
class ChaseRandom(Animation):
def __init__(self, color, looptime=1.0):
super(Chase, self).__init__(color)
self.looptime = looptime
def update(self, index, count):
angle = (time() / self.looptime + (index + 0.0) / count) % 1.0
l = 1 - min(abs(angle - 1 / count) * .9, 1.0 / count) * count
# print(f"f({index}, {angle:.2f}) -> {l:.2f}")
return (int(self.r * l), int(self.g * l), int(self.b * l))
def __str__(self):
return f"{type(self).__name__}({self.r}, {self.g}, {self.b}, {self.looptime:.2f})"
def name(self):
return "chase"
def hsv_to_rgb(h, s, v): def hsv_to_rgb(h, s, v):
(r, g, b) = colorsys.hsv_to_rgb(h, s, v) (r, g, b) = colorsys.hsv_to_rgb(h, s, v)
return [int(r * 255), int(g * 255), int(b * 255)] return [int(r * 255), int(g * 255), int(b * 255)]
def rgb_to_hsv(r, g, b):
return colorsys.rgb_to_hsv(r/255,g/255,b/255)

8
dmx.py
View file

@ -5,7 +5,7 @@ from threading import Thread
from time import sleep from time import sleep
from typing import Union from typing import Union
from animation import Animation, Off, Steady, FadeTo, RotatingRainbow, Chase from animation import Animation, Off, RandomSingle, Steady, FadeTo, RotatingRainbow, Chase, TwoColor, Caramelldansen
def ledlog(value): def ledlog(value):
@ -125,6 +125,12 @@ class DMX:
animation = RotatingRainbow() animation = RotatingRainbow()
elif animation == "steady": elif animation == "steady":
animation = Steady(self._color) animation = Steady(self._color)
elif animation == "twocolor":
animation = TwoColor(self._color)
elif animation == "caramelldansen":
animation = Caramelldansen(self._color)
elif animation == "randomsingle":
animation = RandomSingle(self._color)
else: else:
raise ValueError(f"No such animation {animation}") raise ValueError(f"No such animation {animation}")
self._animation = animation self._animation = animation

View file

@ -1,8 +1,23 @@
body { :root {
background: black; --bg-color: #403F3C;
color: white; --primary-color: #ccc;
} }
html {
background: var(--bg-color);
}
body {
padding-top: 20px;
width: 80%;
height: 100%;
color: var(--primary-color);
margin: auto;
font-family: "monospace";
}
.controls { .controls {
display: flex; display: flex;
width: 40em; width: 40em;
@ -10,14 +25,21 @@ body {
fieldset { fieldset {
flex: auto; flex: auto;
margin-right: 5px;
} }
.buttons { .buttons {
width: 30em; width: 30em;
} }
input.button_color { input.button_color {
width: 6em; width: 6em;
margin: 4px;
border: none;
padding: 5px 10px;
/* border-radius: 5px; */
} }
.button_color_white { .button_color_white {

View file

@ -25,6 +25,17 @@
<input type="radio" class="js_animation" name="state" id="animation_rainbow" value="rainbow"/> <input type="radio" class="js_animation" name="state" id="animation_rainbow" value="rainbow"/>
<label for="animation_rainbow">Rainbow</label> <label for="animation_rainbow">Rainbow</label>
</div> </div>
<div>
<input type="radio" class="js_animation" name="state" id="animation_randomsingle" value="randomsingle"/>
<label for="animation_randomsingle">Random Single</label>
<div>
<input type="radio" class="js_animation" name="state" id="animation_twocolor" value="twocolor"/>
<label for="animation_twocolor">Complementary</label>
</div>
<div>
<input type="radio" class="js_animation" name="state" id="animation_caramelldansen" value="caramelldansen"/>
<label for="animation_caramelldansen">Caramelldansen</label>
</div>
</fieldset> </fieldset>
<fieldset class="colors"> <fieldset class="colors">
<legend>Color</legend> <legend>Color</legend>