-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathIntroFiji.html
More file actions
271 lines (224 loc) · 12.1 KB
/
IntroFiji.html
File metadata and controls
271 lines (224 loc) · 12.1 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
<!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 Fiji: interface, intensities</h2>
<h4>Erick Martins Ratamero<br>Research Fellow</h4>
</section>
<section data-menu-title="Introduction to ImageJ" data-state="fijiz"><style>.fiji1z header:after { content: ""; }</style>
<h1>Introduction to ImageJ & Fiji</h1>
<h4>A cross platform, open source, Java-based image processing program</h4>
</section>
<section data-state="fiji1"><style>.fiji1 header:after { content: "Introducing ImageJ and Fiji"; }</style>
<img class="imleft" src="img-ia/fiji1.png"/>
<ul class="half right">
<p>ImageJ is a java program for image processing and analysis.<br>Fiji extends this via plugins.</p>
<li>Open Source (free to modify)</li>
<li>Extensible (plugins)</li>
<li>Cross-Platform (Java-Based)</li>
<li>Scriptable for Automation</li>
<li>Vast Functionality</li>
<li>Includes the Bioformats Library</li>
</ul>
</section>
<section data-state="fiji1"><style>.fiji1 header:after { content: "Introducing ImageJ and Fiji"; }</style>
<img src="img-ia/bioformats.jpg"/>
<p>Learn more about Bio-Formats <a href="https://www.openmicroscopy.org/bio-formats/" target="_blank">here</a></p>
</section>
<section data-state="fiji1"><style>.fiji1 header:after { content: "Introducing ImageJ and Fiji"; }</style>
<img class="imbox" src="img-ia/fiji2.png"/>
<p></p>
</section>
<section data-state="fiji1"><style>.fiji1 header:after { content: "Introducing ImageJ and Fiji"; }</style>
<img class="imbox" src="img-ia/fiji3.png"/>
<p></p>
</section>
<section data-state="fiji1"><style>.fiji1 header:after { content: "Introducing ImageJ and Fiji"; }</style>
<img class="imbox" src="img-ia/fiji4.png"/>
<p></p>
</section>
<!--Second subsession --->
<section data-menu-title="Fiji Basics" data-state="fiji2z"><style>.fiji2z header:after { content: ""; }</style>
<h1>Hands on With Fiji</h1>
<h4>Getting to know the interface, info & status bars, calibrated vs non-calibrated images</h4>
</section>
<section data-state="fiji2"><style>.fiji2 header:after { content: "Fiji Basics"; }</style>
<ol class="left twothirds">
<li>Run Fiji (Look for the shortcut on your desktop)</li>
<!-- <li>Right click <a href="">this link</a> and "copy link location"</li> -->
<li>Open <code><a href="material/01-Photo.tif">01-Photo.tif</a></code> and <a href="material/02-Biological_Image.tif"><code>02-Biological_Image.tif</code></a></li>
<ul>
<li>Zoom using +/- keys</li>
<li>When zoomed in, pan by holding space and click-dragging with mouse</li>
<li>Hit 'Enter' to bring the Fiji window to the front</li>
<li><code>[Window > Tile]</code> command is very useful when opening multiple images</li>
<li data-fragment-index="1" class="fragment">Find:
<ul><li>infobar (left top): gives info on the image</li><li>statusbar (right bottom): gives current cursor coordinates and intensity readout</li></ul>
</ul></ol>
<img data-fragment-index="1" class="fragment third" src="img-ia/fiji8.png"/>
</section>
<section data-state="fiji2b"><style>.fiji2b header:after { content: "Fiji Basics: Calibration"; }</style>
<ul class="half">
<li>The Infobar is a great way to tell if your image is calibrated</li>
<li>Running <code>[Image > Properties]</code> also allows you to view and set calibration</li>
<li>The spatial calibration can be in any unit you like but (almost) all subsequent measurements will use that unit!</li>
<li>For μm, use <code>um</code> or <code>micron</code></li>
</ul>
<img class="third imright" src="img-ia/fiji9.png"/>
</section>
<!--Third subsession --->
<section data-menu-title="Brightness and contrast" data-state="fiji3az"><style>.fiji3az header:after { content: ""; }</style>
<h1>Basic Manipulations</h1>
<h4>Intensity and Geometric adjustments</h4>
</section>
<!-- Add histogram stuff here -->
<section data-state="fiji3p"><style>.fiji3p header:after { content: "Understanding Intensity Histograms"; }</style>
<p class="">Images are an array of intensity values. The intensity histogram shows the number (on the y-axis) of each intensity value (on the x-axis) and thus the distribution of intensities</p>
<img class="half" src="img-ia/intensity_10.png"/>
</section>
<section data-state="fiji3p"><style>.fiji3p header:after { content: "Understanding Intensity Histograms"; }</style>
<p>Photos typically have a broad range of intensity values and so the distribution of intensities varies greatly</p>
<img class="twothirds" src="img-ia/intensity_11.png"/>
</section>
<section data-state="fiji3p"><style>.fiji3p header:after { content: "Understanding Intensity Histograms"; }</style>
<p>Fluorescent micrographs will typically have a much more predicatble distribution:</p>
<img class="twothirds" src="img-ia/intensity_12.png"/>
</section>
<section data-state="fiji3p"><style>.fiji3p header:after { content: "Understanding Intensity Histograms"; }</style>
<p>The Black and White points of the histogram dictate the bounds of the display (changing these values alters the brightness and contrast of the image)</p>
<img class="twothirds" src="img-ia/intensity_13a.png"/>
<ul><li>Brightness: horizontal position of the display window</li>
<li>Contrast: distance between the black and white point</li></ul>
</section>
<section data-state="fiji3p"><style>.fiji3p header:after { content: "Understanding Intensity Histograms"; }</style>
<img class="half" src="img-ia/intensity_13.png"/>
<p data-fragment-index="1" class="fragment">The histogram is now stretched and the intensity value of every pixel is effectively doubled which increases the contrast in the image</p>
<img data-fragment-index="1" class="fragment half" src="img-ia/intensity_14a.png"/>
</section>
<section data-state="fiji3p"><style>.fiji3p header:after { content: "Understanding Intensity Histograms"; }</style>
<p>If we repeat the same manipulation, the maximum intensity value in the image is now outside the bounds of the display scale!</p>
<img class="twothirds" src="img-ia/intensity_14.png"/>
</section>
<section data-state="fiji3p"><style>.fiji3p header:after { content: "Understanding Intensity Histograms"; }</style>
<p>Values falling beyond the new White point are dumped into the top bin of the histogram (IE 256 in an 8-bit image) and information from the image is lost</p>
<img class="twothirds" src="img-ia/intensity_15.png"/>
</section>
<section data-state="fiji3p"><style>.fiji3p header:after { content: "Understanding Intensity Histograms"; }</style>
<img class="left third" src="img-ia/intensity_16.png"/>
<div class="right twothirds">
<p>Be warned: removing information from an image is deemed an unacceptable maniplulation and can constitute academic fraud!</p>
<p>For an excellent (if slightly dated) review of permissible image manipulation see:</br><a target="_blank" href="https://doi.org/10.1083/jcb.200406019">Rossner & Yamada (2004): "What's in a picture? The temptation of image manipulation"</a></p>
</div>
<p class="clear">The best advice is to get it right during acquisition!</p>
</section>
<section data-state="fiji3a"><style>.fiji3a header:after { content: "Basic Adjustments: Intensity"; }</style>
<div>
<ul style="font-size:90%" class="left half">
<li>Open <a href="material/02-Biological_Image.tif"><code>02-Biological Image.tif</code></a></li>
<li>Run <code>[Image > Adjust > Brightness & Contrast]</code></li>
<li>The top two bars adjust the Black and White points</li>
<ul>
<li>All data below the black point or above the white point become black or white respectively! (and are thus underexposed or saturated)</li>
</ul>
<li>Reset will stretch to the range of the bit depth (ish)</li>
<li>Set lets you define black and white points</li>
<li>Apply writes in adjustments (never ever ever use on the original image, and even on a copy proceed with care!)</li>
<li>You can also use <code>[Process > Enhance Contrast]</code> to autocontrast</li>
</ul>
<img class="half fragment" src="img-ia/intensity_01.png"/></div>
</section>
<!--Fourth subsession --->
<section data-menu-title="Plugins" data-state="fiji5z"><style>.fiji5z header:after { content: ""; }</style>
<h1>Plugins</h1>
<h4>Update sites and legacy plugins</h4>
</section>
<section data-state="fiji5"><style>.fiji5 header:after { content: "Plugins"; }</style>
<img class="imbox" src="img-ia/plugins1.png"/>
<p>Plugins extend the basic Fiji functionality. They are significant pieces of code that use the ImageJ libraries to achieve tasks that default Fiji cannot.</p>
</section>
<section data-state="fiji5"><style>.fiji5 header:after { content: "Plugins"; }</style>
<img class="imbox" src="img-ia/plugins2.png"/>
<p>Fiji comes with an extensive selection of useful plugins already built-in.</p>
</section>
<section data-state="fiji5"><style>.fiji5 header:after { content: "Plugins"; }</style>
<img class="imbox" src="img-ia/plugins3.png"/>
<p>Most other popular plugins can be installed and updated automatically from <i>update sites</i> by going to <code>[Help > Update... > Manage Update Sites]</code></p>
</section>
<section data-state="fiji5"><style>.fiji5 header:after { content: "Plugins"; }</style>
<img class="imbox" src="img-ia/plugins4.png"/>
<p>Certain plugins are not available as update sites. For those, normally a <code>.jar</code> file is provided. This needs to be placed inside the <code>plugins</code> folder on the Fiji directory.</p>
</section>
<section data-state="fiji5"><style>.fiji5 header:after { content: "Plugins"; }</style>
<img class="imbox" src="img-ia/plugins5.png"/>
<p>Alternatively, you can go to <code>[Plugins > Install Plugin...]</code> and find the desired <code>.jar</code> file.</p>
</section>
<section data-state="apps31"><style>.apps31 header:after { content: "Practical: installing a plugin"; }</style>
<img class="left third" src="img-ia/coloc_11.png"/>
<ul class="twothirds">
<li>Download <a href="material/jacop_.jar"><code>JaCoP</code></a></li>
<li>Install <code>JaCoP</code></li>
<li>Restart Fiji</li>
<li>Open <a href="material/11-colocA.tif"><code>11-colocA.tif</code></a> and <a href="material/12-colocB.tif"><code>12-colocB.tif</code></a></li>
<li>Run <code>[Plugins > JaCoP]</code>
</ul>
</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>