{"id":1132,"date":"2022-11-25T17:01:42","date_gmt":"2022-11-25T17:01:42","guid":{"rendered":"https:\/\/unydevelopernetwork.com\/?p=1132"},"modified":"2024-01-26T06:15:06","modified_gmt":"2024-01-25T23:15:06","slug":"bermain-dengan-opencv-di-android-java-bag-2-rekognisi-segi-empat-rectangle","status":"publish","type":"post","link":"https:\/\/unydevelopernetwork.com\/index.php\/2022\/11\/25\/bermain-dengan-opencv-di-android-java-bag-2-rekognisi-segi-empat-rectangle\/","title":{"rendered":"Bermain Dengan OpenCV di Android (Java) (bag. 2): Rekognisi Segi Empat (Rectangle)"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 7<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<p>Selamat datang di UNY Developer Network. Kita akan kembali bermain dengan OpenCV di Android, dan kali ini melakukan rekognisi segi empat (rectangle). Kita akan melanjutkan project yang sudah kita mulai sebelumnya, sehingga untuk para pembaca yang melewatkan bagian pertama dari seri artikel ini dapat membacanya di sini: <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/unydevelopernetwork.com\/index.php\/2022\/11\/19\/bermain-dengan-opencv-di-android-java-bag-1-rekognisi-lingkaran\/\" data-type=\"URL\" data-id=\"https:\/\/unydevelopernetwork.com\/index.php\/2022\/11\/19\/bermain-dengan-opencv-di-android-java-bag-1-rekognisi-lingkaran\/\" target=\"_blank\">Bermain Dengan OpenCV di Android (Java) (bag. 1): Rekognisi Lingkaran<\/a><\/strong>.<\/p>\n\n\n\n<p>Baik, apa saja yang harus kita lakukan untuk membuat rekognisi segi empat di Android? Apakah sulit? Mari kita simak artikel ini secara mendalam.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Sebelum kita melangkah lebih jauh, mari kita lihat terlebih dahulu bagaimana akhir dari project kita kali ini:<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Rectangle Recognition\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/qrFIQqJTUtU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Ya, dapat Anda perhatikan pada video di atas, perangkat Android kita dapat mendeteksi bentuk segi empat secara langsung tanpa melalui proses di server. Hanya dengan mengandalkan library OpenCV dan Kamera, kita sudah mampu mendeteksi bentuk segi empat meskipun masih dalam tahap yang paling sederhana. Saya ingatkan sekali lagi, sebelum Anda membaca postingan ini, Anda sudah harus menyelesaikan terlebih dahulu tahapan-tahapan di postingan sebelumnya: <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/unydevelopernetwork.com\/index.php\/2022\/11\/19\/bermain-dengan-opencv-di-android-java-bag-1-rekognisi-lingkaran\/\" data-type=\"URL\" data-id=\"https:\/\/unydevelopernetwork.com\/index.php\/2022\/11\/19\/bermain-dengan-opencv-di-android-java-bag-1-rekognisi-lingkaran\/\" target=\"_blank\">Bermain Dengan OpenCV di Android (Java) (bag. 1): Rekognisi Lingkaran<\/a><\/strong>.<strong> <\/strong>Mengapa demikian? sebab di postingan ini, kita hanya akan melanjutkan dari project yang sudah dimulai sebelumnya, jadi tidak membuat project baru.<\/p>\n\n\n\n<p>Ok, mari kita mulai. Kita mulai dengan mempersiapkan project yang sudah kita buat sebelumnya.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-23-700x528.png\" alt=\"\" class=\"wp-image-1133\" width=\"616\" height=\"464\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-23-700x528.png 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-23-300x226.png 300w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-23-768x579.png 768w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-23.png 786w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/figure>\n<\/div>\n\n\n<p>Setelah project terbuka, langsung saja buat Empty Activity baru dengan nama: <strong>RectangleDetection<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"409\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-24-700x409.png\" alt=\"\" class=\"wp-image-1134\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-24-700x409.png 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-24-300x175.png 300w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-24-768x449.png 768w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-24.png 881w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"645\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-25-700x645.png\" alt=\"\" class=\"wp-image-1135\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-25-700x645.png 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-25-300x276.png 300w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-25-768x708.png 768w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-25.png 879w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"361\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-26-700x361.png\" alt=\"\" class=\"wp-image-1136\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-26-700x361.png 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-26-300x155.png 300w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-26-768x396.png 768w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-26.png 784w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n<p>Setelah membuat activity baru, project OpenCV kita akan tampak seperti tangkapan layar di bawah ini.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"399\" height=\"500\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-27.png\" alt=\"\" class=\"wp-image-1137\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-27.png 399w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/image-27-239x300.png 239w\" sizes=\"auto, (max-width: 399px) 100vw, 399px\" \/><\/figure>\n<\/div>\n\n\n<p>Selanjutnya, mari kita ikuti langkah-langkah di bawah ini.<\/p>\n\n\n\n<p><strong>1. Memodifikasi AndroidManifest<\/strong><\/p>\n\n\n\n<p>Langkah pertama, seperti biasa, adalah memodifikasi file manifest aplikasi kita. Tujuannya untuk menyeragamkan UX di aplikasi kita. Modifikasi blok activity <strong>.RectangleDetection<\/strong> sehingga seperti ini:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>        &lt;activity\r\n            android:name=\".RectangleDetection\"\r\n            android:exported=\"false\"\r\n            android:parentActivityName=\".MainActivity\"\r\n            android:screenOrientation=\"landscape\">\r\n            &lt;meta-data\r\n                android:name=\"android.app.lib_name\"\r\n                android:value=\"\" \/>\r\n        &lt;\/activity><\/code><\/pre>\n\n\n\n<p>Setelah selesai memodifikasi AndroidManifest, kita dapat menutup filenya.<\/p>\n\n\n\n<p><strong>2. Memodifikasi strings.xml<\/strong><\/p>\n\n\n\n<p>Langkah kedua adalah memodifikasi <strong>strings.xml<\/strong>. Kita perlu menambahkan satu buah string yang akan digunakan untuk <strong>Button<\/strong> navigasi ke Activity <strong>RectangleDetection<\/strong>. Modifikasi strings.xml sehingga menyerupai seperti di bawah ini.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;resources>\r\n    &lt;string name=\"app_name\">OpenCV-Project&lt;\/string>\r\n    &lt;string name=\"app_menu\">Choose Mode:&lt;\/string>\r\n    &lt;string name=\"btn_circle_camera\">Circle Recognition&lt;\/string>\r\n    &lt;string name=\"btn_rectangle_camera\">Rectangle Recognition&lt;\/string>\r\n&lt;\/resources><\/code><\/pre>\n\n\n\n<p>Sama halnya dengan langkah pertama, setelah selesai mengedit<strong> <\/strong>strings.xml, dapat langsung ditutup.<\/p>\n\n\n\n<p><strong>3. Copy, Paste, dan Modifikasi Kode Layout Activity CircleDetection<\/strong><\/p>\n\n\n\n<p>Langkah berikutnya adalah membuat layout, karena layout yang akan kita buat sama persis dengan layout activity CircleDetection, maka kita dapat melakukan copy paste kode layout dari Activity CircleDetection ke Activity RectangleDetection. Namun, jangan lupa lakukan modifikasi pada baris kode:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>tools:context=\".CircleDetection\"<\/code><\/pre>\n\n\n\n<p>Pada layout Activity RectangleDetection, ubah kode di atas menjadi:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>tools:context=\".RectangleDetection\"<\/code><\/pre>\n\n\n\n<p>Sehingga secara keseluruhan, di akhir kode layout untuk Activity Rectangle Detection adalah seperti berikut ini.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\".RectangleDetection\">\r\n\r\n    &lt;LinearLayout\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:orientation=\"horizontal\"\r\n        android:weightSum=\"10\">\r\n\r\n        &lt;org.opencv.android.JavaCameraView\r\n            android:id=\"@+id\/opencv_camera\"\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"match_parent\"\r\n            android:layout_weight=\"1\" \/>\r\n\r\n        &lt;LinearLayout\r\n            android:id=\"@+id\/capture_button\"\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"match_parent\"\r\n            android:layout_weight=\"9\"\r\n            android:orientation=\"horizontal\">\r\n\r\n            &lt;ImageView\r\n                android:layout_width=\"match_parent\"\r\n                android:layout_height=\"match_parent\"\r\n                android:background=\"@color\/teal_700\"\r\n                android:padding=\"20dp\"\r\n                android:src=\"@drawable\/ic_action_capture\"\/>\r\n\r\n        &lt;\/LinearLayout>\r\n\r\n    &lt;\/LinearLayout>\r\n&lt;\/RelativeLayout><\/code><\/pre>\n\n\n\n<p><strong>4. Copy, Paste, dan Modifikasi Kode Activity CircleDetection<\/strong><\/p>\n\n\n\n<p>Langkah keempat hampir mirip dengan langkah sebelumnya, yakni mengcopy, mempaste, dan memodifikasi kode dari Activity CircleDetection ke Activity RectangleDetection. Oleh karena itu, lakukan proses copy paste terlebih dahulu dan jangan panik terlebih dahulu jika terdapat error. Karena kita memang harus melakukan modifikasi terhadap kode yang sudah dipaste tadi. <\/p>\n\n\n\n<p>Modifikasi kode berikut<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public class CircleDetection extends AppCompatActivity implements CameraBridgeViewBase.CvCameraViewListener2<\/code><\/pre>\n\n\n\n<p>Menjadi<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public class RectangleDetection extends AppCompatActivity implements CameraBridgeViewBase.CvCameraViewListener2<\/code><\/pre>\n\n\n\n<p>Selanjutnya, ubah baris kode berikut ini<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>setContentView(R.layout.activity_circle_detection);<\/code><\/pre>\n\n\n\n<p>Menjadi<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>setContentView(R.layout.activity_rectangle_detection);<\/code><\/pre>\n\n\n\n<p>Baik, kita sudah memodifikasi pengaturan dasar untuk kode Activity RectangleDetection kita. Selanjutnya kita akan memodifikasi core dari method OpenCV yang kita gunakan di Activity ini sehingga dapat merekognisi segi empat. <\/p>\n\n\n\n<p>Pertama, tambahkan kode berikut ini di bawah <strong>private LinearLayout captureButton;<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>private Mat mRGBa, mIntermediateMat, mGray, hierarchy;<\/code><\/pre>\n\n\n\n<p>Kedua, modifikasi kode pada blok method <strong>public void onCameraViewStarted(int width, int height)<\/strong> sehingga menjadi seperti di bawah ini:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    @Override\r\n    public void onCameraViewStarted(int width, int height) {\r\n        mRGBa = new Mat(height, width, CvType.CV_8UC4);\r\n        mIntermediateMat = new Mat(height, width, CvType.CV_8UC4);\r\n        mGray = new Mat(height, width, CvType.CV_8UC1);\r\n        hierarchy = new Mat();\r\n    }\r<\/code><\/pre>\n\n\n\n<p>Langkah yang sama juga dilakukan pada method <strong>public void onCameraViewStopped()<\/strong> sehingga:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    @Override\r\n    public void onCameraViewStopped() {\r\n        mRGBa.release();\r\n        mIntermediateMat.release();\r\n        mGray.release();\r\n        hierarchy.release();\r\n    }<\/code><\/pre>\n\n\n\n<p>Kemudian kita hapus total isi dari method <strong>public Mat onCameraFrame(CameraBridgeViewBase.CvCameraViewFrame inputFrame) :<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Override\r\n    public Mat onCameraFrame(CameraBridgeViewBase.CvCameraViewFrame inputFrame) {\r\n        \r\n    }<\/code><\/pre>\n\n\n\n<p>Kemudian kita ubah isinya dengan baris-baris kode berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>        mRGBa = inputFrame.rgba();\r\n        List&lt;MatOfPoint> contours = new ArrayList&lt;>();\r\n        hierarchy = new Mat();\r\n        Imgproc.Canny(mRGBa, mIntermediateMat, 80, 100);\r\n        Imgproc.findContours(mIntermediateMat, contours, hierarchy, Imgproc.RETR_TREE, Imgproc.CHAIN_APPROX_SIMPLE, new Point(0,0));\r\n        hierarchy.release();\r\n\r\n        for(int contourIdx = 0; contourIdx &lt; contours.size(); contourIdx++){\r\n            MatOfPoint2f approxCurve = new MatOfPoint2f();\r\n            MatOfPoint2f contour2f = new MatOfPoint2f(contours.get(contourIdx).toArray());\r\n            double approxDistance = Imgproc.arcLength(contour2f, true) * 0.01;\r\n            Imgproc.approxPolyDP(contour2f, approxCurve, approxDistance, true);\r\n            MatOfPoint points = new MatOfPoint(approxCurve.toArray());\r\n            Rect rect = Imgproc.boundingRect(points);\r\n            double height = rect.height;\r\n            double width = rect.width;\r\n\r\n            if(height > 300 &amp;&amp; width > 300){\r\n                Imgproc.rectangle(mRGBa, new Point(rect.x, rect.y), new Point(rect.x+ rect.width, rect.y+rect.height), new Scalar(0,255, 0, 0), 3);\r\n            }\r\n        }\r\n        return mRGBa;<\/code><\/pre>\n\n\n\n<p>Sehingga di akhir, blok ini akan seperti ini:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    @Override\r\n    public Mat onCameraFrame(CameraBridgeViewBase.CvCameraViewFrame inputFrame) {\r\n        mRGBa = inputFrame.rgba();\r\n        List&lt;MatOfPoint> contours = new ArrayList&lt;>();\r\n        hierarchy = new Mat();\r\n        Imgproc.Canny(mRGBa, mIntermediateMat, 80, 100);\r\n        Imgproc.findContours(mIntermediateMat, contours, hierarchy, Imgproc.RETR_TREE, Imgproc.CHAIN_APPROX_SIMPLE, new Point(0,0));\r\n        hierarchy.release();\r\n\r\n        for(int contourIdx = 0; contourIdx &lt; contours.size(); contourIdx++){\r\n            MatOfPoint2f approxCurve = new MatOfPoint2f();\r\n            MatOfPoint2f contour2f = new MatOfPoint2f(contours.get(contourIdx).toArray());\r\n            double approxDistance = Imgproc.arcLength(contour2f, true) * 0.01;\r\n            Imgproc.approxPolyDP(contour2f, approxCurve, approxDistance, true);\r\n            MatOfPoint points = new MatOfPoint(approxCurve.toArray());\r\n            Rect rect = Imgproc.boundingRect(points);\r\n            double height = rect.height;\r\n            double width = rect.width;\r\n\r\n            if(height > 300 &amp;&amp; width > 300){\r\n                Imgproc.rectangle(mRGBa, new Point(rect.x, rect.y), new Point(rect.x+ rect.width, rect.y+rect.height), new Scalar(0,255, 0, 0), 3);\r\n            }\r\n        }\r\n        return mRGBa;\r\n    }<\/code><\/pre>\n\n\n\n<p><strong>5. Modifikasi Layout MainActivity<\/strong><\/p>\n\n\n\n<p>Langkah kelima yakni menghubungkan fitur deteksi segi empat ini ke MainActivity. Oleh karena itu, kita perlu memodifikasi terlebih dahulu layout MainActivity dengan menambahkan satu buah tombol. Tambahkan view berikut ini ke dalam layout MainActivity:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;Button\r\n        android:id=\"@+id\/btn_rectangle_camera\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_marginTop=\"10dp\"\r\n        android:text=\"@string\/btn_rectangle_camera\"\r\n        android:layout_below=\"@+id\/btn_circle_camera\"\/><\/code><\/pre>\n\n\n\n<p>Sehingga layout MainActivity akan menjadi:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:layout_margin=\"20dp\"\r\n    tools:context=\".MainActivity\">\r\n\r\n    &lt;TextView\r\n        android:id=\"@+id\/app_menu\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"@string\/app_menu\"\r\n        android:textStyle=\"bold\"\r\n        android:textSize=\"20sp\"\/>\r\n\r\n    &lt;Button\r\n        android:id=\"@+id\/btn_circle_camera\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_marginTop=\"10dp\"\r\n        android:text=\"@string\/btn_circle_camera\"\r\n        android:layout_below=\"@+id\/app_menu\"\/>\r\n\r\n    &lt;Button\r\n        android:id=\"@+id\/btn_rectangle_camera\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_marginTop=\"10dp\"\r\n        android:text=\"@string\/btn_rectangle_camera\"\r\n        android:layout_below=\"@+id\/btn_circle_camera\"\/>\r\n&lt;\/RelativeLayout><\/code><\/pre>\n\n\n\n<p><strong>6. Modifikasi Kode MainActivity<\/strong><\/p>\n\n\n\n<p>Langkah terakhir adalah memodifikasi MainActivity sehingga fitur deteksi segi empat dapat kita panggil dan kita gunakan. <\/p>\n\n\n\n<p><em>Pertama<\/em>, tambahkan kode berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>private Button rectangleDetection;<\/code><\/pre>\n\n\n\n<p>Sehingga akan ada dua object Button:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    private Button circleDetection;\r\n    private Button rectangleDetection;<\/code><\/pre>\n\n\n\n<p>Namun, kita juga bisa menjadikannya satu sehingga:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>private Button circleDetection, rectangleDetection;<\/code><\/pre>\n\n\n\n<p><em>Kedua<\/em>, tambahkan kode berikut di method <strong>initLevel0()<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>rectangleDetection = findViewById(R.id.btn_rectangle_camera);<\/code><\/pre>\n\n\n\n<p>Sehingga di akhir, method initLevel0() menjadi:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    private void initLevel0(){\r\n        circleDetection = findViewById(R.id.btn_circle_camera);\r\n        rectangleDetection = findViewById(R.id.btn_rectangle_camera);\r\n    }<\/code><\/pre>\n\n\n\n<p>Ketiga, tambahkan kode berikut ini di method <strong>initLevel1(){<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>        rectangleDetection.setOnTouchListener((view, motionEvent) -> {\r\n            goToRectangleCamera();\r\n            return false;\r\n        });\r<\/code><\/pre>\n\n\n\n<p>Sehingga di akhir, method initLevel1() menjadI;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    @SuppressLint(\"ClickableViewAccessibility\")\r\n    private void initLevel1(){\r\n        circleDetection.setOnTouchListener((view, motionEvent) -> {\r\n            goToCircleCamera();\r\n            return false;\r\n        });\r\n\r\n        rectangleDetection.setOnTouchListener((view, motionEvent) -> {\r\n            goToRectangleCamera();\r\n            return false;\r\n        });\r\n    }<\/code><\/pre>\n\n\n\n<p>Pada tahap ini, kita pasti akan melihat error pada baris kode <strong>goToRectangleCamera()<\/strong>. Yap, baris kode tersebut error karena kita belum memiliki method <strong>goToRectangleCamera(). <\/strong>Oleh karena itu, kita tambahkan method <strong>goToRectangleCamera()<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    private void goToRectangleCamera(){\r\n        Intent goRectangleCamera = new Intent(MainActivity.this, RectangleDetection.class);\r\n        goRectangleCamera.addFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT);\r\n        startActivity(goRectangleCamera);\r\n    }<\/code><\/pre>\n\n\n\n<p>Di akhir, kode MainActivity adalah seperti berikut;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package com.unydevelopernetwork.opencv_project;\r\n\r\nimport androidx.appcompat.app.AppCompatActivity;\r\n\r\nimport android.annotation.SuppressLint;\r\nimport android.content.Intent;\r\nimport android.os.Bundle;\r\nimport android.widget.Button;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    private Button circleDetection, rectangleDetection;\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        initLevel0();\r\n        initLevel1();\r\n    }\r\n\r\n    private void initLevel0(){\r\n        circleDetection = findViewById(R.id.btn_circle_camera);\r\n        rectangleDetection = findViewById(R.id.btn_rectangle_camera);\r\n    }\r\n\r\n    @SuppressLint(\"ClickableViewAccessibility\")\r\n    private void initLevel1(){\r\n        circleDetection.setOnTouchListener((view, motionEvent) -> {\r\n            goToCircleCamera();\r\n            return false;\r\n        });\r\n\r\n        rectangleDetection.setOnTouchListener((view, motionEvent) -> {\r\n            goToRectangleCamera();\r\n            return false;\r\n        });\r\n    }\r\n\r\n    private void goToCircleCamera(){\r\n        Intent goCircleCamera = new Intent(MainActivity.this, CircleDetection.class);\r\n        goCircleCamera.addFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT);\r\n        startActivity(goCircleCamera);\r\n    }\r\n\r\n    private void goToRectangleCamera(){\r\n        Intent goRectangleCamera = new Intent(MainActivity.this, RectangleDetection.class);\r\n        goRectangleCamera.addFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT);\r\n        startActivity(goRectangleCamera);\r\n    }\r\n\r\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Pembuatan fitur deteksi segi empat telah selesai, saatnya kita uji untuk melihat kinerja dari fungsi yang sudah kita tambahkan.<\/p>\n\n\n\n<p><strong>PENGUJIAN<\/strong><\/p>\n\n\n\n<p>Untuk pengujian, saya menggunakan device langsung (tidak menggunakan emulator) karena kita memerlukan fungsi kamera pada perangkat uji. Untuk perangkat uji, saya menggunakan <strong>Google Pixel 3A XL <\/strong>Android versi 12. Berikut hasil ujinya.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"1400\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.55-700x1400.jpg\" alt=\"\" class=\"wp-image-1138\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.55-700x1400.jpg 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.55-150x300.jpg 150w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.55-768x1536.jpg 768w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.55.jpg 800w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"350\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.55-1-700x350.jpg\" alt=\"\" class=\"wp-image-1139\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.55-1-700x350.jpg 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.55-1-300x150.jpg 300w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.55-1-768x384.jpg 768w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.55-1-1536x768.jpg 1536w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.55-1.jpg 1600w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"350\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-700x350.jpg\" alt=\"\" class=\"wp-image-1140\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-700x350.jpg 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-300x150.jpg 300w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-768x384.jpg 768w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-1536x768.jpg 1536w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54.jpg 1600w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"350\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-1-700x350.jpg\" alt=\"\" class=\"wp-image-1141\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-1-700x350.jpg 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-1-300x150.jpg 300w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-1-768x384.jpg 768w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-1-1536x768.jpg 1536w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-1.jpg 1600w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"350\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.53-700x350.jpg\" alt=\"\" class=\"wp-image-1142\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.53-700x350.jpg 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.53-300x150.jpg 300w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.53-768x384.jpg 768w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.53-1536x768.jpg 1536w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.53.jpg 1600w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"350\" src=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-2-700x350.jpg\" alt=\"\" class=\"wp-image-1143\" srcset=\"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-2-700x350.jpg 700w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-2-300x150.jpg 300w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-2-768x384.jpg 768w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-2-1536x768.jpg 1536w, https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.54-2.jpg 1600w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Dapat kita lihat, dari hasil uji, fitur deteksi segi empat yang kita tambahkan dapat bekerja baik. Bahkan juga dapat bekerja dengan baik untuk objek-objek nyata (dalam hal ini menggunakan gambar laptop). Object segi empat yang terdeteksi akan langsung diberikan border berwarna hijau. <\/p>\n\n\n\n<p>Seperti halnya pada postingan sebelumnya, kita belum menambahkan fitur capture. Karena kita masih memiliki banyak bentuk geometri yang belum kita rekognisi. Fitur capture akan kita tambahkan sebagai fitur terakhir setelah kita berhasil merekognisi berbagai bentuk geometri dengan menggunakan openCV dan Android.<\/p>\n\n\n\n<p>Baiklah, Demikianlah postingan saya tentang Bermain Dengan OpenCV di Android (Java) (bag. 2): Rekognisi Segi Empat (Rectangle). Anda dapat mengunduh project ini melalui tautan berikut ini: <strong><a href=\"https:\/\/github.com\/milstrike\/OpenCV-Project\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/milstrike\/OpenCV-Project<\/a><\/strong>.<\/p>\n\n\n\n<p>Semoga postingan bermanfaat bagi Anda para pembaca. Apabila ada pertanyaan mengenai postingan ini, Anda dapat meninggalkannya di kolom komentar. Dan, Apabila Anda menemukan artikel ini berguna, Anda dapat membagikannya. Anda juga dapat mencuplik beberapa bagian dari artikel ini, namun jangan lupa untuk sertakan URL nya. Terima kasih.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">^_^<\/h2>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>ARTIKEL TERKAIT:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/unydevelopernetwork.com\/index.php\/2022\/11\/19\/bermain-dengan-opencv-di-android-java-bag-1-rekognisi-lingkaran\/\" data-type=\"URL\" data-id=\"https:\/\/unydevelopernetwork.com\/index.php\/2022\/11\/19\/bermain-dengan-opencv-di-android-java-bag-1-rekognisi-lingkaran\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bermain Dengan OpenCV di Android (Java) (bag. 1): Rekognisi Lingkaran<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 7<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>Selamat datang di UNY Developer Network. Kita akan kembali bermain dengan OpenCV di Android, dan kali ini melakukan rekognisi segi empat (rectangle). Kita akan melanjutkan project yang sudah kita mulai sebelumnya, sehingga&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1142,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,27,2,69],"tags":[327,5,295,72,59,332,331,4],"class_list":["post-1132","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java","category-software-development","category-tutorial","category-umum-software-development","tag-android","tag-java","tag-opencv","tag-pemrograman","tag-programming","tag-recognition","tag-shape-recognition","tag-tutorial"],"featured_image_src":"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.53.jpg","author_info":{"display_name":"Muhammad Irfan Luthfi","author_link":"https:\/\/unydevelopernetwork.com\/index.php\/author\/admin\/"},"jetpack_featured_media_url":"https:\/\/unydevelopernetwork.com\/wp-content\/uploads\/2022\/11\/WhatsApp-Image-2022-11-26-at-00.50.53.jpg","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/posts\/1132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/comments?post=1132"}],"version-history":[{"count":1,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/posts\/1132\/revisions"}],"predecessor-version":[{"id":1144,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/posts\/1132\/revisions\/1144"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/media\/1142"}],"wp:attachment":[{"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/media?parent=1132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/categories?post=1132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unydevelopernetwork.com\/index.php\/wp-json\/wp\/v2\/tags?post=1132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}