BrainStimulatorWebGl/index.html at master · moritzdannhauer/BrainStimulatorWebGl · 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>MRI Viewer</title>
        <link rel="stylesheet" type="text/css" href="static/stylesheets/screen.css" />
        <script data-main="static/javascripts/main" src="static/javascripts/require-jquery.js"></script>
    </head>
    <body>
    	<div class="controlTab" id="links">
    		<a href="#textures" style='font-weight:bold'>MRI&nbsp&nbsp&nbsp</a>
    		<a href="#elements">Elements&nbsp&nbsp&nbsp</a>
    		<a href="#controls">Controls&nbsp&nbsp&nbsp</a>
    		<a href="#info">Info&nbsp&nbsp&nbsp</a>
    	</div>
    	<div class="controlTab" id="infoTab" style="display:none">
    		<section id="info1">
    			Experimental connectome viewer.
    			<br>
    			Due the experimental nature of this site some features may be broken or may not
    			work as intended. If you notice any bugs please don't hesitate to report them to me.
    		</section>
    		<section>
    			<br>
    			This project is open source under the GNU lesser GPL. The source
    			code is available at <a href="http://code.google.com/p/conview/">google code.</a>
    			<br>
    		</section>
    		<section>
    			<br>
    			For any questions or feedback contact schurade(at)cbs.mpg.de
    			<br>
    		</section>
    		<br><br>
    	</div>
    	<div class="controlTab" id="controlTab1" style="display:none">
			<section id="controls">
				<div id="controls-toggles">
				<input type="button" id="button_localFiberColor" value="toggle fibre color">
				<input type="button" id="button_textureInterpolation" value="toggle fibre tubes">
				<input type="button" id="button_toggleSlices" value="toggle slices">
				<!-- <input type="button" id="button_toggleTooltips" value="toggle tooltips"> -->
				</div>
				<br>
			</section>
		</div>
		<div class="controlTab" id="mriTab" style="display:block">
			<section id="textures">
				<div id="controls-slices">
					<div><label for="sliceX">X</label><input type="range" min="0" max="255" id="sliceX" value="80" step="1" /> <span class="value"></span></div>
					<div><label for="sliceY">Y</label><input type="range" min="0" max="255" id="sliceY" value="100" step="1" /> <span class="value"></span></div>
					<div><label for="sliceZ">Z</label><input type="range" min="0" max="255" id="sliceZ" value="80" step="1" /> <span class="value"></span></div>
				</div>
				<table>
					<tr>
						<th>Primary MRI</th>
					</tr>
					<tr>
						<td><select id="textureSelect"></select></td>
					</tr>
					<tr>
						<th>Overlay</th>
						<th>Color Map</th>
					</tr>
					<tr>
						<td>
							<select id="textureSelect2">
								<option value="none">none</option>
							</select>
						</td>
						<td>
							<select id="colormapSelect">
								<option value="0">none</option>
								<option value="1">Red-Yellow</option>
     							<option value="2">Blue-Light Blue</option>
     							<option value="3">Rainbow</option>
							</select>
						</td>
					</tr>
				</table>
				<br>
				<div class="texSliders">
				thresholds:
				<br>
				<table>
					<tr>
						<td id="tn">&nbsp;</td>
						<td><input type="range" min="0" max="100" id="threshold1" value="0" step="1"  /></td>
						<td><input type="range" min="0" max="100" id="threshold2" value="0" step="1"  /></td>
						<td id="tp">&nbsp;</td>
					</tr>
					<tr>
						<td>alpha</td>
					</tr>
					<tr>
						<td id="texAlpha">&nbsp;</td>
						<td><input type="range" min="0" max="1.0" id="alpha2" value="1.0" step="0.01" /></td>
					</tr>
				</table>
				<br><input type="checkbox" id="interpolate">disable texture interpolation<br>
				</div>
			</section>
		</div>

		<div class="controlTab" id="elementTab" style="display:none">
			<section id="elements"></section>
			<select id="elementSelect">
			</select>
			<br />
			<input type="range" min="0" max="100" id="elementAlpha" value="0" step="1" />
		</div>

		<div class="controlTab" id="status">
			Loading...Please wait.
		</div>
		<div class="controlTab" id="divViewButtons">
    	<section id="viewButtons"></section>
    	</div>
		<div class="controlTab" id="divSceneButtons">
    	<section id="sceneButtons"></section>
    	</div>

		<div id="viewer-div">
			<canvas id="viewer-canvas"></canvas>
		</div>
		<div id="status"></div>
		<script>window.settings = {'DATA_URL': './data/'};</script>
    </body>
</html>