animation controls functioning

events.py

@@ -195,25 +195,46 @@ async def neopixel(request, ws, data):
 		await ws.send_json(data)
 		return
 
-	# TODO: form validation
-
 	mqtt_msg = [device.mqtt_root]
-	mqtt_msg.append(data.get('change_mode'))
+	if data.get('change_mode') == 'state':
-	mqtt_msg.append(data.get('type'))
+		mqtt_msg.append(data.get('change_mode'))
-	if data.get('type') == 'solid':
+		if data.get('type') == 'solid':
-		mqtt_msg.append(data.get('amount'))
+			mqtt_msg.append(data.get('type'))
-		if data.get('amount') == 'single':
+			if data.get('amount') == 'single':
-			mqtt_msg.append(data.get('sub_device_id').replace('led', ''))
+				mqtt_msg.append(data.get('amount'))
+				mqtt_msg.append(data.get('sub_device_id').replace('led', ''))
+			elif data.get('amount') == 'all':
+				mqtt_msg.append(data.get('amount'))
+			else:
+				error = "invalid amount"
+			payload = tools.from_html_color(data.get('color'))
+			payload = str(payload)[1:-1].replace(' ', '')
+		elif data.get('type') == 'rainbow':
+			mqtt_msg.append(data.get('type'))
+			payload = ','.join(data.get('rainbow_params'))
+		elif data.get('type') == 'america':
+			mqtt_msg.append(data.get('type'))
+			payload = ','.join(data.get('america_params'))
+		else:
+			error = "invalid state type"
+	elif data.get('change_mode') == 'animation':
+		mqtt_msg.append(data.get('change_mode'))
+		if data.get('property_type') == 'mode':
+			mqtt_msg.append(data.get('property_type'))
+			if data.get('type') == 'static':
+				mqtt_msg.append(data.get('type'))
+				payload = ''
+			elif data.get('type') == 'rotate_left':
+				mqtt_msg.append(data.get('type'))
+				payload = data.get('rotate_count')
+			elif data.get('type') == 'rotate_right':
+				mqtt_msg.append(data.get('type'))
+				payload = data.get('rotate_count')
+		elif data.get('property_type') == 'delay':
+			mqtt_msg.append(data.get('property_type'))
+			payload = data.get('delay')
 	mqtt_msg = '/'.join(mqtt_msg)
 
-	if data.get('type') == 'solid':
-		payload = tools.from_html_color(data.get('color'))
-		payload = str(payload)[1:-1].replace(' ', '')
-	elif data.get('type') == 'rainbow':
-		payload = ','.join(data.get('rainbow_params'))
-	elif data.get('type') == 'america':
-		payload = ','.join(data.get('america_params'))
-
 	request.app['mqtt'].publish(mqtt_msg, payload)
 	# websocket response is handled under LightStrip.mqtt_callback
 

models.py

@@ -173,29 +173,52 @@ class LightStrip(Device):
 		data['change_mode'] = topic[1]
 
 		if topic[1] == 'state':
-			data['type'] = topic[2]
 			if topic[2] == 'solid':
+				data['type'] = topic[2]
 				payload = payload.split(',')
 				payload = [int(num) for num in payload]
-				data['amount'] = topic[3]
 				if topic[3] == 'single':
+					data['amount'] = topic[3]
 					data['sub_device_id'] = 'led' + topic[4]
 
 					sub_device = self.find('led' + topic[4])
 					sub_device.color = payload
 				elif topic[3] == 'all':
+					data['amount'] = topic[3]
 					for sub_device in self.sub_devices:
 						sub_device.color = payload
 				data['color'] = tools.to_html_color(payload)
 			elif topic[2] == 'rainbow':
+				data['type'] = topic[2]
 				payload = payload.split(',')
 				self.rainbow_params = [float(p) for p in payload[:3]]
 				self.rainbow_params += [int(p) for p in payload[3:]]
 				data['rainbow_params'] = self.rainbow_params
 			elif topic[2] == 'america':
+				data['type'] = topic[2]
 				payload = payload.split(',')
 				self.america_params = [int(n) for n in payload]
 				data['america_params'] = self.america_params
+		elif topic[1] == 'animation':
+			if topic[2] == 'mode':
+				data['property_type'] = topic[2]
+				if topic[3] == 'static':
+					data['type'] = topic[3]
+					self.animation = topic[3]
+				elif topic[3] == 'rotate_left':
+					data['type'] = topic[3]
+					data['rotate_count'] = payload
+					self.animation = topic[3]
+					self.animation_rotate_count = int(payload)
+				elif topic[3] == 'rotate_right':
+					data['type'] = topic[3]
+					data['rotate_count'] = payload
+					self.animation = topic[3]
+					self.animation_rotate_count = int(payload)
+			elif topic[2] == 'delay':
+				data['property_type'] = topic[2]
+				data['delay'] = payload
+				self.animation_delay = int(payload)
 		elif topic[1] == 'strip':
 			data['amount'] = topic[2]
 			if topic[2] == 'full':

static/juice.js

@@ -305,6 +305,32 @@ function neopixel_state(device) {
 	socket.send('neopixel', data);
 }
 
+function neopixel_animation(device) {
+	let property_type;
+	if (device.nodeName === 'INPUT') {
+		property_type = 'delay';
+		device = device.closest('.device');
+	} else {
+		property_type = 'mode';
+	}
+	let data = {
+		device_id: device.id,
+		change_mode: 'animation',
+		property_type: property_type
+	}
+	if (property_type === 'mode') {
+		let animation_mode = device.querySelector('.animation_select').value;
+		data['type'] = animation_mode;
+		if (animation_mode === 'static') {
+		} else if (animation_mode === 'rotate_left' || animation_mode === 'rotate_right') {
+			data['rotate_count'] = device.querySelector('#animation_rotate_count_' + device.id).value;
+		}
+	} else if (property_type === 'delay') {
+		data['delay'] = device.querySelector('#animation_delay_' + device.id).value;
+	}
+	socket.send('neopixel', data);
+}
+
 /* DOM */
 function edit_field(field) {
 	let value = field.firstElementChild.innerText;
@@ -360,6 +386,18 @@ function state_select(select) {
 	neopixel_state(device);
 }
 
+function animation_select(select) {
+	let device = select.closest('.device');
+	if (select.value === 'static') {
+		select.parentElement.querySelector('.animation_static').style.display = 'block';
+		select.parentElement.querySelector('.animation_rotate').style.display = 'none';
+	} else if (select.value === 'rotate_left' || select.value === 'rotate_right') {
+		select.parentElement.querySelector('.animation_static').style.display = 'none';
+		select.parentElement.querySelector('.animation_rotate').style.display = 'block';
+	}
+	neopixel_animation(device);
+}
+
 /* Misc */
 function get_object_from_svg(svg) {
 	let all_objects = document.getElementsByTagName("object");

templates/index.html

@@ -115,11 +115,20 @@
 						</div>
 						<div class="animation">
 							<span>Animation</span><br>
-							<select>
+							<select class="animation_select" onchange="animation_select(this)">
-								<option>Static</option>
+								<option{% if device.animation == 'static' %} checked{% endif %} value="static">Static</option>
-								<option>Rotate Left</option>
+								<option{% if device.animation == 'rotate_left' %} checked{% endif %} value="rotate_left">Rotate Left</option>
-								<option>Rotate Right</option>
+								<option{% if device.animation == 'rotate_right' %} checked{% endif %} value="rotate_right">Rotate Right</option>
 							</select>
+							<div class="animation_static" style="display: {% if device.animation == 'static' %}block{% else %}none{% endif %}">
+							</div>
+							<div class="animation_rotate" style="display: {% if device.animation == 'rotate_left' or device.animation == 'rotate_right' %}block{% else %}none{% endif %}">
+								<label for="animation_rotate_count_{{ device.id }}">Rotate Count</label>
+								<input type="number" id="animation_rotate_count_{{ device.id }}" min="1" max="255" step="1" value="{{ device.animation_rotate_count }}" onchange="neopixel_animation(this.closest('.device'))">
+							</div>
+							Delay
+							<input type="number" id="animation_delay_{{ device.id }}" min="1" max="255" step="1" value="{{ device.animation_delay }}" onchange="neopixel_animation(this)">
+							<label for="animation_delay{{ device.id }}">ms</label>
 						</div>
 					</div>
 					{% endif %}