diff options
| -rw-r--r-- | svg/subcan.js | 170 |
1 files changed, 169 insertions, 1 deletions
diff --git a/svg/subcan.js b/svg/subcan.js index c1cee69..21c2d01 100644 --- a/svg/subcan.js +++ b/svg/subcan.js @@ -13,8 +13,30 @@ function simple_xpath(expr) { return nodes; } +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 > 100) + return; + console.log("clicked", id); $.jsonRPC.request('light_get', { @@ -33,7 +55,8 @@ function on_evt_click(node) { console.log('light_set error', result); }, success: function(result) { - console.log('light_set ', id, ' => ', newset, ' OK: ', result['result']); + // console.log('light_set ', id, ' => ', newset, ' OK: ', result['result']); + immediate_update(id, newset); } }); /* >>> */ @@ -41,6 +64,116 @@ function on_evt_click(node) { }); } +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); + // 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) { + mouseorig = result['result']['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 ---'); + 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'); @@ -77,6 +210,41 @@ function prepare_evts() { 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'; } } |