fixed a bug where some items weren't center when border inset was inc…

…reased added more screenshots updated README.md
yamin8000 · Nov 1, 2023 · 11a7682 · 11a7682
1 parent 681697f
commit 11a7682
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 11 deletions.
diff --git a/Gauge/screenshots/advanced.png b/Gauge/screenshots/advanced.png
diff --git a/Gauge/screenshots/simple.png b/Gauge/screenshots/simple.png
diff --git a/Gauge/src/main/java/com/github/yamin8000/gauge/main/Gauge.kt b/Gauge/src/main/java/com/github/yamin8000/gauge/main/Gauge.kt
@@ -23,9 +23,7 @@ package com.github.yamin8000.gauge.main
 
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -114,7 +112,7 @@ fun Gauge(
     require(numerics.sweepAngle in 1..360) { "Sweep angle: ${numerics.sweepAngle} must be from 1 to 360" }
 
     BoxWithConstraints(
-        modifier = modifier.fillMaxWidth(),
+        modifier = modifier,
         content = {
             val textMeasurer = rememberTextMeasurer()
             val size = if (totalSize > maxWidth) maxWidth
@@ -123,9 +121,7 @@ fun Gauge(
             val totalAngle = numerics.startAngle + numerics.sweepAngle
             val arcSizeFraction = remember { .9f }
             Canvas(
-                modifier = Modifier
-                    .width(size)
-                    .height(size),
+                modifier = Modifier.size(size),
                 onDraw = {
                     val borderOffset = Offset(borderInset.toPx() / 2, borderInset.toPx() / 2)
                     if (style.hasBorder) {
@@ -139,7 +135,7 @@ fun Gauge(
                         drawCompatibleText(
                             textMeasurer = textMeasurer,
                             text = "${decimalFormat.format(value)}\n$valueUnit".trim(),
-                            topLeft = center.plus(borderOffset).plus(Offset(0f, size.toPx() / 5)),
+                            topLeft = center.plus(Offset(0f, size.toPx() / 5)),
                             color = valueColor,
                             totalSize = size
                         )
@@ -182,7 +178,7 @@ fun Gauge(
                     drawCircle(
                         color = centerCircleColor,
                         radius = (size - borderInset).toPx() / 50,
-                        center = center.plus(borderOffset)
+                        center = center
                     )
                 }
             )
@@ -202,7 +198,7 @@ private fun DrawScope.drawNeedle(
     if (style.hasRing) {
         drawCircle(
             color = colors.ring,
-            center = center.plus(borderOffset),
+            center = center,
             style = Stroke(style.ringWidth),
             radius = size.toPx() / 25
         )
@@ -223,7 +219,7 @@ private fun DrawScope.drawNeedle(
     ).plus(borderOffset)
     drawLine(
         color = colors.needle,
-        start = center.plus(borderOffset),
+        start = center,
         strokeWidth = 10f,
         cap = StrokeCap.Round,
         end = endOffset

diff --git a/README.md b/README.md
@@ -21,6 +21,121 @@ Gauge Composable is a fusion of classic and modern Gauges with some customizatio
 
 ## Usage
 
+### Simple Usage
+
+<img src="Gauge/screenshots/simple.png" alt="simple preview" width="300"/>
+
+```kotlin
+@Preview(showBackground = true)
+@Composable
+fun SimplePreview() {
+    Surface {
+        Gauge(
+            modifier = Modifier.padding(16.dp),
+            value = 50f,
+            numerics = GaugeNumerics(
+                startAngle = 180,
+                sweepAngle = 180,
+                valueRange = 0f..100f,
+                smallTicksStep = 2,
+                bigTicksStep = 10
+            )
+        )
+    }
+}
+```
+
+### Advanced Usage
+
+<img src="Gauge/screenshots/advanced.png" alt="advanced preview" width="300"/>
+
+```kotlin
+@Preview(showBackground = true)
+@Composable
+fun AdvancedPreview() {
+    Surface(
+        color = Color.Black,
+        content = {
+            Gauge(
+                modifier = Modifier.padding(8.dp),
+                value = 55.35f,
+                valueUnit = "km/h",
+                decimalFormat = DecimalFormat().apply { maximumFractionDigits = 1 },
+                totalSize = 500.dp,
+                borderInset = 16.dp,
+                numerics = GaugeNumerics(
+                    startAngle = 150,
+                    sweepAngle = 240,
+                    valueRange = 0f..220f,
+                    smallTicksStep = 1,
+                    bigTicksStep = 20
+                ),
+                style = GaugeStyle(
+                    hasBorder = true,
+                    hasValueText = true,
+                    borderWidth = 10f,
+                    arcStyle = GaugeArcStyle(
+                        hasArcs = true,
+                        hasProgressiveAlpha = false,
+                        bigTicksHasLabels = true,
+                        cap = StrokeCap.Square
+                    ),
+                    needleStyle = GaugeNeedleStyle(
+                        hasNeedle = true,
+                        tipHasCircle = true,
+                        hasRing = true,
+                        ringWidth = 10f
+                    )
+                ),
+                borderColor = Color(0xFFFFAB00),
+                centerCircleColor = Color(0xFFFF6D00),
+                valueColor = Color(0xFFFFD600),
+                needleColors = GaugeNeedleColors(
+                    needle = Color(0xFFFFD600),
+                    ring = Color(0xFFFF6D00)
+                ),
+                arcColors = GaugeArcColors(
+                    off = Color(0xFFFFD600),
+                    on = Color(0xFF00C853)
+                ),
+                ticksColors = GaugeTicksColors(
+                    smallTicks = Color(0xFFFF6D00),
+                    bigTicks = Color(0xFFDD2C00),
+                    bigTicksLabels = Color(0xFFFFAB00)
+                ),
+                arcColorsProvider = { colors, gaugeValue, range ->
+                    when (gaugeValue) {
+                        in range.start..range.endInclusive / 4 -> GaugeArcColors(
+                            colors.off,
+                            Color.Red
+                        )
+
+                        in range.endInclusive / 4..range.endInclusive / 2 -> GaugeArcColors(
+                            colors.off,
+                            Color.Yellow
+                        )
+
+                        in range.endInclusive / 2..range.endInclusive * 3 / 4 -> GaugeArcColors(
+                            colors.off,
+                            Color(0xFFFF8000)
+                        )
+
+                        else -> GaugeArcColors(colors.off, Color.Green)
+                    }
+                },
+                ticksColorProvider = {
+                    it.map { pair ->
+                        if (pair.first % 15 == 0)
+                            pair.first to Color(0xFF2962FF)
+                        else pair
+                    }
+                }
+            )
+        }
+    )
+}
+```
+
 ## Install
 
 Check [latest](https://repo1.maven.org/maven2/com/github/yamin8000/gauge/Gauge/maven-metadata.xml)