505 lines
17 KiB
JavaScript
505 lines
17 KiB
JavaScript
var socket;
|
|
|
|
function load() {
|
|
socket = init_websocket();
|
|
|
|
// initialize RelayOutlet SVG color
|
|
Object.entries(init_state).forEach(([device_id, sub_devices]) => {
|
|
let device = document.querySelector('#' + device_id);
|
|
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');
|
|
}
|
|
});
|
|
});
|
|
|
|
/*document.querySelectorAll('input[type=color]').forEach((led_input) => {
|
|
led_input.onchange = function(event) {
|
|
}
|
|
});*/
|
|
}
|
|
|
|
/* Websocket setup */
|
|
function init_websocket() {
|
|
let socket = new WebSocket('wss://' + window.location.hostname + ws_uri);
|
|
socket._send = socket.send;
|
|
socket.send = function(event_title, data) {
|
|
data = JSON.stringify({event: event_title, data: data});
|
|
if (socket.readyState == 0) {
|
|
console.log("Socket is still opening!");
|
|
return;
|
|
}
|
|
socket._send(data);
|
|
}
|
|
socket.onmessage = onmessage;
|
|
socket.onclose = onclose;
|
|
socket.onerror = onerror;
|
|
socket.events = {};
|
|
socket.events['toggle_outlet'] = toggle_outlet_recv;
|
|
socket.events['edit_field'] = edit_field_recv;
|
|
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;
|
|
socket.events['lixie_clock'] = lixie_clock_recv;
|
|
return socket;
|
|
}
|
|
|
|
function onmessage (e) {
|
|
let data = JSON.parse(e.data);
|
|
let event = data.event;
|
|
data = data.data;
|
|
if (!data.ok) {
|
|
throw new Error("Socket error: event = " + event + ", error = " + data.error);
|
|
}
|
|
if (socket.events[event] === undefined) {
|
|
console.log("Unknown socket event: " + event);
|
|
return;
|
|
}
|
|
socket.events[event](data);
|
|
}
|
|
|
|
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) {
|
|
console.log("Websocket error!")
|
|
console.log(e);
|
|
}
|
|
|
|
/* Websocket receive */
|
|
function toggle_outlet_recv(data) {
|
|
let device = document.querySelector('#' + data.device_id);
|
|
let sub_device = device.querySelector('.' + data.sub_device_id);
|
|
let svg = sub_device.querySelector('.outlet_image').getSVGDocument().firstChild;
|
|
if (data.state === true) {
|
|
svg.classList.remove('off');
|
|
svg.classList.add('on');
|
|
} else {
|
|
svg.classList.remove('on');
|
|
svg.classList.add('off');
|
|
}
|
|
}
|
|
|
|
function edit_field_recv(data) {
|
|
let device = document.querySelector('#' + data.device_id);
|
|
if (data.sub_device_id) {
|
|
device = device.querySelector('.' + data.sub_device_id);
|
|
}
|
|
let field = device.querySelector('.' + data.field);
|
|
|
|
let span = document.createElement('span');
|
|
span.innerText = data['value'];
|
|
span.className = 'field_value';
|
|
field.firstElementChild.replaceWith(span);
|
|
|
|
let edit = document.createElement('span');
|
|
edit.innerHTML = '';
|
|
edit.className = 'edit font-awesome';
|
|
edit.setAttribute('onclick', 'edit_field(this.parentElement)');
|
|
field.children[1].replaceWith(edit);
|
|
}
|
|
|
|
function new_device_recv(data) {
|
|
if (data.device_type == 'RelayDevice') {
|
|
var template = document.querySelector('#RelayDevice_template');
|
|
} else {
|
|
return;
|
|
}
|
|
let node = document.importNode(template.content, true);
|
|
node.querySelector('.id').querySelector('.field_value').textContent = data.device_id;
|
|
document.querySelector('#devices').appendChild(node);
|
|
let children = document.querySelector('#devices').children;
|
|
children[children.length - 1].id = data.device_id;
|
|
}
|
|
|
|
function lock_device_recv(data) {
|
|
let device = document.querySelector('#' + data.device_id);
|
|
let fields = device.querySelectorAll('.editable');
|
|
|
|
if (data.locked) {
|
|
fields.forEach(function(field) {
|
|
field.querySelector('.edit').remove();
|
|
});
|
|
device.querySelector('.id').querySelector('.lock').remove();
|
|
device.querySelector('.id').querySelector('.delete').remove();
|
|
let unlock = document.createElement('span');
|
|
unlock.innerHTML = '';
|
|
unlock.className = 'unlock font-awesome';
|
|
unlock.setAttribute('onclick', 'unlock_device(this.parentElement.parentElement)');
|
|
device.querySelector('.id').appendChild(unlock);
|
|
} else {
|
|
fields.forEach(function(field) {
|
|
let edit = document.createElement('span');
|
|
edit.innerHTML = '';
|
|
edit.className = 'edit font-awesome';
|
|
edit.setAttribute('onclick', 'edit_field(this.parentElement)');
|
|
field.appendChild(edit);
|
|
});
|
|
device.querySelector('.id').querySelector('.unlock').remove();
|
|
|
|
let delete_elem = document.createElement('span');
|
|
delete_elem.innerHTML = '';
|
|
delete_elem.className = 'delete font-awesome';
|
|
delete_elem.setAttribute('onclick', 'delete_device(this.parentElement.parentElement)');
|
|
device.querySelector('.id').appendChild(delete_elem);
|
|
|
|
let lock = document.createElement('span');
|
|
lock.innerHTML = '';
|
|
lock.className = 'lock font-awesome';
|
|
lock.setAttribute('onclick', 'lock_device(this.parentElement.parentElement)');
|
|
device.querySelector('.id').appendChild(lock);
|
|
}
|
|
}
|
|
|
|
function delete_device_recv(data) {
|
|
let device = document.querySelector('#' + data.device_id);
|
|
device.remove()
|
|
}
|
|
|
|
function neopixel_recv(data) {
|
|
let device = document.querySelector('#' + data.device_id);
|
|
if (data.change_mode === 'state') {
|
|
select = device.querySelector('.state_select');
|
|
if (data.type === 'solid') {
|
|
select.value = data.type;
|
|
state_select(select, false);
|
|
if (data.amount === 'all') {
|
|
let sub_devices = device.querySelector('.sub_devices');
|
|
for (let sub_device of sub_devices.children) {
|
|
sub_device.firstElementChild.style.backgroundColor = data.color;
|
|
sub_device.firstElementChild.firstElementChild.value = data.color;
|
|
}
|
|
device.querySelector('#state_solid_all_color_' + device.id).value = data.color;
|
|
} else if (data.amount === 'single') {
|
|
let sub_device = device.querySelector('.' + data.sub_device_id);
|
|
sub_device.firstElementChild.style.backgroundColor = data.color;
|
|
sub_device.firstElementChild.firstElementChild.value = data.color;
|
|
}
|
|
} else if (data.type === 'rainbow') {
|
|
select.value = data.type;
|
|
state_select(select, false);
|
|
device.querySelector('#state_rainbow_red_freq_' + device.id).value = data.rainbow_params[0];
|
|
device.querySelector('#state_rainbow_green_freq_' + device.id).value = data.rainbow_params[1];
|
|
device.querySelector('#state_rainbow_blue_freq_' + device.id).value = data.rainbow_params[2];
|
|
device.querySelector('#state_rainbow_red_phase_' + device.id).value = data.rainbow_params[3];
|
|
device.querySelector('#state_rainbow_green_phase_' + device.id).value = data.rainbow_params[4];
|
|
device.querySelector('#state_rainbow_blue_phase_' + device.id).value = data.rainbow_params[5];
|
|
device.querySelector('#state_rainbow_center_' + device.id).value = data.rainbow_params[6];
|
|
device.querySelector('#state_rainbow_width_' + device.id).value = data.rainbow_params[7];
|
|
} else if (data.type === 'america') {
|
|
select.value = data.type;
|
|
state_select(select, false);
|
|
device.querySelector('#state_america_stripe_' + device.id).value = data.america_params[0];
|
|
device.querySelector('#state_america_magnitude_' + device.id).value = data.america_params[1];
|
|
}
|
|
} else if (data.change_mode === 'animation') {
|
|
if (data.property_type === 'mode') {
|
|
select = device.querySelector('.animation_select');
|
|
if (data.type === 'static') {
|
|
select.value = data.type;
|
|
animation_select(select, false);
|
|
} else if (data.type === 'rotate_left') {
|
|
select.value = data.type;
|
|
animation_select(select, false);
|
|
device.querySelector('#animation_rotate_count_' + device.id).value = data.rotate_count;
|
|
} else if (data.type === 'rotate_right') {
|
|
select.value = data.type;
|
|
animation_select(select, false);
|
|
device.querySelector('#animation_rotate_count_' + device.id).value = data.rotate_count;
|
|
}
|
|
} else if (data.property_type === 'delay') {
|
|
device.querySelector('#animation_delay_' + device.id).value = data.delay;
|
|
}
|
|
} else if (data.change_mode === 'strip') {
|
|
if (data.amount === 'full') {
|
|
let sub_devices = device.querySelector('.sub_devices');
|
|
for (let i = 0; i < sub_devices.children.length; i++) {
|
|
sub_devices.children[i].firstElementChild.style.backgroundColor = data.colors[i];
|
|
sub_devices.children[i].firstElementChild.firstElementChild.value = data.colors[i];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function lixie_clock_recv(data) {
|
|
let device = document.querySelector('#' + data.device_id);
|
|
if (data.change_mode === 'time') {
|
|
let radio = device.querySelector('#display_mode_time_' + device.id);
|
|
radio.checked = true;
|
|
lixie_display_mode(radio, false);
|
|
} else if (data.change_mode === 'number') {
|
|
let radio = device.querySelector('#display_mode_number_' + device.id);
|
|
radio.checked = true;
|
|
lixie_display_mode(radio, false);
|
|
device.querySelector('#lixie_number_' + device.id).value = data.display_number;
|
|
} else if (data.change_mode === 'color') {
|
|
device.querySelector('#display_color_' + device.id).value = data.color;
|
|
} else if (data.change_mode === 'time_offset') {
|
|
device.querySelector('#lixie_time_offset_' + device.id).value = data.time_offset;
|
|
}
|
|
}
|
|
|
|
/* Websocket send */
|
|
function toggle_outlet(svg) {
|
|
let sub_dev = get_object_from_svg(svg).parentElement;
|
|
let data = {
|
|
device_id: sub_dev.parentElement.parentElement.id,
|
|
sub_device_id: sub_dev.querySelector('.id').innerText,
|
|
};
|
|
socket.send('toggle_outlet', data);
|
|
}
|
|
|
|
function save_field(field) {
|
|
let value = field.firstElementChild.value;
|
|
let device_id = field.parentElement.id;
|
|
let sub_device_id;
|
|
if (field.parentElement.className.includes('sub_device')) {
|
|
sub_device_id = field.parentElement.children[0].textContent;
|
|
device_id = field.parentElement.parentElement.parentElement.id;
|
|
} else {
|
|
sub_device_id = '';
|
|
}
|
|
let data = {
|
|
device_id: device_id,
|
|
sub_device_id: sub_device_id,
|
|
field: field.classList[0],
|
|
value: value
|
|
};
|
|
socket.send('edit_field', data);
|
|
}
|
|
|
|
function new_device() {
|
|
let data = {
|
|
device_type: 'RelayDevice',
|
|
};
|
|
socket.send('new_device', data);
|
|
}
|
|
|
|
function lock_device(device) {
|
|
if (device.querySelector('.save')) { return; }
|
|
let data = {
|
|
device_id: device.id,
|
|
locked: true,
|
|
};
|
|
socket.send('lock_device', data);
|
|
}
|
|
|
|
function unlock_device(device) {
|
|
let data = {
|
|
device_id: device.id,
|
|
locked: false,
|
|
};
|
|
socket.send('lock_device', data);
|
|
}
|
|
|
|
function delete_device(device) {
|
|
if (!window.confirm("Are you sure you want to delete this device?")) { return; }
|
|
let data = {
|
|
device_id: device.id,
|
|
};
|
|
socket.send('delete_device', data);
|
|
}
|
|
|
|
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: device.id,
|
|
change_mode: 'state',
|
|
type: state_mode,
|
|
}
|
|
if (state_mode === 'solid') {
|
|
let amount;
|
|
let radios = device.querySelector('.state_solid').querySelectorAll('input[type=radio]');
|
|
for (let radio of radios) {
|
|
if (radio.checked) {
|
|
amount = radio.value;
|
|
break;
|
|
}
|
|
}
|
|
data['amount'] = amount;
|
|
if (amount === 'all') {
|
|
data['color'] = device.querySelector('#state_solid_all_color_' + device.id).value;
|
|
} else if (amount === 'single') {
|
|
data['color'] = sub_device.firstElementChild.firstElementChild.value;
|
|
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') {
|
|
data['america_params'] = [
|
|
device.querySelector('#state_america_stripe_' + device.id).value,
|
|
device.querySelector('#state_america_magnitude_' + device.id).value
|
|
]
|
|
}
|
|
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);
|
|
}
|
|
|
|
function lixie_clock(input) {
|
|
let device = input.closest('.device');
|
|
data = {
|
|
device_id: device.id
|
|
}
|
|
if (input.className === 'time') {
|
|
data['change_mode'] = 'time';
|
|
} else if (input.className === 'number') {
|
|
data['change_mode'] = 'number';
|
|
data['display_number'] = device.querySelector('#lixie_number_' + device.id).value;
|
|
} else if (input.className === 'color') {
|
|
data['change_mode'] = 'color';
|
|
data['color'] = input.value
|
|
} else if (input.className === 'time_offset') {
|
|
data['change_mode'] = 'time_offset';
|
|
data['time_offset'] = device.querySelector('#lixie_time_offset_' + device.id).value;
|
|
}
|
|
socket.send('lixie_clock', data);
|
|
}
|
|
|
|
/* DOM */
|
|
function edit_field(field) {
|
|
let value = field.firstElementChild.innerText;
|
|
let input = document.createElement('input');
|
|
input.value = value;
|
|
field.firstElementChild.replaceWith(input);
|
|
|
|
let save = document.createElement('span');
|
|
save.innerHTML = '';
|
|
save.className = 'save font-awesome';
|
|
save.setAttribute('onclick', 'save_field(this.parentElement)');
|
|
field.children[1].replaceWith(save);
|
|
}
|
|
|
|
function state_solid_amount(radio) {
|
|
let device = radio.closest('.device');
|
|
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, send_socket_event = true) {
|
|
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';
|
|
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';
|
|
}
|
|
let sub_devices = device.querySelector('.sub_devices');
|
|
for (let sub_device of sub_devices.children) {
|
|
let input = sub_device.firstElementChild.firstElementChild;
|
|
input.disabled = true;
|
|
}
|
|
if (send_socket_event) {
|
|
neopixel_state(device);
|
|
}
|
|
}
|
|
|
|
function animation_select(select, send_socket_event = true) {
|
|
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';
|
|
}
|
|
if (send_socket_event) {
|
|
neopixel_animation(device);
|
|
}
|
|
}
|
|
|
|
function lixie_display_mode(radio, send_socket_event = true) {
|
|
let device = radio.closest('.device');
|
|
if (radio.value === 'time') {
|
|
device.querySelector('.lixie_number').style.display = 'none';
|
|
device.querySelector('.lixie_time_offset').style.display = 'block';
|
|
} else if (radio.value === 'number') {
|
|
device.querySelector('.lixie_number').style.display = 'block';
|
|
device.querySelector('.lixie_time_offset').style.display = 'none';
|
|
}
|
|
if (send_socket_event) {
|
|
lixie_clock(radio);
|
|
}
|
|
}
|
|
|
|
/* Misc */
|
|
function get_object_from_svg(svg) {
|
|
let all_objects = document.getElementsByTagName("object");
|
|
for (let i=0; i < all_objects.length; i++) {
|
|
if (svg === all_objects[i].getSVGDocument().firstElementChild) {
|
|
return all_objects[i];
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function sleep(ms) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|