-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #92 from vgerber/modern_browser_fix
Modern browser fix and client code reorganization
- Loading branch information
Showing
10 changed files
with
1,797 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
}; |
Oops, something went wrong.