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

Atempt better aura colour mix

Browse Source
This commit is contained in:
Luke D. Jones
2024-03-06 22:35:16 +13:00
parent 02b9bac899
commit fa2255cbaf
7 changed files with 122 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
rog-control-center/Cargo.toml
View File

@@ -43,18 +43,20 @@ versions.workspace = true
nix = "^0.26.1"
tempfile = "3.3.0"
i-slint-backend-selector = { git = "https://github.com/flukejones/sixtyfps.git" }
i-slint-core = { git = "https://github.com/flukejones/sixtyfps.git" }
i-slint-backend-winit = { git = "https://github.com/flukejones/sixtyfps.git" }
i-slint-backend-selector = { git = "https://github.com/flukejones/sixtyfps.git", branch = "asusctl" }
i-slint-core = { git = "https://github.com/flukejones/sixtyfps.git", branch = "asusctl" }
i-slint-backend-winit = { git = "https://github.com/flukejones/sixtyfps.git", branch = "asusctl" }
winit = "*"
[dependencies.slint]
git = "https://github.com/flukejones/sixtyfps.git"
branch = "asusctl"
default-features = false
features = ["std", "gettext", "compat-1-0", "backend-winit-wayland", "backend-linuxkms", "renderer-femtovg"]
[build-dependencies.slint-build]
git = "https://github.com/flukejones/sixtyfps.git"
branch = "asusctl"
[dev-dependencies]
cargo-husky.workspace = true

61
rog-control-center/src/ui_setup.rs
View File

@@ -6,7 +6,7 @@ use rog_dbus::zbus_anime::AnimeProxy;
use rog_dbus::zbus_aura::AuraProxy;
use rog_dbus::zbus_platform::{PlatformProxy, PlatformProxyBlocking};
use rog_platform::platform::Properties;
use slint::{Color, ComponentHandle, Model, RgbaColor, SharedString, Weak};
use slint::{ ComponentHandle, Model, RgbaColor, SharedString, Weak};
use zbus::proxy::CacheProperties;
use crate::config::Config;
@@ -405,61 +405,11 @@ fn decode_hex(s: &str) -> RgbaColor<u8> {
red: *c.first().unwrap_or(&255),
green: *c.get(1).unwrap_or(&128),
blue: *c.get(2).unwrap_or(&32),
.. Default::default()
}
}
fn rgb_hi(colour: Color) -> (f32, f32) {
let c1: RgbaColor<f32> = RgbaColor::from(colour);
let r = c1.red / 255.0;
let g = c1.green / 255.0;
let b = c1.blue / 255.0;
let min = r.min(g.min(b));
let max = r.max(g.max(b));
let delta = max - min;
let h = match delta == 0.0 {
true => 0.0,
false => {
if r == max {
(g - b) / delta
} else if g == max {
2.0 + (b - r) / delta
} else {
4.0 + (r - g) / delta
}
}
};
let h2 = ((h * 60.0) + 360.0) % 360.0;
let i = (c1.red + c1.green + c1.blue) / 3.0;
(h2, i)
}
fn setup_aura_page(ui: &MainWindow, _states: Arc<Mutex<Config>>) {
ui.global::<AuraPageData>().on_blend_colour(|c1, c2, f| {
let c1: RgbaColor<f32> = RgbaColor::from(c1);
let c2: RgbaColor<f32> = RgbaColor::from(c2);
let c1 = RgbaColor {
alpha: 1.0,
red: c1.red + (c2.red - c1.red) * f,
green: c1.green + (c2.green - c1.green) * f,
blue: c1.blue + (c2.blue - c1.blue) * f,
};
c1.into()
});
ui.global::<AuraPageData>().on_blend_lightness(|c1, f| {
let c1: RgbaColor<f32> = RgbaColor::from(c1);
let c = RgbaColor {
alpha: 1.0,
red: c1.red * f,
green: c1.green * f,
blue: c1.blue * f,
};
c.into()
});
ui.global::<AuraPageData>().on_set_hex_from_colour(|c| {
format!("#{:02X}{:02X}{:02X}", c.red(), c.green(), c.blue()).into()
});
@@ -467,9 +417,6 @@ fn setup_aura_page(ui: &MainWindow, _states: Arc<Mutex<Config>>) {
ui.global::<AuraPageData>()
.on_set_hex_to_colour(|s| decode_hex(s.as_str()).into());
ui.global::<AuraPageData>().on_set_hue(|c| rgb_hi(c).0);
ui.global::<AuraPageData>().on_set_bright(|c| rgb_hi(c).1);
let handle = ui.as_weak();
tokio::spawn(async move {
let conn = zbus::Connection::system().await.unwrap();
@@ -530,6 +477,8 @@ fn setup_aura_page(ui: &MainWindow, _states: Arc<Mutex<Config>>) {
"Keyboard LED mode set to {:?}",
"Setting keyboard LED mode failed"
);
handle.invoke_external_colour_change();
})
.ok();
@@ -546,6 +495,8 @@ fn setup_aura_page(ui: &MainWindow, _states: Arc<Mutex<Config>>) {
handle
.global::<AuraPageData>()
.invoke_update_led_mode_data(out.into());
handle
.invoke_external_colour_change();
})
.ok();
}

2
rog-control-center/translations/en/rog-control-center.po
View File

@@ -2,7 +2,7 @@
msgid ""
msgstr ""
"Project-Id-Version: PACKAGE VERSION\n"
"POT-Creation-Date: 2024-03-03 09:41+0000\n"
"POT-Creation-Date: 2024-03-04 00:28+0000\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"

8
rog-control-center/ui/main_window.slint
View File

@@ -28,6 +28,11 @@ export component MainWindow inherits Window {
show-notif = yes;
fade-cover = yes;
}
callback external_colour_change();
external_colour_change() => {
aura.external_colour_change();
aura.external_colour_change();
}
min-height: AppSize.height;
min-width: AppSize.width;
background: Colors.black;
@@ -63,8 +68,9 @@ export component MainWindow inherits Window {
height: root.height + 12px;
}
if(side-bar.current-item == 1): PageAura {
aura := PageAura {
width: root.width - side-bar.width;
visible: side-bar.current-item == 1;
}
if(side-bar.current-item == 2): PageAnime {

48
rog-control-center/ui/pages/aura.slint
View File

@@ -103,18 +103,25 @@ export global AuraPageData {
colorbox1 = data.colour1;
colorbox2 = data.colour2;
}
callback blend_colour(color, color, float) -> color;
callback blend_lightness(color, float) -> color;
callback set_hex_from_colour(color) -> string;
callback set_hex_to_colour(string) -> color;
pure callback set_hue(color) -> float;
pure callback set_bright(color) -> float;
}
export component PageAura inherits VerticalLayout {
padding: 10px;
spacing: 10px;
alignment: LayoutAlignment.start;
callback external_colour_change();
external_colour_change() => {
c1.colourbox = AuraPageData.led_mode_data.colour1;
c1.final_colour = AuraPageData.led_mode_data.colour1;
c1.external_colour_change();
c2.colourbox = AuraPageData.led_mode_data.colour2;
c2.final_colour = AuraPageData.led_mode_data.colour2;
c2.external_colour_change();
}
HorizontalLayout {
spacing: 10px;
SystemDropdown {
@@ -152,31 +159,15 @@ export component PageAura inherits VerticalLayout {
}
HorizontalBox {
ColourSlider {
c1:= ColourSlider {
final_colour <=> AuraPageData.color1;
colourbox <=> AuraPageData.colorbox1;
set_hex_from_colour(c1) => {
return AuraPageData.set_hex_from_colour(c1);
}
blend_colour(c1, c2, f) => {
return AuraPageData.blend_colour(c1, c2, f);
}
blend_lightness(c1, f) => {
return AuraPageData.blend_lightness(c1, f);
}
hex_to_colour(s) => {
return AuraPageData.set_hex_to_colour(s);
}
set_hue(color) => {
return AuraPageData.set_hue(color);
}
set_bright(color) => {
return AuraPageData.set_bright(color);
}
init => {
self.colourbox = AuraPageData.led_mode_data.colour1;
self.final_colour = AuraPageData.led_mode_data.colour1;
}
}
}
}
@@ -189,28 +180,15 @@ export component PageAura inherits VerticalLayout {
}
HorizontalBox {
ColourSlider {
c2:= ColourSlider {
final_colour <=> AuraPageData.color2;
colourbox <=> AuraPageData.colorbox2;
set_hex_from_colour(c1) => {
return AuraPageData.set_hex_from_colour(c1);
}
blend_colour(c1, c2, f) => {
return AuraPageData.blend_colour(c1, c2, f);
}
blend_lightness(c1, f) => {
return AuraPageData.blend_lightness(c1, f);
}
hex_to_colour(s) => {
return AuraPageData.set_hex_to_colour(s);
}
set_bright(color) => {
return AuraPageData.set_bright(color);
}
init => {
self.colourbox = AuraPageData.led_mode_data.colour2;
self.final_colour = AuraPageData.led_mode_data.colour2;
}
}
}
}

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

@@ -9,11 +9,7 @@ export component ColourSlider inherits VerticalLayout {
callback hex_to_colour(string) -> color;
// required
callback set_hex_from_colour(color) -> string;
/// This callback is required until slint adds direct acces to color channels
callback blend_colour(color, color, float) -> color;
callback blend_lightness(color, float) -> color;
pure callback set_hue(color) -> float;
pure callback set_bright(color) -> float;
in-out property <float> c1value<=> c1.value;
in-out property <float> c2value<=> c2.value;
property <[color]> base_colours: [
@@ -29,36 +25,46 @@ export component ColourSlider inherits VerticalLayout {
Colors.rgb( 127, 0, 255),
Colors.rgb( 255, 0, 255),
Colors.rgb( 255, 0, 127),
Colors.rgb( 128, 128, 128)
// Colors.rgb( 128, 128, 128)
];
property <[color]> base_shade: [
base_colour.with-alpha(100%),
base_colour.with-alpha(90%),
base_colour.with-alpha(80%),
base_colour.with-alpha(70%),
base_colour.with-alpha(60%),
base_colour.with-alpha(50%),
base_colour.with-alpha(40%),
base_colour.with-alpha(30%),
base_colour.with-alpha(20%),
base_colour.with-alpha(10%),
base_colour.with-alpha(0%)
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 = blend_colour(base_colours[c1.value], 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 = base_colours[c1.value].linear-blend(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 => {
c1.value = 13 * (root.set_hue(root.final_colour) / 360);
c2.value = 11 - (11 * (root.set_bright(root.final_colour) / 0.5));
if (root.final_colour.hue() < 0) {
c1.value = (root.base_colours.length) * ((root.final_colour.hue() + 360) / 360);
} else {
c1.value = (root.base_colours.length) * (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;
// 13 colours
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]);
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]);
clip: true;
border-radius: 6px;
c1 := Slider {
@@ -70,9 +76,6 @@ export component ColourSlider inherits VerticalLayout {
set_base_colour();
hex = set_hex_from_colour(final_colour);
}
init => {
self.value = 13 * (root.set_hue(root.final_colour) / 360);
}
}
}
@@ -91,10 +94,6 @@ export component ColourSlider inherits VerticalLayout {
set_base_colour();
hex = set_hex_from_colour(final_colour);
}
init => {
self.value = 12 - (12 * (root.set_bright(root.final_colour) / 0.5));
root.set_base_colour();
}
}
}
@@ -111,6 +110,7 @@ export component ColourSlider inherits VerticalLayout {
Rectangle {
width: self.height;
background <=> root.colourbox;
}
}
}