Merge pull request #92 from vgerber/modern_browser_fix

Modern browser fix and client code reorganization
ComputationalRadiationPhysics · Jul 17, 2019 · 7d15cf3 · 7d15cf3
2 parents 43adeef + a9e515b
commit 7d15cf3
Show file tree

Hide file tree

Showing 10 changed files with 1,797 additions and 10 deletions.
diff --git a/client/html/visualisation.html b/client/html/visualisation.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>ISAAC Control Page</title>
+</head>
+<style>
+ * {
+ font-family: sans-serif;
+ }
+</style>
+<body>
+<h3>Preview and camera setting</h3>
+<p>Usage:
+<ul>
+<li>Left click + Mouse movement: Change view angle</li>
+<li>Right/Middle click + Mouse movement: Change position</li>
+<li>Mousewheel: zoom</li>
+</ul>
+<form>
+ Server URL:<input type="text" id="server_url" value="127.0.0.1">
+ Port:<input type="text" id="server_port" value="2459">
+ <input type="button" value="Connect" id="connect">
+ <br/><input type="checkbox" id="one_window_checkbox" checked onchange="one_window_checkbox_click()"> Show video and control in one window
+ <br/><input type="checkbox" id="wireframe_checkbox" checked onchange="wireframe_checkbox_click()"> Show wireframe bounding box
+ <br/><input type="checkbox" id="dropable_checkbox" onchange="dropable_checkbox_click()"> Meta data can be dropped (Select before observing!)
+</form>
+<div id="status">Status: Not connected</div>
+</p>
+<table><tr>
+<td id="video_td" valign="top">
+ <!--canvas id="video" width="512" height="512" style="border:1px solid #000000;"></canvas-->
+ <div id="video_container_div" style="position: relative;">
+ <div id="video_div" style="position: relative; top: 0; left: 0;">
+ <table><tr>
+ <td>
+ <canvas id="video" width="512" height="512"></canvas>
+ <div id="url_div" style="display:none;"></div>
+ </td>
+ <td align="center"><div id="controls" style="display:none;">
+ <input type="button" value="+" id="zoom_in"> <input type="button" value="5 x" id="zoom_in_5"><br/>
+ <input type="button" value="-" id="zoom_out"> <input type="button" value="5 x" id="zoom_out_5"><br/>
+ <input type="button" value="X+" id="plus_x"> <input type="button" value="5 x" id="plus_x_5"><br/>
+ <input type="button" value="X-" id="minus_x"> <input type="button" value="5 x" id="minus_x_5"><br/>
+ <input type="button" value="Y+" id="plus_y"> <input type="button" value="5 x" id="plus_y_5"><br/>
+ <input type="button" value="Y-" id="minus_y"> <input type="button" value="5 x" id="minus_y_5"><br/>
+ <input type="button" value="Z+" id="plus_z"> <input type="button" value="5 x" id="plus_z_5"><br/>
+ <input type="button" value="Z-" id="minus_z"> <input type="button" value="5 x" id="minus_z_5"><br/>
+ <input type="button" value="←" id="ctl_left"> <input type="button" value="5 x" id="ctl_left_5"><br/>
+ <input type="button" value="→" id="ctl_right"> <input type="button" value="5 x" id="ctl_right_5"><br/>
+ <input type="button" value="↑" id="ctl_up"> <input type="button" value="5 x" id="ctl_up_5"><br/>
+ <input type="button" value="↓" id="ctl_down"> <input type="button" value="5 x" id="ctl_down_5">
+ </div></td>
+ </tr></table>
+ <form>
+ <input type="button" value="Pause" id="pause">
+ <input type="button" value="Stop observing" id="stop">
+ <input type="button" value="Reset view" id="panic">
+ <input type="button" value="Stop simulation" id="exit">
+ <input type="button" value="Toogle bounding box" id="bounding">
+ Background color: <input id="background_color" class="jscolor" value="000000" size="6">
+ <input type="button" value="Apply" id="background_change">
+ Interval: <input type="range" value="1" min="1" max="32" id="interval_range">
+ <span id="interval_span">1</span>
+ <input type="button" value="Set" id="interval_change">
+ <input type="checkbox" id="controls_checkbox" onchange="controls_checkbox_click()"> Show controls
+ </form>
+ <div id="stereo_div"></div>
+ <div id="functions_div"></div>
+ <div id="weight_div"></div>
+ <input type="checkbox" id="interpolation_checkbox" checked onchange="interpolation_checkbox_click()"> Interpolation
+ <input type="checkbox" id="iso_surface_checkbox" checked onchange="iso_surface_checkbox_click()"> Iso Surface
+ <input id="step" size="4"><input type="button" value="Change step" id="step_button" onclick="step_button_click()"><br/>
+ <div id="clipping_add_div">
+ <b>Clipping planes:</b><br/>
+ <span> Position: </span><input type="text" value="0" size="4" id="clip_px"><input type="text" value="0" size="4" id="clip_py"><input type="text" value="0" size="4" id="clip_pz">
+ <span> Normal: </span> <input type="text" value="0" size="4" id="clip_nx"><input type="text" value="0" size="4" id="clip_ny"><input type="text" value="1" size="4" id="clip_nz">
+ <input type="button" value="X" id="clip_bx"><input type="button" value="Y" id="clip_by"><input type="button" value="Z" id="clip_bz">
+ <input type="button" value="Add" id="clip_add">
+ </div>
+ <div id="clipping_list_div"></div>
+ <table border="1"><tr id="transfer_form"></tr></table>
+ <canvas id="transfer" width="412" height="16"></canvas>
+ </div>
+ <div id="preview_div" style="position: absolute; top: 0; left: 0; opacity: 0.5;">
+ <canvas id="preview" width="512" height="512" style="border:1px solid #000000;"></canvas>
+ </div>
+ </div>
+<td>
+<td id="preview_td" valign="top">
+ <div id="preview_container_div" style="position: relative;">
+ </div>
+</td>
+</tr></table>
+<div id="list_td" style="display:none">
+ <h3 id="isaac_name"></h3>
+ <table id="list_table" border="1">
+ <tr>
+ <th>Name</th>
+ <th>ID</th>
+ <th>Nodes</th>
+ <th>Max Functors</th>
+ <th>Functors</th>
+ <th>Dimension</th>
+ <th>Sources</th>
+ <th>Meta data</th>
+ <th>Observe</th>
+ </tr>
+ </table>
+</div>
+</body>
+<script src="../js/jscolor.js"></script>
+<script src="../js/isaac/client.js"></script>
+<script src="../js/isaac/draw.js"></script>
+<script src="../js/isaac/interface/visualisation.js"></script>
+</html>
diff --git a/client/js/isaac/client.js b/client/js/isaac/client.js
@@ -0,0 +1,223 @@
+'use strict'
+
+const IsaacResponseTypes = {
+ hello: "hello",
+ register: "register",
+ period: "period",
+ update: "update",
+ exit: "exit"
+};
+
+const IsaacRequestTypes = {
+ observe: "observe",
+ stopObserve: "stop",
+ exit: "exit"
+}
+
+const IsaacExitRequest = {
+ type: IsaacRequestTypes.exit
+};
+
+const IsaacObserveRequest = {
+ "type": IsaacRequestTypes.observe,
+ "stream": 0,
+ "dropable": undefined,
+ "observer id": 0
+};
+
+const IsaacStopObserveRequest = {
+ "type": IsaacRequestTypes.stopObserve,
+ "observer id": 0
+};
+
+var IsaacResponse = {
+ "type": "",
+ "name": "",
+ "id": -1,
+ "nodes": 0,
+ "max functors": 0,
+ "functors": [],
+ "sources": [],
+ "metadata": [],
+ "width": 0,
+ "height": 0,
+ "depth": 0,
+ "dimension": 0,
+ "projection": undefined,
+ "position": undefined,
+ "distance": undefined,
+ "rotation": undefined,
+ "interpolation": false,
+ "step": 0.1,
+ "iso surface": false,
+ "ao isEnabled": false,
+ "ao maxCellParticles": 1,
+ "framebuffer width": 0,
+ "framebuffer height": 0,
+ "payload": {},
+
+};
+
+var IsaacFunctor = {
+ "name": "",
+ "description": ""
+};
+
+var IsaacSources = {
+ "name": "",
+ "feature dimension": 0
+};
+
+var IsaacMetadata = {
+ "particle count": 0,
+ "time step": 0,
+ "cell count": 0,
+ "simulation_time": 0,
+ "drawing_time": 0,
+ "particle_count": 0,
+ "time_step": 0,
+ "cell_count": 0,
+ "simulation_time": 0,
+ "drawing_time": 0
+};
+
+var IsaacFramebuffer = {
+ width: 0,
+ height: 0
+};
+
+
+class IsaacClient {
+ constructor() {
+ this.socket = undefined;
+ this.onOpenCallback = undefined;
+ this.onCloseCallback = undefined;
+ this.onMessageCallback = undefined;
+ this.onErrorCallback = undefined;
+ this.observerId = -1;
+ }
+
+
+ connect(url, port) {
+ //connecto to websocket server
+ url = "ws://" + url + ":" + port;
+ let protocol = "isaac-json-protocol";
+ this.socket = new WebSocket(url, protocol);
+
+ //set websocket callbacks to class functions
+ //set callbacks for outside use
+ this.socket.onopen = (function(e) {
+ this.onOpen(e);
+ }).bind(this);
+
+ this.socket.onmessage = (function(e) {
+ this.onMessage(e);
+ }).bind(this);
+
+ this.socket.onerror = (function(e) {
+ this.onError(e);
+ }).bind(this);
+
+ this.socket.onerror = (function(e) {
+ this.onClose(e);
+ }).bind(this);
+ }
+
+ /**
+ * sends IsaacExitRequest and closes websocket
+ * 
+ */
+ close() {
+ this.socket.send(JSON.stringify(IsaacExitRequest));
+ this.socket.close();
+ this.onClose();
+ }
+
+ send(msg) {
+ this.socket.send(JSON.stringify(msg));
+ }
+
+ /**
+ * send a observe request to server
+ * @param {Number} stream_id 
+ * @param {Boolean} dropable 
+ * @param {Number} observe_id 
+ */
+ requestObserve(stream_id, dropable, observe_id) {
+ let request = IsaacObserveRequest;
+ request.stream = stream_id;
+ request.dropable = dropable;
+ request["observe id"] = observe_id;
+ this.socket.send(JSON.stringify(request));
+ this.observerId = observe_id;
+ }
+
+ /**
+ * send a stop observe request
+ * @param {*} observe_id 
+ */
+ requestStopObserve(observe_id) {
+ let request = IsaacStopObserveRequest;
+ request["observer id"] = observe_id;
+ this.socket.send(JSON.stringify(request));
+ this.observerId = -1;
+ }
+
+ getOberserID() {
+ return this.observerId;
+ }
+
+ /**
+ * returns true if websocket is connected
+ */
+ isConnected() {
+ return this.socket && this.socket.readyState == 1;
+ }
+
+ //websocket callbacks 
+ //these function will preprocess the input messages
+
+ onOpen(e) {
+ if(this.onOpenCallback) {
+ this.onOpenCallback(e);
+ }
+ }
+
+ onMessage(e) {
+ if(this.onMessageCallback) {
+ let obj = JSON.parse(e.data);
+ this.onMessageCallback(obj);
+ }
+ }
+
+ onError(e) {
+ if(this.onErrorCallback) {
+ this.onErrorCallback(e);
+ }
+ }
+
+ onClose(e) {
+ if(this.onCloseCallback) {
+ this.onCloseCallback(e);
+ }
+ }
+
+
+ //setter for websocket internal callbacks
+
+ setOnOpen(callback) {
+ this.onOpenCallback = callback;
+ }
+
+ setOnMessage(callback) {
+ this.onMessageCallback = callback;
+ }
+
+ setOnError(callback) {
+ this.onErrorCallback = callback;
+ }
+
+ setOnClose(callback) {
+ this.onCloseCallback = callback;
+ }
+};