Implement non-square keys

by splitting `key_size` in `key_height` and `key_width`
dessalines · Feb 8, 2024 · 8033521 · 8033521
1 parent d84d28c
commit 8033521
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 54 deletions.
diff --git a/app/src/main/java/com/dessalines/thumbkey/db/AppDb.kt b/app/src/main/java/com/dessalines/thumbkey/db/AppDb.kt
@@ -31,7 +31,8 @@ import okhttp3.Request
 import java.util.concurrent.Executors
 import java.util.concurrent.TimeUnit
 
-const val DEFAULT_KEY_SIZE = 64
+const val DEFAULT_KEY_HEIGHT = 64
+const val DEFAULT_KEY_WIDTH = 64
 const val DEFAULT_ANIMATION_SPEED = 250
 const val DEFAULT_ANIMATION_HELPER_SPEED = 250
 const val DEFAULT_POSITION = 0
@@ -61,10 +62,15 @@ const val DEFAULT_KEY_RADIUS = 0
 data class AppSettings(
     @PrimaryKey(autoGenerate = true) val id: Int,
     @ColumnInfo(
-        name = "key_size",
-        defaultValue = DEFAULT_KEY_SIZE.toString(),
+        name = "key_height",
+        defaultValue = DEFAULT_KEY_HEIGHT.toString(),
     )
-    val keySize: Int,
+    val keyHeight: Int,
+    @ColumnInfo(
+        name = "key_width",
+        defaultValue = DEFAULT_KEY_WIDTH.toString(),
+    )
+    val keyWidth: Int,
     @ColumnInfo(
         name = "animation_speed",
         defaultValue = DEFAULT_ANIMATION_SPEED.toString(),
@@ -218,9 +224,13 @@ data class LayoutsUpdate(
 data class LookAndFeelUpdate(
     val id: Int,
     @ColumnInfo(
-        name = "key_size",
+        name = "key_height",
+    )
+    val keyHeight: Int,
+    @ColumnInfo(
+        name = "key_width",
     )
-    val keySize: Int,
+    val keyWidth: Int,
     @ColumnInfo(
         name = "animation_speed",
     )

diff --git a/app/src/main/java/com/dessalines/thumbkey/ui/components/keyboard/KeyboardKey.kt b/app/src/main/java/com/dessalines/thumbkey/ui/components/keyboard/KeyboardKey.kt
@@ -82,7 +82,8 @@ fun KeyboardKey(
     hideLetters: Boolean,
     hideSymbols: Boolean,
     capsLock: Boolean,
-    legendSize: Int,
+    legendHeight: Int,
+    legendWidth: Int,
     keyPadding: Int,
     keyBorderWidth: Float,
     keyRadius: Float,
@@ -103,7 +104,7 @@ fun KeyboardKey(
     // Necessary for swipe settings to get updated correctly
     val id =
         key.toString() + animationHelperSpeed + animationSpeed + autoCapitalize +
-            vibrateOnTap + soundOnTap + legendSize + minSwipeLength + slideSensitivity +
+            vibrateOnTap + soundOnTap + legendHeight + legendWidth + minSwipeLength + slideSensitivity +
             slideEnabled + slideCursorMovementMode + slideSpacebarDeadzoneEnabled +
             slideBackspaceDeadzoneEnabled
 
@@ -140,7 +141,9 @@ fun KeyboardKey(
         }
 
     val keyBorderColour = MaterialTheme.colorScheme.outline
-    val keySize = legendSize + (keyPadding * 2.0) + (keyBorderWidth * 2.0)
+    val keyHeight = legendHeight + (keyPadding * 2.0) + (keyBorderWidth * 2.0)
+    val keyWidth = legendWidth + (keyPadding * 2.0) + (keyBorderWidth * 2.0)
+    val keySize = (keyHeight + keyWidth) / 2.0
     val legendPadding = 4.dp + keyBorderWidth.dp
 
     val haptic = LocalHapticFeedback.current
@@ -159,8 +162,8 @@ fun KeyboardKey(
 
     val keyboardKeyModifier =
         Modifier
-            .height(keySize.dp)
-            .width(keySize.dp * key.widthMultiplier)
+            .height(keyHeight.dp)
+            .width(keyWidth.dp * key.widthMultiplier)
             .padding(keyPadding.dp)
             .clip(RoundedCornerShape(keyRadius.dp))
             .then(
@@ -487,7 +490,7 @@ fun KeyboardKey(
                     ),
         ) {
             key.swipes?.get(SwipeDirection.TOP_LEFT)?.let {
-                KeyText(it, (legendSize - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
+                KeyText(it, (legendWidth - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
             }
         }
         Box(
@@ -498,7 +501,7 @@ fun KeyboardKey(
                     .padding(vertical = yPadding),
         ) {
             key.swipes?.get(SwipeDirection.TOP)?.let {
-                KeyText(it, (legendSize - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
+                KeyText(it, (legendWidth - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
             }
         }
         Box(
@@ -512,7 +515,7 @@ fun KeyboardKey(
                     ),
         ) {
             key.swipes?.get(SwipeDirection.TOP_RIGHT)?.let {
-                KeyText(it, (legendSize - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
+                KeyText(it, (legendWidth - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
             }
         }
         Box(
@@ -523,7 +526,7 @@ fun KeyboardKey(
                     .padding(horizontal = legendPadding),
         ) {
             key.swipes?.get(SwipeDirection.LEFT)?.let {
-                KeyText(it, (legendSize - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
+                KeyText(it, (legendWidth - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
             }
         }
         Box(
@@ -533,7 +536,7 @@ fun KeyboardKey(
                     .fillMaxSize()
                     .padding(legendPadding),
         ) {
-            KeyText(key.center, (legendSize - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
+            KeyText(key.center, (legendWidth - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
         }
 
         Box(
@@ -544,7 +547,7 @@ fun KeyboardKey(
                     .padding(horizontal = legendPadding),
         ) {
             key.swipes?.get(SwipeDirection.RIGHT)?.let {
-                KeyText(it, (legendSize - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
+                KeyText(it, (legendWidth - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
             }
         }
         Box(
@@ -558,7 +561,7 @@ fun KeyboardKey(
                     ),
         ) {
             key.swipes?.get(SwipeDirection.BOTTOM_LEFT)?.let {
-                KeyText(it, (legendSize - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
+                KeyText(it, (legendWidth - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
             }
         }
         Box(
@@ -569,7 +572,7 @@ fun KeyboardKey(
                     .padding(vertical = yPadding),
         ) {
             key.swipes?.get(SwipeDirection.BOTTOM)?.let {
-                KeyText(it, (legendSize - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
+                KeyText(it, (legendWidth - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
             }
         }
         Box(
@@ -583,7 +586,7 @@ fun KeyboardKey(
                     ),
         ) {
             key.swipes?.get(SwipeDirection.BOTTOM_RIGHT)?.let {
-                KeyText(it, (legendSize - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
+                KeyText(it, (legendWidth - keyBorderWidth).dp, hideLetters, hideSymbols, capsLock)
             }
         }
 
@@ -623,7 +626,7 @@ fun KeyboardKey(
                 val fontSize =
                     fontSizeVariantToFontSize(
                         fontSizeVariant = FontSizeVariant.LARGE,
-                        keySize = legendSize.dp,
+                        keySize = (legendHeight * legendWidth / 2.0).dp,
                         isUpperCase = false,
                     )
                 releasedKey.value?.let { text ->

diff --git a/app/src/main/java/com/dessalines/thumbkey/ui/components/keyboard/KeyboardScreen.kt b/app/src/main/java/com/dessalines/thumbkey/ui/components/keyboard/KeyboardScreen.kt
@@ -41,7 +41,8 @@ import com.dessalines.thumbkey.db.DEFAULT_KEYBOARD_LAYOUT
 import com.dessalines.thumbkey.db.DEFAULT_KEY_BORDER_WIDTH
 import com.dessalines.thumbkey.db.DEFAULT_KEY_PADDING
 import com.dessalines.thumbkey.db.DEFAULT_KEY_RADIUS
-import com.dessalines.thumbkey.db.DEFAULT_KEY_SIZE
+import com.dessalines.thumbkey.db.DEFAULT_KEY_HEIGHT
+import com.dessalines.thumbkey.db.DEFAULT_KEY_WIDTH
 import com.dessalines.thumbkey.db.DEFAULT_MIN_SWIPE_LENGTH
 import com.dessalines.thumbkey.db.DEFAULT_POSITION
 import com.dessalines.thumbkey.db.DEFAULT_PUSHUP_SIZE
@@ -130,17 +131,19 @@ fun KeyboardScreen(
     val backdropColor = MaterialTheme.colorScheme.background
     val backdropPadding = 6.dp
     val keyPadding = settings?.keyPadding ?: DEFAULT_KEY_PADDING
-    val legendSize = settings?.keySize ?: DEFAULT_KEY_SIZE
+    val legendHeight= settings?.keyHeight ?: DEFAULT_KEY_HEIGHT
+    val legendWidth = settings?.keyWidth ?: DEFAULT_KEY_WIDTH
     val keyRadius = settings?.keyRadius ?: DEFAULT_KEY_RADIUS
 
     val keyBorderWidthFloat = keyBorderWidth / 10.0f
     val keyBorderColour = MaterialTheme.colorScheme.outline
-    val keySize = legendSize + (keyPadding * 2.0f) + (keyBorderWidthFloat * 2.0f)
-    val cornerRadius = (keyRadius / 100.0f) * (keySize / 2.0f)
+    val keyHeight = legendHeight + (keyPadding * 2.0f) + (keyBorderWidthFloat * 2.0f)
+    val keyWidth = legendWidth + (keyPadding * 2.0f) + (keyBorderWidthFloat * 2.0f)
+    val cornerRadius = (keyRadius / 100.0f) * ((keyWidth + keyHeight) / 4.0f)
 
     if (mode == KeyboardMode.EMOJI) {
         val controllerKeys = listOf(EMOJI_BACK_KEY_ITEM, NUMERIC_KEY_ITEM, BACKSPACE_KEY_ITEM, RETURN_KEY_ITEM)
-        val keyboardHeight = Dp((keySize * controllerKeys.size) - (keyPadding * 2))
+        val keyboardHeight = Dp((keyHeight * controllerKeys.size) - (keyPadding * 2))
 
         ctx.currentInputConnection.requestCursorUpdates(0)
 
@@ -230,7 +233,8 @@ fun KeyboardScreen(
                             KeyboardKey(
                                 key = key,
                                 lastAction = lastAction,
-                                legendSize = legendSize,
+                                legendHeight = legendHeight,
+                                legendWidth = legendWidth,
                                 keyPadding = keyPadding,
                                 keyBorderWidth = keyBorderWidthFloat,
                                 keyRadius = cornerRadius,
@@ -347,7 +351,8 @@ fun KeyboardScreen(
                                 KeyboardKey(
                                     key = key,
                                     lastAction = lastAction,
-                                    legendSize = legendSize,
+                                    legendHeight = legendHeight,
+                                    legendWidth = legendWidth,
                                     keyPadding = keyPadding,
                                     keyBorderWidth = keyBorderWidthFloat,
                                     keyRadius = cornerRadius,

diff --git a/app/src/main/java/com/dessalines/thumbkey/ui/components/settings/SettingsActivity.kt b/app/src/main/java/com/dessalines/thumbkey/ui/components/settings/SettingsActivity.kt
@@ -51,7 +51,8 @@ import com.dessalines.thumbkey.db.DEFAULT_KEY_BORDERS
 import com.dessalines.thumbkey.db.DEFAULT_KEY_BORDER_WIDTH
 import com.dessalines.thumbkey.db.DEFAULT_KEY_PADDING
 import com.dessalines.thumbkey.db.DEFAULT_KEY_RADIUS
-import com.dessalines.thumbkey.db.DEFAULT_KEY_SIZE
+import com.dessalines.thumbkey.db.DEFAULT_KEY_HEIGHT
+import com.dessalines.thumbkey.db.DEFAULT_KEY_WIDTH
 import com.dessalines.thumbkey.db.DEFAULT_MIN_SWIPE_LENGTH
 import com.dessalines.thumbkey.db.DEFAULT_POSITION
 import com.dessalines.thumbkey.db.DEFAULT_PUSHUP_SIZE
@@ -277,7 +278,8 @@ private fun resetAppSettingsToDefault(
             hideLetters = DEFAULT_HIDE_LETTERS,
             hideSymbols = DEFAULT_HIDE_SYMBOLS,
             keyBorders = DEFAULT_KEY_BORDERS,
-            keySize = DEFAULT_KEY_SIZE,
+            keyHeight = DEFAULT_KEY_HEIGHT,
+            keyWidth = DEFAULT_KEY_WIDTH,
             spacebarMultiTaps = DEFAULT_SPACEBAR_MULTITAPS,
             theme = DEFAULT_THEME,
             themeColor = DEFAULT_THEME_COLOR,