/* JSON object global ref */ var data = null; function simple_xpath(expr) { var root = document.documentElement; var iter = document.evaluate(expr, root, document.createNSResolver(root), XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null); var nodes = []; var nwalk = iter.iterateNext(); while (nwalk) { nodes.push(nwalk); nwalk = iter.iterateNext(); } return nodes; } var picktgt = null; var picktimer = null; var picker; function picker_end() { node = simple_xpath('//*[contains(svg:title, "'+picktgt+'=")]')[0]; node.style.strokeWidth = 1.0; node.style.stroke = '#b0b0b0'; picktgt = null; var pickelem = document.getElementById('picker'); pickelem.style.visibility = 'hidden'; } function picker_begin(target) { if (picktgt) { window.clearTimeout(picktimer); picker_end(); } node = simple_xpath('//*[contains(svg:title, "'+target+'=")]')[0]; node.style.strokeWidth = 3.0; node.style.stroke = '#ff7700'; picktgt = target; picker.setRgb(data[picktgt]); var pickelem = document.getElementById('picker'); pickelem.style.visibility = 'visible'; picktimer = window.setTimeout(picker_end, 5000); } function picker_refresh() { window.clearTimeout(picktimer); picktimer = window.setTimeout(picker_end, 5000); } function on_picker(hex, hsv, rgb) { console.log('pick', picktgt, rgb); picker_refresh(); $.jsonRPC.request('light_set', { params: [picktgt, [rgb.r, rgb.g, rgb.b]], error: function(result) { console.log('light_set RGB error', result); }, success: function(result) { // console.log('light_set ', id, ' => ', mouseset, ' OK: ', result['result']); // immediate_update(id, mouseset); } }); } var mousesel = null; var mouseset = null; var mouseorig = 0; var mousey = 0; var mousetimer = null; var mousetdir = 0; var mousestart = 0; function immediate_update(id, setval) { var nodes = simple_xpath('//svg:text[@inkscape:label = "'+id+'=%set"]'); for (i in nodes) { var node = nodes[i]; value = Math.round(setval / 255. * 100) + "%"; node.firstChild.textContent = value; } } function on_evt_click(node) { var id = node.id.substring(4); var now = new Date().getTime(); if (now - mousestart > 200) return; console.log("clicked", id); $.jsonRPC.request('light_get', { params: [id], error: function(result) { console.log('light_get', id, 'error', result); }, success: function(result) { /* <<< */ r = result['result'] console.log('light_get', r); var set; if (r['r']) { set = (r['r'] + r['g'] + r['b']) / 3; } else { set = r['set']; } var newset = set ? 0 : 255; $.jsonRPC.request('light_set', { params: [id, newset], error: function(result) { console.log('light_set error', result); }, success: function(result) { // console.log('light_set ', id, ' => ', newset, ' OK: ', result['result']); immediate_update(id, newset); } }); /* >>> */ } }); } function on_mouse_timer() { if (mousesel === null) return; var id = mousesel.id.substring(4); /* mouseset += mousetdir * 8; if (mouseset < 1) mouseset = 1; if (id.substring(0, 4) == 'dali' && mouseset < 0x55) mouseset = 0x55; if (mouseset > 255) mouseset = 255; */ $.jsonRPC.request('light_set', { params: [id, mouseset], error: function(result) { console.log('light_set error', result); }, success: function(result) { // console.log('light_set ', id, ' => ', mouseset, ' OK: ', result['result']); immediate_update(id, mouseset); } }); mousetimer = window.setTimeout(on_mouse_timer, 100); } function on_evt_mousedown(node, evt) { var id = node.id.substring(4); if (id.substr(0,3) == 'dmx') { console.log('dmx click', id); picker_begin(id); return false; } // console.log('node', node, 'y', evt.clientY); mousestart = new Date().getTime(); node.style.fill = "#0088ff"; node.style.fillOpacity = 0.25; mousesel = node; mousey = evt.clientY; $.jsonRPC.request('light_get', { params: [id], error: function(result) { console.log('light_get error', result); }, success: function(result) { r = result['result'] if (r['r']) { mouseorig = (r['r'] + r['g'] + r['b']) / 3; } else { mouseorig = r['set']; } mouseset = mouseorig; } }); if (evt.stopPropagation) evt.stopPropagation(); evt.cancelBubble = true; return false; } function on_evt_mousemove(node, evt) { if (mousesel === null) return; var offs = evt.clientY - mousey; // console.log('node', node, 'set', mouseset, 'y', evt.clientY, 'offs', offs); var deadzone = 20; var dimzone = 120; var min = 1; if (mousesel.id.substring(4, 8) == 'dali') min = 0x55; if (offs > -deadzone && offs < deadzone) { if (mousetimer !== null) window.clearTimeout(mousetimer); mousetimer = null; return; } if (offs < 0) { var pos = (-offs - deadzone) / dimzone; // console.log("cvo", offs, "+dim", pos); mouseset = mouseorig + pos * (255 - mouseorig); } else { var pos = (offs - deadzone) / dimzone; // console.log("cvo", offs, "-dim", pos); mouseset = mouseorig * (1.0 - pos); } mouseset = Math.floor(mouseset); if (mouseset > 255) mouseset = 255; if (mouseset < min) mouseset = min; if (mousetimer === null) mousetimer = window.setTimeout(on_mouse_timer, 100); evt.cancelBubble = true; if (evt.stopPropagation) evt.stopPropagation(); return false; } function on_evt_mouseup(node, evt) { // console.log('--- up ---'); if (mousesel) { window.setTimeout((function() { var sel = mousesel; return function() { sel.style.fillOpacity = 0.0; } })(), 250); } mousesel = null; evt.cancelBubble = true; if (evt.stopPropagation) evt.stopPropagation(); return false; } function prepare_cliprects() { var nodes = simple_xpath('//svg:rect[contains(@inkscape:label, "=")]'); console.log('setup'); for (i in nodes) { var node = nodes[i]; node.orig_x = node.x.baseVal.value; node.orig_y = node.y.baseVal.value; node.orig_w = node.width.baseVal.value; node.orig_h = node.height.baseVal.value; } } function prepare_evts() { $.jsonRPC.setup({ endPoint: '/jsonrpc', namespace: '' }); $.jsonRPC.request('ping', { success: function(result) { console.log('ping', result['result']); }, error: function(result) { console.log('ping error', result); } }); var nodes = simple_xpath('//svg:g[@inkscape:label="events"]/svg:rect'); console.log('setup events', nodes); for (i in nodes) { var node = nodes[i]; var id = node.id; console.log('event node', i, " => ", node); node.onclick = (function() { var current_node = node; return function() { on_evt_click(current_node); } })(); node.onmousedown = (function() { var current_node = node; return function(evt) { on_evt_mousedown(current_node, evt); } })(); node.onmousemove = (function() { var current_node = node; return function(evt) { on_evt_mousemove(current_node, evt); } })(); node.onmouseup = (function() { var current_node = node; return function(evt) { on_evt_mouseup(current_node, evt); } })(); node.onselectstart = function() { return false; } node.unselectable = 'on'; node.style.userSelect = 'none'; node.style.MozUserSelect = 'none'; node.style.WebkitUserSelect = 'none'; } document.onmouseup = (function() { var current_node = node; return function(evt) { on_evt_mouseup(current_node, evt); } })(); document.onmousemove = (function() { var current_node = node; return function(evt) { on_evt_mousemove(current_node, evt); } })(); var nodes = simple_xpath('//svg:text'); for (i in nodes) { var node = nodes[i]; node.onselectstart = function() { return false; } node.unselectable = 'on'; node.style.userSelect = 'none'; node.style.MozUserSelect = 'none'; node.style.WebkitUserSelect = 'none'; } } function update_cliprect(node, dir, val) { //var cliprect = document.getElementById("cliprect-dali.lounge_buero-0"); //var t = new Date().getTime() / 2000 * Math.PI; // console.log("clipper: ", cliprect, " height: ", cliprect.height.baseVal.value, " sin: ", Math.sin(t)); // var state = 0.5 * (1 + Math.sin(t)); //console.log('node', node, 'dir', dir, 'val', val); if (dir === "y") { //console.log('orig_y', node.orig_y, 'orig_h', node.orig_h); node.y.baseVal.value = node.orig_y + node.orig_h * (1 - val); node.height.baseVal.value = node.orig_h * val; } else if (dir === 'x') { //console.log('orig_x', node.orig_x, 'orig_w', node.orig_w, 'w', node.orig_w * val); node.width.baseVal.value = node.orig_w * val; } } function update_elements(json) { var nodes = simple_xpath('//*[contains(@inkscape:label, "=")]'); for (i in nodes) { var node = nodes[i]; var spec = node.attributes['inkscape:label'].value.split('=', 2); var dataelem = json[spec[0]]; if (dataelem === null) continue; if (node.localName == "g") { node.style.display = (dataelem.text == spec[1]) ? "inline" : "none"; } else if (node.localName == "text") { var field = spec[1]; var value; if (field[0] == '%') { field = field.slice(1); value = Math.round(dataelem[field] / 255. * 100) + "%"; } else { value = dataelem[field]; } node.firstChild.textContent = value; } else if (node.localName == "rect") { update_cliprect(node, spec[1], dataelem['actual'] / 255.); } else { console.log("unknown dynamic content type", node.localName); } } nodes = simple_xpath('//*[contains(svg:title, "=")]'); for (i in nodes) { var node = nodes[i]; var spec = node.getElementsByTagName('title')[0].firstChild.nodeValue.split('=', 2); var dataelem = json[spec[0]]; if (dataelem === null) continue; if (node.localName == "path") { node.style.fill = "rgb(" + dataelem['r'] + ", " + dataelem['g'] + ", " + dataelem['b'] + ")"; } else { console.log("unknown dynamic content type", node.localName); } } } var xhr = new XMLHttpRequest(); function xhr_handler() { if (xhr.readyState === 4) { if (xhr.status === 200) { data = JSON.parse(xhr.responseText); /* for (attr in data) { console.log('xhr attr', attr); } */ update_elements(data); } else { console.log('xhr: something went wrong', xhr.status, xhr.statusText); } } } xhr.onreadystatechange = xhr_handler; function timer() { xhr.open('GET', '/'); // xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.send(null); window.setTimeout(timer, 2000); } function doload() { prepare_cliprects(); prepare_evts(); timer(); }