Android route overview

android/composeui/build.gradle

@@ -12,7 +12,7 @@ plugins {
 
 android {
     namespace 'com.stadiamaps.ferrostar.composeui'
-    compileSdk 34
+    compileSdk 35
 
     defaultConfig {
         minSdk 25

android/composeui/src/main/java/com/stadiamaps/ferrostar/composeui/config/VisualNavigationViewConfig.kt

@@ -0,0 +1,40 @@
+package com.stadiamaps.ferrostar.composeui.config
+
+import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.dp
+
+sealed class CameraControlState {
+  data object Hidden : CameraControlState()
+
+  data class ShowRecenter(val updateCamera: () -> Unit) : CameraControlState()
+
+  data class ShowRouteOverview(val updateCamera: () -> Unit) : CameraControlState()
+}
+
+data class VisualNavigationViewConfig(
+    var showMute: Boolean = false,
+    var showZoom: Boolean = false,
+    var buttonSize: DpSize = DpSize(56.dp, 56.dp)
+) {
+  companion object {
+    fun Default() = VisualNavigationViewConfig(showMute = true, showZoom = true)
+  }
+}
+
+/** Enables the mute button in the navigation view. */
+fun VisualNavigationViewConfig.useMuteButton(): VisualNavigationViewConfig {
+  showMute = true
+  return this
+}
+
+/** Enables the zoom button in the navigation view. */
+fun VisualNavigationViewConfig.useZoomButton(): VisualNavigationViewConfig {
+  showZoom = true
+  return this
+}
+
+/** Changes the size of navigation buttons. */
+fun VisualNavigationViewConfig.buttonSize(size: DpSize): VisualNavigationViewConfig {
+  buttonSize = size
+  return this
+}

android/composeui/src/main/java/com/stadiamaps/ferrostar/composeui/views/InstructionsView.kt

@@ -56,6 +56,7 @@ import uniffi.ferrostar.VisualInstructionContent
 fun InstructionsView(
     instructions: VisualInstruction,
     distanceToNextManeuver: Double?,
+    modifier: Modifier = Modifier,
     distanceFormatter: DistanceFormatter = LocalizedDistanceFormatter(),
     theme: InstructionRowTheme = DefaultInstructionRowTheme,
     remainingSteps: List<RouteStep>? = null,
@@ -69,7 +70,8 @@ fun InstructionsView(
 
   Box(
       modifier =
-          Modifier.fillMaxWidth()
+          modifier
+              .fillMaxWidth()
               .heightIn(max = screenHeight)
               .animateContentSize(animationSpec = spring(stiffness = Spring.StiffnessHigh))
               .background(theme.backgroundColor, RoundedCornerShape(10.dp))

android/composeui/src/main/java/com/stadiamaps/ferrostar/composeui/views/controls/NavigationUIButton.kt

@@ -2,9 +2,8 @@ package com.stadiamaps.ferrostar.composeui.views.controls
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
@@ -18,6 +17,7 @@ import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import com.stadiamaps.ferrostar.composeui.R
 
@@ -32,13 +32,14 @@ import com.stadiamaps.ferrostar.composeui.R
 @Composable
 fun NavigationUIButton(
     onClick: () -> Unit,
+    buttonSize: DpSize,
     containerColor: Color = FloatingActionButtonDefaults.containerColor,
     contentColor: Color = contentColorFor(containerColor),
     content: @Composable () -> Unit
 ) {
   FloatingActionButton(
       onClick,
-      modifier = Modifier.width(56.dp).height(56.dp).shadow(6.dp, shape = CircleShape),
+      modifier = Modifier.size(buttonSize).shadow(6.dp, shape = CircleShape),
       shape = CircleShape,
       containerColor,
       contentColor) {
@@ -50,7 +51,7 @@ fun NavigationUIButton(
 @Composable
 fun NavigationUIButtonPreview() {
   Box(Modifier.background(Color.LightGray).padding(16.dp)) {
-    NavigationUIButton({}) {
+    NavigationUIButton({}, DpSize(56.dp, 56.dp)) {
       Icon(Icons.Filled.Close, contentDescription = stringResource(id = R.string.end_navigation))
     }
   }

android/composeui/src/main/java/com/stadiamaps/ferrostar/composeui/views/controls/NavigationUIZoomButton.kt

@@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
@@ -22,11 +23,13 @@ import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import com.stadiamaps.ferrostar.composeui.R
 
 @Composable
 fun NavigationUIZoomButton(
+    buttonSize: DpSize,
     onClickZoomIn: () -> Unit,
     onClickZoomOut: () -> Unit,
     containerColor: Color = FloatingActionButtonDefaults.containerColor,
@@ -38,7 +41,7 @@ fun NavigationUIZoomButton(
   Column(modifier = Modifier.shadow(6.dp, shape = RoundedCornerShape(50))) {
     FloatingActionButton(
         onClick = onClickZoomIn,
-        modifier = Modifier.height(56.dp).width(56.dp),
+        modifier = Modifier.size(buttonSize),
         shape = RoundedCornerShape(topStartPercent = 50, topEndPercent = 50),
         containerColor = containerColor,
         contentColor = contentColor,
@@ -48,13 +51,13 @@ fun NavigationUIZoomButton(
               contentDescription = stringResource(id = R.string.zoom_in))
         }
 
-    Box(modifier = Modifier.height(1.dp).width(56.dp)) {
+    Box(modifier = Modifier.height(1.dp).width(buttonSize.width)) {
       HorizontalDivider(color = MaterialTheme.colorScheme.surfaceVariant)
     }
 
     FloatingActionButton(
         onClick = onClickZoomOut,
-        modifier = Modifier.height(56.dp).width(56.dp),
+        modifier = Modifier.size(buttonSize),
         shape = RoundedCornerShape(bottomStartPercent = 50, bottomEndPercent = 50),
         containerColor = containerColor,
         contentColor = contentColor,
@@ -69,5 +72,8 @@ fun NavigationUIZoomButton(
 @Preview
 @Composable
 fun NavigationUIZoomButtonPreview() {
-  Box(Modifier.background(Color.LightGray).padding(16.dp)) { NavigationUIZoomButton({}, {}) }
+  Box(Modifier.background(Color.LightGray).padding(16.dp)) {
+    NavigationUIZoomButton(
+        buttonSize = DpSize(56.dp, 56.dp), onClickZoomIn = {}, onClickZoomOut = {})
+  }
 }

android/composeui/src/main/java/com/stadiamaps/ferrostar/composeui/views/gridviews/NavigatingInnerGridView.kt

@@ -1,21 +1,26 @@
 package com.stadiamaps.ferrostar.composeui.views.gridviews
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.VolumeOff
 import androidx.compose.material.icons.automirrored.filled.VolumeUp
 import androidx.compose.material.icons.filled.Navigation
-import androidx.compose.material.icons.filled.VolumeOff
+import androidx.compose.material.icons.filled.Route
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import com.stadiamaps.ferrostar.composeui.R
+import com.stadiamaps.ferrostar.composeui.config.CameraControlState
 import com.stadiamaps.ferrostar.composeui.views.controls.NavigationUIButton
 import com.stadiamaps.ferrostar.composeui.views.controls.NavigationUIZoomButton
 
@@ -25,11 +30,11 @@ fun NavigatingInnerGridView(
     showMute: Boolean = true,
     isMuted: Boolean?,
     onClickMute: () -> Unit = {},
+    buttonSize: DpSize,
+    cameraControlState: CameraControlState = CameraControlState.Hidden,
     showZoom: Boolean = true,
     onClickZoomIn: () -> Unit = {},
     onClickZoomOut: () -> Unit = {},
-    showCentering: Boolean = true,
-    onClickCenter: () -> Unit = {},
     topCenter: @Composable () -> Unit = { Spacer(Modifier.width(12.dp)) },
     centerStart: @Composable () -> Unit = { Spacer(Modifier.width(12.dp)) },
     bottomEnd: @Composable () -> Unit = { Spacer(Modifier.width(12.dp)) }
@@ -41,29 +46,52 @@ fun NavigatingInnerGridView(
       },
       topCenter = topCenter,
       topEnd = {
-        if (showMute && isMuted != null) {
-          NavigationUIButton(onClick = onClickMute) {
-            if (isMuted) {
-              Icon(
-                  Icons.AutoMirrored.Filled.VolumeOff,
-                  contentDescription = stringResource(id = R.string.unmute_description))
-            } else {
-              Icon(
-                  Icons.AutoMirrored.Filled.VolumeUp,
-                  contentDescription = stringResource(id = R.string.mute_description))
+        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+          when (cameraControlState) {
+            CameraControlState.Hidden -> {
+              // Nothing to draw here :)
+            }
+            is CameraControlState.ShowRecenter -> {
+              // We decided to put this in the bottom corner for now
+            }
+            is CameraControlState.ShowRouteOverview -> {
+              NavigationUIButton(
+                  onClick = cameraControlState.updateCamera, buttonSize = buttonSize) {
+                    Icon(
+                        Icons.Default.Route,
+                        modifier = Modifier.rotate(90.0f),
+                        contentDescription = stringResource(id = R.string.route_overview))
+                  }
+            }
+          }
+
+          // NOTE: Some controls hidden when the camera is not following the user
+          if (showMute &&
+              isMuted != null &&
+              cameraControlState !is CameraControlState.ShowRecenter) {
+            NavigationUIButton(onClick = onClickMute, buttonSize = buttonSize) {
+              if (isMuted) {
+                Icon(
+                    Icons.AutoMirrored.Filled.VolumeOff,
+                    contentDescription = stringResource(id = R.string.unmute_description))
+              } else {
+                Icon(
+                    Icons.AutoMirrored.Filled.VolumeUp,
+                    contentDescription = stringResource(id = R.string.mute_description))
+              }
             }
           }
         }
       },
       centerStart = centerStart,
       centerEnd = {
         if (showZoom) {
-          NavigationUIZoomButton(onClickZoomIn, onClickZoomOut)
+          NavigationUIZoomButton(buttonSize, onClickZoomIn, onClickZoomOut)
         }
       },
       bottomStart = {
-        if (showCentering) {
-          NavigationUIButton(onClick = onClickCenter) {
+        if (cameraControlState is CameraControlState.ShowRecenter) {
+          NavigationUIButton(onClick = cameraControlState.updateCamera, buttonSize = buttonSize) {
             Icon(
                 Icons.Filled.Navigation,
                 contentDescription = stringResource(id = R.string.recenter))
@@ -75,14 +103,56 @@ fun NavigatingInnerGridView(
 
 @Preview(device = Devices.PIXEL_5)
 @Composable
-fun NavigatingInnerGridViewPreview() {
-  NavigatingInnerGridView(modifier = Modifier.fillMaxSize(), isMuted = false)
+fun NavigatingInnerGridViewNonTrackingPreview() {
+  NavigatingInnerGridView(
+      modifier = Modifier.fillMaxSize(),
+      isMuted = false,
+      buttonSize = DpSize(56.dp, 56.dp),
+      cameraControlState =
+          CameraControlState.ShowRecenter {
+            // Do nothing
+          })
+}
+
+@Preview(device = Devices.PIXEL_5)
+@Composable
+fun NavigatingInnerGridViewTrackingPreview() {
+  NavigatingInnerGridView(
+      modifier = Modifier.fillMaxSize(),
+      isMuted = false,
+      buttonSize = DpSize(56.dp, 56.dp),
+      cameraControlState =
+          CameraControlState.ShowRouteOverview {
+            // Do nothing
+          })
+}
+
+@Preview(
+    device =
+        "spec:height=411dp,width=891dp,dpi=420,isRound=false,chinSize=0dp,orientation=landscape")
+@Composable
+fun NavigatingInnerGridViewLandscapeNonTrackingPreview() {
+  NavigatingInnerGridView(
+      modifier = Modifier.fillMaxSize(),
+      isMuted = true,
+      buttonSize = DpSize(56.dp, 56.dp),
+      cameraControlState =
+          CameraControlState.ShowRecenter {
+            // Do nothing
+          })
 }
 
 @Preview(
     device =
-        "spec:width=411dp,height=891dp,dpi=420,isRound=false,chinSize=0dp,orientation=landscape")
+        "spec:height=411dp,width=891dp,dpi=420,isRound=false,chinSize=0dp,orientation=landscape")
 @Composable
-fun NavigatingInnerGridViewLandscapePreview() {
-  NavigatingInnerGridView(modifier = Modifier.fillMaxSize(), isMuted = true)
+fun NavigatingInnerGridViewLandscapeTrackingPreview() {
+  NavigatingInnerGridView(
+      modifier = Modifier.fillMaxSize(),
+      isMuted = true,
+      buttonSize = DpSize(56.dp, 56.dp),
+      cameraControlState =
+          CameraControlState.ShowRouteOverview {
+            // Do nothing
+          })
 }

android/composeui/src/main/res/values/strings.xml

@@ -17,4 +17,5 @@
     <string name="preparing">Preparing...</string>
     <string name="arrived_title">Arrived</string>
     <string name="arrived_description">You have arrived at your destination.</string>
+    <string name="route_overview">Route Overview</string>
 </resources>

android/composeui/src/test/java/com/stadiamaps/ferrostar/views/NavigatingInnerGridViewTest.kt

@@ -1,7 +1,9 @@
 package com.stadiamaps.ferrostar.views
 
-import com.stadiamaps.ferrostar.composeui.views.gridviews.NavigatingInnerGridViewLandscapePreview
-import com.stadiamaps.ferrostar.composeui.views.gridviews.NavigatingInnerGridViewPreview
+import com.stadiamaps.ferrostar.composeui.views.gridviews.NavigatingInnerGridViewLandscapeNonTrackingPreview
+import com.stadiamaps.ferrostar.composeui.views.gridviews.NavigatingInnerGridViewLandscapeTrackingPreview
+import com.stadiamaps.ferrostar.composeui.views.gridviews.NavigatingInnerGridViewNonTrackingPreview
+import com.stadiamaps.ferrostar.composeui.views.gridviews.NavigatingInnerGridViewTrackingPreview
 import com.stadiamaps.ferrostar.support.paparazziDefault
 import com.stadiamaps.ferrostar.support.withSnapshotBackground
 import org.junit.Rule
@@ -12,12 +14,26 @@ class NavigatingInnerGridViewTest {
   @get:Rule val paparazzi = paparazziDefault()
 
   @Test
-  fun testNavigatingInnerGridView() {
-    paparazzi.snapshot { withSnapshotBackground { NavigatingInnerGridViewPreview() } }
+  fun testNavigatingInnerGridViewTracking() {
+    paparazzi.snapshot { withSnapshotBackground { NavigatingInnerGridViewTrackingPreview() } }
   }
 
   @Test
-  fun testNavigatingInnerGridViewLandscape() {
-    paparazzi.snapshot { withSnapshotBackground { NavigatingInnerGridViewLandscapePreview() } }
+  fun testNavigatingInnerGridViewNonTracking() {
+    paparazzi.snapshot { withSnapshotBackground { NavigatingInnerGridViewNonTrackingPreview() } }
+  }
+
+  @Test
+  fun testNavigatingInnerGridViewTrackingLandscape() {
+    paparazzi.snapshot {
+      withSnapshotBackground { NavigatingInnerGridViewLandscapeTrackingPreview() }
+    }
+  }
+
+  @Test
+  fun testNavigatingInnerGridViewNonTrackingLandscape() {
+    paparazzi.snapshot {
+      withSnapshotBackground { NavigatingInnerGridViewLandscapeNonTrackingPreview() }
+    }
   }
 }