Skip to content

🔧 [ShareableCardContent] Fixed so that profile photos are always output at a fixed size, regardless of the device's resolution, portrait or landscape orientation. #893

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
takahirom merged 3 commits into from
Sep 1, 2024
Merged

🔧 [ShareableCardContent] Fixed so that profile photos are always output at a fixed size, regardless of the device's resolution, portrait or landscape orientation. #893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4888d0f
:wrench: Fixed so that the profile picture is always output at a fixe…
Corvus400 Aug 31, 2024
5af68df
:wrench: ./gradlew detekt --auto-correct
Corvus400 Aug 31, 2024
9c739f4
:wrench: Make slight adjustments to the values to make them match Fig…
Corvus400 Aug 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions ...ard/src/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/ProfileCardScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -840,10 +840,9 @@ internal fun CardScreen(
text = stringResource(ProfileCardRes.string.edit),
modifier = Modifier.padding(8.dp),
style = MaterialTheme.typography.labelLarge,
color = Color.Black
color = Color.Black,
)
}

}
}
}
Expand Down
52 changes: 40 additions & 12 deletions ...c/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/ShareableCard.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
Expand All @@ -21,6 +22,7 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.layer.GraphicsLayer
import androidx.compose.ui.graphics.layer.drawLayer
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImagePainter
Expand Down Expand Up @@ -86,31 +88,57 @@ private fun ShareableCardContent(
backImage: ImageBitmap?,
modifier: Modifier = Modifier,
) {
Box(modifier = modifier) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.background(LocalProfileCardTheme.current.primaryColor)
.padding(vertical = 50.dp, horizontal = 120.dp),
) {
val widthPx = 1200
val heightPx = 630
Comment on lines +91 to +92
Copy link
Contributor Author

@Corvus400 Corvus400 Aug 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

スクリーンショット 2024-08-31 10 06 40

val cardWidthPx = 300
val cardHeightPx = 380
Comment on lines +93 to +94
Copy link
Contributor Author

@Corvus400 Corvus400 Aug 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

スクリーンショット 2024-08-31 10 06 48

val offsetXBackPx = 148f
val offsetYBackPx = 76f
val offsetXFrontPx = -136f
val offsetYFrontPx = -61f
Comment on lines +95 to +98
Copy link
Contributor Author

@Corvus400 Corvus400 Aug 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

9c739f4

There was a slight discrepancy between the figures, so I adjusted the values.
The result of the superimposition is as follows.
Now it is almost impossible to notice the discrepancy with the naked eye.

OGP Overlay Exported image


val density = LocalDensity.current

Box(
contentAlignment = Alignment.Center,
modifier = modifier
.requiredSize(
Copy link
Contributor Author

@Corvus400 Corvus400 Aug 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • On small devices like the SmallPhone, the resolution will be smaller than the specified size, so even if you specify 1200, the width will be adjusted to 720.
  • So, we use requiredSize to ignore the width of the device and force the width to be 1200.

width = with(density) { widthPx.toDp() },
height = with(density) { heightPx.toDp() },
)
.background(LocalProfileCardTheme.current.primaryColor),
) {
Box(modifier = Modifier.padding(vertical = 30.dp)) {
backImage?.let {
Image(
bitmap = it,
contentDescription = null,
modifier = Modifier
.offset(x = 70.dp, y = 15.dp)
.offset(
x = with(density) { offsetXBackPx.toDp() },
y = with(density) { offsetYBackPx.toDp() },
)
.rotate(10f)
.size(150.dp, 190.dp),
.size(
width = with(density) { cardWidthPx.toDp() },
height = with(density) { cardHeightPx.toDp() },
),
)
}
frontImage?.let {
Image(
bitmap = it,
contentDescription = null,
modifier = Modifier
.offset(x = (-70).dp, y = (-15).dp)
.rotate(-10f)
.size(150.dp, 190.dp),
.offset(
x = with(density) { offsetXFrontPx.toDp() },
y = with(density) { offsetYFrontPx.toDp() },
)
.rotate(-12.2f)
.size(
width = with(density) { cardWidthPx.toDp() },
height = with(density) { cardHeightPx.toDp() },
),
)
}
}
Expand Down