| 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; |
| }; |