diff --git a/README.md b/README.md index e4d205b..b89251a 100644 --- a/README.md +++ b/README.md @@ -1,98 +1,3 @@ -# 🕒 klokk - -![buildStatus](https://img.shields.io/github/workflow/status/theapache64/kinetic-wall-clock/Java%20CI%20with%20Gradle?style=plastic) -![latestVersion](https://img.shields.io/github/v/release/theapache64/kinetic-wall-clock) - -Twitter: theapache64 - - - -![](screenshot.png) - - -> A kinetic wall clock, built using Compose Desktop. - -## 🔮 Demo - -![](demo.gif) - -- [Watch](https://youtu.be/ECNfa3L4U6s) full demo -- [Watch](https://www.youtube.com/watch?v=lTsZOs_PkbM) Development - Behind the Scenes - Part 1 -- [Watch](https://www.youtube.com/watch?v=ejp9850FWy8) Development - Behind the Scenes - Part 2 - -## 🏃 Run - -- Clone the repo and run `./gradlew run` - -## 💡 Inspiration - -- Nezih Yılmaz's kinetic countdown timer -- A million times humans since 1982 - -## ✍️ Author - -👤 **theapache64** - -* Twitter: @theapache64 -* Email: theapache64@gmail.com - -Feel free to ping me 😉 - -## 🤝 Contributing - -Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any -contributions you make are **greatly appreciated**. - -1. Open an issue first to discuss what you would like to change. -1. Fork the Project -1. Create your feature branch (`git checkout -b feature/amazing-feature`) -1. Commit your changes (`git commit -m 'Add some amazing feature'`) -1. Push to the branch (`git push origin feature/amazing-feature`) -1. Open a pull request - -Please make sure to update tests as appropriate. - -## ❤ Show your support - -Give a ⭐️ if this project helped you! - - - Patron Link - - - - Buy Me A Coffee - - - - Donation - - -## ☑️ TODO - -- [ ] Dark Theme Support -- [ ] Wave Movement -- [ ] Tornado Movement -- [ ] Background Music -- [x] Add second movement to border clocks -- [ ] Add alphabets - -## 📝 License - -``` -Copyright © 2021 - theapache64 - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -``` - -_This README was generated by [readgen](https://github.com/theapache64/readgen)_ ❤ +# Dark/ Light Mode Feature +![image](https://github.com/devbasilinnia/klokk/assets/115192848/f35fe104-53e1-4453-9ebc-e7de3dc4da4a) +![image](https://github.com/devbasilinnia/klokk/assets/115192848/29860ba5-ab7d-4ad3-ac39-52f02ab5ffae) diff --git a/src/main/kotlin/com/theapache64/klokk/composable/BottomToolBar.kt b/src/main/kotlin/com/theapache64/klokk/composable/BottomToolBar.kt index db5f0bf..dd96edb 100644 --- a/src/main/kotlin/com/theapache64/klokk/composable/BottomToolBar.kt +++ b/src/main/kotlin/com/theapache64/klokk/composable/BottomToolBar.kt @@ -1,17 +1,25 @@ package com.theapache64.klokk.composable +import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material.Icon +import androidx.compose.material.IconButton import androidx.compose.material.OutlinedButton import androidx.compose.material.Text import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.outlined.DarkMode +import androidx.compose.material.icons.outlined.LightMode +import androidx.compose.material.icons.outlined.Mood +import androidx.compose.material.icons.outlined.Paid import androidx.compose.material.icons.outlined.PlayArrow +import androidx.compose.material.icons.outlined.Radar import androidx.compose.material.icons.outlined.Stop import androidx.compose.material.icons.outlined.Update import androidx.compose.runtime.Composable +import androidx.compose.runtime.MutableState import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -20,6 +28,7 @@ import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import com.theapache64.klokk.IS_DEBUG import com.theapache64.klokk.movement.core.Movement +import com.theapache64.klokk.theme.KlokkTheme @Composable fun BottomToolBar( @@ -31,6 +40,7 @@ fun BottomToolBar( onStopClicked: () -> Unit, onTextInputChanged: (String) -> Unit, modifier: Modifier = Modifier, + theme: MutableState, ) { Row( modifier = modifier @@ -72,7 +82,8 @@ fun BottomToolBar( Row( modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.End + horizontalArrangement = Arrangement.End, + verticalAlignment = Alignment.CenterVertically ) { // TextField @@ -85,15 +96,24 @@ fun BottomToolBar( Text("Try some text here") } )*/ - // Debug Info if (IS_DEBUG) { Text( text = "DEBUG: $activeMovement", - color = Color.White, textAlign = TextAlign.End ) } + IconButton( + onClick = { + theme.value = !theme.value + } + ) { + if (theme.value) { + Icon(imageVector = Icons.Outlined.LightMode, contentDescription = "light mode icon") + } else { + Icon(imageVector = Icons.Outlined.DarkMode,contentDescription = "dark mode icon") + } + } } } } @@ -111,7 +131,6 @@ private fun IconTextButton( Icon( imageVector = imageVector, - tint = Color.White, contentDescription = "ToolBar Icon", modifier = Modifier.padding(end = 10.dp) ) diff --git a/src/main/kotlin/com/theapache64/klokk/composable/Clock.kt b/src/main/kotlin/com/theapache64/klokk/composable/Clock.kt index f873fe1..7c828f9 100644 --- a/src/main/kotlin/com/theapache64/klokk/composable/Clock.kt +++ b/src/main/kotlin/com/theapache64/klokk/composable/Clock.kt @@ -11,21 +11,17 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.material.Button +import androidx.compose.material.MaterialTheme +import androidx.compose.material.MaterialTheme.colors import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp -import com.theapache64.klokk.model.ClockData -import com.theapache64.klokk.theme.CodGray import kotlin.math.cos import kotlin.math.sin - -private val NEEDLE_COLOR = Color.White -val CLOCK_BACKGROUND = CodGray - @Composable fun Clock( needleOneDegree: Float = 270f, @@ -34,6 +30,8 @@ fun Clock( delay: Int = 0, easing: Easing = LinearEasing, modifier: Modifier = Modifier, + backgroundColor: Color = colors.background, + needleColor: Color = colors.secondary ) { val needleOneRadian = (needleOneDegree * Math.PI / 180).toFloat() @@ -60,13 +58,13 @@ fun Clock( val radius = size.minDimension / 2f drawCircle( - color = CLOCK_BACKGROUND, + color= backgroundColor, radius = radius ) // To make the needle origin rounded. drawCircle( - color = NEEDLE_COLOR, + color= backgroundColor, radius = needleWidth * 0.487f ) @@ -74,7 +72,7 @@ fun Clock( // Needle One drawLine( - color = NEEDLE_COLOR, + color= needleColor, start = center, end = Offset( // Finding end coordinate for the given radian @@ -87,7 +85,7 @@ fun Clock( // Needle two drawLine( - color = NEEDLE_COLOR, + color= needleColor, start = center, end = Offset( // Finding end coordinate for the given degree diff --git a/src/main/kotlin/com/theapache64/klokk/main.kt b/src/main/kotlin/com/theapache64/klokk/main.kt index 52c0283..eb7bd17 100644 --- a/src/main/kotlin/com/theapache64/klokk/main.kt +++ b/src/main/kotlin/com/theapache64/klokk/main.kt @@ -1,13 +1,11 @@ package com.theapache64.klokk import androidx.compose.foundation.ExperimentalFoundationApi -import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier -import androidx.compose.ui.unit.IntSize import androidx.compose.ui.unit.dp import androidx.compose.ui.window.Window import androidx.compose.ui.window.application @@ -16,7 +14,6 @@ import com.theapache64.klokk.composable.BottomToolBar import com.theapache64.klokk.composable.Clock import com.theapache64.klokk.movement.alphabet.TextMatrixGenerator import com.theapache64.klokk.movement.core.Movement -import com.theapache64.klokk.theme.Black import com.theapache64.klokk.theme.KlokkTheme import kotlinx.coroutines.cancel import kotlinx.coroutines.delay @@ -32,7 +29,6 @@ const val CLOCKS_CONTAINER_WIDTH = CLOCK_SIZE * COLUMNS const val CLOCKS_CONTAINER_HEIGHT = CLOCK_SIZE * ROWS const val ENJOY_TIME_IN_MILLIS = 1500L const val IS_DEBUG = true -private val BACKGROUND_COLOR = Black @OptIn(ExperimentalComposeUiApi::class) @ExperimentalFoundationApi @@ -53,6 +49,8 @@ fun main() = application { // To hold and control movement transition var activeMovement by remember { mutableStateOf(Movement.StandBy) } + val themeState = remember { mutableStateOf(true) } + // To control the auto playing animation var shouldPlayAutoAnim by remember { mutableStateOf(true) } @@ -61,11 +59,10 @@ fun main() = application { // Generating degree matrix using the active movement val degreeMatrix = activeMovement.getMatrixGenerator().getVerifiedMatrix() - KlokkTheme { + KlokkTheme (isDark = themeState.value) { Column( modifier = Modifier - .fillMaxSize() - .background(BACKGROUND_COLOR), + .fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { @@ -79,7 +76,7 @@ fun main() = application { needleOneDegree = clockData.degreeOne, needleTwoDegree = clockData.degreeTwo, durationInMillis = activeMovement.durationInMillis, - modifier = Modifier.requiredSize(CLOCK_SIZE.dp) + modifier = Modifier.requiredSize(CLOCK_SIZE.dp), ) } } @@ -174,7 +171,8 @@ fun main() = application { onStopClicked = { shouldPlayAutoAnim = false activeMovement = Movement.StandBy - } + }, + theme = themeState ) } } diff --git a/src/main/kotlin/com/theapache64/klokk/theme/Theme.kt b/src/main/kotlin/com/theapache64/klokk/theme/Theme.kt index d3693d2..bd69d0e 100644 --- a/src/main/kotlin/com/theapache64/klokk/theme/Theme.kt +++ b/src/main/kotlin/com/theapache64/klokk/theme/Theme.kt @@ -7,14 +7,31 @@ import androidx.compose.material.lightColors import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color -val LightTheme = lightColors() // TODO : +val LightTheme = lightColors( + primary = Color(0xFF2A2F4F), + secondary = Color(0xFF917FB3), + background = Color(0xFFE5BEEC), + surface = Color(0xFFFDE2F3), + onPrimary = Color.White, + onSecondary = Color.White, + onBackground = Color.Black, + onSurface = Color.Black, +) + val DarkTheme = darkColors( - primary = Color.White + primary = Color(0xFF1F6E8C), + secondary = Color(0xFF455A64), + background = Color(0xFF263238), + surface = Color(0xFF212121), + onPrimary = Color.White, + onSecondary = Color.White, + onBackground = Color.White, + onSurface = Color.White, ) @Composable fun KlokkTheme( - isDark: Boolean = true, + isDark: Boolean = false, content: @Composable () -> Unit, ) { MaterialTheme(