skydoves / colorpicker-compose Goto Github PK
View Code? Open in Web Editor NEW๐จ Kotlin Multiplatform color picker library for getting colors from any images by tapping on the desired color.
License: Apache License 2.0
๐จ Kotlin Multiplatform color picker library for getting colors from any images by tapping on the desired color.
License: Apache License 2.0
Is your feature request related to a problem?
I would like to have a custom wheelImageBitmap
which shows a contour and the color selected at the same time.
Describe the solution you'd like:
In HsvColorPicker.kt there's this code:
val wheelBitmap = controller.wheelBitmap
if (wheelBitmap == null) {
canvas.drawCircle(
Offset(point.x, point.y),
controller.wheelRadius.toPx(),
controller.wheelPaint
)
} else {
canvas.drawImage(
wheelBitmap,
Offset(point.x - wheelBitmap.width / 2, point.y - wheelBitmap.height / 2),
Paint()
)
}
Both of these are just operating on the canvas, what I would like to suggest is to add an optional parameter drawWheel: (Canvas, PointF) -> Unit
which gets invoked here instead, with the two above options as possible function overloads or optional parameters.
Describe alternatives you've considered:
As a workaround, I could replace the wheelBitmap with a transparent image and intercept pointer events to always draw our custom image/canvas at the correct position. It doesn't feel as a good solution however.
Please complete the following information:
Describe the Bug:
The white selector circle is about 5x bigger than in the screenshots in the documentation
Expected Behavior:
Selector to look like the screenshots
Please complete the following information:
Describe the Bug:
Color sets only after new click
Expected Behavior:
Color sets also while drag
I found out that drag just doesn't work.
----Update 1----
I found out that drag not working if scroll enabled.
----Update 2----
this repo does not have this problem https://github.com/SmartToolFactory/Jetpack-Compose-Tutorials#gesture
Is it possible to create an option for vertical sliders?
Please complete the following information:
Describe the Bug:
There is no border rendering for BrightnessSlider.
Expected Behavior:
The BrightnessSlider should display the specified border.
Code example:
val controller = rememberColorPickerController()
var hexCode by remember { mutableStateOf("") }
var color: Color by remember { mutableStateOf(Color.Black) }
Column(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
HsvColorPicker(
modifier = Modifier
.fillMaxWidth()
.height(250.dp)
.padding(10.dp),
controller = controller,
onColorChanged = { colorEnvelope: ColorEnvelope ->
color = colorEnvelope.color
hexCode = colorEnvelope.hexCode
}
)
Spacer(Modifier.height(20.dp))
BrightnessSlider(
modifier = Modifier
.fillMaxWidth()
.padding(10.dp)
.height(35.dp),
controller = controller,
borderSize = 2.dp,
borderColor = Color.DarkGray
)
Please complete the following information:
Describe the Bug:
Set wheel alpha only applies to picker not sliders. The little white dot is still pure white on the others. This probably applies to all of the "wheel" settings. I would expect them to all be consistent.
i want set color to controller . outside of library but i can't
Describe the Bug:
Can only click to set colour with the HsvColorPicker unless there are multiple touches on the screen.
Sorry if that does not make much sense, what I mean is that if I have two or more fingers on the screen I can drag the selector as expected but if I Just have one finger on the selector I cannot drag it.
Below is my code to instantiate the colour picker:
@composable
fun ColorWheelPicker(modifier: Modifier = Modifier) {
val controller = rememberColorPickerController()
HsvColorPicker(
modifier = modifier
.height(450.dp)
.padding(16.dp),
controller = controller
)
}
Expected Behavior:
I am not sure if this the intended behaviour but my expectation was that I would be able to drag the selector with one finger
I'm doing what exactly u said, but still I get this:
java.lang.IllegalAccessException: Can't set an ImageBitmap before initializing the canvas
why is that?
code:
val controller = rememberColorPickerController()
val context = LocalContext.current
val bitmap = imageUri.getBitmap(context).asImageBitmap()
controller.setPaletteImageBitmap(bitmap)
getBitmap():
fun Uri.getBitmap(context: Context): Bitmap =
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) ImageDecoder.decodeBitmap(
ImageDecoder.createSource(
context.contentResolver,
this
)
)
else MediaStore.Images.Media.getBitmap(context.contentResolver, this)
Please complete the following information:
Describe the Bug:
When using the HsvColorPicker
to update the attribute of a ViewModel
it resets the other attributes of it. Here is an example code:
The ViewModel class looks something like this
class EditTagViewModel(
private val appRepository: AppRepository,
savedStateHandle: SavedStateHandle
): ViewModel() {
private val boxId: Long = checkNotNull(savedStateHandle["boxId"])
var tagUiState by mutableStateOf(TagState())
fun updateUiState(tagDetails: TagDetails) {
tagUiState = TagState(
tagDetails = tagDetails
)
}
}
where TagState
has the property TagDetails
which holds the text
and color
.
The composable looks like this
OutlinedTextField(
value = tagUiState.tagDetails.text,
label = { Text(text = "Tag Name") },
onValueChange = {
editTagViewModel.updateUiState(
tagUiState.tagDetails.copy(text = it)
)
}
)
HsvColorPicker(
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
controller = controller,
onColorChanged = { colorEnvelope: ColorEnvelope ->
editTagViewModel.updateUiState(
tagUiState.tagDetails.copy(color = colorEnvelope.hexCode)
}
)
First setting the color and then the text works as expected.
Expected Behavior:
A color change on the HsvColorPicker
only changes the color attribute, and does not reset the text. I am not an expert but this might be a problem of scope.
Describe the Bug:
Tried using the setByColor() method to set color Color(0.0, 1.0, 1.0, 1.0, sRGB IEC61966-2.1) into the HsvColorPicker, it was not set.
Apparently it calculates the coordinates to be set by the setByCoordinate() method, that color result in a coordinate (x=0.0, y=627.0) which makes extractPixelHsvColor() function in the setByCoordinate() method to return Color.Transparent and failing to set the color.
Expected Behavior:
I expected the color Color(0.0, 1.0, 1.0, 1.0, sRGB IEC61966-2.1) to be set in the HsvColorPicker.
Please complete the following information:
Describe the Bug:
The function set set the brightness of the slider is set to internal.
Expected Behavior:
This function should be public (so you can set the brightness by your own).
At least there should be a possibility to reset the brightness, like the selectCenter funtion of the color wheel.
Hi, I'm not sure if it's been implemented yet but I couldn't find it in the documentation.
Is it possible to control the color picker from outside of the composable through the color picker controller variable? I would like to set the color for example, but dynamically after the color picker has been initialised (so the initialColor probably won't be suitable for this)
Thank you
Describe the Bug:
Add a clear description about the problem.
If I set the debounce time on the controller, it has no effect on the brightness slider.
Expected Behavior:
Like the HSV colorpicker, the onColorChanged callback should only be called with a regularity corresponding to the debounce time.
Please complete the following information:
Describe the Bug:
Added the dependencia in the build gradle and it throws this
FAILURE: Build failed with an exception.
What went wrong:
Could not resolve all dependencies for configuration ':app:debugRuntimeClasspath'.
Problems reading data from Binary store in C:\Users\phgfu.gradle.tmp\gradle9238719398653078878.bin offset 68796 exists? true
Corrupt serialized resolution result. Cannot find selected module (602) for releaseRuntimeElements-published -> androidx.compose.material3:material3-window-size-class
Try:
Run with --info or --debug option to get more log output.
Run with --scan to get full insights.
Add a clear description about the problem.
Jus added the dependencia and clicked Sync now and it throws that
Sorry Im new to android so maybe it can be a stupidity.
Sorry for my english btw. Regards from Spain
Please complete the following information:
Describe the Bug:
Brightness slider is white on left side
Expected Behavior:
The brightness slider should be black on the left side, instead it's white.
Here's a screenshot displaying the issue
AlphaSlider
and BrightnessSlider
don't restore selected color. Wheels are always at the end of bar
Bug description:
When setting the borderSize
for the BrightnessSlider
the value is defined in DP
. However the library does not converts it into pixels
, but just takes the DP value:
strokeWidth = borderSize.value
This causes that 5.dp
border is applied as 5.px
.
Same issue is with the borderSize
when it is applied with .drawRoundRect
Expected Behavior:
The DP should be properly calculated to pixels (according to the current density), so the correct size is applied
I use this code to set the color, but I'm not able to set the brightness
`val hsv = FloatArray(3)
val color = Color(initialColor)
RGBToHSV(
(color.red * 255).toInt(),
(color.green * 255).toInt(),
(color.blue * 255).toInt(),
hsv)
val pickerWidth = 500f
val radius = pickerWidth / 2f
val colorRadius: Float = hsv[1] * radius
val angle: Double = ((1 - (hsv[0] / 360f)) * (2 * Math.PI))
val midX: Float = pickerWidth / 2f //midpoint of the circle
val midY: Float = pickerWidth / 2f
val xOffset: Float =
(kotlin.math.cos(angle) * colorRadius).toFloat() //offset from the midpoint of the circle
val yOffset: Double = sin(angle) * colorRadius
val x = midX + xOffset
val y = midY + yOffset
controller.selectByCoordinate(x, y.toFloat(), fromUser = false)`
Regarding the brightness the setBrightness function should be public
Great library, very useful and easy to use!
I want to recommend adding a field where the user can enter a color code whether the hex or argb value, the field would be connected to the controller of course, and the color then be applied to both the hsv wheel and the alpha tile. if this can already be achieved by the current version, I would really appreciate an example of how to do it. Thank you.
Hi there
Please complete the following information:
With a simple HSV Picker without any bitmap :
val controller = rememberColorPickerController()
HsvColorPicker(
initialColor= value,
modifier = Modifier
.fillMaxWidth()
.height(450.dp)
.padding(10.dp),
controller = controller,
onColorChanged = { colorEnvelope: ColorEnvelope ->
}
)
I get a ton of logs for each touch/drag in the picker zone :
Called getWidth() on a recycle()'d bitmap! This is undefined behavior!
Called getHeight() on a recycle()'d bitmap! This is undefined behavior!
Called getWidth() on a recycle()'d bitmap! This is undefined behavior!
Called getHeight() on a recycle()'d bitmap! This is undefined behavior!
Called getWidth() on a recycle()'d bitmap! This is undefined behavior!
Called getHeight() on a recycle()'d bitmap! This is undefined behavior!
Called getWidth() on a recycle()'d bitmap! This is undefined behavior!
Called getHeight() on a recycle()'d bitmap! This is undefined behavior!
Called getWidth() on a recycle()'d bitmap! This is undefined behavior!
Called getHeight() on a recycle()'d bitmap! This is undefined behavior!
Except this logcat pollution, everything works like a charm :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.