gilles/asusctl
1
0
Fork 0
mirror of https://gitlab.com/asus-linux/asusctl.git synced 2026-02-06 00:15:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix up colour sliders

Browse Source 
- Fixup colour sliders for UI
- Correctly drop tokio runtime
This commit is contained in:
Luke D. Jones
2024-05-08 22:28:22 +12:00
parent 1b023d0f5f
commit a18692ef1e
9 changed files with 134 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
rog-control-center/ui/widgets/colour_picker.slint
View File

@@ -6,6 +6,7 @@ export component ColourSlider inherits VerticalLayout {
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;
@@ -53,39 +54,52 @@ export component ColourSlider inherits VerticalLayout {
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)
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),
];
function blend_lightness(c1: color,f: float) -> color {
rgb(c1.red * f, c1.green * f, c1.blue * f)
}
//
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 = base_colours[c1.value].mix(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.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 - 1) * ((root.final_colour.to-hsv().hue + 360) / 360);
c1.value = root.base_colours.length * (root.final_colour.to-hsv().hue + 360) / 360;
} else {
c1.value = (root.base_colours.length - 1) * (root.final_colour.to-hsv().hue / 360);
c1.value = root.base_colours.length * root.final_colour.to-hsv().hue / 360;
}
c2.value = root.base_shade.length - (root.base_shade.length * root.final_colour.to-hsv().value);
// 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: 32px;
@@ -100,7 +114,7 @@ export component ColourSlider inherits VerticalLayout {
width: parent.width;
height: parent.height;
minimum: 0;
maximum: root.base_colours.length - 1;
maximum: root.base_colours.length;
// One less than the array length
changed => {
set_base_colour();
@@ -118,14 +132,38 @@ export component ColourSlider inherits VerticalLayout {
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]);
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: 11;
maximum: root.base_saturation.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_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);