state/america works

events.py

@@ -211,6 +211,8 @@ async def neopixel(request, ws, data):
 		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

@@ -159,7 +159,7 @@ class LightStrip(Device):
 		self.state = "solid"
 		self.animation = "static",
 		rainbow_params = [0.3, 0.3, 0.3, 0, 2, 4, 127, 128],
-		america_params = 8,
+		america_params = [8, 128],
 		animation_rotate_count = 1,
 		animation_delay = 200,
 
@@ -191,6 +191,11 @@ class LightStrip(Device):
 				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':
+				payload = payload.split(',')
+				self.america_params = [int(n) for n in payload]
+				data['america_params'] = self.america_params
 		elif topic[1] == 'strip':
 			data['amount'] = topic[2]
 			if topic[2] == 'full':

static/juice.js

@@ -297,6 +297,10 @@ function neopixel_state(device) {
 			device.querySelector('#state_rainbow_width_' + device.id).value
 		]
 	} else if (state_mode === 'america') {
+		data['america_params'] = [
+			device.querySelector('#state_america_stripe_' + device.id).value,
+			device.querySelector('#state_america_magnitude_' + device.id).value
+		]
 	}
 	socket.send('neopixel', data);
 }

templates/index.html

@@ -101,8 +101,16 @@
 								</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" value="{{ device.america_params }}">
+								<table>
+									<tr>
+										<td><label for="state_america_stripe_{{ device.id }}">Stripe Length</label></td>
+										<td><input type="number" id="state_america_stripe_{{ device.id }}" min="1" max="256" step="1" value="{{ device.america_params[0] }}" onchange="neopixel_state(this.closest('.device'))"></td>
+									</tr>
+									<tr>
+										<td><label for="state_america_magnitude_{{ device.id }}">Magnitude</label></td>
+										<td><input type="number" id="state_america_magnitude_{{ device.id }}" min="0" max="255" step="1" value="{{ device.america_params[1] }}" onchange="neopixel_state(this.closest('.device'))"></td>
+									</tr>
+								</table>
 							</div>
 						</div>
 						<div class="animation">