Color picking + various things found while trying to implement a custom color picker

[nununoisy]

I needed a way for a user to specify a color, and noticed that there isn't a standard color picker widget, so I figured I'd try writing my own. It'll do for now but it's a lot more limited than I would like it to be - unfortunately, I can't seem to find a good way to implement some features without falling back to native code:

• I can do some math and a bit of array indexing to convert the r,g,b ints into hex to output a CSS hex color. However, it'd be nice if there was an easier way to do this, ideally for hex numbers in general and not just for colors (although either would be fine).
• It would be nice if color objects had a few other methods to get color information, like methods to get RGBA values or a hex color string.
• More options to convert primitive data into color objects would be nice. Examples: Colors.hsv(float, int, int) -> color, Colors.hsl(float, int, int) -> color, Colors.css(string) -> color, etc.
• On that note, I was not able to find a way to convert from a hex color string to r,g,b ints. I can't find a way to extract characters or substrings from the hex color, so I can't use a similar approach to convert a hex value to an int. Making strings indexable would allow this to work and makes sense considering it's standard in many other languages.
• If I use SpinBoxes for the r,g,b component value labels, their value sometimes fails to update when moving the sliders. It seems to occur after editing the inner textbox. The SpinBox fluent component has an internal private function to update the inner text value but there doesn't seem to be a way for me to call it or cause it to trigger, so I have to just use labels for now.

[ogoffart]

Yes, we should have more API on the colors. See issue #911
Colors.hsv makes total sense. I'm not sure about the Colors.css(string)

I was not able to find a way to convert from a hex color string to r,g,b ints. I can't find a way to extract characters or substrings from the hex color, so I can't use a similar approach to convert a hex value to an int. Making strings indexable would allow this to work and makes sense considering it's standard in many other languages.

We don't want the slint language to become a general purpose programming language. I think this kindof things should be done in native code.

If I use SpinBoxes for the r,g,b component value labels, their value sometimes fails to update when moving the sliders. It seems to occur after editing the inner textbox. The SpinBox fluent component has an internal private function to update the inner text value but there doesn't seem to be a way for me to call it or cause it to trigger, so I have to just use labels for now.

Could you elaborate on the problem? Is that a Bug?

[nununoisy]

Understandable - CSS color parsing is probably far too complex for most needs (that's what css-color-parser is for!). Let me take a step back and explain my reasoning here - given that there doesn't appear to be any good Rust libraries for displaying a native/OS color picker dialog (that I could find, anyway), I think that a color picker widget could be very useful in the standard library. There are many uses for a color picker, like multimedia programs on desktop (exactly what I'm using Slint for) or LED/display configuration on embedded platforms.

Most color picking GUIs nowadays support input in the form of hex colors (e.g. #ff9800): Qt's QColorDialog, GTK's ColorChooserWidget, and SwiftUI's ColorPicker come to mind. Hex colors are incredibly convenient to work with because they're relatively compact, generally human-readable, and easily copy-pasteable (unlike decimal RGB values), so it'd make a lot of sense for a hypothetical standard color picker widget to support hex colors. However, because of the limitations I detailed in my initial comment, it would be impossible to do that without additional language support. With that said, perhaps this API is a bit closer to your intended scope:

• Colors.hex(string) -> color accepts a string of 3 hex octets optionally prefixed with a single #, parses it as a 24-bit RGB color, and returns it as a color.
  • Colors.hex("#ff0000") -> #ff0000
  • Colors.hex("00ff00") -> #00ff00
  • Colors.hex("not a color") -> #000000 (or some other placeholder/sentinel color)
• color.to-hex() -> string converts a color into a 24-bit hex string prefixed by #. This is already possible with a bit of math and const array indexing but it would be nice to have a cleaner way of doing it.
  • Colors.blue.to-hex() -> "#0000ff"
  • Colors.rgb(255, 255, 255).to-hex() -> "#ffffff"
  • Colors.rgba(255, 255, 255, 128).to-hex() -> "#ffffff"
    I've intentionally omitted HTML shorthand colors (#639 being RebeccaPurple) and RGBA hex colors (#ff00ff80 being Fuschia with 0.5 alpha) for the sake of simplicity, but they might be worth considering as well.

As for the notes on the SpinBox, I've done a bit of additional experimenting and I've found a couple of bugs in the current implementation; I'll open issues so they can be tracked in the right place.