WEBVTT 00:00.120 --> 00:00.920 Welcome back. 00:01.280 --> 00:06.960 We created the Android view that allows us to use traditional Android views with Jetpack Compose. 00:07.000 --> 00:13.200 Also, we said that why we use it because Camerax uses views and not Composables. 00:13.440 --> 00:15.880 And for this we created the camera. 00:15.920 --> 00:21.440 Now let's create the bounding boxes and labels for detected objects. 00:21.600 --> 00:32.280 Start with canvas, set the modifier, keep it as this and then val text paint equals to paint. 00:32.280 --> 00:35.040 It's from Android Graphics. 00:35.040 --> 00:37.080 So import this dot. 00:37.240 --> 00:37.880 Apply. 00:38.080 --> 00:44.680 Set the color to color dot red and the color from Android graphics. 00:44.720 --> 00:47.800 Text size equals to 100 f. 00:47.840 --> 00:53.520 Text align paint alignleft and the typeface. 00:53.520 --> 00:55.680 You can set the bold okay. 00:55.880 --> 01:00.610 Select the typeface from Android Graphics dot bold default. 01:00.610 --> 01:01.210 Okay. 01:01.330 --> 01:06.170 Please check that the typeface is not from compose UI. 01:06.410 --> 01:11.770 Just scroll down and Alt Plus enter to import Android graphics. 01:11.930 --> 01:15.130 Then let's create the bounding box. 01:15.130 --> 01:21.370 By the way, we used the canvas to set up paints, colors and styles. 01:21.410 --> 01:26.810 Process each detection result and the draw bounding boxes and labels. 01:27.050 --> 01:31.490 And here we use the text paint defining the color red. 01:31.530 --> 01:32.450 Red text. 01:32.490 --> 01:36.770 Large text, text alignment left and bold font. 01:36.810 --> 01:42.770 Okay, let's draw the bounding box using the same technique. 01:42.930 --> 01:49.850 Box paint equals to paint from Android graphics dot apply. 01:50.010 --> 01:51.890 Set the color to red. 01:51.930 --> 01:53.690 You can make it the green. 01:53.730 --> 01:57.370 It's better to use green for object detection. 01:57.370 --> 01:58.090 Stroke. 01:58.340 --> 02:04.580 You can make it, uh, like four f thick border, 510. 02:04.940 --> 02:05.660 Whatever you want. 02:05.700 --> 02:08.940 I'll make it six and stroke a hollow box. 02:08.980 --> 02:09.820 Not filled. 02:09.980 --> 02:10.540 Okay. 02:10.580 --> 02:12.300 Not filled box. 02:12.300 --> 02:19.540 Now let's draw for every result in our, um, in our list here. 02:19.700 --> 02:29.180 For the detection results, let me create for every detection result, uh, and, uh, paint a text 02:29.180 --> 02:29.540 paint. 02:29.540 --> 02:34.220 So we need to create a green box and a red label. 02:34.420 --> 02:41.340 So start with for result in detection results in this list. 02:41.380 --> 02:47.380 Now I want from you to focus with me because there is a very important topic here. 02:47.620 --> 02:49.460 We should pay attention to it. 02:49.500 --> 02:52.260 For every result in detection result. 02:52.300 --> 02:57.150 Go and draw a green box and red a label. 02:57.190 --> 03:00.590 We have to normalize coordinates. 03:00.870 --> 03:05.750 Each coordinate value is between 0 and 1 relative to image size. 03:05.910 --> 03:11.510 So here inside this loop we're going to loop through each detection result. 03:11.510 --> 03:17.510 And each result typically contains a detection object label. 03:17.630 --> 03:26.110 So if we go back to the detection result we get that label the confidence and the bounding box which 03:26.110 --> 03:31.230 is of rectangular f which is a normalized coordinate. 03:31.270 --> 03:31.790 Okay. 03:31.990 --> 03:34.590 So I want from you to focus. 03:34.590 --> 03:47.230 Now val left equals to result dot bounding box dot left times screen size and screen width val top. 03:47.270 --> 03:49.750 Don't worry, we're gonna explain everything. 03:49.870 --> 03:56.200 Here we are converting normalized coordinates to screen coordinates. 03:56.240 --> 04:05.800 Getting val left equals to result bounding box dot left and this result is between 0 and 1. 04:05.800 --> 04:09.160 Multiplying it by size dot width. 04:09.280 --> 04:14.560 Here size dot width converts it to the actual pixel position on the screen. 04:14.760 --> 04:17.200 The left edge of the box. 04:17.200 --> 04:30.360 So here for example, if we have the screen size like one 1000, uh 80 1080, we get the left position. 04:30.360 --> 04:35.600 If we have 0.5, we get 270 pixels. 04:35.600 --> 04:37.280 So here are the bounds. 04:37.280 --> 04:43.240 The left top right and bottom left, top right and bottom. 04:43.280 --> 04:43.760 Okay. 04:43.920 --> 04:52.080 So here we are trying to get the screen coordinates uh and make the borders.