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

light strip frontend layout

Browse Source
This commit is contained in:
iou1name 2019-11-20 11:00:37 -05:00
parent 68fc719239
commit 0ab3da4297
4 changed files with 125 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
models.py
View File

@ -156,6 +156,12 @@ class LightStrip(Device):
def __init__(self):
super().__init__()
self.type = "LightStrip"
self.state = "solid"
self.animation = "static",
rainbow_params = [0.3, 0.3, 0.3, 0, 2, 4, 127, 128],
america_params = 8,
animation_rotate_count = 1,
animation_delay = 200,
async def mqtt_callback(self, app, msg):
topic = msg.topic.split('/')

5
static/juice.css
View File

@ -86,6 +86,11 @@ nav span:hover {
margin: 0.2em;
}
.light_controls {
display: grid;
grid-template-columns: 1fr 1fr;
}
.sub_devices {
display: flex;
}

42
static/juice.js
View File

@ -4,11 +4,11 @@ function load() {
socket = init_websocket();
// initialize RelayOutlet SVG color
Object.entries(init_state).forEach(([device_id, sub_devs]) => {
Object.entries(init_state).forEach(([device_id, sub_devices]) => {
let device = document.querySelector('#' + device_id);
Object.entries(sub_devs).forEach(([sub_device_id, state]) => {
let sub_dev = device.querySelector('.' + sub_device_id);
let svg = sub_dev.querySelector('object').getSVGDocument().firstElementChild;
Object.entries(sub_devices).forEach(([sub_device_id, state]) => {
let sub_device = device.querySelector('.' + sub_device_id);
let svg = sub_device.querySelector('object').getSVGDocument().firstElementChild;
if (state) {
svg.classList.remove('off');
svg.classList.add('on');
@ -271,3 +271,37 @@ function get_object_from_svg(svg) {
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');
for (let sub_device of sub_devices.children) {
let input = sub_device.firstElementChild.firstElementChild;
if (radio.value === 'all') {
input.disabled = true;
} else if (radio.value === 'single') {
input.disabled = false;
}
}
if (radio.value === 'all') {
device.querySelector('#state_solid_all_color_' + device.id).disabled = false;
} else if (radio.value === 'single') {
device.querySelector('#state_solid_all_color_' + device.id).disabled = true;
}
}
function state_select(select) {
if (select.value === 'solid') {
select.parentElement.querySelector('.state_solid').style.display = 'block';
select.parentElement.querySelector('.state_rainbow').style.display = 'none';
select.parentElement.querySelector('.state_america').style.display = 'none';
} else if (select.value === 'rainbow') {
select.parentElement.querySelector('.state_solid').style.display = 'none';
select.parentElement.querySelector('.state_rainbow').style.display = 'block';
select.parentElement.querySelector('.state_america').style.display = 'none';
} 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';
}
}

77
templates/index.html
View File

@ -39,6 +39,81 @@
<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>
<div class="light_controls">
<div class="state">
<span>State</span><br>
<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>
</select>
<div class="state_solid" style="display: {% if device.state == 'solid' %}block{% else %}hidden{% endif %}">
<input type="radio" id="state_solid_all_{{ device.id }}" name="state_solid_{{ device.id }}" value="all" onchange="state_solid_amount(this)" checked>
<label for="state_solid_all_{{ device.id }}">All</label><br>
<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 }}">
</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">
<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">
<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">
<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">
<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">
<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">
<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>
</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>
</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">
</div>
</div>
<div class="animation">
<span>Animation</span><br>
<select>
<option>Static</option>
<option>Rotate Left</option>
<option>Rotate Right</option>
</select>
</div>
</div>
{% endif %}
<div class="sub_devices">
{% for sub_device in device.sub_devices %}
@ -49,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(this.parentElement.parentElement)">
<input class="NeoPixel_color_input" type="color" value="{{ sub_device.color|html_color }}" onchange="neopixel_state(this.parentElement.parentElement)" disabled>
</label>
{% endif %}
</div>