This repository has been archived by the owner on Mar 15, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
980 lines (900 loc) · 49.9 KB
/
index.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
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
<!doctype html>
<html>
<style type="text/css">
.centerImage
{
text-align:center;
display:block;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="static/favicon.ico"/>
<title>OpenCV Workshop</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/white.css">
<!-- <link rel="import" href="static/helloworld.html"> -->
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.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 );
Reveal.configure({ backgroundTransition: 'zoom' })
</script>
<script src="jquery.js"></script>
<!-- <script>
$(function(){
$("#includedContent").load("templates/opencv.html");
});
</script> -->
</head>
<body>
<div class="reveal">
<div class="slides">
<!--MAIN INTRO -->
<section>
<div style="border-top: 24px solid #ff0000;border-bottom: 24px solid #0000ff; border-left: 24px solid #00ff00; border-right: 24px solid #00ff00;">
<p style='font-size: 2.3em;'>OpenCV Workshop</p>
</div>
</section>
<!--INTRO TO OPEN CV-->
<section>
<section style='font-size: 1.7em; font-style: italic;'>What is Computer Vision and OpenCV? Is it a field of computer science?</section>
<section>
<div class="alert alert-success" role="alert">Yes. It enables computers to identify and process objects in images and videos</div>
<div class="alert alert-info" role="alert">OpenCV (Open Source Computer Vision Library) is a open source Python/C++ library containing functions to manipulate these data.</div>
<p class="fragment">It contains more than 2500 optimized algorithms!</p>
</section>
<section data-transition="zoom"><img src="https://www.nidec.com/-/media/www-nidec-com/nidec-copalelectronics/img/lidar_automotive-various-sensors_en.jpg"></img><br><p style="font-size:0.7em;" >sensors emitting different frequencies of EM waves</p>
</section>
<section data-transition="zoom"><img src="https://miro.medium.com/max/3072/1*R6vHYJrW_dTMLZq3VrSA1g.jpeg"></img>
</section>
<section data-transition="zoom"><img src="https://www.teslarati.com/wp-content/uploads/2019/11/tesla-dog-detection.jpg"></img>Tesla's Computer vision
</section>
<section id="fragments">
<p>Applications of computer vision</p>
<ul class="fragment">
<li>Human and Technological Interaction (Gestures Recognition)</li>
<li>Method of (secure?) authentication (facial recognition) --> Intruders?
</li>
<li>Detecting of safety lapses/building construction in engineering</li>
<li>Self-driving cars</li>
<li class="fragment"><em>And many more...!</em></li>
</ul>
</section>
</section>
<!--Beginner Install Instructions -->
<section>
<section>
<div style="background-color: #006699; padding: 15px; border-top: 24px solid #b3ccff;">
<p style="font-size: 2.3em; color:#ffffff">Installing OpenCV</p>
</div>
<div style='font-size: 1.3em; background-color:#6699cc; color:#d9e6f2; font-style:italic;' class="alert alert-info" role="alert">What is a library?</div>
</section>
<section id="fragments">
<div class="fragment">
<pre style='background-color: #666699; color:#ffffff; border-left: 8px solid #3d3d5c; padding: 4px; white-space: pre-wrap;'>We can either install from the original source or....</pre></div>
<div class="fragment">
<pre style='background-color: #6699cc; color:#ffffff; border-left: 8px solid #3d3d5c; padding: 4px; white-space: pre-wrap;'>Install using PIP! Pip is a package manager, which helps you to easily setup and get access to python libraries</pre></div>
<div class="fragment">
<pre style='background-color: #6699cc; color:#ffffff; border-left: 8px solid #3d3d5c; padding: 4px; white-space: pre-wrap;'>
<img src="static/libraries.jpg" style="width:300px;"><br>Yes libraries! Python has many well developed libraries by the community.</img></pre></div>
<div class="fragment">
<pre style='background-color: #666699; color:#ffffff; border-left: 8px solid #3d3d5c; padding: 4px; white-space: pre-wrap;'>Now Let's open up your terminal</pre></div>
</section>
<!--INTRO TO TERMINAL-->
<section>
<div style='font-size: 2em; color: #ffffff;background-color:#ffcc00; border-left: 20px solid #ff8000;' class="alert alert-info" role="alert" >Terminal</div>
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn1.macworld.co.uk%2Fcmsdata%2Ffeatures%2F3608274%2FTerminalicon2_thumb800.png&f=1&nofb=1" width='50%'></img>
</section>
<section>
<p>The following slides are:</p>
<div class="alert alert-danger" role="alert">For Apple MAC/Linux Users</div>
<p class="fragment">Windows Users, scroll right down..</p>
</section>
<section>
Ctrl-Alt-T to launch the terminal
<img src="static/terminal.jfif" width='70%'></img>
<p style="font-size: 0.8em;">Alternatively, click on its logo or open it from the menu.</p>
</section>
<section>
<p style="color: #aaa;">Terminal commands</p>
<div style="background-color: #affaaf; padding: 1px; border-left: 6px solid #33b333;" class="fragment">
<p style= 'font-size: 0.8em; text-align: center;'>Showing items in your current directory</p>
<pre><code class="language-bash Terminal">ls</code>(List)>> Desktop Documents Home Downloads Music </pre>
</div>
<pre class="fragment"><code class="language-bash Terminal">cd</code>Use this code to navigate to another directory</pre>
<pre class="fragment"><code class="language-bash Terminal">cd Documents</code>Navigating to the "Documents Directory" </pre>
<pre class="fragment"><code class="language-bash Terminal">cd ..</code>Navigating out of the current directory</pre>
</section>
<!--Windows-->
<section>
<p>The following slides are:</p>
<div class="alert alert-danger" role="alert">For Windows Users</div>
<p class="fragment">Mac Users, scroll right down for the task below</p>
</section>
<section>
<img src="https://www.howtogeek.com/wp-content/uploads/2017/02/Windows_106-650x300.jpg" width="390" height="350" alt="Analysis"><br>
<p>Press the Windows Key and type cmd</p>
<p>Alternatively, press "Windows button-r" and type cmd. Press enter.</p>
</section>
<section>
<p style="color: #aaa;">Command Prompt (CMD) commands</p>
<div style="background-color: #affaaf; padding: 1px; border-left: 6px solid #33b333;" class="fragment">
<p style= 'font-size: 0.8em; text-align: center;'>Showing items in your current directory</p>
<pre><code class="language-bash Terminal">dir</code>(List)>> Desktop Documents Home Downloads Music </pre>
</div>
<pre class="fragment"><code class="language-bash Terminal">cd</code>Use this code to navigate to another directory</pre>
<pre class="fragment"><code class="language-bash Terminal">cd Documents</code>Navigating to the "Documents Directory" </pre>
<pre class="fragment"><code class="language-bash Terminal">cd ..</code>Navigating out of the current directory</pre>
</section>
<!--section id="fragments">
<div style="background-color: #006699; padding: 10px; border-top: 10px solid #b3ccff;">
<p style="font-size: 1em; color:#ffffff">Installing Jupyter Notebook</p>
</div>
<div class="fragment">
<pre style='background-color: #666699; color:#ffffff; border-left: 8px solid #3d3d5c; padding: 4px; white-space: pre-wrap;'><code class="language-python Terminal" style="white-space: pre-line;">pip install jupyterlab</code>Installing of Jupyter Notebook!</pre></div>
</section-->
<section id="fragments">
<div style="background-color: #006699; padding: 10px; border-top: 10px solid #b3ccff;">
<p style="font-size: 0.8em; color:#ffffff">Installing OpenCV</p>
</div>
<div class="fragment">
<pre style='background-color: #666699; color:#ffffff; border-left: 8px solid #3d3d5c; padding: 4px; white-space: pre-wrap;'><code class="language-python Terminal" style="white-space: pre-line;">python --version</code>Check for python install. It should be python3!</pre></div>
<div class="fragment">
<pre style='background-color: #666699; color:#ffffff; border-left: 8px solid #3d3d5c; padding: 4px; white-space: pre-wrap;'><code class="language-python Terminal" style="white-space: pre-line;">pip install matplotlib</code>Installing Matplotlib Visualization Library</pre></div>
<div class="fragment">
<pre style='background-color: #666699; color:#ffffff; border-left: 8px solid #3d3d5c; padding: 4px; white-space: pre-wrap;'><code class="language-python Terminal" style="white-space: pre-line;">pip install numpy</code>Installing Numpy Library for managing large arrays and perform math operations</pre></div>
<div class="fragment">
<pre style='background-color: #666699; color:#ffffff; border-left: 8px solid #3d3d5c; padding: 4px; white-space: pre-wrap;'><code class="language-python Terminal" style="white-space: pre-line;">pip install opencv-python</code>Installing Open CV Library</pre></div>
</section>
</section>
<!--INTRO TO PYTHON-->
<section>
<section>
<div style="background-color: #ffb3cc; padding: 15px; border-left: 8px solid #ff0055;">
<p style="font-size: 1.9em;">Refresher to Python</p>
</div>
</section>
<section id="fragments">
<!--<pre class="fragment"><code class="language-python Terminal">message = "Who here is familiar with Python?"</code></pre>-->
<p>Printing(displaying) things in python</p>
<p style="font-size:0.6em;">You can print a value directly or the variable, depending on the use case.</p>
<p style="font-size:0.7em;">For example, printing the value directly:</p>
<pre class="fragment"><code class="language-python Terminal">print("Who here is familiar with Python?")</code> >>> Who here is familiar with Python?</pre>
<div class="fragment">
<p style="font-size:0.7em;">Or declaring the data as a variable and printing the variable:</p>
<pre><code class="language-python Terminal">number = 12345
print(number)</code> >>> 12345</pre>
</div>
</section>
<section id="fragments">
<pre class="fragment"><code class="language-python Terminal">running = False</code>Boolean variable (True or False)</pre>
<pre class="fragment"><code class="language-python Terminal">RAM = 4</code>Integer variable</pre>
<pre class="fragment"><code class="language-python Terminal">CPU_GHZ = 1.5</code>Float variable</pre>
<pre class="fragment"><code class="language-python Terminal">name = "Raspberry Pi"</code>String variable</pre>
<pre class="fragment">
<!-----------><code class="language-python Terminal">tools = ["Mouse", "Keyboard", "Monitor", "HDML Cable", "Micro USB Power Cable", "Micro SD Card"]</code>Array (An array in Python can contain any types of variables, <br/>be it integer, float, or string, or even all at once.)</pre>
</section>
<section id="fragments">
<p style="font-size: 0.7em;">How to check if variables meets a certain criteria?</p>
<pre class="fragment"><code class="language-python Terminal" data-line-numbers>if RAM == 5: # Conditional statement
print("A pi has 5GB of RAM.")
elif RAM == 4: # Second conditional statement
print("A pi has 4GB of RAM.")
else: # If all the above is false
print("I do not know...")
</code>If-elif-else conditionals & comments</pre>
</section>
<section>
<p style="font-size: 0.7em;">Doing simple math on numbers in python.</p>
<p style="font-size: 0.6em;">(applies to both integers and floats)</p>
<pre class="fragment"><code class="language-python Terminal">x = 10</code></pre>
<pre class="fragment">Addition<code class="language-python Terminal">print(x + 8)</code>18</pre>
<pre class="fragment">Subtraction<code class="language-python Terminal">print(x - 3.5)</code>6.5</pre>
<pre class="fragment">Multiplication<code class="language-python Terminal">x * 2.6</code>26.0</pre>
<pre class="fragment">Division<code class="language-python Terminal">x / 4</code>2.5</pre>
</section>
<section>
<p style="font-size: 0.7em;">Note:</p>
<div style="background-color: #ff7346; padding: 1px; border-left: 6px solid #7a211b;" class="fragment">
<p style="font-size: 0.5em;">Please take note that some math operations may return unexpected types.<br><br>
For example, 2.6*10 is expected to be 26 but python returns 26.0</p>
</div>
<div style="background-color: #ff7346; padding: 1px; border-left: 6px solid #7a211b;" class="fragment">
<p style="font-size: 0.5em;">Another thing to take note is that these expressions do not change the actual variable. For example: </p>
</div>
<div style="background-color: #ff7346; padding: 1px; border-left: 6px solid #7a211b;" class="fragment">
<pre><code class="language-python Terminal">x = 10
x + 10
print(x)</code>10</pre>
</div>
<div style="background-color: #48d1cc; padding: 1px; border-left: 6px solid #008b8b;" class="fragment">
<p style="font-size: 0.5em;">To actually change the variable, assign the equation to the variable again. For example: </p>
<pre class="fragment"><code class="language-python Terminal">x = 10
x = x + 10
print(x)</code>20</pre>
</div>
</section>
<section>
<p style="font-size: 0.7em;">Doing more math on numbers in python.</p>
<p style="font-size: 0.6em;">(applies to both integers and floats)</p>
<pre class="fragment"><code class="language-python Terminal">RAM += 5</code>Shorthand for "RAM = RAM + 5"</pre>
<pre class="fragment"><code class="language-python Terminal">RAM = RAM / 2</code>Divison (returns a float if number has a remainder)</pre>
<pre class="fragment"><code class="language-python Terminal">RAM = RAM // 2</code>Floor Division (returns an integer)</pre>
<pre class="fragment"><code class="language-python Terminal">RAM = RAM % 2</code>Modulo (returns the remainder when RAM is divided by 2)</pre>
</section>
<section id="fragments">
<pre class="fragment">
<code class="language-python Terminal" data-line-numbers>
def addition (a, b):
result = a + b
return result
addition(3,5)
>>> 8
</code>
Call the function using "function_name(inputs)"
</pre>
<pre class="fragment">
<code class="language-python Terminal" data-line-numbers>
def addition (a, b):
result = a + b
print(result)
</code>
A function can also not return anything.
</pre>
</section>
<section id="fragments">
<pre class="fragment">
<code class="language-python Terminal" data-line-numbers>
for i in range (5):
print(i)
</code>
>>> 0 1 2 3 4
</pre>
<pre class="fragment">
<code class="language-python Terminal" data-line-numbers>
for i in range (1, 10, 2):
print(i)
</code>
>>> 1 3 5 7 9
</pre>
</section>
<section>
<pre class="fragment">
<code class="language-python Terminal" data-line-numbers>
name = "Raspberry"
for char in name:
print(char)
</code>
>>> R a s p b e r r y
</pre>
</section>
<section>
While Loops → Continues while condition is met
<pre class="fragment">
<code class="language-python Terminal" data-line-numbers>
name = "recording"
while True:
print(name)
</code>
>>> recording
.....
>>> recording
</pre>
Continues on infinitely
</section>
<section>
<pre class="fragment">
<code class="language-python Terminal" data-line-numbers>
import numpy
import cv2
</code>Using pre-built functions from libraries.
</pre>
</section>
<section>
<div class="alert alert-danger" role="alert">Task:</div>
<p class="fragment">Use OCR to detect words from an image. Hint: use the google library</p>
</section>
</section>
<!--INTRO TO RASPBERRY PI-->
<section>
<section>
<div style='font-size: 2em; border-left: 8px solid #1a8cff;' class="alert alert-info" role="alert" >Raspberry Pi</div>
<p style='font-size: 1.3em; font-style:italic; color: #4d9900'>the hardware</p>
</section>
<section>
<p style='font-size: 1.8em; color: #876543'><b>What is a Raspberry Pi?</b></p>
<p class='fragment'>A single board computer, which contains</p>
<ul class='fragment'>
<li>CPU</li>
<li>Random Access Memory (RAM)</li>
<li>Wifi/Bluetooth</li>
</ul>
<p class='fragment'>So basically, like a regular computer but with some different features.</p>
</section>
<section data-transition="zoom">
<img src="https://raw.githubusercontent.com/SeeedDocument/Raspberry-Pi-4/master/img/hardware-overview-1400.jpg">Hardware Overview (Raspberry Pi 4)</img>
</section>
<section data-transition="zoom">
<img src="static/make.png">Projects are found all over the internet</img>
</section>
<section data-background-iframe="https://en.wikipedia.org/wiki/Raspbian" data-background-interactive>
<div style="position: relative; right:35px; width: 40%; background-color: rgb(160, 217, 255); color: rgb(0, 61, 110); padding: 10px; font-size: 45px; text-align: center; border-radius: 15px; font-weight:bold;">
<p>Raspbian OS</p>
</div>
<div style="position: relative; right:35px; width: 40%; padding: 10px; background-color: rgb(208, 255, 196); color: #2e4b2e; font-size: 22px; text-align: center; border-radius: 15px;">
<span class="fragment">Similar to (Windows/MacOS), Raspbian Operating System manages </span>
<span class="fragment">computer hardware,</span>
<span class="fragment">software resources and programs</span>
</div>
</section>
<section data-background-iframe="https://upload.wikimedia.org/wikipedia/commons/1/1b/Linux_Distribution_Timeline.svg" data-background-interactive>
<div style="position: relative; right:35px; width: 40%; background-color: rgb(146, 182, 206); color: rgb(0, 61, 110); padding: 10px; text-align: center; border-radius: 15px; font-weight:bold;">
<p style="font-size:0.9em">It is based off the open source Linux Distribution Debian</p>
<p style="font-size:0.7em">The software gives users great control over their computers</p>
</div>
</section>
</section>
<!--HISTOGRAM EXPLAINED-->
<section>
<section>
<div style="background-color: #b3b3ff; padding: 15px; border-left: 9px solid #6666ff;">
<p style="font-size: 2.3em;">Histograms </p>
<button id="concepts2" style="background: #5c5c8a; color: white; border-radius: 30px;">Concepts covered</button>
<div style='color: white; background-color: #6666cc; border-left: 6px solid #202060; padding: 4px; font-size: 0.8em; display: none;' id="concepts2-1">
<ul>
<li>OpenCV CalcHist</li>
<li>Conversion of 2d to 1d arrays</li>
</ul>
</div>
</div>
</section>
<section>
Images are made up of a large number of pixels.
<br/>
<left><img src="https://bogotobogo.com/python/OpenCV_Python/images/BasicImageOperations/CloudyGoldenGate_grayscale.jpg" width="250" height="192" alt="Gate"></left>
<right><img src="https://i.imgur.com/Ta1QtPf.jpg" width="250" height="192" alt="Zoomed"></right>
<right><img src="https://i.imgur.com/cPsN3pG.jpg" width="250" height="192" alt="Zoomed"></right>
<br/>Each pixel has a brightness intensity value, showing how bright that spot in the image is.
</section>
<section>
Image intensity values range from 0 to 255,
<br>giving rise to a total of 256 values.
<img src="https://bhushanshikhare.files.wordpress.com/2015/05/histogram-legend.jpeg" align="middle">
<br>
Grayscale Histogram
</section>
<section>
Colored images are made up of 3 channels - red, green and blue.
<br>
<left><img src="https://geometrian.com/programming/reference/subpixelzoo/square_RGB.png" width="350" height="300" alt="RGB" ></left>
<right><img src="https://www.mathworks.com/help/examples/matlab/win64/ColorAnalysisWithBivariateHistogramExample_06.png" width="350" height="300" alt="Histogram"></right>
<br>
RGB Histogram
</section>
<section data-transition="slide-in zoom-out">
<img src="https://www.mathworks.com/help/examples/matlab/win64/ColorAnalysisWithBivariateHistogramExample_06.png" width="700" height="480" alt="Histograms"></img>
<p>
The X and Y-axis indicates the intensity and frequency of a certain color value respectively
</p>
</section>
<section data-transition="zoom-in convex-out">
<p style= 'font-size: 2.2em;
text-align: center;
color: #3385ff;
font-style: oblique;
text-shadow: 4px 8px #b3d1ff;'>
Okay, but what do people even use histograms for?
</p>
</section>
<section data-transition="zoom-in convex-out" id="fragments">
<img src=" https://prd-wret.s3-us-west-2.amazonaws.com/assets/palladium/production/s3fs-public/styles/full_width/public/thumbnails/image/wss-cycle-streamflow-rain-chart.gif" alt="Streamflow Hisogram"><br>
It allows geographers and hydrologists to map out the intensity and analyse rainfall.
</section>
<section data-transition="zoom-in" id="fragments">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F3.bp.blogspot.com%2F_8-OrJOvdwVI%2FS2plsI0y-iI%2FAAAAAAAAACc%2FNILMxS5hXQw%2Fs640%2FHistogramBasicTutorial.jpg&f=1&nofb=1" width="629" height="300" alt="Photo-histogram"><br>
It allows photographers to check the exposure (how bright or dark) of an image
</section>
<!--OPEN CV + HISTOGRAM ACTIVITY-->
<section>
<p style='font-size: 1.3em;'>Let's start coding! We will ...</p>
<p>open files/live webcam video</p>
<p>display image/video histograms</p>
</section>
<section>Two ways to analyse pixel data of image(s):
<br>1. Coloured histogram
<br>2. Monochrome histogram
<br><br>Using two differences sources:
<br>1. Static image
<br>2. Live or dynamic video
</section>
<section>
What are bins? </br>
Let our dataset be:<br>
<span style='font-size: 0.7em;'>0, 1, 1, 2, 3, 3, 3, 3, 4, 5, 6, 6, 6, 7, 8, 8, 9</span><br><br>
11 BINS:<br>
<img src="https://media.discordapp.net/attachments/709962749228351518/711166690947367002/unknown.png" width="518" height="384" alt="histogram with 11 bins"><br><br>
</section>
<section>
What are bins? </br>
Let our dataset be:<br>
<span style='font-size: 0.7em;'>0, 1, 1, 2, 3, 3, 3, 3, 4, 5, 6, 6, 6, 7, 8, 8, 9</span><br><br>
6 BINS:<br>
<img src="https://media.discordapp.net/attachments/709962749228351518/711167671210737674/unknown.png" width="490" height="384" alt="histogram with 6 bins">
</section>
<section>
<h2>Static Histogram</h2>
<div class="fragment">
<p>Accepting image file using OpenCV</p>
Colour:
<pre><code class="language-python Terminal" style="white-space: pre-line;">cap = cv2.imread("image.png")</code></pre>
Monochrome:
<pre><code class="language-python Terminal" style="white-space: pre-line;">cap = cv2.imread("image.png", 0)</code></pre>
</div>
</section>
<section>
<p style="font-size: 1.2em">Plotting histogram</p>
<div class="fragment">
RGB:
<pre><code class="language-python Terminal" data-line-numbers>plt.figure()
for i,col in enumerate(color): # for each color channel
histr = cv2.calcHist([img],[i],None,[256],[0,256])
plt.plot(histr,color = col)
plt.xlim([0,256]) </code></pre>
<pre style='background-color: #e7f3fe; border-left: 6px solid #2196F3; padding: 4px;'> 🛈 256 represents the intensity range of each pixel</pre>
</div>
</section>
<section data-transition="zoom">
<div class="fragment">Grayscale:
<pre><code class="language-python Terminal" style="white-space: pre-line;">plt.hist(cap.ravel(),256,[0,256])</code></pre>
<img src="https://www.w3resource.com/w3r_images/numpy-manipulation-ravel-function-image-1.png" width="301" height="254"></img>
</div>
</section>
<section>
Show histogram
<pre><code class="language-python Terminal">plt.show()</code></pre>
</section>
<section>
<h2>Live Histogram</h2>
<div class="fragment">
<br>Accepting video file using OpenCV
<pre><code class="language-python Terminal">cap = cv2.VideoCapture('video.mp4')</code></pre>
</div>
<div class="fragment">
Accepting live webcam video feed
<pre><code class="language-python Terminal">cap = cv2.VideoCapture(0)</code></pre>
</div>
</section>
<section>
Making histogram live <p>😃</p>
<pre><code class="language-python Terminal"># continues running while video is on
while True:
#write code from static histogram part here</code></pre>
<pre style='background-color: #ffffcc; border-left: 6px solid #ffeb3b; padding: 4px; white-space: pre-line;' class="fragment"> ❓ <b>Place following lines of code in this loop</b>
To show the whole video or webcam feed, this code needs to be put in a loop to display the latest frame constantly.
This is because a video is made of many frames.</pre>
</section>
<section>
<img class="plain" src="https://365psd.com/images/istock/previews/1016/101676959-danger-warning-attention-sign-icon.jpg" width="200" height="200" align="middle" alt="ALERT">
<p style="color:red; font-size: 2.4em;">WARNING: Code Explanation Ahead!</p>
</section>
<!--section>
Visuals - line settings
<pre><code class="language-python Terminal" data-line-numbers># Initialize plot line object(s). Turn on interactive plotting and show plot.
lineR, = ax.plot(np.arange(bins), np.zeros((bins,)), c='b', lw=lw, alpha=alpha)
ax.set_xlim([0, bins-1])
ax.set_ylim([0, 8000])
plt.ion()
plt.show()</code></pre>
</section-->
<!--section>
While loop for continue processing frames
<pre><code class="language-python Terminal" data-line-numbers>while True:
(grabbed, frame) = cap.read()
if not grabbed:
break
# Normalize histograms by no. of pixels per frame.
numPixels = np.prod(frame.shape[:2])</code></pre>
</section-->
<!--section>
<em>[Inside the while loop]</em>
<pre><code class="language-python Terminal" data-line-numbers> if color == 'rgb':
cv2.imshow('RGB', frame)
(b, g, r) = cv2.split(frame)
histogramR = cv2.calcHist([r], [0], None, [bins], [0, 255])
histogramG = cv2.calcHist([g], [0], None, [bins], [0, 255])
histogramB = cv2.calcHist([b], [0], None, [bins], [0, 255])
lineR.set_ydata(histogramR)
lineG.set_ydata(histogramG)
lineB.set_ydata(histogramB)
else:
histogram = cv2.calcHist([gray], [0], None, [bins], [0, 255]) / numPixels</code></pre>
</section-->
<section>
<div class="fragment">Pause the graph to give time to refresh
<!--style>
.blinkcode {
animation: blinker 0.001s linear infinite;
}
@keyframes blinker {
20% {
opacity: 0.3;
}
}
</style-->
<pre class="blinkcode" style="background-color: #b3b3e6; padding: 4px; white-space: pre-line; border-bottom: 8px solid #333399;"><code class="language-python Terminal" data-line-numbers># refreshes the graph by pausing the graph
plt.pause(0.001)
''' add code here to give labels for x/y axis '''
''' add code here to show graph '''
plt.clf() # Clears the figure but keeps the window</code></pre>
</div>
<div class="fragment">
<p style="font-size: 1em">End the code sequence with keyboard input "q"</p>
<pre><code class="language-python Terminal" data-line-numbers>if cv2.waitKey(1) & 0xFF == ord('q'):
break</code></pre>
</div>
<!--div class="fragment">
<em>[Outside the while loop]</em>
<pre><code class="language-python Terminal" data-line-numbers>cap.release() # to stop the camera from recording
cv2.destroyAllWindows() # to close live feed
plt.close() # to close histogram</code></pre>
</div-->
</section>
<section>
<div class="fragment">
<p style="font-size: 1em">Gets the dimensions of the image and set a reasonable limit</p>
<pre style="border-bottom: 6px solid #00b3b3;"><code class="language-python Terminal" data-line-numbers># gets total number of pixels and sets arbitrary value
numpix = int((img.shape[0]*img.shape[1])/30)
</code>Arbitrary, adjust if required.</pre>
</div>
<div class="fragment">
<p style="font-size: 1em">Prevents y-axis from shifting due to change in video histogram</p>
<pre style='background-color: #99ff99; border-bottom: 6px solid #009900; padding: 4px;'><code class="language-python Terminal" data-line-numbers>#get current axis and set a limit on the y values
plt.gca().set_ylim([0, numpix])</code></pre></div>
</section>
<!--END OF HISTOGRAM-->
</section>
<!--Trackbar-->
<section>
<section><div style="background-color: #00b386; padding: 15px; border-left: 34px solid #66ffd9;">
<p style="font-size: 2.1em; color:#ffffff;">Trackbars </p>
<button id="toggleTrackbar" style="background: #007acc; color: white; border-radius: 30px; margin: 0 auto;">Concepts covered</button>
<br />
<ul id="trackbarContents" style="display: none">
<li>trackbar manipulation</li>
<li>hsv colorspaces</li>
<li>bitwise operators</li>
</ul>
</div>
</section>
<section>
<p>Importing essential modules</p>
<pre><code class="language-python" style="white-space: pre-line;">import numpy as np
import cv2
</code></pre>
<pre style='background-color: #e7f3fe; border-left: 6px solid #2196F3; padding: 4px; white-space: pre-wrap;' class="fragment"> 🛈 What are these for? Not all are needed now<ul>
<li>Numpy is a useful mathematical library that allows us to <br/>work easier with the large array of pixel information.</li>
<li>cv2 contans useful functions whose algorithms are efficient in processing images and video.</li>
</section>
<section>
<p style="font-size: 1.2em">Creating the trackbars</p>
<div class="fragment">Create a window with set width and height:
<pre><code class="language-python Terminal" data-line-numbers>frame = np.zeros((312, 500, 3), np.uint8)
cv2.namedWindow('trackbar')</code></pre>
<pre style='background-color: #e7f3fe; border-left: 6px solid #2196F3; padding: 4px;'> 🛈 </pre>
</div>
<div class="fragment">
Create 6 trackbars for hue, saturation and value
<pre><code class="language-python Terminal" data-line-numbers>cv2.createTrackbar('lowH','trackbar',0,179,nothing)
cv2.createTrackbar('highH','trackbar',179,179,nothing)
cv2.createTrackbar('lowS','trackbar',0,255,nothing)
cv2.createTrackbar('highS','trackbar',255,255,nothing)
cv2.createTrackbar('lowV','trackbar',0,255,nothing)
cv2.createTrackbar('highV','trackbar',255,255,nothing)</code></pre>
</div>
</section>
<section>
<p style="font-size: 1.2em">Getting trackbar position</p>
<div class="fragment">Format:
<pre><code class="language-python Terminal" data-line-numbers>#cv2.getTrackbarPos(trackbar_label, trackbar_window)
cv2.getTrackbarPos('lowH','trackbar')</code></pre>
<pre style='background-color: #e7f3fe; border-left: 6px solid #2196F3; padding: 4px;'> 🛈 </pre>
</div>
<div class="fragment">
Get the hsv values for lower and upper bound
<pre><code class="language-python Terminal" data-line-numbers>h = cv2.getTrackbarPos('lowH','trackbar')
s = cv2.getTrackbarPos('lowS','trackbar')
v = cv2.getTrackbarPos('lowV','trackbar')
low(or high) = np.array([h,s,v])</code></pre>
</div>
</section>
<section>
<P>What is HSV/HSL?</P>
<div style="background-color: #00b386; padding: 15px; border-left: 34px solid #66ffd9; font-size: 0.8em;">HSV is just another format to represent colours, like RGB</div>
<div class="fragment">
<img src="static/hsv.png" height="470px">
</div>
</section>
<section data-background-iframe="https://alloyui.com/examples/color-picker/hsv" data-background-interactive>
</section>
<section>
<p style="font-size: 1.2em">Process the Data</p>
<div class="fragment">Convert the image data
<pre><code class="language-python Terminal" data-line-numbers>frame = cv2.cvtColor(frame, cv2.COLOR_BGR2HSV)</code></pre>
<pre style='background-color: #e7f3fe; border-left: 6px solid #2196F3; padding: 4px;'> 🛈 cv2 stores and utilises images in the BGR format</pre>
</div>
<div class="fragment">
Create a mask
<pre><code class="language-python Terminal" data-line-numbers>mask = cv2.inRange(frame, low, high)</code></pre>
</div>
<div class="fragment">
Apply the mask
<pre><code class="language-python Terminal" data-line-numbers>res = cv2.bitwise_and(frame, frame, mask=mask)</code></pre>
</div>
</section>
<section>
<p style="font-size: 1.2em">But wait!</p>
<div class="fragment">What does
<pre><code class="language-python Terminal" style="text-align: center !important;">cv2.bitwise_and()</code></pre>
actually do?
</div>
<div class="fragment"><img style="border:0;" src="static/thinking.png" height="400px" width="400px"></div>
</section>
<section data-background-image="static/bitwise.jpg">
</section>
<section data-background-image="static/matrix.gif">
</section>
<section>
Convert the image back to BGR format
<pre><code class="language-python Terminal" data-line-numbers>res = cv2.cvtColor(res, cv2.COLOR_HSV2BGR)
cv2.imshow("mask", res)
if cv2.waitKey(1) == ord('q'):
break
</code></pre>
Release the camera and close windows<br>(Outside the while loop)
<pre><code class="language-python Terminal" data-line-numbers>cap.release()
cv2.destroyAllWindows()
</code></pre>
</section>
</section>
<!-- OPENCV BOUNDING BOX-->
<section>
<section>
<div style='font-size: 2.2em; background-color:#9fbfdf; border-left: 8px solid #336699;' class="alert alert-info" role="alert" >Color Detection</div>
<div class="alert alert-info">Isolating objects using distinct colors</div>
<button id="concepts3" style="background: #007acc; color: white; border-radius: 30px;">Concepts covered</button>
<div style='color: white;background-color: #2eb8b8; border-left: 6px solid #70dbdb; padding: 4px; font-size: 0.8em; display: none;' id="concepts3-1">
<ul>
<li>Making use of masks</li>
<li>Functional Programming</li>
</ul>
</div>
</section>
<section data-transition="zoom">
<p>How it works</p>
<img src="static/sg.png" width="650" height="380" align="middle" alt="SG"></img>
<br>
<p>If we were to isolate the "red parts"....</p>
</section>
<section data-transition="zoom">
<img src="static/sgr.png"></img>
<p>Using a similar histogram idea, we can isolate a prominent colour with a mask</p>
</section>
<section data-background="static/contours.jpg">
</section>
<section>
<div class="alert alert-danger" role="alert">The following pieces of code are inside the while loop</div>
</section>
<section>
<div class="alert alert-info" role="alert">Setting lower and upper bounds for red color
<pre><code class="language-python Terminal" style="white-space: pre-line;">low_red = np.array([255,255,255])
high_red = np.array([255,0,0])
</code>Initialise a Numpy Array with Red, Green and Blue values</pre>
</div>
<div class="fragment">
<pre style='background-color: #e7f3fe; border-left: 6px solid #2196F3; padding: 4px; white-space: pre-wrap;'><code class="language-python Terminal" style="white-space: pre-line;">red_mask = cv2.inRange(hsv_frame, low_red, high_red)
</code>inRange function creates a mask</pre>
</div>
</section>
<section>
<div class="fragment">Creates an array of contours
<pre style='background-color: #e7f3fe; border-left: 6px solid #2196F3; padding: 4px; white-space: pre-wrap;'><code class="language-python Terminal" style="white-space: pre-line;">contours, retrieveval = cv2.findContours(red_mask, cv2.RETR_TREE, cv2.CHAIN_APPROX_SIMPLE)
</code>Using cv2 find Contours in-built library</pre>
</div>
<div class="fragment">Sort the array (list) from largest to smallest values
<pre style='background-color: #e7f3fe; border-left: 6px solid #2196F3; padding: 4px; white-space: pre-wrap;'><code class="language-python Terminal" style="white-space: pre-line;">contours = sorted(contours, key = lambda x:cv2.contourArea(x), reverse=True)</code>eg. [254, 252, 198...]</pre>
</div>
</section>
<section>
<div style="background-color: #000000; padding: 1px; border-left: 10px solid #9B9B9B;"><p style="font-size: 2em; color: #c1ec02 ">Lambda Functions?</p>
<code class="language-python Terminal">lambda arguments : expression</code>
</div>
</section>
<section>
<div class="alert alert-success" role="alert">A quick look at Functional Programming
<pre><code class="language-python Terminal" data-line-numbers>
items = [3,5,5]
def addtoarray(items):
for i in range(len(items)):
items[i] = items[i]+1
return items
addtoarray(items)
>>> [4,6,6]
</code>Typical function to increment item in array</pre>
</div>
</section>
<section>
<div class="alert alert-warning" role="alert">Using Lambda Function
<div class="fragment">
<pre style='background-color: #0d0013;color:#fff; border-left: 6px solid #aa00ff; padding: 4px; white-space: pre-wrap;'><code class="language-python Terminal" style="white-space: pre-line;"> map(function_object, iterable1, iterable2,...)
</code>To map the Lambda Function to each value in the list</pre>
</div>
<div class="fragment">
<pre style='background-color: #0d0013;color:#fff; border-left: 6px solid #aa00ff; padding: 4px; white-space: pre-wrap;'><code class="language-python Terminal" style="white-space: pre-line;">print(map(lambda k:k+1,items))
>>> map object 0xjijidje0r
</code>This will produce a generator object, hence we use list() instead to iterate over the generated map object</pre></div>
<div class="fragment">
<pre style='background-color: #85e1ff; border-left: 6px solid #016daa; padding: 4px; white-space: pre-wrap;'>Much shorter code!</pre>
<pre style='background-color: #e7f3fe; border-left: 6px solid #2196F3; padding: 4px; white-space: pre-wrap;'><code class="language-python Terminal" style="white-space: pre-line;">items = [3,5,5]
print(list(map(lambda k:k+1,items)))
>>> [4,6,6]
</code>In the function, k is the argument for the lambda function, similar to <strong>items</strong> in the function above. The variable k is mapped to k+1 </pre>
</div>
</div>
</section>
<section data-background-iframe="https://docs.opencv.org/2.4/modules/core/doc/drawing_functions.html#cv2.rectangle" data-background-interactive>
<div class="alert alert-info" role="alert">
Open CV Rectangle<pre><code class="language-python Terminal" data-line-numbers>if len(contours)>0: #check if webcam has started recording
(x,y,w,h) = cv2.boundingRect(contours[0])
#takes the first values in the array
print("X_mid:",x+w/2,"Y_mid:",y+h/2) #optional
cv2.rectangle(frame,(x,y),(x+w,y+h), (0,255,0),2)
#inbuilt function for drawing rectangles </code>
Documentation shows the function parameters
</pre>
</div>
</section>
<section>
<div class="fragment">Showcase the live feed
<pre style='background-color: #e7f3fe; border-left: 6px solid #2196F3; padding: 4px; white-space: pre-wrap;'><code class="language-python Terminal" style="white-space: pre-line;">cv2.imshow("Tracking", frame)
cv2.imshow("Mask over", red_mask)
</code></pre>
</div>
<div class="fragment">Creating a kill key 'q' to exit the program
<pre style='background-color: #e7f3fe; border-left: 6px solid #2196F3; padding: 4px; white-space: pre-wrap;'><code class="language-python Terminal">if cv2.waitKey(1) & 0xFF == ord('q'):
break</code></pre>
</div>
</section>
</section>
<!--BREAK + QUIZ -->
<section>
<section>What you have learnt as of now</section>
<!--https://github.com/EmilyOng/lucky-->
<section data-background-iframe="https://codecollab.io/@19y5c34emilyonghuiqi/Lucky" data-background-interactive></section>
</section>
<!--CANNY EDGE DETECTION-->
<section>
<section>
<div style="background-color: #000000; padding: 1px; border-left: 10px solid #9B9B9B;">
<p style="font-size: 2em; color: #ffffff">Canny Edge Detection</p>
</div>
</section>
<section>
<blockquote class="blockquote">Canny Edge Detection is a popular edge detection algorithm. It was developed by John F. Canny in 1986.</blockquote>
</section>
<section>
<div class="alert alert-info" role="alert">Does anybody know where this place is?</div>
<img src="static/canny_edge/EdgeDunmanHigh.png">
</section>
<section>
<ol>
<li>Noise reduction</li>
<li>Finding Intensity Gradient of the Image</li>
<li>Non-maximum Suppression</li>
<li>Hysteresis Thresholding</li>
</ol>
</section>
<section>
<div class="alert alert-danger" role="alert">It is hard to do edge detection on a noisy image!</div>
<img src="static/canny_edge/noisy_image.png">
</section>
<section>
<h1>Gaussian Blur</h1>
<small>An image smoothening technique</small>
<blockquote class="blockquote">Gaussian functions are often used to represent the probability density function of a normally distributed random variable.</blockquote>
</section>
<section>
<small>Probability(A < X < B) = Area under the curve between A and B</small>
<img src="static/canny_edge/gaussian.png">
</section>
<section>
For each pixel, the Gaussian function:
<small>Assigns weight to the pixel and its surrounding pixels based on the Gaussian function, hence the resulting weight will be based on feedback from its surrounding neighbours.</small>
<div class="fragments">
<img class="plain" src="https://fr.mathworks.com/help/examples/images/win64/SmoothImageWithGaussianFiltersExample_01.png">
</div>
</section>
<section>
<h1>Finding intensity gradient</h1>
<small>Applying the mask of the Sobel operator works like the 1st-order derivative. <br/>The goal is to calculate the difference of pixel intensities in a edge region.</small>
</section>
<section>
<small>The resulting pixel values will be the magnitude of the gradient of each pixel.</small>
<img src="static/canny_edge/sobel_operator.png">
</section>
<section>
<h1>Non-maximum Suppression</h1>
<small>A full scan of image is done to remove any unwanted pixels which may not constitute the edge.</small>
</section>
<section>
<small>If the pixel is pointing in the y-directon, the pixel value will be compared with the one above and below it. If it is the 'local maximum' among the 2 pixels, its value will be preserved. Else, it will be <em>suppressed</em> to 0.</small>
</section>
<section>
<img src="static/canny_edge/nms.png">
</section>
<section>
<h1>Hysteresis Thresholding</h1>
<small>Finding the optimal value that constitute an edge</small>
</section>
<section>
<!--https://towardsdatascience.com/canny-edge-detection-step-by-step-in-python-computer-vision-b49c3a2d8123-->
<img src="https://miro.medium.com/max/1350/1*jnqS5hbRwAmU-sgK552Mgg.png">
</section>
</section>
<!-- Final Slide any qns -->
<section>
<section>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F4.bp.blogspot.com%2F_xgEM-_--PSk%2FTNqXKSX285I%2FAAAAAAAAAAY%2Fs5twK3Y07_4%2Fs1600%2F0511-1001-2519-1742_Girl_Getting_a_Pat_on_the_Back_for_a_Job_Well_Done_clipart_image.jpg&f=1&nofb=1" align="middle" alt="Pat"></img>
<p>Thank you! Give yourself a pat on the back</p>
</section>
</section>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.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
//$(function(){
//$("#intro_to_rpi").load("intro_to_rpi.html");
//$("#python").load("python.html");
//});
Reveal.initialize({
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 }
]
});
</script>
<script>
$(document).ready(function() {
$("#toggleTrackbar").click(function(){
$("#trackbarContents").toggle();
});
});
$(document).ready(function() {
$("#concepts2").click(function(){
$("#concepts2-1").toggle();
});
});
$(document).ready(function() {
$("#concepts3").click(function(){
$("#concepts3-1").toggle();
});
});
</script>
</body>
</html>