diff --git a/static/juice.js b/static/juice.js index 596ab7a..d42cab7 100644 --- a/static/juice.js +++ b/static/juice.js @@ -167,7 +167,10 @@ function delete_device_recv(data) { 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) { @@ -181,9 +184,40 @@ function neopixel_recv(data) { 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'); @@ -225,8 +259,7 @@ function save_field(field) { socket.send('edit_field', data); } -function new_device() { - let data = { +function new_device() { let data = { device_type: 'RelayDevice', }; socket.send('new_device', data); @@ -363,7 +396,7 @@ function state_solid_amount(radio) { } } -function state_select(select) { +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'; @@ -383,10 +416,12 @@ function state_select(select) { let input = sub_device.firstElementChild.firstElementChild; input.disabled = true; } - neopixel_state(device); + if (send_socket_event) { + neopixel_state(device); + } } -function animation_select(select) { +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'; @@ -395,7 +430,9 @@ function animation_select(select) { select.parentElement.querySelector('.animation_static').style.display = 'none'; select.parentElement.querySelector('.animation_rotate').style.display = 'block'; } - neopixel_animation(device); + if (send_socket_event) { + neopixel_animation(device); + } } /* Misc */