WEBVTT 00:00.080 --> 00:00.960 Welcome back. 00:01.400 --> 00:09.240 The first step is converting the normalized coordinates to screen coordinates left, right, top and 00:09.240 --> 00:09.880 bottom. 00:10.000 --> 00:17.360 Now suppose your screen or preview image has size for example 1080. 00:17.600 --> 00:23.560 Let me give you an example 1080 and height 1920. 00:23.600 --> 00:38.080 The model gives you a bounding box with rect f 0.1, f 0.2 f 0.4 f 0.6 f. 00:38.200 --> 00:43.400 Okay, this is the screen size and the bounding box. 00:43.520 --> 00:46.280 Let's get the screen size. 00:46.280 --> 00:55.680 So here the left would be 0.1 times 1080 equals to 108 pixels. 00:55.680 --> 00:56.640 And so on. 00:56.680 --> 00:57.240 Okay. 00:57.280 --> 01:00.360 This is for the top right left and bottom. 01:00.480 --> 01:12.670 So here we get the left right top and button in pixels, so we can draw the box, the bounding box, 01:12.670 --> 01:13.750 into the screen. 01:13.870 --> 01:23.070 This code maps detection coordinates from modal space zero one to actual device screen space, so that 01:23.110 --> 01:30.070 you can draw rectangles or overlays correctly aligned with your camera preview. 01:30.190 --> 01:36.950 Let's use those bounds and pixels, and let's draw the bounding box. 01:37.070 --> 01:39.590 Draw a round rectangle. 01:39.630 --> 01:51.830 You can use, for example draw context by canvas dot native canvas dot draw rectangle and set the bounds 01:51.870 --> 02:00.070 left, top, right and bottom and make sure that they are with the same order as this. 02:00.070 --> 02:01.870 So box paint. 02:01.910 --> 02:02.550 Here we go. 02:02.590 --> 02:11.620 This line of code typically draws the bounding box for each detected Object when you run the object 02:11.620 --> 02:16.300 detection TensorFlow Lite or ML Kit or any other examples. 02:16.300 --> 02:19.460 And this in this application we're using TensorFlow Lite. 02:19.580 --> 02:28.340 The model returns bounding box coordinate and converted to pixels like we did earlier like this. 02:28.340 --> 02:32.780 So the returning result would be a red f. 02:32.980 --> 02:36.620 And this rect f is converted to pixels. 02:36.780 --> 02:43.260 And then we're going to draw the box and renders the rectangle on the screen. 02:43.300 --> 02:50.300 Again guys I want from you to understand what we've did the returning result. 02:50.500 --> 02:53.500 So let me show you guys first step. 02:53.500 --> 02:58.900 The returning result from the model returns rect f. 02:58.940 --> 03:05.180 And then the second step is converting it to normalized coordinates. 03:05.180 --> 03:11.780 So we convert the rect f which is this array into pixels. 03:12.140 --> 03:17.280 Then the third step is to draw the bounding box. 03:17.280 --> 03:18.680 Draw context. 03:18.720 --> 03:22.760 This is the compose drawing environment inside a canvas. 03:22.760 --> 03:30.840 Composable and native canvas gives you access to the underlying Android Canvas API, the traditional 03:30.840 --> 03:33.360 one from the Android graphics package. 03:33.640 --> 03:42.480 This allows you to use a standard canvas drawing functions such as drawrect, draw text, and etc. in 03:42.520 --> 03:44.960 this case we need to draw a rectangle. 03:44.960 --> 03:51.640 So we used Drawrect the function and we need to pass five parameters. 03:51.640 --> 03:57.360 So if you hover here your mouse fetching documents, we have five parameters. 03:57.360 --> 04:02.600 We need to pass the left first, second, top, right and bottom. 04:02.600 --> 04:11.160 Make sure that you pass the parameters as this order, and the last one is a paint an object of type 04:11.240 --> 04:11.920 paint. 04:11.920 --> 04:20.430 Those are the coordinates of rectangular rectangles edges which you computed earlier, and the box pain 04:20.430 --> 04:23.550 defines the style of the box. 04:23.550 --> 04:29.230 So this is the style of the box that we defined before we finished the box. 04:29.230 --> 04:41.110 Now let's draw the label with confidence val label text equals to result dot label result dot confidence. 04:41.150 --> 04:50.510 Get the confidence and multiply it by 100 because it's a decimal one and convert it to int okay this 04:50.510 --> 04:51.550 is the label. 04:51.590 --> 04:56.670 Now in the same way we're going to use the draw context. 04:56.670 --> 05:03.910 But this time use the Drawtext function label text left top and paint. 05:03.910 --> 05:14.390 Also we're going to add the plus ten f to offset from left edge plus 50 to offset from top edge. 05:14.550 --> 05:20.550 So we draw the label with confidence and the bounding box.