Skip to content

Commit 6b52be8

Browse files
SmartToolFactorySmartToolFactory
committed
add slider docs, and SliderWithCircleDisplay
1 parent ab62a93 commit 6b52be8

File tree

10 files changed

+889
-23
lines changed

10 files changed

+889
-23
lines changed

‎app/src/main/java/com/smarttoolfactory/composecolorpicker/demo/ColorfulSliderDemo.kt‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ fun ColorfulSliderDemo() {
5959
HSVSliderDisplayPanelExample(modifier, sliderModifier, boxModifier)
6060
HSLSliderDisplayPanelExample(modifier, sliderModifier, boxModifier)
6161
RGBASliderDisplayPanelExample(modifier, sliderModifier, boxModifier)
62+
63+
// Sliders with Circle Color display on left
64+
SliderCircleColorDisplayHSLExamples(modifier, sliderModifier, boxModifier)
65+
SliderCircleColorDisplayHSVExamples(modifier, sliderModifier, boxModifier)
66+
6267
}
6368
}
6469

@@ -440,6 +445,8 @@ private fun HSVSliderDisplayPanelExample(
440445

441446
Box(modifier = boxModifier.background(colorHSV))
442447

448+
Title(text = "SliderDisplayPanel with 4 Sliders")
449+
443450
SliderDisplayPanelHSV(
444451
modifier = sliderModifier,
445452
hue = hue,
@@ -451,6 +458,39 @@ private fun HSVSliderDisplayPanelExample(
451458
onValueChange = { value = it },
452459
onAlphaChange = { alpha = it },
453460
)
461+
462+
Title(text = "SliderDisplayPanel with 3 Sliders")
463+
SliderDisplayPanelHSV(
464+
modifier = sliderModifier,
465+
hue = hue,
466+
saturation = saturation,
467+
value = value,
468+
alpha = alpha,
469+
onHueChange = { hue = it },
470+
onSaturationChange = { saturation = it },
471+
onAlphaChange = { alpha = it }
472+
)
473+
474+
Title(text = "SliderDisplayPanel with 2 Sliders")
475+
SliderDisplayPanelHSV(
476+
modifier = sliderModifier,
477+
hue = hue,
478+
saturation = saturation,
479+
value = value,
480+
alpha = alpha,
481+
onValueChange = { value = it },
482+
onAlphaChange = { alpha = it }
483+
)
484+
485+
Title(text = "SliderDisplayPanel with 1 Slider")
486+
SliderDisplayPanelHSV(
487+
modifier = sliderModifier,
488+
hue = hue,
489+
saturation = saturation,
490+
value = 1f,
491+
alpha = alpha,
492+
onSaturationChange = { saturation = it }
493+
)
454494
}
455495
}
456496

@@ -475,6 +515,7 @@ private fun HSLSliderDisplayPanelExample(
475515
horizontalAlignment = Alignment.CenterHorizontally
476516
) {
477517
Box(modifier = boxModifier.background(colorHSL))
518+
Title(text = "SliderDisplayPanelHSL with 4 sliders")
478519
SliderDisplayPanelHSL(
479520
modifier = sliderModifier,
480521
hue = hue,
@@ -486,6 +527,38 @@ private fun HSLSliderDisplayPanelExample(
486527
onLightnessChange = { lightness = it },
487528
onAlphaChange = { alpha = it },
488529
)
530+
531+
Title(text = "SliderDisplayPanelHSL with 3 sliders")
532+
SliderDisplayPanelHSL(
533+
modifier = sliderModifier,
534+
hue = hue,
535+
saturation = saturation,
536+
lightness = lightness,
537+
alpha = alpha,
538+
onSaturationChange = { saturation = it },
539+
onLightnessChange = { lightness = it },
540+
onAlphaChange = { alpha = it }
541+
)
542+
Title(text = "SliderDisplayPanelHSL with 2 sliders")
543+
SliderDisplayPanelHSL(
544+
modifier = sliderModifier,
545+
hue = hue,
546+
saturation = saturation,
547+
lightness = lightness,
548+
alpha = alpha,
549+
onLightnessChange = { lightness = it },
550+
onAlphaChange = { alpha = it }
551+
)
552+
553+
Title(text = "SliderDisplayPanelHSL with 1 slider")
554+
SliderDisplayPanelHSL(
555+
modifier = sliderModifier,
556+
hue = hue,
557+
saturation = saturation,
558+
lightness = .5f,
559+
alpha = alpha,
560+
onHueChange = { hue = it },
561+
)
489562
}
490563
}
491564

@@ -523,6 +596,96 @@ private fun RGBASliderDisplayPanelExample(
523596
}
524597
}
525598

599+
600+
@Composable
601+
private fun SliderCircleColorDisplayHSVExamples(
602+
modifier: Modifier,
603+
sliderModifier: Modifier,
604+
boxModifier: Modifier
605+
) {
606+
val hue by remember { mutableStateOf(0f) }
607+
var saturation by remember { mutableStateOf(.5f) }
608+
var value by remember { mutableStateOf(.5f) }
609+
var alpha by remember { mutableStateOf(1f) }
610+
611+
val colorHSV = Color.hsv(hue = hue, saturation = saturation, value = value, alpha = alpha)
612+
613+
Title(text = "HSV SliderCircleColorDisplays")
614+
Column(
615+
modifier = modifier,
616+
horizontalAlignment = Alignment.CenterHorizontally
617+
) {
618+
619+
Box(modifier = boxModifier.background(colorHSV))
620+
621+
Title(text = "SliderCircleColorDisplay Saturation-Alpha")
622+
SliderCircleColorDisplaySaturationHSV(
623+
modifier = sliderModifier,
624+
hue = hue,
625+
saturation = saturation,
626+
value = value,
627+
alpha,
628+
onSaturationChange = { saturation = it },
629+
onAlphaChange = { alpha = it }
630+
)
631+
632+
Title(text = "SliderCircleColorDisplay Value-Alpha")
633+
SliderCircleColorDisplayValueHSV(
634+
modifier = sliderModifier,
635+
hue = hue,
636+
saturation = saturation,
637+
value = value,
638+
alpha,
639+
onValueChange = { value = it },
640+
onAlphaChange = { alpha = it }
641+
)
642+
}
643+
}
644+
645+
@Composable
646+
private fun SliderCircleColorDisplayHSLExamples(
647+
modifier: Modifier,
648+
sliderModifier: Modifier,
649+
boxModifier: Modifier
650+
) {
651+
val hue by remember { mutableStateOf(0f) }
652+
var saturation by remember { mutableStateOf(.5f) }
653+
var lightness by remember { mutableStateOf(.5f) }
654+
var alpha by remember { mutableStateOf(1f) }
655+
656+
val colorHSL =
657+
Color.hsl(hue = hue, saturation = saturation, lightness = lightness, alpha = alpha)
658+
659+
Title(text = "HSL SliderCircleColorDisplays")
660+
Column(
661+
modifier = modifier,
662+
horizontalAlignment = Alignment.CenterHorizontally
663+
) {
664+
Box(modifier = boxModifier.background(colorHSL))
665+
666+
Title(text = "SliderCircleColorDisplay Saturation-Alpha")
667+
SliderCircleColorDisplaySaturationHSL(
668+
modifier = sliderModifier,
669+
hue = hue,
670+
saturation = saturation,
671+
lightness = lightness,
672+
alpha = alpha,
673+
onSaturationChange = { saturation = it },
674+
onAlphaChange = { alpha = it }
675+
)
676+
Title(text = "SliderCircleColorDisplay Lightness-Alpha")
677+
SliderCircleColorDisplayLightnessHSL(
678+
modifier = sliderModifier,
679+
hue = hue,
680+
saturation = saturation,
681+
lightness = lightness,
682+
alpha = alpha,
683+
onLightnessChange = { lightness = it },
684+
onAlphaChange = { alpha = it }
685+
)
686+
}
687+
}
688+
526689
@Composable
527690
private fun Title(text: String) {
528691
Text(

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/ui/brush/SliderBrush.kt‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,14 +125,16 @@ fun sliderSaturationHSLGradient(
125125

126126
fun sliderLightnessGradient(
127127
hue: Float,
128+
saturation: Float = 0f,
128129
alpha: Float = 1f,
129130
start: Offset = Offset.Zero,
130131
end: Offset = Offset.Infinite
131132
): Brush {
132133
return Brush.linearGradient(
133134
colors = listOf(
134-
Color.hsl(hue = hue, saturation = 1f, lightness = 0f, alpha = alpha),
135-
Color.hsl(hue = hue, saturation = 1f, lightness = 1f, alpha = alpha)
135+
Color.hsl(hue = hue, saturation = saturation, lightness = 0f, alpha = alpha),
136+
Color.hsl(hue = hue, saturation = saturation, lightness = .5f, alpha = alpha),
137+
Color.hsl(hue = hue, saturation = saturation, lightness = 1f, alpha = alpha)
136138
),
137139
start = start,
138140
end = end

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/Checker.kt‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,28 @@ import androidx.compose.ui.graphics.Shape
1212
import androidx.compose.ui.unit.DpSize
1313
import androidx.compose.ui.unit.dp
1414

15+
/**
16+
* Composable tht
17+
*/
1518
@Composable
16-
private fun Checker(modifier: Modifier, shape: Shape, content: @Composable () -> Unit) {
19+
private fun Checker(
20+
modifier: Modifier,
21+
shape: Shape,
22+
size: DpSize = DpSize.Unspecified,
23+
content: @Composable () -> Unit
24+
) {
1725
Box(modifier.drawChecker(shape)) {
1826
content()
1927
}
2028
}
2129

30+
/**
31+
* Modify element to add checker with appearance specified with a [shape], and [size]
32+
* and clip it.
33+
* @param size size of the checker. If size is [DpSize.Unspecified] **10.dp** is used by
34+
* default
35+
* @param shape shape of the checker
36+
*/
2237
fun Modifier.drawChecker(shape: Shape, size: DpSize = DpSize.Unspecified) = this
2338
.clip(shape)
2439
.then(
@@ -27,12 +42,8 @@ fun Modifier.drawChecker(shape: Shape, size: DpSize = DpSize.Unspecified) = this
2742
val width = this.size.width
2843
val height = this.size.height
2944

30-
val checkerSize = 10.dp
31-
.toPx()
32-
.coerceAtMost(height / 2)
33-
3445
val checkerWidth =
35-
(if (size != DpSize.Unspecified) size.width.toPx() else 4.dp.toPx()).coerceAtMost(
46+
(if (size != DpSize.Unspecified) size.width.toPx() else 10.dp.toPx()).coerceAtMost(
3647
width / 2
3748
)
3849

@@ -41,16 +52,16 @@ fun Modifier.drawChecker(shape: Shape, size: DpSize = DpSize.Unspecified) = this
4152
height / 2
4253
)
4354

44-
val horizontalSteps = (width / checkerSize).toInt()
45-
val verticalSteps = (height / checkerSize).toInt()
55+
val horizontalSteps = (width / checkerWidth).toInt()
56+
val verticalSteps = (height / checkerHeight).toInt()
4657

4758
for (y in 0..verticalSteps) {
4859
for (x in 0..horizontalSteps) {
4960
val isGrayTile = ((x + y) % 2 == 1)
5061
drawRect(
5162
color = if (isGrayTile) Color.LightGray else Color.White,
52-
topLeft = Offset(x * checkerSize, y * checkerSize),
53-
size = Size(checkerSize, checkerSize)
63+
topLeft = Offset(x * checkerWidth, y * checkerHeight),
64+
size = Size(checkerWidth, checkerHeight)
5465
)
5566
}
5667
}

‎colorpicker/src/main/java/com/smarttoolfactory/colorpicker/widget/HSLHSVRGBSliderPanel.kt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
package com.smarttoolfactory.colorpicker.widget
2+

0 commit comments

Comments
 (0)