Repository: airavata-php-gateway Updated Branches: refs/heads/develop c1043b29f -> 16184725c
simstream enabling Project: http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/repo Commit: http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/commit/51ea6535 Tree: http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/tree/51ea6535 Diff: http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/diff/51ea6535 Branch: refs/heads/develop Commit: 51ea65356a11577657770e8d307657b3d8971a4b Parents: dd2b78a Author: Jeff Kinnison <[email protected]> Authored: Thu Aug 18 16:42:14 2016 -0400 Committer: Jeff Kinnison <[email protected]> Committed: Thu Aug 18 16:42:14 2016 -0400 ---------------------------------------------------------------------- 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(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/blob/51ea6535/app/views/partials/experiment-info.blade.php ---------------------------------------------------------------------- diff --git a/app/views/partials/experiment-info.blade.php b/app/views/partials/experiment-info.blade.php index fa6a605..0e2a422 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)) </div> + @if(strcmp($expVal["applicationInterface"]->applicationName, "OpenMM_Stampede") === 0) + @include('partials/streaming-data') + @endif + @if( !isset( $dashboard)) <form action="{{URL::to('/') }}/experiment/summary" method="post" role="form"> <div class="btn-toolbar"> @@ -326,5 +330,10 @@ </script> {{ HTML::script('js/sharing/sharing_utils.js') }} {{ HTML::script('js/sharing/share.js') }} +<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js";></script> +{{ HTML::script('js/simstream.js') }} +<script> + checkAuth("http://localhost:8888/auth";, "ws://localhost:8888/experiment/openmm"); +</script> @stop http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/blob/51ea6535/app/views/partials/streaming-data.blade.php ---------------------------------------------------------------------- diff --git a/app/views/partials/streaming-data.blade.php b/app/views/partials/streaming-data.blade.php new file mode 100644 index 0000000..ecb3d89 --- /dev/null +++ b/app/views/partials/streaming-data.blade.php @@ -0,0 +1,4 @@ +<div id="simstream-content-panel" class="row panel panel-default"> + <div class="panel-heading"><h3>Application Data</h3></div> + <div id="simstream-content-panel-body" class="panel-body"></div> +</div> http://git-wip-us.apache.org/repos/asf/airavata-php-gateway/blob/51ea6535/public/js/simstream.js ---------------------------------------------------------------------- diff --git a/public/js/simstream.js b/public/js/simstream.js new file mode 100644 index 0000000..e5652d4 --- /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 = $('<ul id="simstream-openmm-logs"></ul>'); + + $rmsd = $('<div id="simstream-opemm-rmsd"><h4>RMSD to Native Structure</h4><canvas id="simstream-opemm-rmsd-plot"></canvas></div>'); + + $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($('<li class="simstream-openmm-log">' + logs[log] + '</li>')); + } + } + }; + + 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 = $('<form id="simstream-content-form" action="' + auth + '" method="post"></form>'); + $username = $('<input type="text" name="username" id="username" />'); + $password = $('<input type="password" name="password" id="password" />'); + $hidden = $('<input type="hidden" name="redirect" id="redirect" value="" />').val(window.location.href); + $submit = $('<input type="submit" value="Submit" />'); + + $form.append('<p>Enter your Gateway Credentials</p>'); + $form.append('<label for="simstream-username">Username</label>'); + $form.append($username); + $form.append('<br />'); + $form.append('<label for="simstream-password">Password</label>'); + $form.append($password); + $form.append('<br />'); + $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; +};
