Android App using OpenCV4Android

1. 第2回プレ卒研
Android開発入門

2. ～今日の内容～
UIの詳細(レイアウトの種類)
OpenCVで画像処理

3. TextViewやButtonなどのUIパーツはViewと呼ばれる
Viewの集合 = View Group
UIの詳細
TextView
Button
View ViewGroup
TextView
Button

4. UIの詳細
setContentView(R.layout.activity_main);
レイアウトをどれにするかを指定する
実はsetContentView()を使って配置できるViewは１つだけ
→だけどレイアウトには複数のViewが・・・・

5. UIの詳細
setContentView(R.layout.activity_main);
レイアウトをどれにするかを指定する
Viewを継承しているViewGroupを使ってレイアウトを作る！

6. UIの詳細
setContentView(R.layout.activity_main);
初期レイアウトをどれにするかを指定する
そんなViewGroupにも様々な種類がある

7. UIの詳細
LinearLayout
Viewを縦または横一列に並べて配置する
android:orientation=“vertical”→
↑
android:orientation=“horizontal”

8. UIの詳細
TableLayout
Viewを格子状に配置する
<TableRow><TableRow/>

9. UIの詳細
RelativeLayout
Viewを相対的に配置する
このパーツは☓☓の真下に配置する
中央線右から○○dpずれた場所に配置する

10. UIの詳細
複数のレイアウトを組み合わせることも可能
LinearLayout
TableLayout
RelativeLayout
複雑なレイアウトの構築が可能になる

11. Let`s OpenCV
Open CVで画像処理

12. Let`s OpenCV
Open CV
Intelから公開されているコンピュータビジョンライブラリ
フィルター処理、直線検出、パターン認証、機械学習・・・

13. Let`s OpenCV
OpenCV for Android
http://sourceforge.net/projects/opencvlibrary/files/
Zipを展開しAndroid StudioでImport Projectを選択
「Create project…」を選択してNext

14. Let`s OpenCV
プロジェクト名を入力してNext

15. Let`s OpenCV
全部選択してNext

16. Let`s OpenCV
Next

17. Let`s OpenCV
「sdk」をだけを選択してNext

18. Let`s OpenCV
ターゲットAPIを選択してNext

19. Let`s OpenCV
チェックを確認してFinish

20. Let`s OpenCV
Build->Rebuild Peojectを選択

21. Let`s OpenCV
新しいプロジェクトを作成しFile->Import Moduleで
「OpenCV-2.4.10-android-sdk¥sdk¥java¥sdk.iml」を選択

22. Let`s OpenCV
Finishを選択

23. Let`s OpenCV
プロジェクト名->app->build.gradleを選択
「dependevcies」の中に
「compile project(‘:openCVLibrary2410’)」を追加

24. Let`s OpenCV
Tools->Android->Sync Project with Gradle Filesを選択

25. Let`s OpenCV
プロジェクトにOpenCVの導入はこれで終了
https://github.com/Collonville/OpenCVTestApp/blob/master/app/src/main/java/com/example/collo
nville/opencvtestapp/MainActivity.java
今回は初期プロジェクトの行数が多いのでGithubから落としてきてください

26. Let`s OpenCV
「Androidmanifest.xml」でUser Permissionを設定する
セキュリティ上リスクを伴うもの(通信関係、プライバシー、etc)に関しては
ユーザーから許可を得ないと正常な動作が行われない(インストール時の契約)
デフォルトでは全機能に関して不許可が与えられ、
許可していないのに実行するとSecurityExceptionが投げられる

27. Let`s OpenCV
「activity_main.xml」でレイアウトの設定
取得した画像データはJavaCameraViewに表示される

28. Let`s OpenCV
実機で実行すると以下のように表示されましたか？？

29. OpenCVで画像処理
Project1「カラー画像をグレースケールに変換するAPP」

30. #1 グレースケールAPP
R
G
B
Gray
RGB(8bit、チャンネル数:3)で１つのピクセルを表現
Gray(8bit、チャンネル数:1)で１つのピクセルを表現

31. #1 グレースケールAPP
R
G
B
Gray
RGBを白黒グレーに変換するアルゴリズム
・単純平均法
・NTSC系加重平均法

32. #1 グレースケールAPP
単純平均法
R,G,Bのそれぞれの値の平均をとる方法
𝑳𝒊,𝒋 =
𝑹𝒊,𝒋 + 𝑮𝒊,𝒋 + 𝑩𝒊,𝒋
𝟑
NTSC系加重平均法
R,G,Bに重みを付けてスケールをとる方法
𝑳𝒊,𝒋 = 𝟎. 𝟐𝟗𝟖𝟗𝟏𝟐 ∗ 𝑹𝒊,𝒋 + 𝟎. 𝟓𝟖𝟔𝟔𝟏𝟏 ∗ 𝑮𝒊,𝒋 + 𝟎. 𝟏𝟏𝟒𝟒𝟕𝟖 ∗ 𝑩𝒊,𝒋
人間は青のほうが暗く感じる->青色を優先的に暗く
単純平均法よりも自然なグレースケールが作れる
詳細はググってどうぞ

33. #1 グレースケールAPP
1.Matクラスのメンバー変数を作成
2.onCameraViewStarted()の中でオブジェクト作成
CvType.CV_8UC1 => 8bitのチャンネル1の画像

34. #1 グレースケールAPP
3.onCameraFrame()の中で毎フレームの処理を追加
cvtColor(const Mat& src, Mat& dst, int code, int dstCn=0)
指定した色空間に変換しdstに渡す
今回の処理
RGBAの色空間画像グレースケールの色空間画像
codeにImgproc.COLOR_RGBA2GRAYを使用

35. #1 グレースケールAPP
https://github.com/Collonville/GrayScaleApp

36. Project2「グレー画像を2値化するAPP」
2値化各ピクセルを任意の数値(2つ)に仕分ける作業
Let`s OpenCV
160 20 100 255
255 0 0 255
閾値150で0と255に2値化

37. 1行追加するだけで完成・・・
#2 2値化APP
threshold(const Mat& src, Mat& dst, double thresh,
double maxVal, int thresholdType)
入力画像に対して閾値(thresh)で2値化させ
Typeに合わせてmaxValを代入する

38. #2 2値化APP

39. #2 2値化APP
Thresoldの様々なタイプ
Imgproc.THRESH_BINARYthresh以上はmaxVal。それ以外は0
𝑑𝑠𝑡 𝑖, 𝑗 =
𝑚𝑎𝑥𝑉𝑎𝑙 𝑖𝑓 𝑠𝑟𝑐 𝑖, 𝑗 > 𝑡ℎ𝑟𝑒𝑠ℎ
0 𝑜𝑡ℎ𝑒𝑟𝑤𝑖𝑠𝑒
Imgproc.THRESH_BINARY_INVthresh以上は0。それ以外はmaxVal
𝑑𝑠𝑡 𝑖, 𝑗 =
0 𝑖𝑓 𝑠𝑟𝑐 𝑖, 𝑗 > 𝑡ℎ𝑟𝑒𝑠ℎ
𝑚𝑎𝑥𝑉𝑎𝑙 𝑜𝑡ℎ𝑒𝑟𝑤𝑖𝑠𝑒
Imgproc.THRESH_TOZEROthresh以上はそのまま。それ以外は0
𝑑𝑠𝑡 𝑖, 𝑗 =
𝑠𝑟𝑐(𝑖, 𝑗) 𝑖𝑓 𝑠𝑟𝑐 𝑖, 𝑗 > 𝑡ℎ𝑟𝑒𝑠ℎ
0 𝑜𝑡ℎ𝑒𝑟𝑤𝑖𝑠𝑒

40. #2 2値化APP
今のままだと、閾値を実行時に毎回確認しなければならない
↓
実行時でも閾値をいじって確認が
できるAPPが欲しい！！！
Project3「グレー画像を2値化するAPP改」
仕様：スライダーを使って閾値をいじれるようにする

41. #3 2値化APP改
Step1：Viewの追加
SeekBar*2、TextView*2、JavaCameraView*1(前のをコピペ)
Step2：ID、名前を指定
今回は各自自由に名前をつけてください
TextViewはandroid:textColor=“#FFFFFF”
で白色にすることをおすすめ

42. #3 2値化APP改
Step3：コードの実装
onCreate()の中でインスタンスをもらう。SeekBarの設定
setProgress(int)初期値の設定
setMax(int)SeekBarの最大値の設定

43. #3 2値化APP改
Step3：コードの実装
SeekBarリスナーの実装

44. #3 2値化APP改
Step3：コードの実装
閾値と最大値をthreshold()に反映
実装はこれで終了！！！

45. #3 2値化APP改
Step4：確認
閾値のみを変更させた時の様子

46. 2値化APP改ver2
5つあるThresholdのTypeをボタンで選択できるようにする
#4 課題！！
Imgproc.THRESH_BINARY
Imgproc.THRESH_BINARY_INV
Imgproc.THRESH_TRUNC
Imgproc.TOZERO
Imgproc.TOZERO_INV
ボタンの作り方、コードを忘れた
前回の資料を見るかググって(# ﾟДﾟ)