Implemented changing flicker code frequency

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ChipTanFlickerCodeView.kt

@@ -2,11 +2,11 @@ package net.codinux.banking.ui.composables.tan
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.Icon
+import androidx.compose.material.*
-import androidx.compose.material.IconButton
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Pause
+import androidx.compose.material.icons.automirrored.filled.DirectionsRun
-import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.material.icons.automirrored.filled.DirectionsWalk
+import androidx.compose.material.icons.filled.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -27,7 +27,7 @@ private val SpaceBetweenStripesStepSize = 1.dp
 
 
 @Composable
-fun ChipTanFlickerCodeView(flickerCode: FlickerCode) {
+fun ChipTanFlickerCodeView(flickerCode: FlickerCode, textColor: Color = Color.Black) {
 
     val animator = remember { FlickerCodeAnimator() }
 
@@ -68,6 +68,25 @@ fun ChipTanFlickerCodeView(flickerCode: FlickerCode) {
         )
     }
 
+
+    fun setFrequency(newFrequency: Int) {
+        frequency = newFrequency
+
+        animator.setFrequency(newFrequency)
+    }
+
+    fun decreaseFrequency() {
+        if (frequency - FrequencyStepSize >= FlickerCodeAnimator.MinFrequency) {
+            setFrequency(frequency - FrequencyStepSize)
+        }
+    }
+
+    fun increaseFrequency() {
+        if (frequency + FrequencyStepSize <= FlickerCodeAnimator.MaxFrequency) {
+            setFrequency(frequency + FrequencyStepSize)
+        }
+    }
+
     fun toggleIsPaused() {
         isPaused = !isPaused
 
@@ -81,15 +100,25 @@ fun ChipTanFlickerCodeView(flickerCode: FlickerCode) {
 
     Column(Modifier.fillMaxWidth()) {
         Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
-            ImageSizeControls(true, true, { decreaseSize() }, { increaseSize() })
+            ImageSizeControls(true, true, textColor, { decreaseSize() }, { increaseSize() })
 
             Spacer(Modifier.width(16.dp))
 
+            Text("Geschw.", color = textColor)
+
+            IconButton({ decreaseFrequency() }, enabled = frequency - FrequencyStepSize > 0) {
+                Icon(Icons.AutoMirrored.Filled.DirectionsWalk, contentDescription = "Frequenz verkleinern", Modifier.size(28.dp), tint = textColor)
+            }
+
+            IconButton({ increaseFrequency() }, enabled = frequency - FrequencyStepSize > 0) {
+                Icon(Icons.AutoMirrored.Filled.DirectionsRun, contentDescription = "Frequenz vergrößern", Modifier.size(28.dp), tint = textColor)
+            }
+
             IconButton({ toggleIsPaused() }) {
                 if (isPaused) {
-                    Icon(Icons.Filled.PlayArrow, "FlickerCode Animation wieder starten")
+                    Icon(Icons.Filled.PlayArrow, "FlickerCode Animation wieder starten", Modifier.size(28.dp), tint = textColor)
                 } else {
-                    Icon(Icons.Filled.Pause, "FlickerCode Animation pausieren")
+                    Icon(Icons.Filled.Pause, "FlickerCode Animation pausieren", Modifier.size(28.dp), tint = textColor)
                 }
             }
         }

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/tan/ImageSizeControls.kt

@@ -12,21 +12,17 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 
 @Composable
-fun ImageSizeControls(decreaseEnabled: Boolean, increaseEnabled: Boolean, onDecreaseImageSize: () -> Unit, onIncreaseImageSize: () -> Unit) {
+fun ImageSizeControls(decreaseEnabled: Boolean, increaseEnabled: Boolean, textColor: Color = Color.Black, onDecreaseImageSize: () -> Unit, onIncreaseImageSize: () -> Unit) {
 
     Row(verticalAlignment = Alignment.CenterVertically) {
-        Text("Größe")
+        Text("Größe", color = textColor)
-
-        Spacer(Modifier.width(6.dp))
 
         TextButton({ onDecreaseImageSize() }, enabled = decreaseEnabled, modifier = Modifier.width(48.dp), colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent)) {
-            Icon(Icons.Filled.ZoomOut, contentDescription = "Bild verkleiner", Modifier.size(28.dp))
+            Icon(Icons.Filled.ZoomOut, contentDescription = "Bild verkleinern", Modifier.size(28.dp), tint = textColor)
         }
 
-        Spacer(Modifier.width(6.dp))
-
         TextButton({ onIncreaseImageSize() }, enabled = increaseEnabled, modifier = Modifier.width(48.dp), colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent)) {
-            Icon(Icons.Filled.ZoomIn, contentDescription = "Bild vergrößern", Modifier.size(28.dp))
+            Icon(Icons.Filled.ZoomIn, contentDescription = "Bild vergrößern", Modifier.size(28.dp), tint = textColor)
         }
     }
 }

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/dialogs/EnterTanDialog.kt

@@ -9,6 +9,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
@@ -18,9 +19,8 @@ import net.codinux.banking.client.model.tan.*
 import net.codinux.banking.ui.composables.BankIcon
 import net.codinux.banking.ui.composables.tan.ChipTanFlickerCodeView
 import net.codinux.banking.ui.composables.tan.ImageSizeControls
+import net.codinux.banking.ui.config.*
 import net.codinux.banking.ui.config.Colors
-import net.codinux.banking.ui.config.DI
-import net.codinux.banking.ui.config.Internationalization
 import net.codinux.banking.ui.forms.CaptionText
 import net.codinux.banking.ui.forms.OutlinedTextField
 import net.codinux.banking.ui.forms.Select
@@ -135,8 +135,10 @@ fun EnterTanDialog(tanChallengeReceived: TanChallengeReceived, onDismiss: () ->
 
             if (challenge.tanImage != null || challenge.flickerCode != null) {
                 Column(Modifier.fillMaxWidth().padding(top = 6.dp)) {
+                    val textColor = Color(0xFF4F4F4F) // to match dialog's text color of Material theme
+
                     challenge.flickerCode?.let { flickerCode ->
-                        ChipTanFlickerCodeView(flickerCode)
+                        ChipTanFlickerCodeView(flickerCode, textColor)
                     }
 
                     challenge.tanImage?.let { tanImage ->
@@ -144,7 +146,7 @@ fun EnterTanDialog(tanChallengeReceived: TanChallengeReceived, onDismiss: () ->
                             val imageBytes = Base64.decode(tanImage.imageBytesBase64)
 
                             Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
-                                ImageSizeControls(tanImageHeight > minTanImageHeight, tanImageHeight < maxTanImageHeight, { tanImageHeight -= 25 }) { tanImageHeight += 25 }
+                                ImageSizeControls(tanImageHeight > minTanImageHeight, tanImageHeight < maxTanImageHeight, textColor, { tanImageHeight -= 25 }) { tanImageHeight += 25 }
                             }
 
                             Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {