state/solid/all works

events.py

@@ -205,8 +205,11 @@ async def neopixel(request, ws, data):
 		if data.get('amount') == 'single':
 			mqtt_msg.append(data.get('sub_device_id').replace('led', ''))
 	mqtt_msg = '/'.join(mqtt_msg)
+
+	if data.get('type') == 'solid':
 		payload = tools.from_html_color(data.get('color'))
 		payload = str(payload)[1:-1].replace(' ', '')
+
 	request.app['mqtt'].publish(mqtt_msg, payload)
 	# websocket response is handled under LightStrip.mqtt_callback
 

models.py

@@ -165,23 +165,29 @@ class LightStrip(Device):
 
 	async def mqtt_callback(self, app, msg):
 		topic = msg.topic.split('/')
-		payload = msg.payload.decode('utf8').split(',')
-		payload = [int(num) for num in payload]
-
-		sub_device = self.find('led' + topic[4])
-		sub_device.color = payload
-		save_network(network)
 
 		data = {}
 		data['ok'] = True
 		data['device_id'] = self.id
 		data['change_mode'] = topic[1]
+
+		if topic[1] == 'state':
+			payload = msg.payload.decode('utf8').split(',')
+			payload = [int(num) for num in payload]
 			data['type'] = topic[2]
 			if topic[2] == 'solid':
 				data['amount'] = topic[3]
 				if topic[3] == 'single':
 					data['sub_device_id'] = 'led' + topic[4]
+
+					sub_device = self.find('led' + topic[4])
+					sub_device.color = payload
+				elif topic[3] == 'all':
+					for sub_device in self.sub_devices:
+						sub_device.color = payload
+				save_network(network)
 				data['color'] = tools.to_html_color(payload)
+
 		res = {'event': 'neopixel', 'data': data}
 		await app.send_json_all(res)
 

static/juice.js

@@ -166,8 +166,25 @@ function delete_device_recv(data) {
 
 function neopixel_recv(data) {
 	let device = document.querySelector('#' + data.device_id);
+	if (data.change_mode === 'state') {
+		if (data.type === 'solid') {
+			if (data.amount === 'all') {
+				let sub_devices = device.querySelector('.sub_devices');
+				for (let sub_device of sub_devices.children) {
+					sub_device.firstElementChild.style.backgroundColor = data.color;
+					sub_device.firstElementChild.firstElementChild.value = data.color;
+				}
+				device.querySelector('#state_solid_all_color_' + device.id).value = data.color;
+			} else if (data.amount === 'single') {
 				let sub_device = device.querySelector('.' + data.sub_device_id);
 				sub_device.firstElementChild.style.backgroundColor = data.color;
+				sub_device.firstElementChild.firstElementChild.value = data.color;
+			}
+		} else if (data.type === 'rainbow') {
+		} else if (data.type === 'america') {
+		}
+	} else if (data.state === 'animation') {
+	}
 }
 
 /* Websocket send */
@@ -231,14 +248,32 @@ function delete_device(device) {
 	socket.send('delete_device', data);
 }
 
-function neopixel(device) {
+function neopixel_state(sub_device) {
+	let device = sub_device.parentElement.parentElement;
+	let state_mode = device.querySelector('.state_select').value;
 	let data = {
-		device_id: device.parentElement.parentElement.id,
-		sub_device_id: device.classList[2],
+		device_id: sub_device.parentElement.parentElement.id,
 		change_mode: 'state',
-		type: 'solid',
-		amount: 'single',
-		color: device.firstElementChild.firstElementChild.value
+		type: state_mode,
+	}
+	if (state_mode === 'solid') {
+		let amount;
+		let radios = device.querySelector('.state_solid').querySelectorAll('input[type=radio]');
+		for (let radio of radios) {
+			if (radio.checked) {
+				amount = radio.value;
+				break;
+			}
+		}
+		data['amount'] = amount;
+		if (amount === 'all') {
+			data['color'] = device.querySelector('#state_solid_all_color_' + device.id).value;
+		} else if (amount === 'single') {
+			data['color'] = sub_device.firstElementChild.firstElementChild.value;
+			data['sub_device_id'] = sub_device.classList[2];
+		}
+	} else if (state_mode === 'rainbow') {
+	} else if (state_mode === 'america') {
 	}
 	socket.send('neopixel', data);
 }
@@ -257,21 +292,6 @@ function edit_field(field) {
 	field.children[1].replaceWith(save);
 }
 
-/* Misc */
-function get_object_from_svg(svg) {
-	let all_objects = document.getElementsByTagName("object");
-	for (let i=0; i < all_objects.length; i++) {
-		if (svg === all_objects[i].getSVGDocument().firstElementChild) {
-			return all_objects[i];
-		}
-	}
-	return null;
-}
-
-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');
@@ -305,3 +325,18 @@ function state_select(select) {
 		select.parentElement.querySelector('.state_america').style.display = 'block';
 	}
 }
+
+/* Misc */
+function get_object_from_svg(svg) {
+	let all_objects = document.getElementsByTagName("object");
+	for (let i=0; i < all_objects.length; i++) {
+		if (svg === all_objects[i].getSVGDocument().firstElementChild) {
+			return all_objects[i];
+		}
+	}
+	return null;
+}
+
+function sleep(ms) {
+	return new Promise(resolve => setTimeout(resolve, ms));
+}

templates/index.html

@@ -42,7 +42,7 @@
 					<div class="light_controls">
 						<div class="state">
 							<span>State</span><br>
-							<select onchange="state_select(this)">
+							<select class="state_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>
@@ -53,7 +53,7 @@
 								<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 }}">
+								<input type="color" id="state_solid_all_color_{{ device.id }}" value="{{ device.sub_devices[0].color|html_color }}" onchange="neopixel_state(this.parentElement.parentElement)">
 							</div>
 							<div class="state_rainbow" style="display: {% if device.state == 'rainbow' %}block{% else %}none{% endif %}">
 								<table>