Add zoom button to HRS profile.

lib_theme/src/main/java/no/nordicsemi/android/theme/view/SectionTitle.kt

@@ -3,12 +3,7 @@ package no.nordicsemi.android.theme.view
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -28,6 +23,7 @@ import androidx.compose.ui.unit.sp
 fun SectionTitle(
     @DrawableRes resId: Int,
     title: String,
+    menu: @Composable (() -> Unit)? = null,
     modifier: Modifier = Modifier.fillMaxWidth()
 ) {
     Row(
@@ -49,10 +45,12 @@ fun SectionTitle(
         Spacer(modifier = Modifier.size(8.dp))
         Text(
             text = title,
-            textAlign = TextAlign.Center,
+            textAlign = TextAlign.Start,
             fontSize = 24.sp,
-            fontWeight = FontWeight.Bold
+            fontWeight = FontWeight.Bold,
+            modifier = Modifier.weight(1f)
         )
+        menu?.invoke()
     }
 }
 

profile_hrs/src/main/java/no/nordicsemi/android/hrs/view/HRSContentView.kt

@@ -5,10 +5,13 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -19,17 +22,22 @@ import no.nordicsemi.android.theme.view.BatteryLevelView
 import no.nordicsemi.android.theme.view.SectionTitle
 
 @Composable
-internal fun HRSContentView(state: HRSData, onEvent: (HRSScreenViewEvent) -> Unit) {
+internal fun HRSContentView(state: HRSData, zoomIn: Boolean, onEvent: (HRSScreenViewEvent) -> Unit) {
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
         modifier = Modifier.padding(16.dp)
     ) {
+
         ScreenSection {
-            SectionTitle(resId = R.drawable.ic_chart_line, title = "Data")
+            SectionTitle(
+                resId = R.drawable.ic_chart_line,
+                title = stringResource(id = R.string.hrs_section_data),
+                menu = { Menu(zoomIn, onEvent) }
+            )
 
             Spacer(modifier = Modifier.height(16.dp))
 
-            LineChartView(state)
+            LineChartView(state, zoomIn)
         }
 
         Spacer(modifier = Modifier.height(16.dp))
@@ -48,8 +56,22 @@ internal fun HRSContentView(state: HRSData, onEvent: (HRSScreenViewEvent) -> Uni
     }
 }
 
+@Composable
+private fun Menu(zoomIn: Boolean, onEvent: (HRSScreenViewEvent) -> Unit) {
+    val icon = when (zoomIn) {
+        true -> R.drawable.ic_zoom_out
+        false -> R.drawable.ic_zoom_in
+    }
+    IconButton(onClick = { onEvent(SwitchZoomEvent) }) {
+        Icon(
+            painter = painterResource(id = icon),
+            contentDescription = stringResource(id = R.string.hrs_zoom_icon)
+        )
+    }
+}
+
 @Preview
 @Composable
 private fun Preview() {
-    HRSContentView(state = HRSData()) { }
+    HRSContentView(state = HRSData(), zoomIn = false) { }
 }

profile_hrs/src/main/java/no/nordicsemi/android/hrs/view/HRSScreen.kt

@@ -11,12 +11,11 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import no.nordicsemi.android.hrs.R
 import no.nordicsemi.android.hrs.viewmodel.HRSViewModel
 import no.nordicsemi.android.service.*
-import no.nordicsemi.android.theme.view.BackIconAppBar
 import no.nordicsemi.android.theme.view.LoggerIconAppBar
-import no.nordicsemi.ui.scanner.ui.DeviceConnectingView
-import no.nordicsemi.ui.scanner.ui.NoDeviceView
 import no.nordicsemi.android.utils.exhaustive
+import no.nordicsemi.ui.scanner.ui.DeviceConnectingView
 import no.nordicsemi.ui.scanner.ui.DeviceDisconnectedView
+import no.nordicsemi.ui.scanner.ui.NoDeviceView
 import no.nordicsemi.ui.scanner.ui.Reason
 
 @Composable
@@ -40,7 +39,7 @@ fun HRSScreen() {
                     is LinkLossResult -> DeviceDisconnectedView(Reason.LINK_LOSS, navigateUp)
                     is MissingServiceResult -> DeviceDisconnectedView(Reason.MISSING_SERVICE, navigateUp)
                     is UnknownErrorResult -> DeviceDisconnectedView(Reason.UNKNOWN, navigateUp)
-                    is SuccessResult -> HRSContentView(state.result.data) { viewModel.onEvent(it) }
+                    is SuccessResult -> HRSContentView(state.result.data, state.zoomIn) { viewModel.onEvent(it) }
                 }
             }.exhaustive
         }

profile_hrs/src/main/java/no/nordicsemi/android/hrs/view/HRSScreenViewEvent.kt

@@ -2,6 +2,8 @@ package no.nordicsemi.android.hrs.view
 
 internal sealed class HRSScreenViewEvent
 
+internal object SwitchZoomEvent : HRSScreenViewEvent()
+
 internal object DisconnectEvent : HRSScreenViewEvent()
 
 internal object NavigateUpEvent : HRSScreenViewEvent()

profile_hrs/src/main/java/no/nordicsemi/android/hrs/view/HRSState.kt

@@ -5,6 +5,9 @@ import no.nordicsemi.android.service.BleManagerResult
 
 internal sealed class HRSViewState
 
-internal data class WorkingState(val result: BleManagerResult<HRSData>) : HRSViewState()
+internal data class WorkingState(
+    val result: BleManagerResult<HRSData>,
+    val zoomIn: Boolean = false,
+) : HRSViewState()
 
 internal object NoDeviceState : HRSViewState()

profile_hrs/src/main/java/no/nordicsemi/android/hrs/view/LineChartView.kt

@@ -17,24 +17,31 @@ import com.github.mikephil.charting.data.LineData
 import com.github.mikephil.charting.data.LineDataSet
 import com.github.mikephil.charting.interfaces.datasets.ILineDataSet
 import no.nordicsemi.android.hrs.data.HRSData
-import java.util.*
 
 private const val X_AXIS_ELEMENTS_COUNT = 40f
 
+private const val AXIS_MIN = 0
+private const val AXIS_MAX = 300
+
 @Composable
-internal fun LineChartView(state: HRSData) {
+internal fun LineChartView(state: HRSData, zoomIn: Boolean,) {
     val items = state.heartRates.takeLast(X_AXIS_ELEMENTS_COUNT.toInt()).reversed()
     val isSystemInDarkTheme = isSystemInDarkTheme()
     AndroidView(
         modifier = Modifier
             .fillMaxWidth()
             .height(300.dp),
-        factory = { createLineChartView(isSystemInDarkTheme, it, items) },
-        update = { updateData(items, it) }
+        factory = { createLineChartView(isSystemInDarkTheme, it, items, zoomIn) },
+        update = { updateData(items, it, zoomIn) }
     )
 }
 
-internal fun createLineChartView(isDarkTheme: Boolean, context: Context, points: List<Int>): LineChart {
+internal fun createLineChartView(
+    isDarkTheme: Boolean,
+    context: Context,
+    points: List<Int>,
+    zoomIn: Boolean
+): LineChart {
     return LineChart(context).apply {
         description.isEnabled = false
 
@@ -73,8 +80,8 @@ internal fun createLineChartView(isDarkTheme: Boolean, context: Context, points:
         axisLeft.apply {
             enableGridDashedLine(10f, 10f, 0f)
 
-            axisMaximum = 300f
-            axisMinimum = 100f
+            axisMaximum = points.getMax(zoomIn)
+            axisMinimum = points.getMin(zoomIn)
         }
         axisRight.isEnabled = false
 
@@ -153,12 +160,16 @@ internal fun createLineChartView(isDarkTheme: Boolean, context: Context, points:
     }
 }
 
-private fun updateData(points: List<Int>, chart: LineChart) {
+private fun updateData(points: List<Int>, chart: LineChart, zoomIn: Boolean) {
     val entries = points.mapIndexed { i, v ->
         Entry(-i.toFloat(), v.toFloat())
     }.reversed()
 
     with(chart) {
+        axisLeft.apply {
+            axisMaximum = points.getMax(zoomIn)
+            axisMinimum = points.getMin(zoomIn)
+        }
         if (data != null && data.dataSetCount > 0) {
             val set1 = data!!.getDataSetByIndex(0) as LineDataSet
             set1.values = entries
@@ -169,3 +180,19 @@ private fun updateData(points: List<Int>, chart: LineChart) {
         }
     }
 }
+
+private fun List<Int>.getMin(zoomIn: Boolean): Float {
+    return if (zoomIn) {
+        minOrNull() ?: AXIS_MIN
+    } else {
+        AXIS_MIN
+    }.toFloat()
+}
+
+private fun List<Int>.getMax(zoomIn: Boolean): Float {
+    return if (zoomIn) {
+        maxOrNull() ?: AXIS_MAX
+    } else {
+        AXIS_MAX
+    }.toFloat()
+}

profile_hrs/src/main/java/no/nordicsemi/android/hrs/viewmodel/HRSViewModel.kt

@@ -31,7 +31,8 @@ internal class HRSViewModel @Inject constructor(
         }
 
         repository.data.onEach {
-            _state.value = WorkingState(it)
+            val zoomIn = (_state.value as? WorkingState)?.zoomIn ?: false
+            _state.value = WorkingState(it, zoomIn)
         }.launchIn(viewModelScope)
     }
 
@@ -57,9 +58,16 @@ internal class HRSViewModel @Inject constructor(
             DisconnectEvent -> disconnect()
             NavigateUpEvent -> navigationManager.navigateUp()
             OpenLoggerEvent -> repository.openLogger()
+            SwitchZoomEvent -> onZoomButtonClicked()
         }.exhaustive
     }
 
+    private fun onZoomButtonClicked() {
+        (_state.value as? WorkingState)?.let {
+            _state.value = it.copy(zoomIn = !it.zoomIn)
+        }
+    }
+
     private fun disconnect() {
         repository.release()
         navigationManager.navigateUp()

profile_hrs/src/main/res/drawable/ic_zoom_in.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:tint="#000000"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zM9.5,14C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z" />
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M12,10h-2v2H9v-2H7V9h2V7h1v2h2v1z" />
+</vector>

profile_hrs/src/main/res/drawable/ic_zoom_out.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:tint="#000000"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zM9.5,14C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14zM7,9h5v1L7,10z" />
+</vector>

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

@@ -1,4 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <string name="hrs_title">HRS</string>
+    <string name="hrs_section_data">Data</string>
+    <string name="hrs_zoom_icon">Icon to zoom chart in or out</string>
 </resources>