asusctl/rog-control-center/ui/widgets/colour_picker.slint

import { Palette, Slider, HorizontalBox, Button, LineEdit } from "std-widgets.slint";

export component ColourSlider inherits VerticalLayout {
    in-out property <bool> enabled;
    spacing: 10px;
    property <string> hex: "#FF0000";
    property <color> base_colour: Colors.red;
    in-out property <color> final_colour: Colors.red;
    in-out property <brush> colourbox: final_colour;
    callback hex_to_colour(string) -> color;
    // required
    callback set_hex_from_colour(color) -> string;
    callback released();
    in-out property <float> c1value<=> c1.value;
    in-out property <float> c2value<=> c2.value;
    property <[color]> base_colours: [
        hsv(0, 1, 1),
        hsv(10, 1, 1),
        hsv(20, 1, 1),
        hsv(30, 1, 1),
        hsv(40, 1, 1),
        hsv(50, 1, 1),
        hsv(60, 1, 1),
        hsv(70, 1, 1),
        hsv(80, 1, 1),
        hsv(90, 1, 1),
        hsv(100, 1, 1),
        hsv(110, 1, 1),
        hsv(120, 1, 1),
        hsv(130, 1, 1),
        hsv(140, 1, 1),
        hsv(150, 1, 1),
        hsv(160, 1, 1),
        hsv(170, 1, 1),
        hsv(180, 1, 1),
        hsv(190, 1, 1),
        hsv(200, 1, 1),
        hsv(210, 1, 1),
        hsv(220, 1, 1),
        hsv(230, 1, 1),
        hsv(240, 1, 1),
        hsv(250, 1, 1),
        hsv(260, 1, 1),
        hsv(270, 1, 1),
        hsv(280, 1, 1),
        hsv(290, 1, 1),
        hsv(300, 1, 1),
        hsv(310, 1, 1),
        hsv(320, 1, 1),
        hsv(330, 1, 1),
        hsv(340, 1, 1),
        hsv(350, 1, 1),
        hsv(360, 1, 1),
    ];
    property <[color]> base_shade: [
        blend_lightness(base_colour, 1.0),
        blend_lightness(base_colour, 0.9),
        blend_lightness(base_colour, 0.8),
        blend_lightness(base_colour, 0.7),
        blend_lightness(base_colour, 0.6),
        blend_lightness(base_colour, 0.5),
        blend_lightness(base_colour, 0.4),
        blend_lightness(base_colour, 0.3),
        blend_lightness(base_colour, 0.2),
        blend_lightness(base_colour, 0.1),
        blend_lightness(base_colour, 0.0)
    ];
    function blend_lightness(c1: color, f: float) -> color {
        rgb(c1.red * f, c1.green * f, c1.blue * f)
    }//
    function set_base_colour() {
        root.base_colour = base_colours[c1.value].interpolate(base_colours[c1.value + 1], c1.value - Math.floor(c1.value));
        root.final_colour = blend_lightness(base_colour, ((base_shade.length - c2.value) / base_shade.length));
        root.colourbox = root.final_colour;
    }//
    callback external_colour_change();

    external_colour_change => {
        if (root.final_colour.hue() < 0) {
            c1.value = (root.base_colours.length - 1) * ((root.final_colour.hue() + 360) / 360);
        } else {
            c1.value = (root.base_colours.length - 1) * (root.final_colour.hue() / 360);
        }
        c2.value = root.base_shade.length - (root.base_shade.length * root.final_colour.brightness());
        root.set_base_colour();
    }
    Rectangle {
        height: 32px;
        border-width: 2px;
        border-radius: 7px;
        border-color: Palette.border;
        // 13 colours
        background: !root.enabled ? Palette.alternate-background : @linear-gradient(90deg, base_colours[0], base_colours[1], base_colours[2], base_colours[3], base_colours[4], base_colours[5], base_colours[6], base_colours[7], base_colours[8], base_colours[9], base_colours[10], base_colours[11], base_colours[12], base_colours[13], base_colours[14], base_colours[15], base_colours[16], base_colours[17], base_colours[18], base_colours[19], base_colours[20], base_colours[21], base_colours[22], base_colours[23], base_colours[24], base_colours[25], base_colours[26], base_colours[27], base_colours[28], base_colours[29], base_colours[30], base_colours[31], base_colours[32], base_colours[33], base_colours[34], base_colours[35]);
        clip: true;
        c1 := Slider {
            enabled <=> root.enabled;
            width: parent.width;
            height: parent.height;
            minimum: 0;
            maximum: root.base_colours.length - 1;
            // One less than the array length
            changed => {
                set_base_colour();
                hex = set_hex_from_colour(final_colour);
            }
            released => {
                root.released();
            }
        }
    }

    Rectangle {
        height: 32px;
        border-width: 2px;
        border-radius: 7px;
        border-color: Palette.border;
        // 11 colours
        background: !root.enabled ? Palette.alternate-background : @linear-gradient(90deg, base_shade[0], base_shade[1], base_shade[2], base_shade[3], base_shade[4], base_shade[5], base_shade[6], base_shade[7], base_shade[8], base_shade[9], base_shade[10]);
        clip: true;
        c2 := Slider {
            enabled <=> root.enabled;
            width: parent.width;
            height: parent.height;
            minimum: 0;
            maximum: 11;
            changed => {
                set_base_colour();
                hex = set_hex_from_colour(final_colour);
            }
            released => {
                root.released();
            }
        }
    }

    HorizontalLayout {
        LineEdit {
            enabled <=> root.enabled;
            // width: 50%;
            text <=> root.hex;
            edited => {
                base_colour = hex_to_colour(self.text);
                root.colourbox = base_colour;
            }
        }

        Rectangle {
            width: self.height;
            border-width: 2px;
            border-radius: 7px;
            border-color: Palette.border;
            background <=> root.colourbox;
        
        
        }
    }
}