-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathIntroImgAnalysis.html
More file actions
344 lines (281 loc) · 15.8 KB
/
IntroImgAnalysis.html
File metadata and controls
344 lines (281 loc) · 15.8 KB
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
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Image Analysis with Fiji</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/cci.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<!-- Header logo -->
<!--img style="position:fixed;top:1em;right:1em;" src="img/logo_cci.png" width="15%"-->
<!-- Slide Title -->
<header style="position: absolute;top: 1em; left: 1em; z-index:10;"></header>
<!-- ---------------------- START OF SLIDES -------------------------- -->
<div class="slides">
<section data-menu-title="Title">
<h2>Introduction to Image Analysis</h2>
<h4>Erick Martins Ratamero<br>Research Fellow</h4>
</section>
<section data-menu-title="Links and Resources" data-state="intro0"><style>.intro0 header:after { content: "Links and Resources"; }</style>
<ul>
<li>These slides: ADDRESS HERE</li>
<ul><li>Navigation: arrow keys left and right to navigate</li><li>'m' key to get to navigation menu</li><li>Escape for slide overview</li></ul>
<li>Where to find help after the workshop (links also available on the menu):</li>
<ul><li><a target="_blank" href="https://imagej.net">ImageJ Website</a></li><li><a target="_blank" href="https://forum.imagej.net">Forum</a></li><li><a target="_blank" href="http://www.warwick.ac.uk/camdu">CAMDU</a></li></ul>
</ul>
</section>
<section data-menu-title="Before anything else..." data-state="intro0a"><style>.intro0a header:after { content: "Before anything else..."; }</style>
<ul>
<li>ALL ACKNOWLEDGEMENTS HERE</li>
</ul>
</section>
<section data-menu-title="Opening Test Data" data-state="fiji2a"><style>.fiji2a header:after { content: "Opening Test Data"; }</style>
<p>Throughtout the presentation, test data will look like this: <a href="material/01-Photo.tif"><code>01-Photo.tif</code></a></p>
<img class="half fragment" src="img-ia/material_01.png"/>
<img class="half fragment" src="img-ia/material_02.png"/>
<p class="fragment">Commands on the Fiji menu will look like: <code>[File > Save]</code></p>
</section>
<section data-menu-title="Motivation" data-state="intro1z"><style>.intro1z header:after { content: ""; }</style>
<h1>Motivation</h1>
<h4>Why do we want to automate image analysis?</h4>
</section>
<section data-state="intro1a"><style>.intro1a header:after { content: "Motivation: our eyes deceive us!"; }</style>
<a href="https://twitter.com/dn_mason/status/1034380257451810816" target="_blank"><img class="third" src="img-ia/colour_07.png"/></a><img class="third" src="img-ia/colour_08.png"/><img data-fragment-index="1" class="third fragment" src="img-ia/colour_11.png"/>
<p data-fragment-index="1" class="fragment"><a href="https://en.wikipedia.org/wiki/The_dress">https://en.wikipedia.org/wiki/The_dress</a></p>
</section>
<section data-state="intro1b"><style>.intro1b header:after { content: "Motivation: our eyes deceive us!"; }</style>
<p>Open <a href="material/05-BlueGreenSwirl.png"><code>05-BlueGreenSwirl.png</code></a></p>
<img src="img-ia/colour_09.png"/>
</section>
<section data-state="intro1c"><style>.intro1c header:after { content: "Why should we let a computer do it?"; }</style>
<ul>
<li>It's faster</li>
<li>It's less biased</li>
<li>It's reproducible</li>
<li>It scales</li>
<li>It's modular</li>
</ul>
</section>
<section data-state="intro1d"><style>.intro1d header:after { content: "Bioimage Analysis: the NEUBIAS vocabulary"; }</style>
<img src="img-ia/Bioimage-ontology.png"/>
<p class="subtle">From http://doi.org/10.5281/zenodo.1042570</p>
</section>
<section data-state="intro1c"><style>.intro1c header:after { content: "The NEUBIAS ontology"; }</style>
<ul>
<li> <i>Collection</i>: think Fiji, Matlab, CellProfiler </li>
<li> <i>Component</i>: think individual algorithms (stitching, blurring, segmenting) </li>
<li> <i>Workflow</i>: series of components that achieve a certain task associated with a particular research project </li>
</ul>
<p>
We will learn how to use <i><b>components</b></i> from the Fiji <i><b>collection</b></i> so that you can assemble your own <i><b>workflows</b></i></p>
</section>
<!--Second subsession --->
<section data-menu-title="Image formation" data-state="intro1"><style>.intro1 header:after { content: "How an image is formed"; }</style>
<div><img class="half" src="img-ia/scopes1.png"/>
<img class="half" src="img-ia/scopes2.png"/></div>
<p>Widefield and Confocal microscopes acquire images in different ways.</p>
</section>
<section data-state="intro1"><style>.intro1 header:after { content: "How an image is formed"; }</style>
<div><img class="half" src="img-ia/acq_widefield.png"/>
<img class="half fragment" src="img-ia/acq_lsm.png"/></div>
<p>Widefield and laser-scanning microscopes acquire images in different ways.</p>
</section>
<section data-state="intro1"><style>.intro1 header:after { content: "How an image is formed"; }</style>
<img class="imbox" src="img-ia/detector.png"/>
<p>Detectors collect photons and convert them to a voltage</p>
</section>
<section data-state="intro1"><style>.intro1 header:after { content: "How an image is formed"; }</style>
<img class="imbox" src="img-ia/ad_1.png"/>
<p>The A/D converter determines the dynamic range of the data</p>
</section>
<section data-state="intro1"><style>.intro1 header:after { content: "How an image is formed"; }</style>
<img class="third" src="img-ia/couple_selected.png"/>
<img class="third" src="img-ia/couple_squares.png"/>
<img class="third" src="img-ia/couple_text.png"/>
<p class="subtle">From https://petebankhead.gitbooks.io/imagej-intro/</p>
</section>
<section data-state="intro1"><style>.intro1 header:after { content: "How an image is formed"; }</style>
<img class="imbox" src="img-ia/bd1.png"/>
<p></p>
</section>
<section data-state="intro1"><style>.intro1 header:after { content: "How an image is formed"; }</style>
<img class="imbox" src="img-ia/bd2.png"/>
<p></p>
</section>
<section data-state="intro1"><style>.intro1 header:after { content: "How an image is formed"; }</style>
<img class="imbox" src="img-ia/bd3.png"/>
<p>Unless you have good reason not to, always collect data at the highest possible bit depth</p>
</section>
<section data-state="intro1"><style>.intro1 header:after { content: "How an image is formed"; }</style>
<img class="left half" src="img-ia/bd3.png"/>
<p class="right half fragment">32 bit is a special data type called <a href="https://en.wikipedia.org/wiki/Floating-point_arithmetic#Floating-point_numbers" target="_blank">floating point</a>. <br/><br/><b>TL;DR:</b> pixels can have non-integer values which can be useful in applications like ratiometric imaging.</p>
</section>
<!--Third subsession --->
<section data-menu-title="Stacks, colours, LUTs" data-state="fiji5z"><style>.fiji5z header:after { content: ""; }</style>
<h1>Stacks</h1>
<h4>Understanding how Fiji deals with multidimensional images</h4>
</section>
<section data-state="fiji5"><style>.fiji5 header:after { content: "Stacks"; }</style>
<p>Some file formats (eg. TIF) can store multiple images in one file which are called stacks</p>
<img class="third" src="img-ia/stacks_01.png"/>
<img data-fragment-index="1" class="twothirds fragment" src="img-ia/stacks_02.png"/>
<p class="fragment" data-fragment-index="1">When more than one dimension (time, z, channel) is included, the images are still stored in a linear stack so it's critical to know the dimension order (eg, XYCZT, XYZTC etc) so you can navigate the stack correctly.</p>
</section>
<section data-state="fiji5"><style>.fiji5 header:after { content: "Stacks"; }</style>
<p>You will very rarely have to deal with Interleaved stacks because of <b>Hyperstacks</b> which give you independent control of dimensions with additional control bars.</p>
<img class="third" src="img-ia/hyperstacks_01.png"/>
<img data-fragment-index="1" class="third fragment" src="img-ia/hyperstacks_02.png"/>
<p class="fragment" data-fragment-index="1">Convert between stack types with the <code>[Image > Hyperstack]</code> menu</p>
</section>
<section data-state="fiji6"><style>.fiji6 header:after { content: "Channel Display Modes"; }</style>
<ul style="font-size:80%"><li>Open <a href="material/06-multichannel.tif"><code>06-MultiChannel.tif</code></a></li>
<li>(If opening via URL run <code>[Image > Hyperstacks > Stack to Hyperstack]</code>)</li>
<li>Navigate through the channels then run Channels Tool <code>[Image > Color > Channels Tool]</code> and change to Greyscale</li></ul>
<img class="half" src="img-ia/modes_01.png"/>
<img data-fragment-index="1" class="half fragment" src="img-ia/modes_03.png"/>
<p>In this image, each channel already has an associated Look Up Table (LUT)</p>
</section>
<section data-state="fiji6"><style>.fiji6 header:after { content: "Channel Display Modes"; }</style>
<p>Change to Composite mode</p>
<img class="half" src="img-ia/modes_02.png"/>
<ul class="half">
<li>Use the check boxes (channels tool) to turn channels off</li>
<li>Navigate through the channels. What happens?</li>
<li>Adjust the Black and White Points <code>[Image > Adjust > Brightness & Contrast]</code></li>
<li>Draw a ROI on a bright area and Measure ('m')</li>
</ul>
<p class="fragment">IMPORTANT! The nav bar still <i>selects</i> the active channel, and that is where measurements / maniplulations are applied!</p>
<p class="fragment">The infobar text, slider and 1px coloured image border all indicate which channel is selected.</p>
</section>
<section data-state="fiji7z"><style>.fiji7z header:after { content: ""; }</style>
<h1>Colour in Digital Imaging</h1>
<h4>What is colour? How and when to use LUTs</h4>
</section>
<section data-state="fiji7"><style>.fiji7 header:after { content: "Colour"; }</style>
<p>Colour in your images is (almost always) dictated by arbitrary lookup tables</p>
<img class="half" src="img-ia/colour_02.png"/>
<img data-fragment-index="1" class="third fragment" src="img-ia/colourLUT1.png"/>
<p class="fragment" data-fragment-index="1">Lookup tables (LUTs) translate an intensity (1-256 for 8 bit) to an RGB display value</p>
</section>
<section data-state="fiji7"><style>.fiji7 header:after { content: "Colour"; }</style>
<p>Colour in your images is (almost always) dictated by arbitrary lookup tables</p>
<img class="third" src="img-ia/colourLUT2.png"/>
<img data-fragment-index="1" class="third fragment" src="img-ia/colourLUT3.png"/>
<p>Lookup tables (LUTs) translate an intensity (1-256 for 8 bit) to an RGB display value</p>
</section>
<section data-state="fiji7"><style>.fiji7 header:after { content: "Colour"; }</style>
<p>You can use whatever colours you want (they are arbitrary after all), but the most reliable contrast is greyscale</p>
<img src="img-ia/colour_05.png"/>
<p class="subtle">More info on colour and sensitivity of the human eye <a href="https://postacquisition.wordpress.com/2015/04/15/see-the-world-in-black-and-white/" target="_blank">here</a></p>
<!-- <ol><li>Combinations for multichannel images</li><li>Colour Blindness</li></ol> -->
</section>
<section data-state="fiji8b"><style>.fiji8b header:after { content: "Colour: R/G Colour blindness"; }</style>
<p>~10% of the population have trouble discerning Red and Green. Consider using Green and Magenta instead which still combine to white.</p>
<img src="img-ia/colour_10.png"/>
</section>
<section data-state="fiji14a"><style>.fiji14a header:after { content: "Colour: Changing LUTs"; }</style>
<div class="twothirds left" style="font-size:90%">
<ul><li>Open <a href="material/06-multichannel.tif"><code>06-MultiChannel.tif</code></a></li>
<li>(If opening via URL run <code>[Image > Hyperstacks > Stack to Hyperstack]</code>)</li>
<li>Run <code>[Image > Lookup Tables]</code>, try a few different ones</li>
<li>Run Channels Tool <code>[Image > Color > Channels Tool]</code>, make sure you're in Color or Composite mode, hit More, select a LUT</li>
<li data-fragment-index="1" class="fragment">Run <code>[Image > Color > Display LUTs]</code> to see all the LUTs on your version of Fiji</li></ul>
<img data-fragment-index="1" class="fragment twothirds" src="img-ia/colourLUT6.png"/>
</div>
<img class="third right" src="img-ia/colourLUT5.png"/>
</section>
<section data-state="fiji14a"><style>.fiji14a header:after { content: "Colour: Changing LUTs"; }</style>
<p>A couple of useful LUTs:</p>
<img class="threequart" src="img-ia/colourLUT7.png"/>
</section>
<!--Fourth subsession --->
<section data-menu-title="Existing tools" data-state="fiji5z"><style>.fiji5z header:after { content: ""; }</style>
<h1>Existing tools</h1>
<h4>The bioimage analysis ecosystem</h4>
</section>
<section data-state="fiji5"><style>.fiji5 header:after { content: "Free GUI tools"; }</style>
<h3>ImageJ/Fiji</h3>
<img class="imbox" src="img-ia/tools_01.png"/>
<p>Free, easy to run, most widely used, scriptable</p>
<p class="subtle">From http://fiji.sc/Fiji</p>
</section>
<section data-state="fiji5"><style>.fiji5 header:after { content: "Free GUI tools"; }</style>
<h3>Icy</h3>
<img class="imbox" src="img-ia/tools_02.png"/>
<p>Free, easy to run, visual scripting; not as widely used</p>
<p class="subtle">From http://www.bioimageanalysis.org/</p>
</section>
<section data-state="fiji5"><style>.fiji5 header:after { content: "Free GUI tools"; }</style>
<h3>CellProfiler</h3>
<img class="imbox" src="img-ia/tools_03.png"/>
<p>Free, visual scripting, perfectly suited for high content screening and large-batch jobs</p>
<p class="subtle">From http://www.cellprofiler.org/</p>
</section>
<section data-state="fiji5"><style>.fiji5 header:after { content: "Free GUI tools"; }</style>
<h3>ilastik</h3>
<img class="imbox" src="img-ia/tools_04.png"/>
<p>Free (shallow) machine learning tool. Perfect for pixel classification/segmentation tasks</p>
<p class="subtle">From https://www.ilastik.org</p>
</section>
<section data-state="fiji5"><style>.fiji5 header:after { content: "Paid GUI tools"; }</style>
<h3>Imaris, Amira, Vaa3D</h3>
<img class="imbox" src="img-ia/tools_05.png"/>
<p>Fantastic at identifying and tracking objects in 3D; expensive</p>
<p class="subtle">From http://www.fei.com/software/amira-3d-for-life-sciences/, http://
www.bitplane.com/imaris/imaris, www.vaa3d.org/</p>
</section>
<section data-state="fiji5"><style>.fiji5 header:after { content: "General-purpose languages"; }</style>
<h3>Matlab, Python</h3>
<img class="imbox" src="img-ia/tools_06.png"/>
<p>The most flexible and the most difficult to use. No GUI (unless you code one). Python is free, Matlab is not</p>
<p class="subtle">From en.wikipedia.org/wiki/MATLAB</p>
</section>
</div> <!-- ---------------------- END OF SLIDES -------------------------- -->
</div>
<!-- Footer -->
<img style="position:fixed;bottom:1em;right:1em;" src="img/logo_WMS.jpg" width="10%">
<!--img style="position:fixed;bottom:1em;left:1em;" src="img/logo_tw.png" width="20%"-->
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
controls: false,
slideNumber: true, //-- Added for development
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/menu/menu.js' }
],
menu: {
hideMissingTitles: true,
themes: false,
transitions: false,
//markers: true,
numbers: true,
openButton: false,
titleSelector: 'span.menu-title'
}
});
</script>
</body>
</html>