car: a display density setting, so text and controls can grow in car apps

Size scales Gearslip's own screens but can't reach a hosted app, which
draws from the density it's handed. On a short screen those apps stay
small. Car display density, under Screen after Size, is From car or 160
to 240 DPI, and the video's resolution stays the same.

CarEnvironment.frame is what the display and hosted apps already read, so
the choice goes in there, once a session starts: the display and the apps
on it can't disagree mid-drive. Reconnecting or reopening the preview
applies a change. Phone mirroring keeps the car's own density, and the
cluster has its own.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

gearslip/src/main/java/app/seb3thehacker/gearslip/GearslipActivity.kt

@@ -296,7 +296,8 @@ class GearslipActivity : ComponentActivity(), Projection {
         val target = surface ?: return
         if (screenProjector != null) return
         val projector = ScreenProjector(this).also { screenProjector = it }
-        projector.start(target, frameWidth, frameHeight, frameDensity) { CarUi() }
+        // The frame's density, not frameDensity: that stays the car's own, for the phone mirror.
+        projector.start(target, frameWidth, frameHeight, CarEnvironment.frame.value.densityDpi) { CarUi() }
     }
 
     /**

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarEnvironment.kt

@@ -37,6 +37,9 @@ object CarEnvironment {
     private val frameFlow = MutableStateFlow(Frame(800, 480, 160))
     val frame: StateFlow<Frame> = frameFlow
 
+    /** The density the car reported; [frame] carries the one the car UI and its apps draw at. */
+    private var carDensityDpi = 160
+
     val phoneDark: StateFlow<Boolean> = phoneDarkFlow
     val darkOutside: StateFlow<Boolean> = darkOutsideFlow
     val battery: StateFlow<Battery> = batteryFlow
@@ -95,8 +98,18 @@ object CarEnvironment {
     }
 
     fun setDisplay(width: Int, height: Int, densityDpi: Int) {
-        displayFlow.value = "${width}x$height @ ${densityDpi}dpi"
-        frameFlow.value = Frame(width, height, densityDpi)
+        carDensityDpi = densityDpi
+        val dpi = CarSettings.effectiveDensity(densityDpi)
+        displayFlow.value = "${width}x$height @ ${dpi}dpi"
+        frameFlow.value = Frame(width, height, dpi)
+    }
+
+    /**
+     * Takes up the density setting. It's read only as a session starts, so the display and the
+     * apps on it can't disagree mid-drive; a session with no car behind it, the preview, asks here.
+     */
+    fun applyDensity() {
+        frameFlow.value = frameFlow.value.copy(densityDpi = CarSettings.effectiveDensity(carDensityDpi))
     }
 
     fun start(context: Context) {

gearslip/src/main/java/app/seb3thehacker/gearslip/car/CarSettings.kt

@@ -53,6 +53,7 @@ enum class NavBarMode { SHOW, HIDE_NAVIGATING, HIDE }
 object CarSettings {
 
     private const val KEY_SCALE = "car_scale"
+    private const val KEY_DENSITY = "car_density"
     private const val KEY_OPEN = "car_open_on_connect"
     private const val KEY_NIGHT = "car_night_mode"
     private const val KEY_PIPE_AUDIO = "car_pipe_audio"
@@ -97,6 +98,7 @@ private const val KEY_CLUSTER_VIDEO = "cluster_video_enabled"
     private lateinit var app: Context
 
     private val scaleFlow = MutableStateFlow(1f)
+    private val carDensityFlow = MutableStateFlow(DENSITY_FROM_CAR)
     private val openFlow = MutableStateFlow(HOME)
     private val nightFlow = MutableStateFlow(NightMode.AUTO)
     private val pipeAudioFlow = MutableStateFlow(true)
@@ -238,6 +240,16 @@ private const val KEY_CLUSTER_VIDEO = "cluster_video_enabled"
     val moreLyrics: StateFlow<Boolean> = moreLyricsFlow
 
     val scale: StateFlow<Float> = scaleFlow
+
+    /** [carDensity] when it leaves the choice to the car. */
+    const val DENSITY_FROM_CAR = 0
+    val DENSITIES = listOf(160, 180, 200, 220, 240)
+
+    /** An absolute DPI for the car UI and its apps; the video's resolution doesn't change with it. */
+    val carDensity: StateFlow<Int> = carDensityFlow
+
+    /** The density to draw at, for a car or preview that would otherwise use [carDpi]. */
+    fun effectiveDensity(carDpi: Int) = carDensityFlow.value.takeIf { it != DENSITY_FROM_CAR } ?: carDpi
     val openOnConnect: StateFlow<String> = openFlow
     val nightMode: StateFlow<NightMode> = nightFlow
 
@@ -326,6 +338,7 @@ private const val KEY_CLUSTER_VIDEO = "cluster_video_enabled"
     fun init(context: Context) {
         app = context.applicationContext
         scaleFlow.value = AppSettings.getString(app, KEY_SCALE, "1.0").toFloatOrNull() ?: 1f
+        carDensityFlow.value = AppSettings.getString(app, KEY_DENSITY, "").toIntOrNull()?.takeIf { it in DENSITIES } ?: DENSITY_FROM_CAR
         openFlow.value = AppSettings.getString(app, KEY_OPEN, HOME)
         lastNavFlow.value = AppSettings.getString(app, KEY_LAST_NAV, "").ifEmpty { null }
         lastMediaFlow.value = AppSettings.getString(app, KEY_LAST_MEDIA, "").ifEmpty { null }
@@ -383,6 +396,11 @@ private const val KEY_CLUSTER_VIDEO = "cluster_video_enabled"
         AppSettings.putString(app, KEY_SCALE, value.toString())
     }
 
+    fun setCarDensity(dpi: Int) {
+        carDensityFlow.value = dpi
+        AppSettings.putString(app, KEY_DENSITY, dpi.toString())
+    }
+
     fun setOpenOnConnect(id: String) {
         openFlow.value = id
         AppSettings.putString(app, KEY_OPEN, id)

gearslip/src/main/java/app/seb3thehacker/gearslip/ui/CarPreviewScreen.kt

@@ -59,7 +59,7 @@ import app.seb3thehacker.gearslip.car.CarUi
 @Composable
 fun CarPreviewScreen(onBack: () -> Unit) {
     val context = LocalContext.current
-    val frame by CarEnvironment.frame.collectAsStateWithLifecycle()
+    val frame by remember { CarEnvironment.frame.also { CarEnvironment.applyDensity() } }.collectAsStateWithLifecycle()
     var viewSize by remember { mutableStateOf(0 to 0) }
     // Tied to how the phone itself is held, not a button: turn it sideways and the preview goes
     // fullscreen, turn it back and the phone's own chrome (the Back/title above the frame) returns.
@@ -263,7 +263,7 @@ private fun previewFrame(
     size: app.seb3thehacker.gearslip.car.PreviewSize,
     custom: app.seb3thehacker.gearslip.car.ScreenSize?,
 ): Triple<Int, Int, Int> {
-    fun carLike(w: Int, h: Int) = Triple(w, h, (160 * h / 480).coerceIn(120, 640))
+    fun carLike(w: Int, h: Int) = Triple(w, h, app.seb3thehacker.gearslip.car.CarSettings.effectiveDensity((160 * h / 480).coerceIn(120, 640)))
     return when (size) {
         app.seb3thehacker.gearslip.car.PreviewSize.LAST_CAR -> Triple(lastCar.width, lastCar.height, lastCar.densityDpi)
         app.seb3thehacker.gearslip.car.PreviewSize.CUSTOM ->

gearslip/src/main/java/app/seb3thehacker/gearslip/ui/HomeCarSettings.kt

@@ -54,6 +54,8 @@ enum class CarGroup(@param:StringRes val title: Int) {
 @Composable
 private fun sizeChoices() = listOf(1f to stringResource(R.string.choice_size_normal), 1.25f to stringResource(R.string.choice_size_large), 1.5f to stringResource(R.string.choice_size_xlarge))
 @Composable
+private fun densityChoices() = listOf(CarSettings.DENSITY_FROM_CAR to stringResource(R.string.choice_density_car)) + CarSettings.DENSITIES.map { it to stringResource(R.string.choice_density_dpi, it) }
+@Composable
 private fun themeChoices() = listOf(AppTheme.PHONE to stringResource(R.string.choice_theme_phone), AppTheme.LIGHT to stringResource(R.string.choice_theme_light), AppTheme.DARK to stringResource(R.string.choice_theme_dark))
 @Composable
 private fun darkChoices() = listOf(
@@ -194,6 +196,7 @@ internal fun CarGroupScreen(group: CarGroup, onBack: () -> Unit) {
 @Composable
 private fun GroupRows(group: CarGroup) {
     val scale by CarSettings.scale.collectAsState()
+    val density by CarSettings.carDensity.collectAsState()
     val open by CarSettings.openOnConnect.collectAsState()
     val night by CarSettings.nightMode.collectAsState()
     val units by CarSettings.units.collectAsState()
@@ -221,6 +224,8 @@ private fun GroupRows(group: CarGroup) {
             SettingsDivider()
             Choice(stringResource(R.string.car_size), sizeChoices(), scale, CarSettings::setScale)
             SettingsDivider()
+            Choice(stringResource(R.string.car_density), densityChoices(), density, CarSettings::setCarDensity, note = stringResource(R.string.car_density_note))
+            SettingsDivider()
             Choice(stringResource(R.string.car_app_theme), themeChoices(), theme, CarSettings::setAppTheme)
             SettingsDivider()
             if (theme != AppTheme.LIGHT) {
@@ -307,11 +312,12 @@ private fun <T> List<Pair<T, String>>.label(value: T): String = firstOrNull { it
 
 /** A setting with a few named choices: its current one shown, the rest a tap away. */
 @Composable
-private fun <T> Choice(title: String, choices: List<Pair<T, String>>, selected: T, onSelect: (T) -> Unit) {
+private fun <T> Choice(title: String, choices: List<Pair<T, String>>, selected: T, onSelect: (T) -> Unit, note: String? = null) {
     var menu by remember { mutableStateOf(false) }
     SettingsRow(
         title,
         Modifier.clickable { menu = true },
+        subtitle = note,
         trailing = {
             // The menu hangs from the value it changes, at the row's end.
             Box {

gearslip/src/main/res/values/strings.xml

@@ -189,6 +189,10 @@
     <string name="car_group_same">These are the same settings as Settings in the car. A change here shows there too.</string>
     <string name="car_open_on_connect">Open on connect</string>
     <string name="car_size">Size</string>
+    <string name="car_density">Car display density</string>
+    <string name="car_density_note">Larger text and controls, including in apps. Try 200 DPI with Size on Normal. Reconnect the car or reopen the preview to apply it. If controls clip, choose a lower DPI or From car.</string>
+    <string name="choice_density_car">From car</string>
+    <string name="choice_density_dpi">%1$d DPI</string>
     <string name="car_app_theme">App theme</string>
     <string name="car_dark_mode">Dark mode</string>
     <string name="car_buttons">Buttons</string>