mirror of
https://gitlab.com/asus-linux/asusctl.git
synced 2026-02-06 00:15:04 +01:00
201 lines
7.4 KiB
Plaintext
201 lines
7.4 KiB
Plaintext
import { Palette, Slider, HorizontalBox, Button, LineEdit } from "std-widgets.slint";
|
|
|
|
export component ColourSlider inherits VerticalLayout {
|
|
spacing: 12px;
|
|
in-out property <bool> enabled;
|
|
property <string> hex: "#FF0000";
|
|
in-out property <float> c1value <=> c1.value;
|
|
in-out property <float> c2value <=> c2.value;
|
|
in-out property <float> c3value <=> c3.value;
|
|
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();
|
|
|
|
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_saturation: [
|
|
hsv(base_colour.to-hsv().hue, 1, 1),
|
|
hsv(base_colour.to-hsv().hue, 0.9, 1),
|
|
hsv(base_colour.to-hsv().hue, 0.8, 1),
|
|
hsv(base_colour.to-hsv().hue, 0.7, 1),
|
|
hsv(base_colour.to-hsv().hue, 0.6, 1),
|
|
hsv(base_colour.to-hsv().hue, 0.5, 1),
|
|
hsv(base_colour.to-hsv().hue, 0.4, 1),
|
|
hsv(base_colour.to-hsv().hue, 0.3, 1),
|
|
hsv(base_colour.to-hsv().hue, 0.2, 1),
|
|
hsv(base_colour.to-hsv().hue, 0.1, 1),
|
|
hsv(base_colour.to-hsv().hue, 0, 1),
|
|
];
|
|
property <[color]> base_value: [
|
|
hsv(base_colour.to-hsv().hue, 1, 1),
|
|
hsv(base_colour.to-hsv().hue, 1, 0.9),
|
|
hsv(base_colour.to-hsv().hue, 1, 0.8),
|
|
hsv(base_colour.to-hsv().hue, 1, 0.7),
|
|
hsv(base_colour.to-hsv().hue, 1, 0.6),
|
|
hsv(base_colour.to-hsv().hue, 1, 0.5),
|
|
hsv(base_colour.to-hsv().hue, 1, 0.4),
|
|
hsv(base_colour.to-hsv().hue, 1, 0.3),
|
|
hsv(base_colour.to-hsv().hue, 1, 0.2),
|
|
hsv(base_colour.to-hsv().hue, 1, 0.1),
|
|
hsv(base_colour.to-hsv().hue, 1, 0),
|
|
];
|
|
|
|
function set_base_colour() {
|
|
root.base_colour = hsv(c1.value / base_colours.length * 360, 1, 1);
|
|
root.final_colour = hsv(base_colour.to-hsv().hue, ((base_saturation.length - c2.value) / base_saturation.length), ((base_value.length - c3.value) / base_value.length));
|
|
root.colourbox = root.final_colour;
|
|
}
|
|
|
|
callback external_colour_change();
|
|
|
|
external_colour_change => {
|
|
if (root.final_colour.to-hsv().hue < 0) {
|
|
c1.value = root.base_colours.length * (root.final_colour.to-hsv().hue + 360) / 360;
|
|
} else {
|
|
c1.value = root.base_colours.length * root.final_colour.to-hsv().hue / 360;
|
|
}
|
|
// c1.value = root.base_colours.length * 360 / root.final_colour.to-hsv().hue;
|
|
c2.value = root.base_saturation.length - root.base_saturation.length * root.final_colour.to-hsv().saturation;
|
|
c3.value = root.base_value.length - root.base_value.length * root.final_colour.to-hsv().value;
|
|
root.set_base_colour();
|
|
hex = set_hex_from_colour(final_colour);
|
|
}
|
|
Rectangle {
|
|
height: 28px;
|
|
border-width: 1px;
|
|
border-radius: 3px;
|
|
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;
|
|
// One less than the array length
|
|
changed => {
|
|
set_base_colour();
|
|
hex = set_hex_from_colour(final_colour);
|
|
}
|
|
released => {
|
|
root.released();
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
height: 28px;
|
|
border-width: 1px;
|
|
border-radius: 3px;
|
|
border-color: Palette.border;
|
|
// 11 colours
|
|
background: !root.enabled ? Palette.alternate-background : @linear-gradient(90deg, base_saturation[0], base_saturation[1], base_saturation[2], base_saturation[3], base_saturation[4], base_saturation[5], base_saturation[6], base_saturation[7], base_saturation[8], base_saturation[9], base_saturation[10]);
|
|
clip: true;
|
|
c2 := Slider {
|
|
enabled <=> root.enabled;
|
|
width: parent.width;
|
|
height: parent.height;
|
|
minimum: 0;
|
|
maximum: root.base_saturation.length;
|
|
changed => {
|
|
set_base_colour();
|
|
hex = set_hex_from_colour(final_colour);
|
|
}
|
|
released => {
|
|
root.released();
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
height: 28px;
|
|
border-width: 1px;
|
|
border-radius: 3px;
|
|
border-color: Palette.border;
|
|
// 11 colours
|
|
background: !root.enabled ? Palette.alternate-background : @linear-gradient(90deg, base_value[0], base_value[1], base_value[2], base_value[3], base_value[4], base_value[5], base_value[6], base_value[7], base_value[8], base_value[9], base_value[10]);
|
|
clip: true;
|
|
c3 := Slider {
|
|
enabled <=> root.enabled;
|
|
width: parent.width;
|
|
height: parent.height;
|
|
minimum: 0;
|
|
maximum: root.base_value.length;
|
|
changed => {
|
|
set_base_colour();
|
|
hex = set_hex_from_colour(final_colour);
|
|
}
|
|
released => {
|
|
root.released();
|
|
}
|
|
}
|
|
}
|
|
|
|
HorizontalLayout {
|
|
LineEdit {
|
|
enabled <=> root.enabled;
|
|
// width: 50%;
|
|
text <=> root.hex;
|
|
accepted => {
|
|
base_colour = hex_to_colour(self.text);
|
|
root.colourbox = base_colour;
|
|
root.final_colour = base_colour;
|
|
root.colourbox = root.final_colour;
|
|
root.external_colour_change();
|
|
root.released();
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
width: self.height;
|
|
border-width: 1px;
|
|
border-radius: 3px;
|
|
border-color: Palette.border;
|
|
background <=> root.colourbox;
|
|
}
|
|
}
|
|
}
|