Skip to content

Commit 010bdd2

Browse files
psychocoderHPCpsychocoderHPC
authored
Merge pull request #103 from ComputationalRadiationPhysics/dev
release version 1.5.0
2 parents 07a8bac + eafb477 commit 010bdd2

27 files changed

+13687
-2689
lines changed

‎client/html/visualisation.html‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>ISAAC Control Page</title>
6+
</head>
7+
<style>
8+
* {
9+
font-family: sans-serif;
10+
}
11+
</style>
12+
<body>
13+
<h3>Preview and camera setting</h3>
14+
<p>Usage:
15+
<ul>
16+
<li>Left click + Mouse movement: Change view angle</li>
17+
<li>Right/Middle click + Mouse movement: Change position</li>
18+
<li>Mousewheel: zoom</li>
19+
</ul>
20+
<form>
21+
Server URL:<input type="text" id="server_url" value="127.0.0.1">
22+
Port:<input type="text" id="server_port" value="2459">
23+
<input type="button" value="Connect" id="connect">
24+
<br/><input type="checkbox" id="one_window_checkbox" checked onchange="one_window_checkbox_click()"> Show video and control in one window
25+
<br/><input type="checkbox" id="wireframe_checkbox" checked onchange="wireframe_checkbox_click()"> Show wireframe bounding box
26+
<br/><input type="checkbox" id="dropable_checkbox" onchange="dropable_checkbox_click()"> Meta data can be dropped (Select before observing!)
27+
</form>
28+
<div id="status">Status: Not connected</div>
29+
</p>
30+
<table><tr>
31+
<td id="video_td" valign="top">
32+
<!--canvas id="video" width="512" height="512" style="border:1px solid #000000;"></canvas-->
33+
<div id="video_container_div" style="position: relative;">
34+
<div id="video_div" style="position: relative; top: 0; left: 0;">
35+
<table><tr>
36+
<td>
37+
<canvas id="video" width="512" height="512"></canvas>
38+
<div id="url_div" style="display:none;"></div>
39+
</td>
40+
<td align="center"><div id="controls" style="display:none;">
41+
<input type="button" value="+" id="zoom_in"> <input type="button" value="5 x" id="zoom_in_5"><br/>
42+
<input type="button" value="-" id="zoom_out"> <input type="button" value="5 x" id="zoom_out_5"><br/>
43+
<input type="button" value="X+" id="plus_x"> <input type="button" value="5 x" id="plus_x_5"><br/>
44+
<input type="button" value="X-" id="minus_x"> <input type="button" value="5 x" id="minus_x_5"><br/>
45+
<input type="button" value="Y+" id="plus_y"> <input type="button" value="5 x" id="plus_y_5"><br/>
46+
<input type="button" value="Y-" id="minus_y"> <input type="button" value="5 x" id="minus_y_5"><br/>
47+
<input type="button" value="Z+" id="plus_z"> <input type="button" value="5 x" id="plus_z_5"><br/>
48+
<input type="button" value="Z-" id="minus_z"> <input type="button" value="5 x" id="minus_z_5"><br/>
49+
<input type="button" value="←" id="ctl_left"> <input type="button" value="5 x" id="ctl_left_5"><br/>
50+
<input type="button" value="→" id="ctl_right"> <input type="button" value="5 x" id="ctl_right_5"><br/>
51+
<input type="button" value="↑" id="ctl_up"> <input type="button" value="5 x" id="ctl_up_5"><br/>
52+
<input type="button" value="↓" id="ctl_down"> <input type="button" value="5 x" id="ctl_down_5">
53+
</div></td>
54+
</tr></table>
55+
<form>
56+
<input type="button" value="Pause" id="pause">
57+
<input type="button" value="Stop observing" id="stop">
58+
<input type="button" value="Reset view" id="panic">
59+
<input type="button" value="Stop simulation" id="exit">
60+
<input type="button" value="Toogle bounding box" id="bounding">
61+
Background color: <input id="background_color" class="jscolor" value="000000" size="6">
62+
<input type="button" value="Apply" id="background_change">
63+
Interval: <input type="range" value="1" min="1" max="32" id="interval_range">
64+
<span id="interval_span">1</span>
65+
<input type="button" value="Set" id="interval_change">
66+
<input type="checkbox" id="controls_checkbox" onchange="controls_checkbox_click()"> Show controls
67+
</form>
68+
<div id="ambient_occ_div">
69+
<table>
70+
<h3>Ambient Occlusion</h3>
71+
<tr>
72+
<td>Enabled</td>
73+
<td><input type="checkbox" id="ao_checkbox" checked onchange="aoUpdate()"></td>
74+
<td></td>
75+
</tr>
76+
<tr>
77+
<td>Weight</td>
78+
<td><input type="range" min="0" max="1" value="0.5" step="0.01" id="ao_weight"></td>
79+
<td><button onclick="aoUpdate()">Set</button></td>
80+
</tr>
81+
</table>
82+
83+
<br/>
84+
</div>
85+
<div id="stereo_div"></div>
86+
<div id="functions_div"></div>
87+
<div id="weight_div"></div>
88+
<input type="checkbox" id="interpolation_checkbox" checked onchange="interpolation_checkbox_click()"> Interpolation
89+
<input type="checkbox" id="iso_surface_checkbox" checked onchange="iso_surface_checkbox_click()"> Iso Surface
90+
<input id="step" size="4"><input type="button" value="Change step" id="step_button" onclick="step_button_click()"><br/>
91+
<div id="clipping_add_div">
92+
<b>Clipping planes:</b><br/>
93+
<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">
94+
<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">
95+
<input type="button" value="X" id="clip_bx"><input type="button" value="Y" id="clip_by"><input type="button" value="Z" id="clip_bz">
96+
<input type="button" value="Add" id="clip_add">
97+
</div>
98+
<div id="clipping_list_div"></div>
99+
<table border="1"><tr id="transfer_form"></tr></table>
100+
<canvas id="transfer" width="412" height="16"></canvas>
101+
</div>
102+
<div id="preview_div" style="position: absolute; top: 0; left: 0; opacity: 0.5;">
103+
<canvas id="preview" width="512" height="512" style="border:1px solid #000000;"></canvas>
104+
</div>
105+
</div>
106+
<td>
107+
<td id="preview_td" valign="top">
108+
<div id="preview_container_div" style="position: relative;">
109+
</div>
110+
</td>
111+
</tr></table>
112+
<div id="list_td" style="display:none">
113+
<h3 id="isaac_name"></h3>
114+
<table id="list_table" border="1">
115+
<tr>
116+
<th>Name</th>
117+
<th>ID</th>
118+
<th>Nodes</th>
119+
<th>Max Functors</th>
120+
<th>Functors</th>
121+
<th>Dimension</th>
122+
<th>Sources</th>
123+
<th>Meta data</th>
124+
<th>Observe</th>
125+
</tr>
126+
</table>
127+
</div>
128+
</body>
129+
<script src="../js/jscolor.js"></script>
130+
<script src="../js/isaac/client.js"></script>
131+
<script src="../js/isaac/draw.js"></script>
132+
<script src="../js/isaac/interface/visualisation.js"></script>
133+
</html>

‎client/js/isaac/client.js‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
'use strict'
2+
3+
const IsaacResponseTypes = {
4+
hello: "hello",
5+
register: "register",
6+
period: "period",
7+
update: "update",
8+
exit: "exit"
9+
};
10+
11+
const IsaacRequestTypes = {
12+
observe: "observe",
13+
stopObserve: "stop",
14+
exit: "exit"
15+
}
16+
17+
const IsaacExitRequest = {
18+
type: IsaacRequestTypes.exit
19+
};
20+
21+
const IsaacObserveRequest = {
22+
"type": IsaacRequestTypes.observe,
23+
"stream": 0,
24+
"dropable": undefined,
25+
"observer id": 0
26+
};
27+
28+
const IsaacStopObserveRequest = {
29+
"type": IsaacRequestTypes.stopObserve,
30+
"observer id": 0
31+
};
32+
33+
var IsaacResponse = {
34+
"type": "",
35+
"name": "",
36+
"id": -1,
37+
"nodes": 0,
38+
"max functors": 0,
39+
"functors": [],
40+
"sources": [],
41+
"metadata": [],
42+
"width": 0,
43+
"height": 0,
44+
"depth": 0,
45+
"dimension": 0,
46+
"projection": undefined,
47+
"position": undefined,
48+
"distance": undefined,
49+
"rotation": undefined,
50+
"interpolation": false,
51+
"step": 0.1,
52+
"iso surface": false,
53+
"ao isEnabled": false,
54+
"ao maxCellParticles": 1,
55+
"framebuffer width": 0,
56+
"framebuffer height": 0,
57+
"payload": {},
58+
59+
};
60+
61+
var IsaacFunctor = {
62+
"name": "",
63+
"description": ""
64+
};
65+
66+
var IsaacSources = {
67+
"name": "",
68+
"feature dimension": 0
69+
};
70+
71+
var IsaacMetadata = {
72+
"particle count": 0,
73+
"time step": 0,
74+
"cell count": 0,
75+
"simulation_time": 0,
76+
"drawing_time": 0,
77+
"particle_count": 0,
78+
"time_step": 0,
79+
"cell_count": 0,
80+
"simulation_time": 0,
81+
"drawing_time": 0
82+
};
83+
84+
var IsaacFramebuffer = {
85+
width: 0,
86+
height: 0
87+
};
88+
89+
90+
class IsaacClient {
91+
constructor() {
92+
this.socket = undefined;
93+
this.onOpenCallback = undefined;
94+
this.onCloseCallback = undefined;
95+
this.onMessageCallback = undefined;
96+
this.onErrorCallback = undefined;
97+
this.observerId = -1;
98+
}
99+
100+
101+
connect(url, port) {
102+
//connecto to websocket server
103+
url = "ws://" + url + ":" + port;
104+
let protocol = "isaac-json-protocol";
105+
this.socket = new WebSocket(url, protocol);
106+
107+
//set websocket callbacks to class functions
108+
//set callbacks for outside use
109+
this.socket.onopen = (function(e) {
110+
this.onOpen(e);
111+
}).bind(this);
112+
113+
this.socket.onmessage = (function(e) {
114+
this.onMessage(e);
115+
}).bind(this);
116+
117+
this.socket.onerror = (function(e) {
118+
this.onError(e);
119+
}).bind(this);
120+
121+
this.socket.onclose = (function(e) {
122+
this.onClose(e);
123+
}).bind(this);
124+
}
125+
126+
/**
127+
* sends IsaacExitRequest and closes websocket
128+
*
129+
*/
130+
close() {
131+
this.socket.send(JSON.stringify(IsaacExitRequest));
132+
this.socket.close();
133+
this.onClose();
134+
}
135+
136+
send(msg) {
137+
this.socket.send(JSON.stringify(msg));
138+
}
139+
140+
/**
141+
* send a observe request to server
142+
* @param {Number} stream_id
143+
* @param {Boolean} dropable
144+
* @param {Number} observe_id
145+
*/
146+
requestObserve(stream_id, dropable, observe_id) {
147+
let request = IsaacObserveRequest;
148+
request.stream = stream_id;
149+
request.dropable = dropable;
150+
request["observe id"] = observe_id;
151+
this.socket.send(JSON.stringify(request));
152+
this.observerId = observe_id;
153+
}
154+
155+
/**
156+
* send a stop observe request
157+
* @param {*} observe_id
158+
*/
159+
requestStopObserve(observe_id) {
160+
let request = IsaacStopObserveRequest;
161+
request["observer id"] = observe_id;
162+
this.socket.send(JSON.stringify(request));
163+
this.observerId = -1;
164+
}
165+
166+
getOberserID() {
167+
return this.observerId;
168+
}
169+
170+
/**
171+
* returns true if websocket is connected
172+
*/
173+
isConnected() {
174+
return this.socket && this.socket.readyState == 1;
175+
}
176+
177+
//websocket callbacks
178+
//these function will preprocess the input messages
179+
180+
onOpen(e) {
181+
if(this.onOpenCallback) {
182+
this.onOpenCallback(e);
183+
}
184+
}
185+
186+
onMessage(e) {
187+
if(this.onMessageCallback) {
188+
let obj = JSON.parse(e.data);
189+
this.onMessageCallback(obj);
190+
}
191+
}
192+
193+
onError(e) {
194+
if(this.onErrorCallback) {
195+
this.onErrorCallback(e);
196+
console.log("Error");
197+
}
198+
}
199+
200+
onClose(e) {
201+
if(this.onCloseCallback) {
202+
this.onCloseCallback(e);
203+
console.log("Closed");
204+
}
205+
}
206+
207+
208+
//setter for websocket internal callbacks
209+
210+
setOnOpen(callback) {
211+
this.onOpenCallback = callback;
212+
}
213+
214+
setOnMessage(callback) {
215+
this.onMessageCallback = callback;
216+
}
217+
218+
setOnError(callback) {
219+
this.onErrorCallback = callback;
220+
}
221+
222+
setOnClose(callback) {
223+
this.onCloseCallback = callback;
224+
}
225+
};

0 commit comments

Comments
 (0)