Welcome back.
The first step is converting the normalized coordinates to screen coordinates left, right, top and
bottom.
Now suppose your screen or preview image has size for example 1080.
Let me give you an example 1080 and height 1920.
The model gives you a bounding box with rect f 0.1, f 0.2 f 0.4 f 0.6 f.
Okay, this is the screen size and the bounding box.
Let's get the screen size.
So here the left would be 0.1 times 1080 equals to 108 pixels.
And so on.
Okay.
This is for the top right left and bottom.
So here we get the left right top and button in pixels, so we can draw the box, the bounding box,
into the screen.
This code maps detection coordinates from modal space zero one to actual device screen space, so that
you can draw rectangles or overlays correctly aligned with your camera preview.
Let's use those bounds and pixels, and let's draw the bounding box.
Draw a round rectangle.
You can use, for example draw context by canvas dot native canvas dot draw rectangle and set the bounds
left, top, right and bottom and make sure that they are with the same order as this.
So box paint.
Here we go.
This line of code typically draws the bounding box for each detected Object when you run the object
detection TensorFlow Lite or ML Kit or any other examples.
And this in this application we're using TensorFlow Lite.
The model returns bounding box coordinate and converted to pixels like we did earlier like this.
So the returning result would be a red f.
And this rect f is converted to pixels.
And then we're going to draw the box and renders the rectangle on the screen.
Again guys I want from you to understand what we've did the returning result.
So let me show you guys first step.
The returning result from the model returns rect f.
And then the second step is converting it to normalized coordinates.
So we convert the rect f which is this array into pixels.
Then the third step is to draw the bounding box.
Draw context.
This is the compose drawing environment inside a canvas.
Composable and native canvas gives you access to the underlying Android Canvas API, the traditional
one from the Android graphics package.
This allows you to use a standard canvas drawing functions such as drawrect, draw text, and etc. in
this case we need to draw a rectangle.
So we used Drawrect the function and we need to pass five parameters.
So if you hover here your mouse fetching documents, we have five parameters.
We need to pass the left first, second, top, right and bottom.
Make sure that you pass the parameters as this order, and the last one is a paint an object of type
paint.
Those are the coordinates of rectangular rectangles edges which you computed earlier, and the box pain
defines the style of the box.
So this is the style of the box that we defined before we finished the box.
Now let's draw the label with confidence val label text equals to result dot label result dot confidence.
Get the confidence and multiply it by 100 because it's a decimal one and convert it to int okay this
is the label.
Now in the same way we're going to use the draw context.
But this time use the Drawtext function label text left top and paint.
Also we're going to add the plus ten f to offset from left edge plus 50 to offset from top edge.
So we draw the label with confidence and the bounding box.