-
Notifications
You must be signed in to change notification settings - Fork 4
/
visual.html
251 lines (240 loc) · 10.8 KB
/
visual.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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>Brain Image Library: Visualization</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">
<h1>Visualization</H1>
<p>The Brain Image Library provides following ways to visualize the data remotely, without signing in: </p>
<ul>
<li><b>Neuroglancer:</b> Visualize BIL data in a web browser. Explore curated datasets at our
<a href="https://imageexplorer.brainimagelibrary.org/">brain explorer</a>
</li>
<li><b>Napari-bil-data-viewer:</b> A plugin for the popular <a href="https://napari.org/">napari</a>
image viewer that allows single-click visualization of thousands of datasets at BIL.
</li>
</ul>
<hr />
<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.
</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/pscstaff/rlagha/RL/stack_to_multiscale_ngff/fmost_conv/df/75/df75626840c76c15/mouseID_374706-18461.omehans" width="70%" height="400px" frameborder="0"></iframe>
-->
<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>
<p>
The data for Neuroglancer are served via <a href="https://github.com/CBI-PITT/BrAinPI">brAinPI</a>,
which allows visualizing different multiscale image file formats through the same API.
</p>
<p> Currently supported image formats:
<ul>
<li>.ome.zarr</li>
<li>.ims (Imaris)</li>
</ul>
</p>
<p><strong>Basic usage:</strong></p>
<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>
<p></p>
<hr />
<p></p>
<h3>Napari-bil-data-viewer</h3>
<p>Napari-bil-data-viewer is a plugin for <a href="https://napari.org/">napari</a> designed specifically
for visualizing BIL data. It has a set of widgets for visualizing different types of data:
(a) 272 curated fMOST datasets with associated .swc neuron morphologies,
(b) thousands of STPT and other image stacks by providing a URL,
(c) multiscale .ome.zarr data by providing a URL,
(d) neuron tracings in standard .swc format
</p>
<p>Installation and usage instructions are available at our
<a href="https://github.com/brain-image-library/napari-bil-data-viewer">github</a>
and at
<a href="https://www.napari-hub.org/plugins/napari-bil-data-viewer">napari hub</a>.
</p>
<p>
A 2-minute video tutorial on how to use the plugin is available on
<a href="https://youtu.be/04mSxB1hgrk">youtube</a>.
</p>
<iframe width="506" height="420" src="https://www.youtube.com/embed/04mSxB1hgrk?si=J30JtJ3O7_3QV5uC"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
<p>
The plugin can be installed from napari GUI through Plugins > Install/Uninstall Plugins menu,
by typing 'bil' in the plugin search box and clicking the "install" button when the plugin
shows up in search results.
</p>
<p>
To open the plugin in <a href="https://napari.org/">napari</a>,
go to Plugins > napari-bil-data-viewer and select the widget you want to open.
The dock widget will appear on the right side of the napari window.
</p>
<p>
To load one of the curated fMOST datasets, open the Load Curated Datasets widget, select one of the datasets
in the dropdown menu (the names correspond to dataset names on the BIL file system) and press the
Load Dataset button. An image layer with selected dataset will appear.
If the dataset has neuron morphology files associated with it, they will appear in the pre-loaded neurons
section of the widget. They can be visualized by checking the checkboxes next to the file names.
Currently, visualization of neuron morphologies in 2D is impossible due to limitations of napari shapes layer.
In the 3D mode the morphologies will be overlaid on top of the whole brain image in the same scale.
</p>
<p>
To load an image stack, open the Load Image Stack From URL widget, paste a URL to an image stack (list of
inks to individual files) and click the Load Dataset button. To get started, you can paste an example
URL to the URL input field by clicking the corresponding link and load the example image stack.
Currently supported formats are .tif, .tiff and .jp2 - most common formats for STPT stacks.
</p>
<p>
To load a multiscale dataset (.zarr or .ome.zarr), open the Load Multiscale Data From URL widget,
insert a URL ending in .zarr to the URL input field and click the Load Dataset button.
To get started, you can paste an example URL to the URL input field by clicking the corresponding link
and load the example dataset.
</p>
<p>
To load a neuron morphology not included with the curated datasets (both from BIL or other sources), open
the Load Neuron Morphology From URL widget, paste a URL ending in .swc into the URL input field
and click the Show SWC button.
To get started, paste and example URL by clicking a corresponding link and load an example .swc file.
</p>
<p>
To adjust scale of any layer open in the viewer, open the Layer Scale Controls widget, select the layer
you would like to rescale, paste the desired scale (usually, resolution in microns) in z, y and x,
and eventually press the Adjust button.
</p>
<p> </p>
<hr/>
<p>
<em>
The development of the napari-BIL-data-viewer was supported by the napari plugin enhancement grant
from the Chan Zuckerberg Initiative NPE2-00074
</em>
</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>