-
Notifications
You must be signed in to change notification settings - Fork 5
/
ImageAnalysis.html
863 lines (713 loc) · 44.5 KB
/
ImageAnalysis.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
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
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
<!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 with Fiji</h2>
<h4>Erick Martins Ratamero (he/him)<br>Manager, Imaging Applications - Research IT</h4>
<p class="subtle">Use <i class="fa fa-arrow-right"></i> to advance the slide</p>
</section>
<section data-menu-title="Links and Resources" data-state="intro0"><style>.intro0 header:after { content: "Links and Resources"; }</style>
<ul>
<li>These slides: <a target="_blank" href="https://erickmartins.github.io/training/ImageAnalysis.html">https://erickmartins.github.io/training/ImageAnalysis.html</a></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://fiji.sc">Fiji Website</a></li>
<li><a target="_blank" href="https://forum.image.sc">image.sc Forum</a></li>
<li><a target="_blank" href="https://jacksonlaboratory.sharepoint.com/sites/ComputationalCommunity/SitePages/Computational-Image-Analysis.aspx">Computational Image Analysis on MyJAX</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>HUGE thanks to Dave Mason (formerly) from the University of Liverpool</li>
<li>You can find his original slides at <a target="_blank" href="http://pcwww.liv.ac.uk/~cci/reveal_ia/ImageAnalysisWithFiji.html">https://pcwww.liv.ac.uk/~dnmason/ia.html</a> (and then realise they look very much like these)</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="How an image is formed" data-state="intro1z"><style>.intro1z header:after { content: ""; }</style>
<h1>How an Image is formed</h1>
<h4>Understanding digital images</h4>
</section>
<section 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="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>
<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>
<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>
<li>Open <code><a href="material/Task1.pdf">Task1.pdf</a></code> and follow the instructions there.</li>
<li>You will need these two images: <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>
</section>
<!--END of TASK 1 -->
<section data-menu-title="Basic Adjustments: Intensity" 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>
<!--BEGINNING of TASK 2 -->
<section data-state="fiji3a"><style>.fiji3a header:after { content: "Basic Adjustments: Intensity"; }</style>
<div>
<ul>
<li>Open <code><a href="material/Task2.pdf">Task2.pdf</a></code> and follow the instructions there.</li>
<li>You will need this image: <a href="material/02-Biological_Image.tif"><code>02-Biological Image.tif</code></a></li>
</ul>
</section>
<!--END of TASK 2 -->
<!-- Consider talking about acceptable adjustments? -->
<section data-menu-title="Measurements" data-state="fiji3z"><style>.fiji3z header:after { content: ""; }</style>
<h1>Measurements and scale bars</h1>
<h4>Making measurements, what to measure, line vs area, adding a scale bar</h4>
</section>
<!--BEGINNING of TASK 3 -->
<section data-state="fiji3"><style>.fiji3 header:after { content: "Measurements"; }</style>
<div>
<ul>
<li>Open <code><a href="material/Task3.pdf">Task3.pdf</a></code> and follow the instructions there.</li>
<li>You will need this image: <a href="material/02-Biological_Image.tif"><code>02-Biological Image.tif</code></a></li>
</ul>
</section>
<!--END of TASK 3 -->
<section data-menu-title="Stacks" 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>
<!--BEGINNING of TASK 4 -->
<section data-menu-title="Channel Display Modes" data-state="fiji6"><style>.fiji6 header:after { content: "Channel Display Modes"; }</style>
<ul>
<li>Open <code><a href="material/Task4.pdf">Task4.pdf</a></code> and follow the instructions there.</li>
<li>You will need this image: <a href="material/06-multichannel.tif"><code>06-MultiChannel.tif</code></a></li>
</ul>
</section>
<!--END of TASK 4 -->
<section data-menu-title="Digital Imaging and Colour" 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="fiji8"><style>.fiji8 header:after { content: "Colour: Combinations"; }</style>
<p>Additive and Subtractive Colours can be mixed in defined ways</p>
<img class="half" src="img-ia/colour_06.png"/>
<p>Non 'pure' colours cannot be combined in reliable ways (as they contain a mix of other channels)
</section>
<section data-state="fiji8"><style>.fiji8 header:after { content: "Colour: Combinations"; }</style>
<p>BUT! Interpretation is <i>highly</i> context dependent!</p>
<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="fiji8"><style>.fiji8 header:after { content: "Colour: Combinations"; }</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="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>
<!--BEGINNING of TASK 5 -->
<section data-state="fiji14a"><style>.fiji14a header:after { content: "Colour: Changing LUTs"; }</style>
<div>
<ul>
<li>Open <code><a href="material/Task5.pdf">Task5.pdf</a></code> and follow the instructions there.</li>
<li>You will need this image: <a href="material/06-multichannel.tif"><code>06-MultiChannel.tif</code></a></li>
</ul>
</div>
</section>
<!--END of TASK 5 -->
<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>
<!-- ---------------------- APPLICATIONS JUMP PAGE -------------------------- -->
<section data-menu-title="Applications: Index Page" data-state="apps90"><style>.apps90 header:after { content: ""; }</style>
<p>Applications</p>
<ul>
<li><a href="#/55">Segmentation and CCA</a></li>
<li><a href="#/86">Colocalisation</a></li>
<li><a href="#/95">Tracking</a></li>
<li><a href="#/70">Batch Processing</a></li>
<li><a href="#/79">Scripting 101</a></li>
<li><a href="#/110">Stitching</a></li>
</ul>
</section>
<!-- ---------------------- APPLICATIONS SEGMENTATION AND CCA -------------------------- -->
<section data-menu-title="Segmentation" data-state="apps10z"><style>.apps10z header:after { content: ""; }</style>
<h1>Applications: Segmentation</h1>
<h4>What is segmentation? thresholding, Connected Component Analysis</h4>
</section>
<section data-state="apps10y"><style>.apps10y header:after { content: "Segmentation: Before we start"; }</style>
<p>Fiji has an odd way of dealing with masks</p>
<img class="third" src="img-ia/setupFiji1.png"/>
<img class="third" src="img-ia/setupFiji2.png"/>
<p>Run <code>[Process > Binary > Options]</code> and check <code>Black Background</code>. Hit OK.</p>
</section>
<section data-state="apps10"><style>.apps10 header:after { content: "Segmentation: Theory"; }</style>
<p>Segmentation is the separation of an image into areas of interest and areas that are not of interest</p>
<img class="left half" src="img-ia/seg_03.png"/><img data-fragment-index="1" class="fragment right half" src="img-ia/seg_04.png"/>
<p data-fragment-index="1" class="clear fragment">The end point for most segmentation is a binary mask (false/true, 0/255)</p>
</section>
<section data-state="apps10"><style>.apps10 header:after { content: "Segmentation: Theory"; }</style>
<p>For most applications, intensity-based thresholding works well. This relies on the signal being higher intensity than the background.</p>
<img class="half" src="img-ia/seg_05.png"/>
<p>We use a <i>Threshold</i> to pick a cutoff.</p>
</section>
<!--BEGINNING of TASK 6 -->
<section data-state="apps11"><style>.apps11 header:after { content: "Segmentation: Hands On"; }</style>
<p>Open <code><a href="material/Task6.pdf">Task6.pdf</a></code> and follow the instructions there.</p>
<p>You will need these images: <a href="material/07-nuclei.tif"><code>07-nuclei.tif</code></a> and <a href="material/08-nucleiMask.tif"><code>08-nucleiMask.tif</code></a></p>
</section>
<section data-state="apps14"><style>.apps14 header:after { content: "Segmentation: Visualisation"; }</style>
<p>Example visualisation of woundhealing</p>
<!-- <a href="https://cci.liv.ac.uk/img/gallery/woundhealing.mp4" target="_blank"> -->
<video loop data-autoplay class="half" src="https://cci.liv.ac.uk/img/gallery/woundhealing.mp4"></video>
<!-- </a> -->
<p>From the <a href="http://cci.liv.ac.uk/gallery.html" target="_blank">CCI website gallery</a>. Data c/o <a href="https://www.liverpool.ac.uk/integrative-biology/staff/daimark-bennett/" target="_blank">Daimark Bennett</a></p>
</section>
</section>
</section>
<!-- ---------------------- APPLICATIONS BATCH PROCESSING -------------------------- -->
<section data-menu-title="Batch Processing" data-state="apps20z"><style>.apps20z header:after { content: ""; }</style>
<h1>Applications: Batch Processing</h1>
<h4>Why batch process? File conversion, batch processing, scripting</h4>
</section>
<section data-state="apps20"><style>.apps20 header:after { content: "Batch Processing: Theory"; }</style>
<p>Manual analysis (while sometimes necessary) can be laborious, error prone and not provide the provenance required. Batch processing allows the same processing to be run on multiple images.</p>
<p>The built-in <code>[Process > Batch]</code> menu has lots of useful functions:</p>
<img class="half" src="img-ia/batch_01.png"/>
</section>
<section data-state="apps21"><style>.apps21 header:after { content: "Batch Processing: Data"; }</style>
<p>We'll use a subset of dataset BBBC008 from the <a href="https://data.broadinstitute.org/bbbc/BBBC008/" target="_blank">Broad Bioimage Benchmark Collection</a></p>
<ul><li>Download the zip file from <a href="material/BBBC008_partial.zip">here</a> to the desktop</li><li>Unzip (right click and "Extract All") to end up with a folder on your desktop called <code>BBBC008_partial</code></li></ul><br>
<img class="" src="img-ia/batch_04.png"/>
<ul><li>Make another folder on the desktop called <code>Output</code></li><ul>
</section>
<!--BEGINNING of TASK 7 -->
<section data-state="apps22"><style>.apps22 header:after { content: "Batch Processing: Batch Convert"; }</style>
<p>Open <code><a href="material/Task7.pdf">Task7.pdf</a></code> and follow the instructions there.</p>
</section>
<!--END of TASK 7 -->
<section data-menu-title="Scripting" data-state="apps24z"><style>.apps24z header:after { content: ""; }</style>
<h1>Scripting</h1>
<h4>A very brief foray into scripts</h4>
</section>
<section data-state="apps24"><style>.apps24 header:after { content: "Scripting"; }</style>
<p>Scripting is useful for running the same process multiple times or having a record of how images were processed to get a particular output</p>
<p>Fiji supports many scripting languages including Java, Python, Scala, Ruby, Clojure and Groovy through the script editor which also recognises the macro language from the previous example (which we'll be using)</p>
<!-- <p class="fragment" >Run <code>[Plugins > New > Macro]</code></p></div> -->
<img class="half fragment" src="img-ia/script01.PNG"/>
</section>
<section data-state="apps24"><style>.apps24 header:after { content: "Scripting"; }</style>
<p>As an example, we're going to (manually) create a montage from a three channel image, then see what the script looks like</p>
<img class="third" src="img-ia/script3.png"/>
<ul>
<li>Open <a href="material/06-multichannel.tif"><code>06-MultiChannel.tif</code></a></li>
<li>Open the macro recorder: <code>[Plugins > Macros > Record]</code></li>
</ul>
</section>
<section data-state="apps24"><style>.apps24 header:after { content: "Scripting"; }</style>
<ul style="font-size:70%" class="twothirds">
<li>(If necessary <code>[Image > Hyperstacks > Stack to Hyperstack]</code>)</li>
<li>Open the channels tool <code>[Image > Color > Channels Tool]</code> and set the mode to <code>grayscale</code></li>
<li>Run <code>[Image > Type > RGB color]</code></li>
<li>Rename this image to <code>channels</code> with <code>[Image > Rename]</code></li>
<li>Select the original stack, and using the channels tool, set the mode to <code>composite</code></li>
<li>Run <code>[Image > Type > RGB color]</code></li>
<li>Rename this image to <code>merge</code> with <code>[Image > Rename]</code></li>
<li>Close the original (it should be the only 8-bit image open (check the Info bar!)</li>
<li>Run <code>[Image > Stacks > Tools > Concatenate]</code> and select Channels and merge in the two boxes (see right)</li>
<li>Run <code>[Image > Stacks > Make Montage]</code> change the border width to 3 then hit OK</li>
<!-- <li>Run <code>[File > Save As > PNG]</code> and save the file in the output directory</li> -->
</ul>
<img class="third" src="img-ia/script02.png">
<p class="clear fragment">Got it? Have a look at the Macro Recorder and see if you can see the commands you ran</p>
</section>
<section data-state="apps24"><style>.apps24 header:after { content: "Scripting"; }</style>
<p>Open the script editor with <code>[File > New > Script]</code> and copy in the following code:</p>
<pre><code class="java" data-trim data-noescape>
//-- Record the filename
imageName=getTitle();
print("Processing: "+imageName);
//-- Display the stack in greyscale, create an RGB version, rename
Property.set("CompositeProjection", "null");
Stack.setDisplayMode("grayscale");
run("RGB Color");
rename("channels");
//-- Select the original image
selectWindow(imageName);
//-- Display the stack in composite, create an RGB version, rename
Property.set("CompositeProjection", "Sum");
Stack.setDisplayMode("composite");
run("RGB Color");
rename("merge");
//-- Close the original
close(imageName);
//-- Put the two RGB images together
run("Concatenate...", " title=newStack open image1=channels image2=merge");
//-- Create a montage
run("Make Montage...", "columns=4 rows=1 scale=0.50 border=3");
//-- Close the stack (from concatenation)
close("newStack");
</code></pre>
<p>Open <a href="material/06-multichannel.tif"><code>06-MultiChannel.tif</code></a> again and hit Run</p>
<p class="subtle fragment">Comments, variables, print, active window</p>
</section>
<section data-state="apps24"><style>.apps24 header:after { content: "Scripting"; }</style>
<p>This script operates on an open image but it's easily converted to a batch processing script using the built in templates:</p>
<img class="half" src="img-ia/script04.png"/>
<p>The full script is <a href="material/Process_Folder_montage.ijm">here</a>. I added these lines at the top and bottom:</p>
<pre><code class="java">open(input + File.separator + file);</code></pre>
<pre><code class="java">saveAs("png", output + File.separator + replace(file, suffix, ".png"));
close("*");
</code></pre>
</section>
<section data-state="apps24"><style>.apps24 header:after { content: "Scripting"; }</style>
<p>We'll go into more detail on scripts in the future</p>
<p>In the meantime:</p>
<ul>
<li><a href="https://imagej.nih.gov/ij/developer/macro/macros.html" target="_blank">ImageJ language reference</a></li>
<li><a href="https://imagej.nih.gov/ij/developer/macro/functions.html" target="_blank">ImageJ function reference</a></li>
<li><a href="https://postacquisition.wordpress.com/2017/08/29/staying-in-version-control/" target="_blank">Getting started with Version Control for scripting</a></li>
</ul>
</section>
<!-- ---------------------- APPLICATIONS COLOCALISTATION -------------------------- -->
<section data-menu-title="Colocalisation Analysis" data-state="apps30z"><style>.apps30z header:after { content: ""; }</style>
<h1>Applications: Co-localisation</h1>
<h4>Use cases, some simple guidance, JaCoP</h4>
</section>
<section data-state="apps30"><style>.apps30 header:after { content: "Colocalisation: Theory"; }</style>
<!-- <p>Colocalisation: the bane of Image Analysts</p> -->
<img class="half" src="img-ia/coloc_00.png"/>
<p class="subtle">Adapted from a slide by <a href="https://twitter.com/fab_cordelieres" target="_blank">Fabrice Cordelieres</a></p>
</section>
<section data-state="apps30"><style>.apps30 header:after { content: "Colocalisation: Theory"; }</style>
<p>Colocalisation is <u>highly</u> dependent upon resolution! Example:</p>
<img class="third" src="img-ia/coloc_02a.PNG"/><span> </span><img class="third fragment" src="img-ia/coloc_02b.png"/>
<p class="fragment">Same idea goes for cells. Keep in mind your imaging resolution!</p>
</section>
<section data-state="apps35"><style>.apps35 header:after { content: "Bolte and Cordelieres"; }</style>
<p>We will walk through using JaCoP (Just Another CoLocalisation Plugin) to look at Pearson's and Manders' analysis</p>
<p>If you're doing colocalisation analysis at all, I <u>highly</u> recommend reading the companion paper <a href="https://doi.org/10.1111/j.1365-2818.2006.01706.x" target="_blank">https://doi.org/10.1111/j.1365-2818.2006.01706.x</a></p>
<img class="half" src="img-ia/coloc_00a.png"/>
</section>
<section data-state="apps31"><style>.apps31 header:after { content: "Colocalisation: Pearson's Correlation Coefficient"; }</style>
<p>Pearson's Correlation Coefficient</p>
<img class="third left" src="img-ia/coloc_10.png"/>
<ul class="twothirds">
<li>For each pixel, plot the intensities of two channels in a scatter plot</li>
<li>Ignore pixels with only one channel (IE intensity below BG)
<li>P value describes the goodness of fit (-1 to 1)</li>
<ul>
<li>1 = perfect correlation</li>
<li>0 = no positive or negative correlation</li>
<li>-1 = exclusion</li>
</ul></ul>
<p class="subtle clear">Figure from <a href="https://doi.org/10.1111/j.1365-2818.2006.01706.x" target="_blank">https://doi.org/10.1111/j.1365-2818.2006.01706.x</a></p>
</section>
<section data-state="apps31"><style>.apps31 header:after { content: "Colocalisation: Pearson's Correlation Coefficient"; }</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>Run <code>[Plugins > Install...]</code>, point to the jar file, then press "Save"</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>, uncheck everything except Pearsons, select the same image for both channels</li>
<li>Repeat for different combinations of these images and also <a href="material/13-colocA_half.tif"><code>13</code></a> and <a href="material/14-colocB_quarter.tif"><code>14</code></a></li>
</ul>
</section>
<section data-state="apps32"><style>.apps32 header:after { content: "Colocalisation: Problems with Pearson's"; }</style>
<img class="left quart" src="img-ia/coloc_10.png"/>
<ul class="twothirds">
<li>Great for complete colocalisation</li>
<li>Unsuitable if there is a lot of noise or partial colocalisation (see below)</li>
<li>Midrange P-values (-0.5 to 0.5) do not allow reliable conclusions to be drawn</li>
<li>Bleedthrough can be particularly problematic (as they will always correlate)</li>
</ul>
<br>
<img class="clear half" src="img-ia/coloc_12.png"/>
</section>
<section data-state="apps33"><style>.apps33 header:after { content: "Colocalisation: Manders'"; }</style>
<!-- <img class="twothirds" src="img-ia/coloc_13.png"/> -->
<p>Manders' Overlap Coefficient</p>
<ul class="twothirds">
<li>Removes some of the intensity dependence of Pearson's and provides channel-specific overlap coefficients (M1 & M2)</li>
<li>Values from 0 (no overlap) to 1 (complete overlap)</li>
<li>Defined as <i>"the ratio of the summed intensities of pixels from one channel for which the intensity in the second channel is above zero to the total intensity in the first channel"</i></li>
</ul>
</section>
<section data-state="apps33"><style>.apps33 header:after { content: "Colocalisation: Manders'"; }</style>
<img class="third" src="img-ia/coloc_11.png"/>
<ul class="twothirds">
<li>Use the same images from last time (<a href="material/11-colocA.tif"><code>11</code></a>, <a href="material/12-colocB.tif"><code>12</code></a>,<a href="material/13-colocA_half.tif"><code>13</code></a> and <a href="material/14-colocB_quarter.tif"><code>14</code></a>)</li>
<li>Run <code>[Plugins > JaCoP]</code>, check both Pearsons and Manders</li>
<li>Run for different combinations of these images</li>
<li>Note the differences in coefficients especially in images 13 and 14</li>
<li class="fragment">[BONUS] add some noise <code>[Process > Noise > Add Noise]</code> or blur your images <code>[Process > Filters > Gaussian Blur]</code> and see how that affects the coefficients</li></ul>
</section>
<!-- ---------------------- APPLICATIONS TRACKING -------------------------- -->
<section data-menu-title="Tracking" data-state="apps1z"><style>.apps1z header:after { content: ""; }</style>
<h1>Applications: Tracking</h1>
<h4>Correlating spatial and temporal phenomena, Feature detection, linkage, gotchas</h4>
</section>
<section data-state="apps1"><style>.apps1 header:after { content: "Tracking: Theory"; }</style>
<p>Life exists in the fourth dimension. Tracking allows you to correlate spatial and temporal properties.</p>
<img class="third" src="img-ia/tracks_01.png"/><span> </span><img data-fragment-index="2" class="third fragment" src="img-ia/tracks_02.png"/>
<p data-fragment-index="1" class="fragment">Most partcles look the same! Without any way to identify them, tracking is probabilistic.</p>
</section>
<section data-state="apps1"><style>.apps1 header:after { content: "Tracking: Theory"; }</style>
<p>Tracking has two parts: Feature Identification and Feature Linking</p>
<img class="half" src="img-ia/tracks_03.png"/><img class="half" src="img-ia/tracks_04.png"/>
<p>For every frame, features are detected, typically using a Gaussian-based method (eg. <a href="https://en.wikipedia.org/wiki/Blob_detection#The_difference_of_Gaussians_approach" target="_blank">Laplacian of Gaussian</a>: LoG)</p>
</section>
<section data-state="apps1"><style>.apps1 header:after { content: "Tracking: Theory"; }</style>
<p>Spots can be localised to sub-pixel resolution!</p>
<img class="left half" src="img-ia/tracks_05.png"/>
<p class="right half">Without sub-pixel localisation, the precision of detection is limited to whole pixel values.</p>
</section>
<section data-state="apps1"><style>.apps1 header:after { content: "Tracking: Theory"; }</style>
<p>Feature linkage</p>
<!-- <img class="half" src="img-ia/tracks_06.png"/><br> -->
<img class="half" src="img-ia/tracks_07.png"/>
<p>For each feature, all possible links in the next frame are calculated. This includes the spot disappearing completely.</p>
<img data-fragment-index="1" class="fragment half" src="img-ia/tracks_08.png"/>
<p data-fragment-index="2" class="fragment">A 'cost matrix' is formed to compare the 'cost' of each linkage. This is globally optimised to calculate the lowest cost for all linkages.</p>
</section>
<section data-state="apps1"><style>.apps1 header:after { content: "Tracking: Theory"; }</style>
<!-- <img class="half" src="img-ia/tracks_07.png"/> -->
<p>In the simplest form, a cost matrix will usually consider distance. Many other parameters can be used such as:</p>
<ul>
<li>Intensity</li>
<li>Shape</li>
<li>Quality of fit</li>
<li>Speed</li>
<li>Motion type</li>
</ul>
<p>Which can allow for a more accurate linkage especially in crowded or low S/N environments</p>
</section>
<section data-state="apps2"><style>.apps2 header:after { content: "Tracking: Hands On"; }</style>
<p>Open <a href="material/10-tracks.tif"><code>10-tracks.tif</code></a><br>Hit the arrow to play the movie. Right Click on the arrow to set playback speed</p>
<img class="quart" src="img-ia/tracks_11.png"/>
<p class="fragment">If you're interested in how the dataset was made see <a href="https://bitbucket.org/snippets/davemason/Ke9zz7" target="_blank">this snippet</a></p>
</section>
<section data-state="apps2"><style>.apps2 header:after { content: "Tracking: Hands On"; }</style>
<p>Run <code>[Plugins > Tracking > Trackmate]</code></p>
<img class="half left" src="img-ia/trackmate_01.png"/>
<ul class="half right"><li>Trackmate guides you through tracking using the Next and Prev buttons</li><li>The first dialog lets you select a subset (in space and time) to process. This is handy on large datasets when you want to calculate parameters before processing the whole dataset</li><li>Hit Next, keep the default (LoG) detector then hit Next again to move onto Feature detection.</li></ul>
</section>
<section data-state="apps2"><style>.apps2 header:after { content: "Tracking: Hands On"; }</style>
<img class="left half" src="img-ia/trackmate_02.png"/>
<ul class="half right"><li>Enter a Blob Diameter of 2 (note the scaled units)</li><li>Hit preview. Without any threshold, all the background noise is detected as features</li><li>Add a threshold of 0.1 and hit Preview again.</li></ul>
<p class="fragment clear">Generally your aim should be to provide the minimum threshold that removes all noise. Slide the navigation bar, then hit Preview to check out a few other timepoints.</p>
</section>
<section data-state="apps2"><style>.apps2 header:after { content: "Tracking: Hands On"; }</style>
<img class="left half" src="img-ia/trackmate_04.png"/>
<p class="half right">Hit next, accepting defaults until you reach 'Set Filters on Spots'</p>
</section>
<section data-state="apps2"><style>.apps2 header:after { content: "Tracking: Hands On"; }</style>
<img class="left half" src="img-ia/trackmate_05.png"/>
<ul class="half right">
<li>Hit next, accepting defaults until you reach 'Settings for Simple LAP tracker'</li>
<li>Keep the defaults and hit Next</li>
<li>You have tracks!</li>
</ul>
</section>
<section data-state="apps2"><style>.apps2 header:after { content: "Tracking: Hands On"; }</style>
<img class="left half" src="img-ia/trackmate_05.png"/>
<div class="half right">
<p class="fragment"><code>Linking Max Distance</code> Sets a 'search radius' for linkage</p>
<img class="fragment" src="img-ia/tracks_09.png"/>
<p class="fragment"><code>Gap-closing Max Frame Gap</code> Allows linkages to be found in non-adjacent frames</p>
<img class="fragment" src="img-ia/tracks_10.png"/>
<p class="fragment"><code>Gap-closing Max Distance</code> Limits search radius in non-adjacent frames</p>
</div>
</section>
<section data-state="apps2"><style>.apps2 header:after { content: "Tracking: Hands On"; }</style>
<p>Common outputs from Trackmate: (1) Tracking data</p>
<img class="left half" src="img-ia/trackmate_06.png"/>
<img class="right half" src="img-ia/trackmate_08.png"/>
</section>
<section data-state="apps2"><style>.apps2 header:after { content: "Tracking: Hands On"; }</style>
<p>Common outputs from Trackmate: (2) Movies!</p>
<img class="left half" src="img-ia/trackmate_07.png"/>
<img class="right third" src="img-ia/trackmate_09.gif"/>
<div class="clear"></div>
<p>You may have to adjust the display options to get the tracks drawing the way you want (try "Local Backwards")</p>
</section>
<section data-state="apps3"><style>.apps3 header:after { content: "Tracking: Common Problems"; }</style>
<p>While simple, Tracking is not to be taken on lightly!</p>
<ul>
<li>For the best results make sure the inter-particle distance is greater than the frame-to-frame movement. If not, try to increase resolution (more pixels) or decrease interval (more frames)</li>
<li>The search radius increases processing time with HUGE datasets but in most case, has little effect on processing time. Remember that closer particles will still be linked preferably if possible.</li>
<li>Keep it simple! Unless you have problems with noise, blinking, focal shifts and similar, do not introduce gap closing as this may lead to false-linkages</li>
<li>'Simple LAP tracker' does not include merge/spliting events, however Trackmate ships with the more complex 'LAP Tracker' which can handle merge/splitting events (but keep in mind your system!)</li>
<li>Quality control! Look at your output carefully and make sure you're not getting 'jumps' where one particle is linked to another incorrectly</li>
</ul>
</section>
<!-- ---------------------- APPLICATIONS STITCHING -------------------------- -->
<section data-menu-title="Stitching" data-state="apps40z"><style>.apps40z header:after { content: ""; }</style>
<h1>Applications: Stitching</h1>
<h4>Resolution vs field size, stitching, using overlaps, issues and bugs</h4>
</section>
<section data-state="apps40"><style>.apps40 header:after { content: "Image Stitching"; }</style>
<p>Increasing <b>resolution</b> (via higher NA lenses) almost always leads to a reduced <b>field</b></p>
<img class="twothirds" src="img-ia/stitch_01.png"/>
<p>Often you will want both!</p>
</section>
<section data-state="apps40"><style>.apps40 header:after { content: "Image Stitching"; }</style>
<p>We can achieve this with tile scanning (IE. imaging multiple adjacent fields)</p>
<img class="twothirds" src="img-ia/stitch_02.png"/>
<p>Stitching is the method used to put them back together again</p>
</section>
<section data-state="apps41"><style>.apps41 header:after { content: "Image Stitching: no overlap"; }</style>
<p>Images acquired as adjacent frames (zero overlap)</p>
<div class="left twothirds" style="font-size:80%">
<ul>
<li>Open <a href="material/Stitching_noOverlap.zip"><code>Stitching_noOverlap.zip</code></a>. Unzip to the desktop.</li>
<li>Run <code>[Plugins > Stitching > Grid/Collection Stitching]</code></li>
<li>Select: Column by Column | Up & Right</li>
<li>Settings:
<ul><li>Grid Size: 2x2</li>
<li>Tile Overlap: 0</li>
<li>Directory: {path to your folder}</li>
<li>File Names: replace the numbers with <code>{i}</code> zero pad with more <code>i</code> - noOverlap_{iii}.tif</li>
<li>Uncheck all the options [OPTIONAL] Check add as ROI</li></ul>
</li>
<li>Hit OK (accept fast fusion)</li>
</ul>
<!-- <img class="third" src="img-ia/stitch_05.png"/> -->
</div>
<img class="third" src="img-ia/stitch_04.png"/>
</section>
<section data-state="apps41"><style>.apps41 header:after { content: "Image Stitching: no overlap"; }</style>
<img class="third" src="img-ia/stitch_06.png"/>
<img class="third fragment" src="img-ia/stitch_07.png"/>
<p class="fragment">Why do the images not line up?</p>
</section>
<section data-state="apps41"><style>.apps41 header:after { content: "Image Stitching: no overlap"; }</style>
<p>Run <code>[Plugins > Stitching > Grid/Collection Stitching]</code> again</p>
<p>Check the settings are as before but add "compute overlap" and hit OK</p>
<img class="third fragment" src="img-ia/stitch_08.png"/><img class="twothirds fragment" src="img-ia/stitch_09.png"/>
</section>
<section data-state="apps42"><style>.apps42 header:after { content: "Image Stitching: 10% overlap"; }</style>
<ul>
<li>Open <a href="material/Stitching_Overlap.zip"><code>Stitching_Overlap.zip</code></a>. Unzip to the desktop.</li>
<li>Run <code>[Plugins > Stitching > Grid/Collection Stitching]</code> again</li>
<li>Change the directory, filename and overlap.</li>
<li>Hit OK</li>
</ul>
<img class="third fragment" src="img-ia/stitch_10.png"/>
<div class="half right fragment">
<p>Two things to remember when using Grid/Collection Stitching:</p>
<ol>
<li>Default (R,G,B) LUTs are used after stitching (<a href="#/52"><i class="fa fa-external-link"></i></a>)</li>
<li>All calibration information is stripped (<a href="#/19"><i class="fa fa-external-link"></i></a>)</li>
<li>Stitching will have a harder time with sparse features or uneven illumination (<a href="https://postacquisition.wordpress.com/2015/06/17/its-a-stitch-up/" target="_blank">example here</a>)</li>
</ol>
</div>
</section>
<section data-state="apps43"><style>.apps43 header:after { content: "Image Stitching: Issues"; }</style>
<p>The most important point is to know your data!</p>
<ul>
<li>Grid layout (dimensions and order!)</li>
<li>Overlap</li>
<li>Calibration</li>
</ul>
</section>
<section data-state="end"><style>.end header:after { content: "That's all!"; }</style>
<p>Thank you for your attention!</p>
<p>We will send you a survey for feedback; please take 2 minutes to answer, it helps us a lot!</p>
</section>
</div> <!-- ---------------------- END OF SLIDES -------------------------- -->
</div>
<!-- Footer -->
<img style="position:fixed;bottom:1em;right:1em;" src="img/jax.jpg" width="20%">
<!--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>