X/test.html at master · bwagnerwork/X · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>	<head>
	</head>
	<body>
		<script type="text/javascript" src="lib/google-closure-library/closure/goog/base.js"></script>
		<script type="text/javascript" src="xtk-deps.js"></script>
		<script type="text/javascript">

			// include all used X-classes here
			// this is only required when using the xtk-deps.js file
			goog.require('X.renderer2D');
			goog.require('X.renderer3D');

			function addLoadEvent(func) {
				var oldonload = window.onload;
				if (typeof window.onload != 'function') {
					window.onload = func;
				} else {
					window.onload = function() {
						if (oldonload) {
							oldonload();
						}
						func();
					}
				}
			}
		</script>

		<script type="text/javascript">

			var R = null;
			var V = null;

			addLoadEvent(function () {
				R = new X.renderer2D();
				R.container='SWI_id';
				R.orientation = 'AXIAL';
				R.init();

				V = new X.volume();
				V.file = 'test_4D.nii';

				R.add(V);
				R.render();

				//Do this as a "onShowtime" so that V has time to load and V.range is VALID
				R.onShowtime = function() {
					document.getElementById('volNum').innerHTML="Volume Number: " + (V.indexT + 1) + "/" + V.range[3];
				};

			});


		</script>


		<table>
			<tr>
				<td>
				</td>
			<tr>
				<div id="SWI_id" style="background-color: #000; width: 400px; height: 400px;"/>
			<tr>
				<td>
					<script type="text/javascript">
						function prevVol() {
							V.indexT=V.indexT-1;
							R.render();
							document.getElementById('volNum').innerHTML="Volume Number: " + (V.indexT + 1) + "/" + V.range[3];
							return false;
						}
						function nextVol() {
							V.indexT=V.indexT+1;
							R.render();
							document.getElementById('volNum').innerHTML="Volume Number: " + (V.indexT + 1) + "/" + V.range[3];
							return false;
						}
						function setSagittal() {
							var orient='SAGITTAL';
							R.orientation = orient;
							V.modified();
							R.render();
							return false;
						}
						function setCoronal() {
							var orient='CORONAL';
							R.orientation = orient;
							V.modified();
							R.render();
							return false;
						}
						function setAxial() {
							var orient='AXIAL';
							R.orientation = orient;
							V.modified();
							R.render();
							return false;
						}

					</script>
					<input type="button" id="volPrev" onClick="prevVol()" value="Previous Volume" />&nbsp;&nbsp;&nbsp;&nbsp;<span id="volNum">Volume Number: n/a</span>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="volNext" onClick="nextVol()" value="Next Volume"/><br>
					<br>
					<input type="button" onClick="setSagittal()" value="Set Sagittal" > <input type="button" onClick="setCoronal()" value="Set Coronal"> <input type="button" onClick="setAxial()" value="Set Axial">
				<td>
			</tr>
		</table>
	</body>
</html>