iou1name/Juice
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: iou1name:53656b1f05ca63a7dc4967af1e6dada97ee3b224
Branches Tags
iou1name:master
...
compare: iou1name:761683a046fc94c2a55de6dac7c5554110dd1dc3
Branches Tags
iou1name:master

2 Commits
53656b1f05 ... 761683a046

Author SHA1 Message Date
iou1name
761683a046 animation controls functioning 2019-11-21 20:39:47 -05:00
iou1name
57d618a3e0 changing state select dropdown activates state 2019-11-21 09:39:35 -05:00
4 changed files with 120 additions and 32 deletions
Show Stats Expand all files Collapse all files

35
events.py
View File

@ -195,24 +195,45 @@ async def neopixel(request, ws, data):
await ws.send_json(data)
return
# TODO: form validation
mqtt_msg = [device.mqtt_root]
if data.get('change_mode') == 'state':
mqtt_msg.append(data.get('change_mode'))
if data.get('type') == 'solid':
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('amount'))
mqtt_msg.append(data.get('sub_device_id').replace('led', ''))
mqtt_msg = '/'.join(mqtt_msg)
if data.get('type') == 'solid':
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)
request.app['mqtt'].publish(mqtt_msg, payload)
# websocket response is handled under LightStrip.mqtt_callback

27
models.py
View File

@ -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':

47
static/juice.js
View File

@ -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;
@ -338,8 +364,7 @@ function state_solid_amount(radio) {
}
function state_select(select) {
let device = select.parentElement.parentElement.parentElement;
let sub_devices = device.querySelector('.sub_devices');
let device = select.closest('.device');
if (select.value === 'solid') {
select.parentElement.querySelector('.state_solid').style.display = 'block';
select.parentElement.querySelector('.state_rainbow').style.display = 'none';
@ -348,19 +373,29 @@ function state_select(select) {
select.parentElement.querySelector('.state_solid').style.display = 'none';
select.parentElement.querySelector('.state_rainbow').style.display = 'block';
select.parentElement.querySelector('.state_america').style.display = 'none';
for (let sub_device of sub_devices.children) {
let input = sub_device.firstElementChild.firstElementChild;
input.disabled = true;
}
} 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';
}
let sub_devices = device.querySelector('.sub_devices');
for (let sub_device of sub_devices.children) {
let input = sub_device.firstElementChild.firstElementChild;
input.disabled = true;
}
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 */

17
templates/index.html
View File

@ -115,11 +115,20 @@
</div>
<div class="animation">
<span>Animation</span><br>
<select>
<option>Static</option>
<option>Rotate Left</option>
<option>Rotate Right</option>
<select class="animation_select" onchange="animation_select(this)">
<option{% if device.animation == 'static' %} checked{% endif %} value="static">Static</option>
<option{% if device.animation == 'rotate_left' %} checked{% endif %} value="rotate_left">Rotate Left</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 %}