lightstrip controls single leds

README.md

@@ -3,7 +3,7 @@ A hub for controlling IOT devices.
 
 ## Requirements  
 Python 3.6+  
-Python packages: `gunicorn aiohttp aiohttp_jinja2 uvloop requests`  
+Python packages: `gunicorn aiohttp aiohttp_jinja2 uvloop requests paho-mqtt`  
 
 ## Install  
 1. Get on the floor  

events.py

@@ -3,6 +3,7 @@
 import re
 import types
 
+import tools
 import models
 from models import network
 
@@ -104,6 +105,13 @@ async def new_device(request, ws, data):
 
 	if device_type == 'RelayDevice':
 		device = models.RelayDevice()
+		device.sub_devices.append(models.RelayOutlet())
+		device.sub_devices.append(models.RelayOutlet())
+		device.sub_devices[0].id = 'OUT0'
+		device.sub_devices[0].gpio = '0'
+		device.sub_devices[1].id = 'OUT2'
+		device.sub_devices[1].gpio = '2'
+		device.update()
 	else:
 		data['ok'] = False
 		data['error'] = "unknown device type"
@@ -176,6 +184,33 @@ async def delete_device(request, ws, data):
 	await request.app.send_json_all(res)
 
 
+async def neopixel(request, ws, data):
+	"""Changes the state of a NeoPixel strip."""
+	device_id = data.get('device_id')
+
+	device = network.find(device_id)
+	if not device:
+		data['ok'] = False
+		data['error'] = "device_id not found"
+		await ws.send_json(data)
+		return
+
+	# TODO: form validation
+
+	mqtt_msg = [device.mqtt_root]
+	mqtt_msg.append(data.get('change_mode'))
+	mqtt_msg.append(data.get('type'))
+	if data.get('type') == 'solid':
+		mqtt_msg.append(data.get('amount'))
+		if data.get('amount') == 'single':
+			mqtt_msg.append(data.get('sub_device_id').replace('led', ''))
+	mqtt_msg = '/'.join(mqtt_msg)
+	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
+
+
 events = {}
 for obj in dir():
 	if type(locals()[obj]) == types.FunctionType:

juice.py

@@ -14,11 +14,12 @@ from aiohttp_jinja2 import render_template
 import uvloop
 import requests
 
+import mqtt
+import tools
 import config
 import events
 import models
 import buckler_aiohttp
-from tools import make_error
 from models import network
 
 uvloop.install()
@@ -29,6 +30,8 @@ async def index(request):
 	"""The index page."""
 	init_state = {}
 	for device in network:
+		if device.type != "RelayDevice":
+			continue
 		device_state = {}
 		for sub_dev in device.sub_devices:
 			device_state[sub_dev.id] = sub_dev.state
@@ -70,11 +73,28 @@ async def send_json_all(self, d):
 		await ws.send_json(d)
 
 
+async def start_background_tasks(app):
+	app['mqtt'] = mqtt.init_client(app)
+
+
+async def cleanup_background_tasks(app):
+	app['mqtt'].loop_stop()
+
+
 async def init_app():
 	"""Initializes the application."""
 	web.Application.send_json_all = send_json_all
 	app = web.Application(middlewares=[buckler_aiohttp.buckler_session])
-	aiohttp_jinja2.setup(app, loader=jinja2.FileSystemLoader('templates'))
+	aiohttp_jinja2.setup(
+		app,
+		trim_blocks=True,
+		lstrip_blocks=True,
+		undefined=jinja2.StrictUndefined,
+		loader=jinja2.FileSystemLoader('templates'),
+		filters={'html_color': tools.to_html_color},
+	)
+	app.on_startup.append(start_background_tasks)
+	app.on_cleanup.append(cleanup_background_tasks)
 	app['websockets'] = []
 
 	app.router.add_routes(routes)

models.py

@@ -5,6 +5,8 @@ Data models for different device types managed by the Juice IOT hub.
 import re
 import json
 
+import tools
+
 import requests
 
 class Network(list):
@@ -28,6 +30,16 @@ class Device:
 	"""
 	Represents a generic device on the Network.
 	"""
+	def __init__(self):
+		self.id = ""
+		self.type = ""
+		self.description = ""
+		self.location = ""
+		self.ip_address = ""
+		self.mqtt_root = ""
+		self.locked = False
+		self.sub_devices = []
+
 	def find(self, sub_device_id):
 		"""
 		Searches through the devices sub_devices and returns the matching
@@ -40,6 +52,47 @@ class Device:
 			return None
 		return sub_device
 
+	def from_dict(self, data):
+		"""
+		Initializes self with data from dict.
+		"""
+		for key, value in data.items():
+			if key == 'sub_devices':
+				continue
+			else:
+				setattr(self, key, value)
+		for sub_device_dict in data.get('sub_devices'):
+			if sub_device_dict.get('type') == 'RelayOutlet':
+				sub_device = RelayOutlet().from_dict(sub_device_dict)
+				self.sub_devices.append(sub_device)
+			elif sub_device_dict.get('type') == 'NeoPixel':
+				sub_device = NeoPixel().from_dict(sub_device_dict)
+				self.sub_devices.append(sub_device)
+			else:
+				typ = sub_device_dict.get('type')
+				raise ValueError(f"Unknown sub_device type {typ}")
+		return self
+
+	async def mqtt_callback(self, msg):
+		"""
+		Called when the MQTT client receives a message directed to this
+		device. Should be overridden by the device implementation.
+		"""
+		pass
+
+
+class SubDevice:
+	"""
+	Represents a generic subdevice in a Device.
+	"""
+	def from_dict(self, data):
+		"""
+		Initializes self with data from dict.
+		"""
+		for key, value in data.items():
+			setattr(self, key, value)
+		return self
+
 
 class RelayDevice(Device):
 	"""
@@ -48,22 +101,8 @@ class RelayDevice(Device):
 	a relay. Each device only has two outputs, `OUT0` and `OUT2`.
 	"""
 	def __init__(self):
-		self.id = ""
+		super().__init__()
 		self.type = "RelayDevice"
-		self.description = ""
-		self.location = ""
-		self.ip_address = ""
-		self.locked = False
-
-		self.sub_devices = []
-		self.sub_devices.append(RelayOutlet())
-		self.sub_devices.append(RelayOutlet())
-		self.sub_devices[0].id = 'OUT0'
-		self.sub_devices[0].gpio = '0'
-		self.sub_devices[1].id = 'OUT2'
-		self.sub_devices[1].gpio = '2'
-
-		self.update()
 
 	def update(self):
 		"""
@@ -97,24 +136,8 @@ class RelayDevice(Device):
 
 		return state
 
-	def from_dict(self, data):
-		"""
-		Initializes self with data from JSON dict.
-		"""
-		for key, value in data.items():
-			setattr(self, key, value)
-		self.sub_devices = []
-		for sub_dev_dict in data.get('sub_devices'):
-			if sub_dev_dict.get('type') == 'RelayOutlet':
-				sub_dev = RelayOutlet().from_dict(sub_dev_dict)
-				self.sub_devices.append(sub_dev)
-			else:
-				typ = sub_dev.get('type')
-				raise ValueError(f"Unknown sub_device type {typ}")
-		return self
 
-
-class RelayOutlet:
+class RelayOutlet(SubDevice):
 	"""
 	Represents a single outlet on a RelayDevice.
 	"""
@@ -125,42 +148,46 @@ class RelayOutlet:
 		self.gpio = ""
 		self.state = False
 
-	def from_dict(self, data):
-		"""
-		Initializes self with data from JSON dict.
-		"""
-		for key, value in data.items():
-			setattr(self, key, value)
-		return self
-
 
 class LightStrip(Device):
 	"""
 	Represents an RGB LED light strip controller.
 	"""
 	def __init__(self):
-		self.id = ""
+		super().__init__()
 		self.type = "LightStrip"
-		self.description = ""
-		self.location = ""
-		self.ip_address = ""
-		self.locked = False
 
-	def from_dict(self, data):
+	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]
+		data['type'] = topic[2]
+		if topic[2] == 'solid':
+			data['amount'] = topic[3]
+			if topic[3] == 'single':
+				data['sub_device_id'] = 'led' + topic[4]
+			data['color'] = tools.to_html_color(payload)
+		res = {'event': 'neopixel', 'data': data}
+		await app.send_json_all(res)
+
+
+class NeoPixel(SubDevice):
 	"""
-		Initializes self with data from JSON dict.
+	Represents a single NeoPixel in a LightStrip.
 	"""
-		for key, value in data.items():
-			setattr(self, key, value)
-		self.sub_devices = []
-		for sub_dev_dict in data.get('sub_devices'):
-			if sub_dev_dict.get('type') == 'RelayOutlet':
-				sub_dev = RelayOutlet().from_dict(sub_dev_dict)
-				self.sub_devices.append(sub_dev)
-			else:
-				typ = sub_dev.get('type')
-				raise ValueError(f"Unknown sub_device type {typ}")
-		return self
+	def __init__(self):
+		self.id = ""
+		self.type = "NeoPixel"
+		self.color = [0,0,0] # JSON doesn't have tuples
 
 
 class DeviceEncoder(json.JSONEncoder):

mqtt.py

@@ -0,0 +1,38 @@
+#!/usr/bin/env python3
+"""
+Contains MQTT funtionality.
+"""
+import asyncio
+
+import paho.mqtt.client as mqtt
+
+from models import network
+
+def on_connect(client, userdata, flags, rc):
+	"""Called when the client successfully connects to the broker."""
+	client.subscribe("juice/#")
+	for device in network:
+		if device.mqtt_root:
+			client.subscribe(device.mqtt_root + '/#')
+
+
+def on_message(client, userdata, msg):
+	"""Called when the client receives a message."""
+	root = msg.topic.partition('/')[0]
+	devices = [device for device in network if root == device.mqtt_root]
+	for device in devices:
+		coro = device.mqtt_callback(client.app, msg)
+		future = asyncio.run_coroutine_threadsafe(coro, client.app.loop)
+		future.result()
+
+
+def init_client(app):
+	"""Initializes the MQTT client."""
+	client = mqtt.Client()
+	client.app = app
+	client.on_connect = on_connect
+	client.on_message = on_message
+
+	client.connect_async("localhost", 1883, 60)
+	client.loop_start()
+	return client

static/juice.css

@@ -79,7 +79,7 @@ nav span:hover {
 	background-color: whitesmoke;
 }
 
-.ip_address {
+.ip_address, .mqtt_root {
 	font-size: 0.8em;
 	font-style: italic;
 	color: dimgray;
@@ -109,18 +109,18 @@ nav span:hover {
 	flex-wrap: wrap;
 }
 
-.led {
+.NeoPixel {
 	padding: 0.25em;
 	margin: 0.125em;
 }
 
-.led_color {
+.NeoPixel_color {
 	border-radius: 0.25em;
 	width: 1em;
 	height: 1em;
 }
 
-.led_color_input {
+.NeoPixel_color_input {
 	opacity: 0;
 	display: block;
 	width: 1em;

static/juice.js

@@ -3,6 +3,7 @@ var socket;
 function load() {
 	socket = init_websocket();
 
+	// initialize RelayOutlet SVG color
 	Object.entries(init_state).forEach(([device_id, sub_devs]) => {
 		let device = document.querySelector('#' + device_id);
 		Object.entries(sub_devs).forEach(([sub_device_id, state]) => {
@@ -15,11 +16,10 @@ function load() {
 		});
 	});
 
-	document.querySelectorAll('input[type=color]').forEach((led_input) => {
+	/*document.querySelectorAll('input[type=color]').forEach((led_input) => {
 		led_input.onchange = function(event) {
-			event.target.parentElement.style.backgroundColor = event.target.value;
 		}
-	});
+	});*/
 }
 
 /* Websocket setup */
@@ -43,6 +43,7 @@ function init_websocket() {
 	socket.events['new_device'] = new_device_recv;
 	socket.events['lock_device'] = lock_device_recv;
 	socket.events['delete_device'] = delete_device_recv;
+	socket.events['neopixel'] = neopixel_recv;
 	return socket;
 }
 
@@ -51,7 +52,7 @@ function onmessage (e) {
 	let event = data.event;
 	data = data.data;
 	if (!data.ok) {
-		throw new Error("Socket error: event = " + event +", error = " + data.error);
+		throw new Error("Socket error: event = " + event + ", error = " + data.error);
 	}
 	if (socket.events[event] === undefined) {
 		console.log("Unknown socket event: " + event);
@@ -60,11 +61,12 @@ function onmessage (e) {
 	socket.events[event](data);
 }
 
-function onclose(e) {
+async function onclose(e) {
 	if (e.wasClean) { return; } // no need to reconnect
 	console.log(e);
 	console.log('Websocket lost connection to server. Re-trying...');
 	socket = init_websocket();
+	await sleep(5000);
 }
 
 function onerror(e) {
@@ -162,6 +164,12 @@ function delete_device_recv(data) {
 	device.remove()
 }
 
+function neopixel_recv(data) {
+	let device = document.querySelector('#' + data.device_id);
+	let sub_device = device.querySelector('.' + data.sub_device_id);
+	sub_device.firstElementChild.style.backgroundColor = data.color;
+}
+
 /* Websocket send */
 function toggle_outlet(svg) {
 	let sub_dev = get_object_from_svg(svg).parentElement;
@@ -223,6 +231,18 @@ function delete_device(device) {
 	socket.send('delete_device', data);
 }
 
+function neopixel(device) {
+	let data = {
+		device_id: device.parentElement.parentElement.id,
+		sub_device_id: device.classList[2],
+		change_mode: 'state',
+		type: 'solid',
+		amount: 'single',
+		color: device.firstElementChild.firstElementChild.value
+	}
+	socket.send('neopixel', data);
+}
+
 /* DOM */
 function edit_field(field) {
 	let value = field.firstElementChild.innerText;
@@ -247,3 +267,7 @@ function get_object_from_svg(svg) {
 	}
 	return null;
 }
+
+function sleep(ms) {
+	return new Promise(resolve => setTimeout(resolve, ms));
+}

templates/index.html

@@ -5,7 +5,7 @@
 		<link rel="stylesheet" type="text/css" href="/static/juice.css">
 		<script>
 			const init_state = {{ init_state|tojson|safe }};
-			const ws_uri = "{{ request.app.router['ws'].url_for() }}";
+			const ws_uri = "{{ url('ws') }}";
 		</script>
 		<script type="text/javascript" src="/static/juice.js"></script>
 		<script>window.onload = load;</script>
@@ -35,25 +35,25 @@
 					<div class="id editable"><span class="field_value">{{ device.id }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span><span class="delete font-awesome" onclick="delete_device(this.parentElement.parentElement)">&#xe804;</span><span class="lock font-awesome" onclick="lock_device(this.parentElement.parentElement)">&#xe803;</span>{% else %}<span class="unlock font-awesome" onclick="unlock_device(this.parentElement.parentElement)">&#xf13e;</span>{% endif %}</div>
 					<div class="description editable"><span class="field_value">{{ device.description }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span>{% endif %}</div>
 					<div class="location editable"><span class="field_value">{{ device.location }}</span>{% if not device.locked %}<span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span>{% endif %}</div>
-					<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>
-					<div class="sub_devices">
 					{% if device.type == 'RelayDevice' %}
+					<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>
+					{% endif %}
+					<div class="sub_devices">
 					{% for sub_device in device.sub_devices %}
 						<div class="sub_device {{ sub_device.type }} {{ sub_device.id }}">
+							{% if device.type == 'RelayDevice' %}
 							<div class="id">{{ sub_device.id }}</div>
 							<object class="outlet_image" aria-label="Outlet Image" data="/static/outlet.svg"></object>
 							<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>
-						</div>
-						{% endfor %}
 							{% elif device.type == 'LightStrip' %}
-					{% for n in range(24) %}
-						<div class="sub_device led led{{n}}">
-							<label class="led_color">
-								<input class="led_color_input" type="color">
+							<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)">
 							</label>
+							{% endif %}
 						</div>
 					{% endfor %}
-					{% endif %}
 					</div>
 				</div>
 			{% endfor %}

tools.py

@@ -2,14 +2,19 @@
 """
 Miscellaneous tools and helper functions.
 """
-from aiohttp import web
 
+def to_html_color(color):
+	"""Converts a decimal color code to HTML format."""
+	html_color = "#"
+	for i in range(3):
+		html_color += hex(color[i])[2:].zfill(2)
+	return html_color
 
-def make_error(code, message):
-	"""
-	Returns a JSON error.
-	"""
-	d = {'ok': False, 'status': code, 'message': message}
-	res = web.json_response(d)
-	res.set_status(code)
-	return res
+def from_html_color(html_color):
+	"""Converts an HTML color code to decimal list format."""
+	html_color = html_color[1:]
+	color = []
+	color.append(int(html_color[0:2], base=16))
+	color.append(int(html_color[2:4], base=16))
+	color.append(int(html_color[4:6], base=16))
+	return color