Welcome back.
Let's continue designing the user interface.
And here in this video we're going to create a new Kotlin file.
Name it as boxes.
This file.
This Kotlin file contains a composable function named as boxes.
We need to draw boxes around the detected objects.
So for this purpose create a modifier and a color modifier.
Import the class from compose and paint.
It's of type paint also path color list.
It's a list of colors from Android Compose UI.
Please pay attention to the imports and detection list object.
It's of type list of detection objects.
The class that we created before.
So here the UI, graphics and paint from Android graphics inside it.
Let's create and draw boxes in order to create something on the screen.
On the camera preview, on anything on Android, we need to use canvas.
So the canvas here set the modifier to modifier dot fill maximum size.
We need to fill the maximum size of the detected object, and on draw what we need to do, we need to
set the detection list object and draw a rectangle.
So here.
Here we need to process a list of detected objects and perform two main operations for each detection.
Let me start with the first one using detection list object dot map index.
And here set the index I and detection object like this.
So this lambda expression takes two parameters index and detection object.
The mapped index is a function in Kotlin that transforms each element in a collection, while providing
access to the index I.
The current index, the position in the list, and the detection object.
The current object detection results.
What happens for each detection?
We need to logcat for us for debugging like this.
So log dot v and set the tag for tag and set the detection result like this.
Detection object dot label.
Then set the paint to apply the color equals to path color list at index I dot 2RGB.
Color sets the paint color using the corresponding color from path color list based on the current index.
The style sets the paint to fill mode for drawing filled shape is Anti-alias.
Enables smooth edges for drawn objects.
Equals to true and text size equals to 50 f.
Sets the text size to 50 pixels, likely for drawing labels.
This is the commonly used in computer vision applications to process multiple object detections from
a model.
Assign different colors to different objects types.
Prepare for drawing bounding boxes or labels, or on an image canvas.
Let's continue with this detection list Object and inside the mapped index.
Let's continue with draw a rectangle.
Draw a rectangle inside this draw rect.
We need to pass the parameters color equals to path colors.
At index I the top left, we need to get the detection and set the bounds.
So here start with offset.
Pass two parameters x and y bounding box left and y equals to detection bounding box dot top.
And here we need to pass another parameter which is size equals to size.
Set the width equals to detection object dot bounding box dot width height detection box height.
And here set the style equals to stroke and set the width equals to import the stroke from draw scoop.
Set the width to three dpi and the two pixels import dpi and two pixels.
Then we need to create draw into canvas.
Don't worry.
We're going to clarify everything.
Draw into canvas.
It dot native canvas.
To solve this problem, draw into canvas and draw rectangle.
We need to remove this scope the curly braces here for the Ondraw function and you can see on draw rectangle
is.
Set it and Alt+ enter to import draw into canvas.
Everything is working fine okay, so just remove the curly braces and the scope of the ondraw and set
it like this.
Okay, it's very simple here.
We need to set the native canvas dot text.
The text is detection object dot label.
And we need to set the percentage.
For this purpose, use this format percentage 0.2.
We need to decimal points to decimal digits or two digits after the decimal point.
Dot format detection.
Object dot.
We need to get the score.
Okay.
The score is the percentage of the detected object.
Okay.
Like this.
And here the score times 100.
Because the score is in decimal point.
We need to make it as a percentage and like put the percentage sign.
This is the detection label.
We need to set the detection the coordinates of the origin and y coordinates of the origin.
The top left and set the top left, the text at the top left of the box.
So for that detection object dot bounding box dot left and the y coordinate detection box dot top.
We can make it as top level top left and pass the paint parameter.
Go up the draw rectangle draws a rectangle on the canvas, likely in a compose custom drawing context.
The color uses the color from the color list at the current index I.
U ensures the consistent coloring of the for the same object type.
For example, if you detect cars, the cars would be in green.
The left coordinates.
The x coordinates of the left edge of the bounding box y coordinates is the the coordinate y coordinate
of the top edge of the bounding box.
The size.
The width calculates the width from left to right.
Height calculates the height from top to bottom.
The stroke draws only the outline border, not a filled rectangle, and 3D dot two pixels.
Converts three density independent pixels to actual pixels for the current screen.
Here, the draw into canvas draws text labels above the bounding box for detected objects.
The detection object dot label, the object class name, for example person, car, and whatever you
want.
The um.
This formats the confidence score as a percentage with two decimal places.