WEBVTT 00:00.080 --> 00:00.880 Welcome back. 00:01.240 --> 00:11.000 Now let's create the screen that links the main activity, the ViewModel and the whole UI. 00:11.200 --> 00:15.680 This screen is called Object Detection screen. 00:15.800 --> 00:18.520 Create a new Kotlin file. 00:18.560 --> 00:21.680 Name it as detection screen. 00:21.720 --> 00:32.320 Start with new composable function called object detection screen takes two parameters the modifier. 00:32.360 --> 00:39.760 It's of type modifier equals to modifier and view model. 00:39.760 --> 00:41.720 It's of type detection ViewModel. 00:41.880 --> 00:51.720 Then we need to pass the val context equals to local context dot current Alt+ enter to import it. 00:51.720 --> 01:02.480 And here val paint equals to paint alt plus enter to import it from Android graphics val path color 01:02.520 --> 01:10.600 list equals to list of color dot green color dot yarn. 01:10.760 --> 01:13.440 Color dot red. 01:13.640 --> 01:18.240 Those are the colors that we're going to use to draw the boxes with. 01:18.280 --> 01:20.360 You can add much more. 01:20.720 --> 01:28.840 So color dot for example magenta color dot black and blue and so on. 01:28.880 --> 01:29.280 Okay. 01:29.320 --> 01:35.160 So those are the colors that we're going to use for detecting and drawing. 01:35.200 --> 01:42.680 The box that show properties equals to remember mutable state of false. 01:42.720 --> 01:46.360 This is just an optional variable. 01:46.360 --> 01:55.640 If you're going to use this the update the update parameters, which is also an optional to detect and 01:55.640 --> 02:01.920 control the parameters, which is the threshold of sensitivity. 02:01.960 --> 02:05.000 Okay, for now we create the context. 02:05.160 --> 02:08.440 Paint a path color list variable. 02:08.600 --> 02:11.000 Set the launched effect. 02:11.040 --> 02:13.600 Start calling the ViewModel. 02:13.600 --> 02:17.410 So launched effect Initialize it here. 02:17.450 --> 02:23.090 Pass the unit and ViewModel dot initialize. 02:23.170 --> 02:25.010 Here we are initializing. 02:25.050 --> 02:28.810 We are calling the ViewModel functions. 02:28.810 --> 02:36.250 We started with initialize function and we use it inside the launched effect. 02:36.250 --> 02:37.930 Let's continue with the UI. 02:38.090 --> 02:40.570 So here create a scaffold. 02:40.570 --> 02:50.930 If you want to use fab bottom bar, toolbar or any other things like this, we use the scaffold okay. 02:51.130 --> 02:57.370 So content window inset equals to window insets. 02:57.410 --> 03:00.290 Dot I am for windows okay. 03:00.330 --> 03:01.370 It's very simple. 03:01.490 --> 03:07.850 Set the inner padding which is and use the camera permission wrapper. 03:07.890 --> 03:18.330 Composable function modifier equals to modifier dot fill maximum size and use dot padding. 03:18.730 --> 03:25.090 Pass the inner padding dot consume window inset and inner padding. 03:25.130 --> 03:27.130 Alt plus enter and here we go. 03:27.290 --> 03:35.690 What I am doing, we are calling the composable function that we created before called camera permission 03:35.730 --> 03:36.490 wrapper. 03:36.490 --> 03:43.210 So this file, this composable function is being called inside this scaffold. 03:43.210 --> 03:50.050 Now let me continue here and call the other UI composable functions. 03:50.090 --> 03:52.090 I want from you to concentrate. 03:52.130 --> 04:05.010 Now when we get val state equals to view model dot initialize state dot collect as state and set the 04:05.010 --> 04:07.050 value or get the value. 04:07.090 --> 04:11.730 What we need to do here the state is from the view model. 04:11.730 --> 04:13.690 Let me go back to the ViewModel. 04:13.730 --> 04:21.570 The view model we have a state mutable state flow and this state is being updated. 04:21.570 --> 04:26.730 As I lectured before, if you are loading the model, set the state to loading. 04:26.730 --> 04:29.690 If you finished loading, set it to success. 04:29.850 --> 04:33.620 If you failed, go and set it as failed. 04:33.620 --> 04:40.420 So here we are checking if the state or this is similar to if and else. 04:40.420 --> 04:42.060 So I'm using when here. 04:42.060 --> 04:49.620 And as I told you I love to to use different syntaxes with coatings response dot loading. 04:49.740 --> 04:51.900 So in the response we have three states. 04:51.900 --> 05:01.620 If it is loading what we need to do, go and display a circular progress bar circular progress indicator. 05:01.740 --> 05:12.380 If it is success, what we need to do response dot success pass this unit and if it is failed, what 05:12.380 --> 05:16.620 we need to do is response failed. 05:16.660 --> 05:24.980 Go and create a text state state, dot exception, dot message or print. 05:24.980 --> 05:30.140 An error occurred okay and unknown error occurred. 05:30.180 --> 05:31.100 In the next video. 05:31.140 --> 05:37.620 We're going to finish our app by creating this response dot success.