From 51ea65356a11577657770e8d307657b3d8971a4b Mon Sep 17 00:00:00 2001 From: Jeff Kinnison Date: Thu, 18 Aug 2016 16:42:14 -0400 Subject: [PATCH] simstream enabling --- app/views/partials/experiment-info.blade.php | 9 + app/views/partials/streaming-data.blade.php | 4 + public/js/simstream.js | 180 +++++++++++++++++++ 3 files changed, 193 insertions(+) create mode 100644 app/views/partials/streaming-data.blade.php create mode 100644 public/js/simstream.js diff --git a/app/views/partials/experiment-info.blade.php b/app/views/partials/experiment-info.blade.php index fa6a60527..0e2a422ef 100644 --- a/app/views/partials/experiment-info.blade.php +++ b/app/views/partials/experiment-info.blade.php @@ -195,6 +195,10 @@ @include('partials/sharing-display-body', array("form" => false)) + @if(strcmp($expVal["applicationInterface"]->applicationName, "OpenMM_Stampede") === 0) + @include('partials/streaming-data') + @endif + @if( !isset( $dashboard))
@@ -326,5 +330,10 @@ class="btn btn-default" {{ HTML::script('js/sharing/sharing_utils.js') }} {{ HTML::script('js/sharing/share.js') }} + +{{ HTML::script('js/simstream.js') }} + @stop diff --git a/app/views/partials/streaming-data.blade.php b/app/views/partials/streaming-data.blade.php new file mode 100644 index 000000000..ecb3d89ce --- /dev/null +++ b/app/views/partials/streaming-data.blade.php @@ -0,0 +1,4 @@ +
+

Application Data

+
+
diff --git a/public/js/simstream.js b/public/js/simstream.js new file mode 100644 index 000000000..e5652d467 --- /dev/null +++ b/public/js/simstream.js @@ -0,0 +1,180 @@ +var ws, rmsd_plot, on_open, on_message, on_close, on_error; + +var createStreamPanel = function() { + var $panel, $logs, $rmsds, createLogs, updateRMSD; + + $panel = $("#simstream-content-panel-body"); + + $logs = $('
    '); + + $rmsd = $('

    RMSD to Native Structure

    '); + + $panel.append($logs).append($rmsd); + + var canvas = document.getElementById('simstream-opemm-rmsd-plot'), + ctx = canvas.getContext('2d'), + startingData = { + labels: [],//[0,0,0,0,0,0,0,0,0,0,0], + datasets: [ + { + fillColor: "rgba(151,187,205,0.2)", + strokeColor: "rgba(151,187,205,1)", + pointColor: "rgba(151,187,205,1)", + pointStrokeColor: "#fff", + data: []//[0,0,0,0,0,0,0,0,0,0] + } + ] + }, + latestLabel = 0, + options = { + animation: {animationSteps: 15}, + scales: { + xAxes: [{ + display: true, + scaleLabel: { + display: true, + labelString: "Step (ps)", + fontSize: 20 + } + }], + yAxes: [{ + display: true, + scaleLabel: { + display: true, + labelString: "RMSD (AA)", + fontSize: 20 + }, + ticks: { + min: 0, + beginAtZero: true, // minimum value will be 0. + max: 1.5 + } + }] + } + }; + + Chart.defaults.global.legend.display = false; + //Chart.defaults.global.tooltips.enabled = false; + rmsd_plot = Chart.Line(ctx, {data: startingData, options: options}); + + createLogs = function(logs) { + for (var log in logs) { + if (logs.hasOwnProperty(log)) { + $logs.append($('
  • ' + logs[log] + '
    • ')); + } + } + }; + + updateRMSD = function(rmsd) { + if (rmsd.hasOwnProperty("rmsd")) { + if (rmsd.hasOwnProperty("step")) { + startingData.labels.push(rmsd.step); + if (startingData.labels.length > 10) + startingData.labels.splice(0, 1); + startingData.datasets[0].data.push(rmsd.rmsd * 10); + if (startingData.datasets[0].data.length > 10) + startingData.datasets[0].data.splice(0, 1); + rmsd_plot.data = startingData; + rmsd_plot.update(); + } + } + }; + + on_open = function() { + + }; + + on_message = function(e) { + var msg; + console.log(e.data); + + try { + msg = JSON.parse(e.data); + console.log(msg); + + for (var i = 0; i < msg.length; i++) { + if (msg[i].hasOwnProperty("logs")) { + createLogs(msg[i]); + } + if (msg[i].hasOwnProperty("rmsd")) { + updateRMSD(msg[i]); + } + } + } catch(err) { + console.log(e.data); + } + }; + + on_close = function() { + console.log("Closed connection"); + }; + + on_error = function() { + + }; +}; + +var createLogin = function(auth, redirect) { + var $content, $form, $username, $password, $hidden, $submit; + $content = $("#simstream-content"); + $content.empty(); + + $form = $(''); + $username = $(''); + $password = $(''); + $hidden = $('').val(window.location.href); + $submit = $(''); + + $form.append('

    Enter your Gateway Credentials

    '); + $form.append(''); + $form.append($username); + $form.append('
    '); + $form.append(''); + $form.append($password); + $form.append('
    '); + $form.append($hidden); + $form.append($submit); + + $content.append($form); +}; + +var createError = function() { + +}; + +var checkAuth = function(auth_url, ws_url, experiment_url) { + // $.ajax({ + // url: auth_url, + // method: "get", + // crossDomain: true, + // success: function(data, textStatus, xhr) { + // + // }, + // error: function(xhr) { + // + // }, + // complete: function(xhr, textStatus) { + // if (xhr.status === 200) { + // createStreamPanel(); + // ws = new WebSocket(ws_url); + // ws.onopen = on_open; + // ws.onclose = on_close; + // ws.onmessage = on_message; + // ws.onerror = on_error; + // } + // else if (xhr.status === 403) { + // createLogin(auth_url, experiment_url); + // } + // else { + // createError(); + // } + // } + // }); + + createStreamPanel(); + ws = new WebSocket(ws_url); + ws.onopen = on_open; + ws.onmessage = on_message; + ws.onerror = on_error; + ws.onclose = on_close; +};