FoKE-Developers · ing03201 · Oct 7, 2024 · Oct 7, 2024
diff --git a/data/src/main/java/com/foke/together/data/repository/AppPreferencesRepository.kt b/data/src/main/java/com/foke/together/data/repository/AppPreferencesRepository.kt
@@ -3,7 +3,9 @@ package com.foke.together.data.repository
 import androidx.datastore.core.DataStore
 import com.foke.together.AppPreferences
 import com.foke.together.CameraSource
+import com.foke.together.CutFrameSource
 import com.foke.together.domain.interactor.entity.CameraSourceType
+import com.foke.together.domain.interactor.entity.CutFrameSourceType
 import com.foke.together.domain.interactor.entity.ExternalCameraIP
 import com.foke.together.domain.output.AppPreferenceInterface
 import kotlinx.coroutines.flow.Flow
@@ -58,4 +60,30 @@ class AppPreferencesRepository @Inject constructor(
             it.toBuilder().clear().build()
         }
     }
+
+    override fun getCutFrameSourceType(): Flow<CutFrameSourceType> =
+        appPreferencesFlow.map {
+            it.cutFrameSource?.run {
+                when (this) {
+                    CutFrameSource.MAKER_FAIRE -> CutFrameSourceType.MAKER_FAIRE
+                    CutFrameSource.FOKE_LIGHT -> CutFrameSourceType.FOKE_LIGHT
+                    CutFrameSource.FOKE_DARK -> CutFrameSourceType.FOKE_DARK
+                    CutFrameSource.UNRECOGNIZED -> null
+                }
+            } ?: CutFrameSourceType.MAKER_FAIRE // set to default INTERNAL
+        }
+
+    override suspend fun setCutFrameSourceType(type: CutFrameSourceType){
+        when (type) {
+            CutFrameSourceType.MAKER_FAIRE -> CutFrameSource.MAKER_FAIRE
+            CutFrameSourceType.FOKE_LIGHT -> CutFrameSource.FOKE_LIGHT
+            CutFrameSourceType.FOKE_DARK -> CutFrameSource.FOKE_DARK
+        }.apply {
+            appPreferences.updateData {
+                it.toBuilder()
+                    .setCutFrameSource(this)
+                    .build()
+            }
+        }
+    }
 }
diff --git a/data/src/main/proto/app_preferences.proto b/data/src/main/proto/app_preferences.proto
@@ -14,6 +14,7 @@ message AppPreferences {
 
     CameraSource camera_source = 10;
     string external_camera_ip = 11;
+    CutFrameSource cut_frame_source = 12;
 
     // TODO: sample code. remove later.
     string sample_id = 999997;
@@ -24,4 +25,10 @@ message AppPreferences {
 enum CameraSource {
     CAMERA_SOURCE_INTERNAL = 0;
     CAMERA_SOURCE_EXTERNAL = 1;
+}
+
+enum CutFrameSource {
+    MAKER_FAIRE = 0;
+    FOKE_LIGHT = 1;
+    FOKE_DARK = 2;
 }
diff --git a/domain/src/main/java/com/foke/together/domain/interactor/GetCutFrameSourceTypeUseCase.kt b/domain/src/main/java/com/foke/together/domain/interactor/GetCutFrameSourceTypeUseCase.kt
@@ -0,0 +1,14 @@
+package com.foke.together.domain.interactor
+
+import com.foke.together.domain.interactor.entity.CutFrameSourceType
+import com.foke.together.domain.output.AppPreferenceInterface
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.map
+import javax.inject.Inject
+
+class GetCutFrameSourceTypeUseCase @Inject constructor(
+    private val appPreference: AppPreferenceInterface
+) {
+    operator fun invoke(): Flow<CutFrameSourceType> =
+        appPreference.getCutFrameSourceType().map { it }
+}
diff --git a/domain/src/main/java/com/foke/together/domain/interactor/SetCutFrameSourceTypeUseCase.kt b/domain/src/main/java/com/foke/together/domain/interactor/SetCutFrameSourceTypeUseCase.kt
@@ -0,0 +1,13 @@
+package com.foke.together.domain.interactor
+
+import com.foke.together.domain.interactor.entity.CameraSourceType
+import com.foke.together.domain.interactor.entity.CutFrameSourceType
+import com.foke.together.domain.output.AppPreferenceInterface
+import javax.inject.Inject
+
+class SetCutFrameSourceTypeUseCase @Inject constructor(
+    private val appPreference: AppPreferenceInterface
+) {
+    suspend operator fun invoke(cutFrameSourceType: CutFrameSourceType) =
+        appPreference.setCutFrameSourceType(cutFrameSourceType)
+}
diff --git a/domain/src/main/java/com/foke/together/domain/interactor/entity/CutFrameSourceType.kt b/domain/src/main/java/com/foke/together/domain/interactor/entity/CutFrameSourceType.kt
@@ -0,0 +1,7 @@
+package com.foke.together.domain.interactor.entity
+
+enum class CutFrameSourceType {
+    MAKER_FAIRE,
+    FOKE_LIGHT,
+    FOKE_DARK,
+}
diff --git a/domain/src/main/java/com/foke/together/domain/output/AppPreferenceInterface.kt b/domain/src/main/java/com/foke/together/domain/output/AppPreferenceInterface.kt
@@ -1,6 +1,7 @@
 package com.foke.together.domain.output
 
 import com.foke.together.domain.interactor.entity.CameraSourceType
+import com.foke.together.domain.interactor.entity.CutFrameSourceType
 import com.foke.together.domain.interactor.entity.ExternalCameraIP
 import kotlinx.coroutines.flow.Flow
 
@@ -11,5 +12,8 @@ interface AppPreferenceInterface {
     fun getExternalCameraIP(): Flow<ExternalCameraIP>
     suspend fun setExternalCameraIP(ip: ExternalCameraIP)
 
+    fun getCutFrameSourceType(): Flow<CutFrameSourceType>
+    suspend fun setCutFrameSourceType(type: CutFrameSourceType)
+
     suspend fun clearAll()
 }
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -59,6 +59,8 @@ protoc = "com.google.protobuf:protoc:4.28.2"
 constraint-layout-compose = "1.0.1"
 android-mjpeg-view = "1.1.3"
 material-icons-extended = "1.7.2"
+ui-graphics-android = "1.7.3"
+coil-compose = "2.7.0"
 
 # test -----------
 junit = "4.13.2"
@@ -120,6 +122,8 @@ protobuf_javalite = { group = "com.google.protobuf", name = "protobuf-javalite",
 androidx-constraintlayout-compose = { group = "androidx.constraintlayout", name = "constraintlayout-compose", version.ref = "constraint-layout-compose" }
 androidx-material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended", version.ref = "material-icons-extended" }
 android-mjpeg-view = { group = "com.perthcpe23.dev", name = "android-mjpeg-view", version.ref = "android-mjpeg-view" }
+androidx-ui-graphics-android = { group = "androidx.compose.ui", name = "ui-graphics-android", version.ref = "ui-graphics-android" }
+coil-compose = { group = "io.coil-kt", name = "coil-compose", version.ref = "coil-compose" }
 
 # test -----------
 junit = { group = "junit", name = "junit", version.ref = "junit" }

diff --git a/presenter/build.gradle.kts b/presenter/build.gradle.kts
@@ -40,6 +40,7 @@ dependencies {
     // navigation
     implementation(libs.androidx.hilt.navigation.compose)
     implementation(libs.androidx.navigation.compose)
+    implementation(libs.coil.compose)
 
     // test
     testImplementation(libs.junit)

diff --git a/presenter/src/main/java/com/foke/together/presenter/frame/MakerFaireFrame.kt b/presenter/src/main/java/com/foke/together/presenter/frame/MakerFaireFrame.kt
@@ -1,5 +1,6 @@
 package com.foke.together.presenter.frame
 
+import android.net.Uri
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
@@ -20,13 +21,14 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.constraintlayout.compose.ConstraintLayout
 import androidx.constraintlayout.compose.Dimension
+import coil.compose.AsyncImage
 import com.foke.together.presenter.R
 import com.foke.together.presenter.theme.FourCutTogetherTheme
 import com.foke.together.util.TimeUtil
 
 @Composable
 fun MakerFaireFrame(
-    cameraImageUrlList : List<String>? = null,
+    cameraImageUrlList : List<Uri>? = null,
     backgroundColor : Color = Color(0xFFF5B934),
     decorateImageUrl: String? = null,
 ) {
@@ -52,14 +54,19 @@ fun MakerFaireFrame(
                 .wrapContentSize()
         ) {
             items(4){
+                itemIndex ->
                 if(backgroundColor == Color.White) {
                     //TODO: add camera image
                     // change Box -> ImageView
                     Box(
                         modifier = Modifier
                             .aspectRatio(1.5f)
                             .background(color = Color.Black)
-                    )
+                    ){
+                        AsyncImage(
+                            model = cameraImageUrlList?.get(itemIndex),
+                        )
+                    }
                 }
                 else {
                     //TODO: add camera image

diff --git a/presenter/src/main/java/com/foke/together/presenter/screen/CameraScreen.kt b/presenter/src/main/java/com/foke/together/presenter/screen/CameraScreen.kt
@@ -11,6 +11,9 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.graphics.layer.drawLayer
+import androidx.compose.ui.graphics.rememberGraphicsLayer
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
@@ -37,6 +40,8 @@ fun CameraScreen(
 ) {
     val TAG = "CameraScreen"
     var mjpegView: MjpegView? = null
+    val context = LocalContext.current
+    var graphicsLayer = rememberGraphicsLayer()
     ConstraintLayout(
         modifier = Modifier.fillMaxSize()
     ) {
@@ -64,15 +69,24 @@ fun CameraScreen(
             fontSize = 24.sp,
         )
 
-        val mjpegPreview = AndroidView(
+        AndroidView(
             modifier = Modifier
                 .constrainAs(preview) {
                     top.linkTo(title.bottom)
                     start.linkTo(parent.start, margin = 24.dp)
                     end.linkTo(parent.end, margin = 24.dp)
                     bottom.linkTo(imageCount.top)
                 }
-                .aspectRatio(1.5f),
+                .aspectRatio(1.5f)
+                .drawWithContent {
+                    // call record to capture the content in the graphics layer
+                    graphicsLayer.record {
+                        // draw the contents of the composable into the graphics layer
+                        [email protected]()
+                    }
+                    // draw the graphics layer on the visible canvas
+                    drawLayer(graphicsLayer)
+                },
             factory = { context ->
                 MjpegView(context).apply {
                     mjpegView = this
@@ -107,7 +121,7 @@ fun CameraScreen(
                     }
                     // test url
                     // TODO : change url in viewmodel
-                    setUrl("http://10.32.100.37:5000/preview")
+                    setUrl("http://192.168.0.71:5000/preview")
                 }
             },
         )
@@ -126,7 +140,7 @@ fun CameraScreen(
         )
     }
     LifecycleEventEffect(Lifecycle.Event.ON_START) {
-        viewModel.setCaptureTimer { navigateToShare() }
+        viewModel.setCaptureTimer(graphicsLayer) { navigateToShare() }
         AppLog.d(TAG, "ON_START")
     }
     LifecycleEventEffect(Lifecycle.Event.ON_RESUME) {

diff --git a/presenter/src/main/java/com/foke/together/presenter/screen/SelectFrameScreen.kt b/presenter/src/main/java/com/foke/together/presenter/screen/SelectFrameScreen.kt
@@ -27,6 +27,7 @@ import androidx.compose.ui.unit.sp
 import androidx.constraintlayout.compose.ConstraintLayout
 import androidx.constraintlayout.compose.Dimension
 import androidx.hilt.navigation.compose.hiltViewModel
+import com.foke.together.domain.interactor.entity.CutFrameSourceType
 import com.foke.together.presenter.R
 import com.foke.together.presenter.theme.FourCutTogetherTheme
 import com.foke.together.presenter.viewmodel.SelectFrameViewModel
@@ -39,7 +40,7 @@ fun SelectFrameScreen(
 ) {
     FourCutTogetherTheme {
         val pagerState = rememberPagerState {
-            3 // 총 페이지 수 설정
+            CutFrameSourceType.entries.size
         }
         ConstraintLayout(
             modifier = Modifier.fillMaxSize()
@@ -101,10 +102,11 @@ fun SelectFrameScreen(
                 )
             ) { page ->
                 when(page){
-                    0 -> Image(painter = painterResource(id = R.drawable.fourcut_frame_medium_light), contentDescription = "fourcut_frame_medium_light")
-                    1 -> Image(painter = painterResource(id = R.drawable.fourcut_frame_medium_dark), contentDescription = "fourcut_frame_medium_dark")
-                    2 -> Image(painter = painterResource(id = R.drawable.maker_faire_frame), contentDescription = "maker_faire_frame")
+                    CutFrameSourceType.MAKER_FAIRE.ordinal -> Image(painter = painterResource(id = R.drawable.maker_faire_frame), contentDescription = "fourcut_frame_medium_light")
+                    CutFrameSourceType.FOKE_LIGHT.ordinal -> Image(painter = painterResource(id = R.drawable.fourcut_frame_medium_light), contentDescription = "fourcut_frame_medium_dark")
+                    CutFrameSourceType.FOKE_DARK.ordinal -> Image(painter = painterResource(id = R.drawable.fourcut_frame_medium_dark), contentDescription = "maker_faire_frame")
                 }
+                viewModel.setCutFrameSourceType(page)
             }
 
             IconButton(

diff --git a/presenter/src/main/java/com/foke/together/presenter/screen/ShareScreen.kt b/presenter/src/main/java/com/foke/together/presenter/screen/ShareScreen.kt
@@ -9,6 +9,7 @@ import androidx.compose.material.icons.filled.Print
 import androidx.compose.material.icons.filled.Share
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -19,6 +20,9 @@ import com.foke.together.presenter.frame.FourCutFrame
 import com.foke.together.presenter.theme.FourCutTogetherTheme
 import com.foke.together.presenter.theme.highContrastDarkColorScheme
 import androidx.hilt.navigation.compose.hiltViewModel
+import com.foke.together.domain.interactor.entity.CutFrameSourceType
+import com.foke.together.presenter.frame.MakerFaireFrame
+import com.foke.together.presenter.theme.highContrastLightColorScheme
 import com.foke.together.presenter.viewmodel.ShareViewModel
 
 @Composable
@@ -31,7 +35,8 @@ fun ShareScreen(
     ) {
         val (finalPic, printButton, shareButton, downloadButton, homeButton ) = createRefs()
 
-        val frameType = 0
+//        val frameType = viewModel.cutFrameSourceType.collectAsState(initial = CutFrameSourceType.MAKER_FAIRE)
+        val frameType = CutFrameSourceType.MAKER_FAIRE
         val topGuideLine = createGuidelineFromTop(0.1f)
         val bottomGuideLine = createGuidelineFromBottom(0.1f)
         val startGuideLine = createGuidelineFromStart(0.2f)
@@ -44,8 +49,6 @@ fun ShareScreen(
         )
 
         // TODO: need check to change single ImageView
-        when(frameType){
-            0 -> {
                 Card(
                     modifier = Modifier
                         .constrainAs(finalPic){
@@ -56,12 +59,22 @@ fun ShareScreen(
                             height = Dimension.fillToConstraints
                         }
                 ){
-                    FourCutFrame(
-                        designColorScheme = highContrastDarkColorScheme,
-                    )
+                    when(frameType) {
+                        CutFrameSourceType.MAKER_FAIRE -> {
+                            MakerFaireFrame()
+                        }
+                        CutFrameSourceType.FOKE_LIGHT -> {
+                            FourCutFrame(
+                                designColorScheme = highContrastLightColorScheme,
+                            )
+                        }
+                        CutFrameSourceType.FOKE_DARK -> {
+                            FourCutFrame(
+                                designColorScheme = highContrastDarkColorScheme,
+                            )
+                    }
                 }
             }
-        }
 
         IconButton(
             onClick = { popBackStack() },