light strip frontend layout

models.py

@@ -156,6 +156,12 @@ class LightStrip(Device):
 	def __init__(self):
 		super().__init__()
 		self.type = "LightStrip"
+		self.state = "solid"
+		self.animation = "static",
+		rainbow_params = [0.3, 0.3, 0.3, 0, 2, 4, 127, 128],
+		america_params = 8,
+		animation_rotate_count = 1,
+		animation_delay = 200,
 
 	async def mqtt_callback(self, app, msg):
 		topic = msg.topic.split('/')

static/juice.css

@@ -86,6 +86,11 @@ nav span:hover {
 	margin: 0.2em;
 }
 
+.light_controls {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+}
+
 .sub_devices {
 	display: flex;
 }

static/juice.js

@@ -4,11 +4,11 @@ function load() {
 	socket = init_websocket();
 
 	// initialize RelayOutlet SVG color
-	Object.entries(init_state).forEach(([device_id, sub_devs]) => {
+	Object.entries(init_state).forEach(([device_id, sub_devices]) => {
 		let device = document.querySelector('#' + device_id);
-		Object.entries(sub_devs).forEach(([sub_device_id, state]) => {
+		Object.entries(sub_devices).forEach(([sub_device_id, state]) => {
-			let sub_dev = device.querySelector('.' + sub_device_id);
+			let sub_device = device.querySelector('.' + sub_device_id);
-			let svg = sub_dev.querySelector('object').getSVGDocument().firstElementChild;
+			let svg = sub_device.querySelector('object').getSVGDocument().firstElementChild;
 			if (state) {
 				svg.classList.remove('off');
 				svg.classList.add('on');
@@ -271,3 +271,37 @@ function get_object_from_svg(svg) {
 function sleep(ms) {
 	return new Promise(resolve => setTimeout(resolve, ms));
 }
+
+function state_solid_amount(radio) {
+	let device = radio.parentElement.parentElement.parentElement.parentElement;
+	let sub_devices = device.querySelector('.sub_devices');
+	for (let sub_device of sub_devices.children) {
+		let input = sub_device.firstElementChild.firstElementChild;
+		if (radio.value === 'all') {
+			input.disabled = true;
+		} else if (radio.value === 'single') {
+			input.disabled = false;
+		}
+	}
+	if (radio.value === 'all') {
+		device.querySelector('#state_solid_all_color_' + device.id).disabled = false;
+	} else if (radio.value === 'single') {
+		device.querySelector('#state_solid_all_color_' + device.id).disabled = true;
+	}
+}
+
+function state_select(select) {
+	if (select.value === 'solid') {
+		select.parentElement.querySelector('.state_solid').style.display = 'block';
+		select.parentElement.querySelector('.state_rainbow').style.display = 'none';
+		select.parentElement.querySelector('.state_america').style.display = 'none';
+	} else if (select.value === 'rainbow') {
+		select.parentElement.querySelector('.state_solid').style.display = 'none';
+		select.parentElement.querySelector('.state_rainbow').style.display = 'block';
+		select.parentElement.querySelector('.state_america').style.display = 'none';
+	} else if (select.value === 'america') {
+		select.parentElement.querySelector('.state_solid').style.display = 'none';
+		select.parentElement.querySelector('.state_rainbow').style.display = 'none';
+		select.parentElement.querySelector('.state_america').style.display = 'block';
+	}
+}

templates/index.html

@@ -39,6 +39,81 @@
 					<div class="ip_address editable"><span class="field_value">{{ device.ip_address }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span>{% endif %}</div>
 					{% elif device.type == 'LightStrip' %}
 					<div class="mqtt_root editable"><span class="field_value">{{ device.ip_address }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span>{% endif %}</div>
+					<div class="light_controls">
+						<div class="state">
+							<span>State</span><br>
+							<select onchange="state_select(this)">
+								<option{% if device.state == 'solid' %} checked{% endif %} value="solid">Solid</option>
+								<option{% if device.state == 'rainbow' %} checked{% endif %} value="rainbow">Rainbow</option>
+								<option{% if device.state == 'america' %} checked{% endif %} value="america">America</option>
+							</select>
+							<div class="state_solid" style="display: {% if device.state == 'solid' %}block{% else %}hidden{% endif %}">
+								<input type="radio" id="state_solid_all_{{ device.id }}" name="state_solid_{{ device.id }}" value="all" onchange="state_solid_amount(this)" checked>
+								<label for="state_solid_all_{{ device.id }}">All</label><br>
+								<input type="radio" id="state_solid_single_{{ device.id }}" name="state_solid_{{ device.id }}" value="single" onchange="state_solid_amount(this)">
+								<label for="state_solid_single_{{ device.id }}">Single</label><br>
+								<label for="state_solid_all_color_{{ device.id }}">All:</label>
+								<input type="color" id="state_solid_all_color_{{ device.id }}">
+							</div>
+							<div class="state_rainbow" style="display: {% if device.state == 'rainbow' %}block{% else %}none{% endif %}">
+								<table>
+									<tr>
+										<td>Red</td>
+										<td>
+											<input type="number" id="state_rainbow_red_freq_{{ device.id }}" min="0" max="1" step="0.1">
+											<label for="state_rainbow_red_freq_{{ device.id }}">f</label>
+										</td>
+										<td>
+											<input type="number" id="state_rainbow_red_phase_{{ device.id }}" min="0" max="10" step="1">
+											<label for="state_rainbow_red_phase_{{ device.id }}">Φ</label>
+										</td>
+									</tr>
+									<tr>
+										<td>Green</td>
+										<td>
+											<input type="number" id="state_rainbow_green_freq_{{ device.id }}" min="0" max="1" step="0.1">
+											<label for="state_rainbow_green_freq_{{ device.id }}">f</label>
+										</td>
+										<td>
+											<input type="number" id="state_rainbow_green_phase_{{ device.id }}" min="0" max="10" step="1">
+											<label for="state_rainbow_green_phase_{{ device.id }}">Φ</label>
+										</td>
+									</tr>
+									<tr>
+										<td>Blue</td>
+										<td>
+											<input type="number" id="state_rainbow_blue_freq_{{ device.id }}" min="0" max="1" step="0.1">
+											<label for="state_rainbow_blue_freq_{{ device.id }}">f</label>
+										</td>
+										<td>
+											<input type="number" id="state_rainbow_blue_phase_{{ device.id }}" min="0" max="10" step="1">
+											<label for="state_rainbow_blue_phase_{{ device.id }}">Φ</label>
+										</td>
+									</tr>
+									<tr>
+										<td><label for="state_rainbow_center_{{ device.id }}">Center</label></td>
+										<td><input type="number" id="state_rainbow_center_{{ device.id }}" min="0" max="255" step="1"></td>
+									</tr>
+									<tr>
+										<td><label for="state_rainbow_width_{{ device.id }}">Width</label></td>
+										<td><input type="number" id="state_rainbow_width_{{ device.id }}" min="0" max="128" step="1"></td>
+									</tr>
+								</table>
+							</div>
+							<div class="state_america" style="display: {% if device.state == 'america' %}block{% else %}none{% endif %}">
+								<label for="state_america_stripe_{{ device.id }}">Stripe Length</label>
+								<input type="number" id="state_america_stripe_{{ device.id }}" min="1" max="256" step="1">
+							</div>
+						</div>
+						<div class="animation">
+							<span>Animation</span><br>
+							<select>
+								<option>Static</option>
+								<option>Rotate Left</option>
+								<option>Rotate Right</option>
+							</select>
+						</div>
+					</div>
 					{% endif %}
 					<div class="sub_devices">
 					{% for sub_device in device.sub_devices %}
@@ -49,7 +124,7 @@
 							<div class="description editable"><span class="field_value">{{ sub_device.description }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span>{% endif %}</div>
 							{% elif device.type == 'LightStrip' %}
 							<label class="NeoPixel_color" style="background-color: {{ sub_device.color|html_color }}">
-								<input class="NeoPixel_color_input" type="color" value="{{ sub_device.color|html_color }}" onchange="neopixel(this.parentElement.parentElement)">
+								<input class="NeoPixel_color_input" type="color" value="{{ sub_device.color|html_color }}" onchange="neopixel_state(this.parentElement.parentElement)" disabled>
 							</label>
 							{% endif %}
 						</div>