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

state/rainbow works

Browse Source
This commit is contained in:
iou1name 2019-11-20 18:37:48 -05:00
parent 43afab5d5d
commit 2b276cb1bc
4 changed files with 48 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
events.py
View File

@ -209,6 +209,8 @@ async def neopixel(request, ws, data):
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'))
request.app['mqtt'].publish(mqtt_msg, payload)
# websocket response is handled under LightStrip.mqtt_callback

11
models.py
View File

@ -165,6 +165,7 @@ class LightStrip(Device):
async def mqtt_callback(self, app, msg):
topic = msg.topic.split('/')
payload = msg.payload.decode('utf8')
data = {}
data['ok'] = True
@ -172,10 +173,10 @@ class LightStrip(Device):
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':
payload = payload.split(',')
payload = [int(num) for num in payload]
data['amount'] = topic[3]
if topic[3] == 'single':
data['sub_device_id'] = 'led' + topic[4]
@ -185,8 +186,12 @@ class LightStrip(Device):
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)
elif topic[2] == 'rainbow':
payload = payload.split(',')
self.rainbow_params = [float(p) for p in payload[:3]]
self.rainbow_params += [int(p) for p in payload[3:]]
save_network(network)
res = {'event': 'neopixel', 'data': data}
await app.send_json_all(res)

30
static/juice.js
View File

@ -248,11 +248,15 @@ function delete_device(device) {
socket.send('delete_device', data);
}
function neopixel_state(sub_device) {
let device = sub_device.parentElement.parentElement;
function neopixel_state(device) {
let sub_device;
if (device.classList.contains('sub_device')) {
sub_device = device;
device = sub_device.closest('.device');
}
let state_mode = device.querySelector('.state_select').value;
let data = {
device_id: sub_device.parentElement.parentElement.id,
device_id: device.id,
change_mode: 'state',
type: state_mode,
}
@ -273,6 +277,16 @@ function neopixel_state(sub_device) {
data['sub_device_id'] = sub_device.classList[2];
}
} else if (state_mode === 'rainbow') {
data['rainbow_params'] = [
device.querySelector('#state_rainbow_red_freq_' + device.id).value,
device.querySelector('#state_rainbow_green_freq_' + device.id).value,
device.querySelector('#state_rainbow_blue_freq_' + device.id).value,
device.querySelector('#state_rainbow_red_phase_' + device.id).value,
device.querySelector('#state_rainbow_green_phase_' + device.id).value,
device.querySelector('#state_rainbow_blue_phase_' + device.id).value,
device.querySelector('#state_rainbow_center_' + device.id).value,
device.querySelector('#state_rainbow_width_' + device.id).value
]
} else if (state_mode === 'america') {
}
socket.send('neopixel', data);
@ -311,6 +325,8 @@ function state_solid_amount(radio) {
}
function state_select(select) {
let device = select.parentElement.parentElement.parentElement;
let sub_devices = device.querySelector('.sub_devices');
if (select.value === 'solid') {
select.parentElement.querySelector('.state_solid').style.display = 'block';
select.parentElement.querySelector('.state_rainbow').style.display = 'none';
@ -319,10 +335,18 @@ 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';
for (let sub_device of sub_devices.children) {
let input = sub_device.firstElementChild.firstElementChild;
input.disabled = true;
}
}
}

22
templates/index.html
View File

@ -53,56 +53,56 @@
<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 }}" value="{{ device.sub_devices[0].color|html_color }}" onchange="neopixel_state(this.parentElement.parentElement)">
<input type="color" id="state_solid_all_color_{{ device.id }}" value="{{ device.sub_devices[0].color|html_color }}" onchange="neopixel_state(this.closest('.device'))">
</div>
<div class="state_rainbow" style="display: {% if device.state == 'rainbow' %}block{% else %}none{% endif %}">
<table>
<tr>
<td>Red</td>
<td>
<input type="number" id="state_rainbow_red_freq_{{ device.id }}" min="0" max="1" step="0.1">
<input type="number" id="state_rainbow_red_freq_{{ device.id }}" min="0" max="1" step="0.1" value="{{ device.rainbow_params[0] }}" onchange="neopixel_state(this.closest('.device'))">
<label for="state_rainbow_red_freq_{{ device.id }}">f</label>
</td>
<td>
<input type="number" id="state_rainbow_red_phase_{{ device.id }}" min="0" max="10" step="1">
<input type="number" id="state_rainbow_red_phase_{{ device.id }}" min="0" max="10" step="1" value="{{ device.rainbow_params[3] }}" onchange="neopixel_state(this.closest('.device'))">
<label for="state_rainbow_red_phase_{{ device.id }}">Φ</label>
</td>
</tr>
<tr>
<td>Green</td>
<td>
<input type="number" id="state_rainbow_green_freq_{{ device.id }}" min="0" max="1" step="0.1">
<input type="number" id="state_rainbow_green_freq_{{ device.id }}" min="0" max="1" step="0.1" value="{{ device.rainbow_params[1] }}" onchange="neopixel_state(this.closest('.device'))">
<label for="state_rainbow_green_freq_{{ device.id }}">f</label>
</td>
<td>
<input type="number" id="state_rainbow_green_phase_{{ device.id }}" min="0" max="10" step="1">
<input type="number" id="state_rainbow_green_phase_{{ device.id }}" min="0" max="10" step="1" value="{{ device.rainbow_params[4] }}" onchange="neopixel_state(this.closest('.device'))">
<label for="state_rainbow_green_phase_{{ device.id }}">Φ</label>
</td>
</tr>
<tr>
<td>Blue</td>
<td>
<input type="number" id="state_rainbow_blue_freq_{{ device.id }}" min="0" max="1" step="0.1">
<input type="number" id="state_rainbow_blue_freq_{{ device.id }}" min="0" max="1" step="0.1" value="{{ device.rainbow_params[2] }}" onchange="neopixel_state(this.closest('.device'))">
<label for="state_rainbow_blue_freq_{{ device.id }}">f</label>
</td>
<td>
<input type="number" id="state_rainbow_blue_phase_{{ device.id }}" min="0" max="10" step="1">
<input type="number" id="state_rainbow_blue_phase_{{ device.id }}" min="0" max="10" step="1" value="{{ device.rainbow_params[5] }}" onchange="neopixel_state(this.closest('.device'))">
<label for="state_rainbow_blue_phase_{{ device.id }}">Φ</label>
</td>
</tr>
<tr>
<td><label for="state_rainbow_center_{{ device.id }}">Center</label></td>
<td><input type="number" id="state_rainbow_center_{{ device.id }}" min="0" max="255" step="1"></td>
<td><input type="number" id="state_rainbow_center_{{ device.id }}" min="0" max="255" step="1" value="{{ device.rainbow_params[6] }}" onchange="neopixel_state(this.closest('.device'))"></td>
</tr>
<tr>
<td><label for="state_rainbow_width_{{ device.id }}">Width</label></td>
<td><input type="number" id="state_rainbow_width_{{ device.id }}" min="0" max="128" step="1"></td>
<td><input type="number" id="state_rainbow_width_{{ device.id }}" min="0" max="128" step="1" value="{{ device.rainbow_params[7] }}" onchange="neopixel_state(this.closest('.device'))"></td>
</tr>
</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">
<input type="number" id="state_america_stripe_{{ device.id }}" min="1" max="256" step="1" value="{{ device.america_params }}">
</div>
</div>
<div class="animation">
@ -124,7 +124,7 @@
<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>
{% elif device.type == 'LightStrip' %}
<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_state(this.parentElement.parentElement)" disabled>
<input class="NeoPixel_color_input" type="color" value="{{ sub_device.color|html_color }}" onchange="neopixel_state(this.closest('.sub_device'))" disabled>
</label>
{% endif %}
</div>