From 8e255cf083a2daccb467b5b9164d13b78f9a6363 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Mon, 11 Jul 2016 18:19:48 +0200 Subject: [PATCH] added new web socket HTML / JS code and new logo --- contrib/websocket/app.js | 118 ++++++++++++-------- contrib/websocket/eonerc_logo.png | 1 - contrib/websocket/index.html | 24 +++- contrib/websocket/logo.svg | 1 + contrib/websocket/msg.js | 73 ++++++++---- contrib/websocket/style.css | 15 ++- doc/pictures/acs_eonerc_logo.svg | 179 ++++++++++++++++++++++++++++++ 7 files changed, 333 insertions(+), 78 deletions(-) delete mode 120000 contrib/websocket/eonerc_logo.png create mode 120000 contrib/websocket/logo.svg create mode 100644 doc/pictures/acs_eonerc_logo.svg diff --git a/contrib/websocket/app.js b/contrib/websocket/app.js index 19068e81b..77b6c2ccd 100644 --- a/contrib/websocket/app.js +++ b/contrib/websocket/app.js @@ -1,11 +1,11 @@ // global variables var connection; +var timer; var seq = 0; var currentNode; var nodes = [ ]; -var updateRate = 1.0 / 25; var plotData = []; var plotOptions = { @@ -17,8 +17,9 @@ var plotOptions = { } }; -var xPast = 10*1000; -var xFuture = 5*1000; +var xDelta = 0.5*1000; +var xPast = xDelta*0.9; +var xFuture = xDelta*0.1; $(document).on('ready', function() { $.getJSON('/nodes.json', function(data) { @@ -46,30 +47,69 @@ $(document).on('ready', function() { wsConnect(wsUrl(currentNode.name), ["live"]); }); + $('#play').click(function(e, ui) { + wsConnect(wsUrl(currentNode.name), ["live"]); + }); + + $('#pause').click(function(e, ui) { + connection.close(); + }); + $('#slider').slider({ min : 0, max : 100, - slide : onSliderMoved + slide : function(e, ui) { + var msg = new Msg({ + timestamp : Date.now(), + sequence : seq++ + }, [ ui.value ]); + + + var blob = msg.toArrayBuffer() + connection.send(blob); + } + }); + + $('#timespan').slider({ + min : 200, + max : 10000, + value : xDelta, + slide : function(e, ui) { + plotUpdateWindow(ui.value); + } }); $('#controls .buttons button').each(function(button) { $(button).addClass('on'); + + $(button).onClick(function(value) { + var msg = new Msg({ + timestamp : Date.now(), + sequence : seq++ + }, [ value ]); + + connection.send(msg.toArrayBuffer()); + }); }); - setInterval(plotUpdate, updateRate); + plotUpdateWindow(10*1000); /* start plot refresh timer for 10sec window */ }); -$(window).on('beforeunload', wsDisconnect); +$(window).on('beforeunload', function() { + connection.close(); +}); + +function plotUpdateWindow(delta) { + xDelta = delta + xPast = xDelta*0.9; + xFuture = xDelta*0.1; +} function plotUpdate() { var data = []; // add data to arrays for (var i = 0; i < plotData.length; i++) { - // remove old values - while (plotData[i].length > 0 && plotData[i][0][0] < (Date.now() - xPast)) - plotData[i].shift() - var seriesOptions = nodes data[i] = { @@ -101,31 +141,28 @@ function plotUpdate() { $.plot('.plot-container div', data, $.extend(true, options, plotOptions)); } -function wsDisconnect() { - connection.close(); - - $('#connectionStatus') - .text('Disconnected') - .css('color', 'red'); - - plotData = []; -} - function wsConnect(url, protocol) { connection = new WebSocket(url, protocol); connection.binaryType = 'arraybuffer'; - connection.onopen = function() { $('#connectionStatus') .text('Connected') .css('color', 'green'); + + timer = setInterval(plotUpdate, 1000.0 / 25); }; connection.onclose = function() { - wsDisconnect(); + $('#connectionStatus') + .text('Disconnected') + .css('color', 'red'); + + clearInterval(timer); - setTimeout(wsConnect, 3000); // retry + setTimeout(function() { + wsConnect(wsUrl(currentNode.name), ["live"]); + }, 1000); // retry }; connection.onerror = function(error) { @@ -136,11 +173,19 @@ function wsConnect(url, protocol) { connection.onmessage = function(e) { var msgs = Msg.fromArrayBufferVector(e.data); + + console.log('Received ' + msgs.length + ' messages with ' + msgs[0].data.length + ' values: ' + msgs[0].timestamp); + + for (var j = 0; j < plotData.length; j++) { + // remove old values + while (plotData[j].length > 0 && plotData[j][0][0] < (Date.now() - xPast)) + plotData[j].shift() + } for (var j = 0; j < msgs.length; j++) { var msg = msgs[j]; - // add empty arrays for data + // add empty arrays for data series while (plotData.length < msg.values) plotData.push([]); @@ -207,31 +252,6 @@ function fileStart(e) { reader.readAsText(file); } -/* Control event handlers */ -function onButtonClick(value) { - msg.values = [ value ]; - msg.ts = Date.now(); - msg.seq++; - - msg.send(connection); -} - -function onTextChange(e) { - msg.values = [ e.target.text ]; - msg.ts = Date.now(); - msg.seq++; - - msg.send(connection); -} - -function onSliderMoved(e, ui) { - msg.values = [ ui.value ]; - msg.ts = Date.now(); - msg.seq++; - - msg.send(connection); -} - /* Some helpers */ function getParameterByName(name) { var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search); diff --git a/contrib/websocket/eonerc_logo.png b/contrib/websocket/eonerc_logo.png deleted file mode 120000 index fbc447c0d..000000000 --- a/contrib/websocket/eonerc_logo.png +++ /dev/null @@ -1 +0,0 @@ -../../doc/pictures/eonerc_logo.png \ No newline at end of file diff --git a/contrib/websocket/index.html b/contrib/websocket/index.html index 06b70f3f4..555f8a6fa 100644 --- a/contrib/websocket/index.html +++ b/contrib/websocket/index.html @@ -8,7 +8,7 @@ - + @@ -17,7 +17,7 @@
@@ -29,7 +29,7 @@
-
+
@@ -49,10 +49,22 @@
+
+
+
+
+
+
+
- Status: - - +
+
+
+ + + +
+