WEBVTT 00:00.080 --> 00:00.960 Welcome back. 00:01.280 --> 00:04.520 Let's continue designing the user interface. 00:04.520 --> 00:09.400 And here in this video we're going to create a new Kotlin file. 00:09.440 --> 00:12.320 Name it as boxes. 00:12.440 --> 00:14.440 This file. 00:14.440 --> 00:21.880 This Kotlin file contains a composable function named as boxes. 00:21.920 --> 00:26.280 We need to draw boxes around the detected objects. 00:26.520 --> 00:32.680 So for this purpose create a modifier and a color modifier. 00:32.680 --> 00:36.560 Import the class from compose and paint. 00:36.600 --> 00:41.760 It's of type paint also path color list. 00:41.960 --> 00:47.240 It's a list of colors from Android Compose UI. 00:47.280 --> 00:53.200 Please pay attention to the imports and detection list object. 00:53.240 --> 00:56.000 It's of type list of detection objects. 00:56.240 --> 00:58.080 The class that we created before. 00:58.240 --> 01:05.110 So here the UI, graphics and paint from Android graphics inside it. 01:05.110 --> 01:11.150 Let's create and draw boxes in order to create something on the screen. 01:11.150 --> 01:16.910 On the camera preview, on anything on Android, we need to use canvas. 01:17.150 --> 01:24.270 So the canvas here set the modifier to modifier dot fill maximum size. 01:24.630 --> 01:31.750 We need to fill the maximum size of the detected object, and on draw what we need to do, we need to 01:31.790 --> 01:35.590 set the detection list object and draw a rectangle. 01:35.790 --> 01:36.550 So here. 01:36.590 --> 01:46.550 Here we need to process a list of detected objects and perform two main operations for each detection. 01:46.550 --> 01:55.230 Let me start with the first one using detection list object dot map index. 01:55.350 --> 02:00.930 And here set the index I and detection object like this. 02:01.090 --> 02:07.050 So this lambda expression takes two parameters index and detection object. 02:07.090 --> 02:16.770 The mapped index is a function in Kotlin that transforms each element in a collection, while providing 02:16.770 --> 02:19.450 access to the index I. 02:19.730 --> 02:25.610 The current index, the position in the list, and the detection object. 02:25.610 --> 02:28.730 The current object detection results. 02:28.770 --> 02:31.490 What happens for each detection? 02:31.490 --> 02:36.970 We need to logcat for us for debugging like this. 02:36.970 --> 02:46.370 So log dot v and set the tag for tag and set the detection result like this. 02:46.370 --> 02:49.130 Detection object dot label. 02:49.250 --> 03:01.760 Then set the paint to apply the color equals to path color list at index I dot 2RGB. 03:01.920 --> 03:10.320 Color sets the paint color using the corresponding color from path color list based on the current index. 03:10.440 --> 03:18.000 The style sets the paint to fill mode for drawing filled shape is Anti-alias. 03:18.200 --> 03:22.760 Enables smooth edges for drawn objects. 03:22.800 --> 03:27.080 Equals to true and text size equals to 50 f. 03:27.520 --> 03:32.160 Sets the text size to 50 pixels, likely for drawing labels. 03:32.160 --> 03:38.000 This is the commonly used in computer vision applications to process multiple object detections from 03:38.000 --> 03:38.640 a model. 03:38.840 --> 03:43.000 Assign different colors to different objects types. 03:43.040 --> 03:49.320 Prepare for drawing bounding boxes or labels, or on an image canvas. 03:49.360 --> 03:55.620 Let's continue with this detection list Object and inside the mapped index. 03:55.620 --> 03:58.660 Let's continue with draw a rectangle. 03:58.700 --> 04:02.780 Draw a rectangle inside this draw rect. 04:02.820 --> 04:08.620 We need to pass the parameters color equals to path colors. 04:08.620 --> 04:15.420 At index I the top left, we need to get the detection and set the bounds. 04:15.420 --> 04:18.220 So here start with offset. 04:18.260 --> 04:28.100 Pass two parameters x and y bounding box left and y equals to detection bounding box dot top. 04:28.220 --> 04:34.460 And here we need to pass another parameter which is size equals to size. 04:34.700 --> 04:43.500 Set the width equals to detection object dot bounding box dot width height detection box height. 04:43.660 --> 04:53.530 And here set the style equals to stroke and set the width equals to import the stroke from draw scoop. 04:53.850 --> 05:01.690 Set the width to three dpi and the two pixels import dpi and two pixels. 05:01.890 --> 05:06.290 Then we need to create draw into canvas. 05:06.290 --> 05:06.890 Don't worry. 05:06.930 --> 05:08.730 We're going to clarify everything. 05:08.930 --> 05:11.290 Draw into canvas. 05:11.410 --> 05:13.970 It dot native canvas. 05:13.970 --> 05:18.130 To solve this problem, draw into canvas and draw rectangle. 05:18.130 --> 05:29.370 We need to remove this scope the curly braces here for the Ondraw function and you can see on draw rectangle 05:29.370 --> 05:29.810 is. 05:30.090 --> 05:34.210 Set it and Alt+ enter to import draw into canvas. 05:34.530 --> 05:43.650 Everything is working fine okay, so just remove the curly braces and the scope of the ondraw and set 05:43.650 --> 05:44.850 it like this. 05:45.050 --> 05:47.530 Okay, it's very simple here. 05:47.770 --> 05:52.550 We need to set the native canvas dot text. 05:52.670 --> 05:56.750 The text is detection object dot label. 05:56.990 --> 06:01.190 And we need to set the percentage. 06:01.390 --> 06:07.150 For this purpose, use this format percentage 0.2. 06:07.190 --> 06:14.830 We need to decimal points to decimal digits or two digits after the decimal point. 06:14.870 --> 06:16.990 Dot format detection. 06:17.030 --> 06:18.630 Object dot. 06:18.790 --> 06:20.310 We need to get the score. 06:20.550 --> 06:20.990 Okay. 06:21.030 --> 06:24.950 The score is the percentage of the detected object. 06:24.990 --> 06:25.430 Okay. 06:25.470 --> 06:26.390 Like this. 06:26.430 --> 06:30.590 And here the score times 100. 06:30.630 --> 06:33.870 Because the score is in decimal point. 06:33.870 --> 06:38.790 We need to make it as a percentage and like put the percentage sign. 06:38.830 --> 06:40.510 This is the detection label. 06:40.750 --> 06:47.780 We need to set the detection the coordinates of the origin and y coordinates of the origin. 06:47.820 --> 06:53.460 The top left and set the top left, the text at the top left of the box. 06:53.580 --> 07:03.380 So for that detection object dot bounding box dot left and the y coordinate detection box dot top. 07:03.580 --> 07:11.020 We can make it as top level top left and pass the paint parameter. 07:11.060 --> 07:18.500 Go up the draw rectangle draws a rectangle on the canvas, likely in a compose custom drawing context. 07:18.820 --> 07:24.980 The color uses the color from the color list at the current index I. 07:25.460 --> 07:30.380 U ensures the consistent coloring of the for the same object type. 07:30.380 --> 07:34.300 For example, if you detect cars, the cars would be in green. 07:34.540 --> 07:36.620 The left coordinates. 07:36.780 --> 07:44.060 The x coordinates of the left edge of the bounding box y coordinates is the the coordinate y coordinate 07:44.100 --> 07:46.720 of the top edge of the bounding box. 07:47.040 --> 07:47.720 The size. 07:48.120 --> 07:51.160 The width calculates the width from left to right. 07:51.400 --> 07:55.120 Height calculates the height from top to bottom. 07:55.440 --> 08:03.120 The stroke draws only the outline border, not a filled rectangle, and 3D dot two pixels. 08:03.120 --> 08:09.040 Converts three density independent pixels to actual pixels for the current screen. 08:09.080 --> 08:17.160 Here, the draw into canvas draws text labels above the bounding box for detected objects. 08:17.160 --> 08:25.400 The detection object dot label, the object class name, for example person, car, and whatever you 08:25.400 --> 08:25.880 want. 08:26.000 --> 08:27.000 The um. 08:27.360 --> 08:33.440 This formats the confidence score as a percentage with two decimal places.