-
Notifications
You must be signed in to change notification settings - Fork 4
/
ng_help.html
185 lines (174 loc) · 9.92 KB
/
ng_help.html
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Brain Image Library: Help with Neuroglancer</title>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-R1YK9CG4GL"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-R1YK9CG4GL');
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800" />
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/bootstrap.css" />
<link rel="stylesheet" href="/css/styles.css" />
<link rel="stylesheet" href="/my.css" />
<script src="/js/jquery.min.js"></script>
</head>
<body class="bg">
<div class="container">
<p> </p>
</div>
<div class="container">
<!--Navigation bar-->
<div id="topmenu">
</div>
<script>
$(function(){
$("#topmenu").load("menu.html");
});
</script>
<!--end of Navigation bar-->
<div class="jumbotron">
<div id="login"></div>
<h3>Neuroglancer</h3>
<p>
Neuroglancer allows quick visualization of volumetric multi-resolution multi-channel
data in a web browser. It also allows sharing a link to a specific view of the data,
to be shared with your collaborators exactly as you are viewing it. Many datasets in
BIL are able to be visualized in Neuroglancer. Below is an example viewing dataset
<a href="https://api.brainimagelibrary.org/web/view?bildid=ace-bag-jet">"ace-bag-jet"</a>.
If a BIL dataset is able to be being visualized, the landing page for the
dataset will have one or more neuroglancer links.
</p>
<p><b>For the best experience with Neuroglancer, we highly recommend using a three button mouse.</b></p>
<p>
<button type="button" class="btn btn-sm btn-dark" onclick="reloadIframe()">Reload Neuroglancer</button>
</p>
<div id="neuroglancerFrame">
<iframe src="https://brainapi.brainimagelibrary.org/ng/bil/assets/ace/bag/jet/asset/brainpi/mouseID_374706-18461.omehans" width="70%" height="400px" frameborder="0"></iframe>
</div>
<h3>Frequently Asked Questions</h3>
<dl>
<dt>Why can't I see the image? All I see is a black image.</dt>
<dd>Most images deposited into BIL are fairly raw, in the sense that they have not been manually adjusted for optimal display.
For some data, the effect of this is that the data shows up in neuroglancer as a black rectangle.
If this is the case, the data can be viewed by adjusting neuroglancer parameters. The most important
parameters to adjust are the <em>channel[number]_lut</em> values in neuroglancer. Here is an example using dataset
<a href="https://api.brainimagelibrary.org/web/view?bildid=ace-bed-map">"ace-bed-map"</a>
<a href="https://brainapi.brainimagelibrary.org/ng/bil/assets/ace/bed/map/asset/brainpi/ace-bed-map.omehans">before
lut adjustment</a> and <a href="https://ng.brainimagelibrary.org/v/base/#!%7B%22dimensions%22:%7B%22x%22:%5B8.75e-7%2C%22m%22%5D%2C%22y%22:%5B8.75e-7%2C%22m%22%5D%2C%22z%22:%5B0.0001%2C%22m%22%5D%7D%2C%22position%22:%5B8000.5%2C6000.5%2C70.5%5D%2C%22crossSectionScale%22:50%2C%22projectionScale%22:30000%2C%22layers%22:%5B%7B%22type%22:%22image%22%2C%22source%22:%22precomputed://https://brainapi.brainimagelibrary.org/ng/bil/assets/ace/bed/map/asset/brainpi/ace-bed-map.omehans%22%2C%22tab%22:%22rendering%22%2C%22shader%22:%22#uicontrol%20bool%20channel0_visable%20checkbox%28default=true%29%3B%5Cn#uicontrol%20bool%20channel1_visable%20checkbox%28default=true%29%3B%5Cn#uicontrol%20bool%20channel2_visable%20checkbox%28default=true%29%3B%5Cn%5Cn#uicontrol%20invlerp%20channel0_lut%20%28range=%5B0%2C183%5D%2Cwindow=%5B0%2C255%5D%2Cchannel=%5B0%5D%29%3B%5Cn#uicontrol%20invlerp%20channel1_lut%20%28range=%5B0%2C169%5D%2Cwindow=%5B0%2C255%5D%2Cchannel=%5B1%5D%29%3B%5Cn#uicontrol%20invlerp%20channel2_lut%20%28range=%5B0%2C106%5D%2Cwindow=%5B0%2C255%5D%2Cchannel=%5B2%5D%29%3B%5Cn%5Cn#uicontrol%20vec3%20channel0_color%20color%28default=%5C%22#FF0000%5C%22%29%3B%5Cn#uicontrol%20vec3%20channel1_color%20color%28default=%5C%22#00FF00%5C%22%29%3B%5Cn#uicontrol%20vec3%20channel2_color%20color%28default=%5C%22#0000FF%5C%22%29%3B%5Cn%5Cnvec3%20channel0%20=%20vec3%280%29%3B%5Cnvec3%20channel1%20=%20vec3%280%29%3B%5Cnvec3%20channel2%20=%20vec3%280%29%3B%5Cn%5Cn%5Cnvoid%20main%28%29%20%7B%5Cn%5Cnif%20%28channel0_visable%20==%20true%29%5Cnchannel0%20=%20channel0_color%20%2A%20%28%28toNormalized%28getDataValue%280%29%29%20+%20channel0_lut%28%29%29%29%3B%5Cn%5Cnif%20%28channel1_visable%20==%20true%29%5Cnchannel1%20=%20channel1_color%20%2A%20%28%28toNormalized%28getDataValue%281%29%29%20+%20channel1_lut%28%29%29%29%3B%5Cn%5Cnif%20%28channel2_visable%20==%20true%29%5Cnchannel2%20=%20channel2_color%20%2A%20%28%28toNormalized%28getDataValue%282%29%29%20+%20channel2_lut%28%29%29%29%3B%5Cn%5Cnvec3%20rgb%20=%20%28channel0%20+%20channel1%20+%20channel2%29%3B%5Cn%5Cnvec3%20render%20=%20min%28rgb%2Cvec3%281%29%29%3B%5Cn%5CnemitRGB%28render%29%3B%5Cn%7D%22%2C%22shaderControls%22:%7B%22channel0_lut%22:%7B%22range%22:%5B0%2C10%5D%7D%2C%22channel1_lut%22:%7B%22range%22:%5B0%2C25%5D%7D%2C%22channel2_lut%22:%7B%22range%22:%5B0%2C5%5D%7D%7D%2C%22channelDimensions%22:%7B%22c%5E%22:%5B1%2C%22%22%5D%7D%2C%22name%22:%22ace-bed-map.omehans%22%7D%5D%2C%22selectedLayer%22:%7B%22visible%22:true%2C%22layer%22:%22ace-bed-map.omehans%22%7D%2C%22layout%22:%22xy%22%7D">after
adjusting</a> the maximum <em>channel0_lut</em> value to <em>10</em>, the maximum <em>channel1_lut</em>
value to <em>25</em> and the maximum <em>channel2_lut</em> value to <em>5</em>.
</dd>
<dt>How do I adjust numeric values, such as <em>channel[number]_lut</em> values?</dt>
<dd> Most values that you see displayed can be adjusted by moving the mouse pointer to the desired number,
clicking on it, entering a new value, then hitting <Enter>
</dd>
<dt>How do I rapidly move through the x, y, or z directions?</dt>
<dd>If you click on the yellow x, y, or z in the upper left corner, a slider pop-up will appear. Move the mouse cursor
to the gray bar, move up or down to the desired location, then click on the left mouse button.
Alternatively you can choose to adjust the numeric x, y, or z value listed in the box.</dd>
<dt>What are the basic mouse and keyboard controls?</dt>
<dd> Please see the table below:
<table class="table-striped table-bordered">
<tr>
<th>Feature</th>
<th>How to Use</th>
</tr>
<tr>
<td>Zoom (using mouse)</td>
<td><ctrl> <mouse-wheel></td>
</tr>
<tr>
<td>Zoom In (using keyboard)</td>
<td><ctrl> <equals></td>
</tr>
<tr>
<td>Zoom Out (using keyboard)</td>
<td><ctrl> <minus></td>
</tr>
<tr>
<td>Scroll through z-planes</td>
<td><mouse-wheel></td>
</tr>
<tr>
<td>Move image</td>
<td>Grab using <left-mouse-button> and drag image</td>
</tr>
<tr>
<td>Center image where current mouse pointer is</td>
<td>Move mouse cursor over image then <right-mouse-button></td>
</tr>
<tr>
<td>Toggle from 4 panel layout to one screen view</td>
<td>Move mouse cursor over image then <spacebar></td>
</tr>
<tr>
<td>Rapid move through x, y, or z planes</td>
<td>
Click on the number associated with x, y, or z (found in upper left corner). Then enter either:
<ul>
<li><delete> the number and enter a new <integer-value> and press <enter></li>
<li>move the mouse to the playback bar, move up/down to the appropriate level then <left-mouse-button></li>
</ul>
</td>
</tr>
<tr>
<td>Rotate right</td>
<td><r></td>
</tr>
<tr>
<td>Rotate left</td>
<td><e></td>
</tr>
<tr>
<td>Go through z layers (increasing)</td>
<td><period></td>
</tr>
<tr>
<td>Go through z layers (decreasing)</td>
<td><comma></td>
</tr>
<tr>
<td>Snap image that has been rotated to the closest 90-degree rotation axis</td>
<td><z></td>
</tr>
<tr>
<td>Toggle scalebar on/off that is shown on the image</td>
<td>Place cursor over image, press <b> then move mouse cursor</td>
</tr>
</table>
</dd>
</dl>
<p></p>
<hr />
<p></p>
<p> </p>
</div>
<!--Bottom Footer -->
<div id="bottomfooter">
</div>
<script>
$(function(){
$("#bottomfooter").load("footer.html");
});
</script>
<!--end of bottomfooter-->
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script>
function reloadIframe() {
var iframe = document.getElementById('neuroglancerFrame');
console.log("in function");
iframe.innerHTML = '<iframe src="https://brainapi.brainimagelibrary.org/ng/bil/assets/ace/bag/jet/asset/brainpi/mouseID_374706-18461.omehans" width="70%" height="400px" frameborder="0"></iframe>';
}
</script>
</div>
</body>
</html>