Skip to content

Commit d458e80

Browse files
SmartToolFactorySmartToolFactory
committed
add CompositeSliderPanel for HSL/HSV/RGB conversions
1 parent 8848717 commit d458e80

File tree

16 files changed

+1321
-514
lines changed

16 files changed

+1321
-514
lines changed

‎README.md‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
### Jetpack Compose Color Picker
22

3-
Bundle of Stylish customizable Color pickers, selectors, colorful sliders written with Jetpack Compose
4-
enables users to choose from HSL, HSV or RGB color modes to pick Solid colors or
5-
gradients.
3+
Bundle of Stylish customizable Color pickers, selectors, colorful sliders written with Jetpack
4+
Compose enables users to choose from HSL, HSV or RGB color modes to pick Solid colors or gradients.
65

7-
8-
9-
Check out gradient, slider demos for rotating gradients, creating HSV, HSL gradients,
10-
and check out Colorful Sliders to get familiar with.
6+
Check out gradient, slider demos for rotating gradients, creating HSV, HSL gradients, and check out
7+
Colorful Sliders to get familiar with.
118

129
<img src="/./screenshots/intro.gif" align="right" width="32%"/>
1310

@@ -23,12 +20,12 @@ and check out Colorful Sliders to get familiar with.
2320
- [x] Add HSV-HSL gradient demo
2421
- [x] Add gradient rotation demo
2522
- [x] Add checker Composable/Modifier that draws checker pattern behind to display alpha
23+
- [x] Add console with interoperability between HSV, HSL and RGB(Conversion between color models)
2624

2725
### TODOs:
2826

2927
- [ ] Add Rectangle Hue+Saturation/Value/Lightness HSV/HSL Selectors
3028
- [ ] Add Circle Hue Saturation Selector
31-
- [ ] Add RGB color selection
3229
- [ ] Add option to display colors in a dialog
3330
- [ ] Add and display colors selected previously
3431
- [ ] Add gradient color selection with percentage stops, linear, radial and sweep options

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

Lines changed: 176 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,11 @@ import androidx.compose.ui.unit.dp
1818
import androidx.compose.ui.unit.sp
1919
import com.smarttoolfactory.colorpicker.*
2020
import com.smarttoolfactory.colorpicker.ui.Orange400
21-
import com.smarttoolfactory.colorpicker.widget.SliderDisplayPanelHSL
22-
import com.smarttoolfactory.colorpicker.widget.SliderDisplayPanelHSV
21+
import com.smarttoolfactory.colorpicker.slider.SliderDisplayPanelHSL
22+
import com.smarttoolfactory.colorpicker.slider.SliderDisplayPanelHSV
23+
import com.smarttoolfactory.colorpicker.slider.SliderDisplayPanelRGBA
2324
import com.smarttoolfactory.colorpicker.widget.drawChecker
25+
import kotlin.math.roundToInt
2426

2527
/**
2628
* Converting from HSV or HSL to RGB and then from RGB to HSV or HSL doesn't bear correct
@@ -60,7 +62,6 @@ fun ColorModeConversionDemo() {
6062
}
6163
}
6264

63-
6465
@Composable
6566
private fun HSVSliderDisplayPanelExample(
6667
modifier: Modifier,
@@ -422,3 +423,175 @@ private fun CheckColorConversionDetailsFromHSL(
422423
color = if (!areHSLColorsSame) Color.Red else Color.LightGray
423424
)
424425
}
426+
427+
428+
429+
@Composable
430+
fun SliderDisplayPanelColorFromHSV(
431+
modifier: Modifier,
432+
color: Color,
433+
onColorChange: (Color) -> Unit,
434+
showAlpha: Boolean
435+
) {
436+
val red = color.red
437+
val green = color.green
438+
val blue = color.blue
439+
val alpha = color.alpha
440+
441+
val hsvArray =
442+
rgbToHSV(red.fractionToRGBRange(), green.fractionToRGBRange(), blue.fractionToRGBRange())
443+
444+
val hue = hsvArray[0]
445+
val saturation = hsvArray[1]
446+
val value = hsvArray[2]
447+
448+
val alphaLambda: ((Float) -> Unit)? = if (showAlpha) { alphaChange ->
449+
onColorChange(
450+
Color.hsv(hue, saturation, value, alphaChange)
451+
)
452+
453+
} else null
454+
455+
SliderDisplayPanelHSV(
456+
modifier = modifier,
457+
hue = hue,
458+
saturation = saturation,
459+
value = value,
460+
alpha = alpha,
461+
onHueChange = { hueChange ->
462+
onColorChange(
463+
Color.hsv(hueChange, saturation, value, alpha)
464+
)
465+
},
466+
onSaturationChange = { saturationChange ->
467+
onColorChange(
468+
Color.hsv(hue, saturationChange, value, alpha)
469+
)
470+
471+
},
472+
onValueChange = { valueChange ->
473+
onColorChange(
474+
Color.hsv(hue, saturation, valueChange, alpha)
475+
)
476+
477+
},
478+
onAlphaChange = alphaLambda,
479+
)
480+
}
481+
482+
483+
@Composable
484+
fun SliderDisplayPanelColorFromHSL(
485+
modifier: Modifier,
486+
color: Color,
487+
onColorChange: (Color) -> Unit,
488+
showAlpha: Boolean
489+
) {
490+
val red = color.red
491+
val green = color.green
492+
val blue = color.blue
493+
val alpha = color.alpha
494+
495+
496+
val hslArray =
497+
rgbToHSL(red.fractionToRGBRange(), green.fractionToRGBRange(), blue.fractionToRGBRange())
498+
499+
val hue = hslArray[0]
500+
val saturation = (hslArray[1] * 100).roundToInt() / 100f
501+
val lightness = (hslArray[2] * 100).roundToInt() / 100f
502+
503+
// println("🔥 SliderDisplayPanelColorFromHSL red: $red, green: $green, blue: $blue")
504+
println("🔥 SliderDisplayPanelColorFromHSL red: $red, green: $green, blue: $blue, hue: $hue, saturation: $saturation, lightness: $lightness")
505+
// println("🔥 SliderDisplayPanelColorFromHSL2 hue: ${hslArray2[0]}, saturation: ${hslArray2[1]}, lightness: ${hslArray2[2]}")
506+
507+
508+
val alphaLambda: ((Float) -> Unit)? = if (showAlpha) { alphaChange ->
509+
onColorChange(
510+
Color.hsl(hue, saturation, lightness, alphaChange)
511+
)
512+
513+
} else null
514+
515+
SliderDisplayPanelHSL(
516+
modifier = modifier,
517+
hue = hue,
518+
saturation = saturation,
519+
lightness = lightness,
520+
alpha = alpha,
521+
onHueChange = { hueChange ->
522+
onColorChange(
523+
Color.hsl(hueChange, saturation, lightness, alpha)
524+
)
525+
},
526+
onSaturationChange = { saturationChange ->
527+
onColorChange(
528+
Color.hsl(hue, saturationChange, lightness, alpha)
529+
)
530+
531+
},
532+
onLightnessChange = { lightnessChange ->
533+
534+
val newLightness = ((lightnessChange * 100).roundToInt()) / 100f
535+
val newSaturation = ((saturation * 100).roundToInt()) / 100f
536+
val lightnessColor = Color.hsl(hue, newSaturation, newLightness, alpha)
537+
println("😱SliderDisplayPanelColorFromHSL hue: $hue, saturation: $saturation, newSaturation: $newSaturation, lightnessChange: $lightnessChange, newLightness: $newLightness")
538+
// val hslArrayNew = colorToHSL(lightnessColor)
539+
//
540+
// println("😱😱SliderDisplayPanelColorFromHSL NEW hue: ${hslArrayNew[0]}, sat: ${hslArrayNew[1]}, light: ${hslArrayNew[2]}")
541+
onColorChange(
542+
lightnessColor
543+
)
544+
545+
},
546+
onAlphaChange = alphaLambda,
547+
)
548+
}
549+
550+
@Composable
551+
fun SliderDisplayPanelColorFromRGBA(
552+
modifier: Modifier,
553+
color: Color,
554+
onColorChange: (Color) -> Unit,
555+
showAlpha: Boolean
556+
) {
557+
val red = color.red
558+
val green = color.green
559+
val blue = color.blue
560+
val alpha = color.alpha
561+
562+
println("🔥 SliderDisplayPanelColorFromRGBA red: $red, green: $green, blue: $blue")
563+
564+
val alphaLambda: ((Float) -> Unit)? = if (showAlpha) { alphaChange ->
565+
onColorChange(
566+
Color(red, green, blue, alpha)
567+
)
568+
569+
} else null
570+
571+
SliderDisplayPanelRGBA(
572+
modifier = modifier,
573+
red = red,
574+
green = green,
575+
blue = blue,
576+
alpha = alpha,
577+
onRedChange = { redChange ->
578+
onColorChange(
579+
Color(redChange, green, blue, alpha)
580+
)
581+
},
582+
onGreenChange = { greenChange ->
583+
onColorChange(
584+
Color(red, greenChange, blue, alpha)
585+
)
586+
587+
},
588+
onBlueChange = { blueChange ->
589+
onColorChange(
590+
Color(red, green, blueChange, alpha)
591+
)
592+
593+
},
594+
onAlphaChange = alphaLambda,
595+
)
596+
}
597+

0 commit comments

Comments
 (0)