feat(rog-control-center): Major UI/UX improvements and new features

- Add software RGB animations for static-only keyboards (rainbow, color cycle)
- Add custom fan curve control via direct sysfs for unsupported laptops
- Add real-time system status bar (CPU/GPU temps, fan speeds, power draw)
- Add tray icon tooltip with live system stats
- Add power profile change notifications (Fn+F5)
- Add dGPU status notifications
- Add ROG theme with dark palette and accent colors
- Add Screenpad, Slash, and SuperGFX page stubs
- Improve fan curve graph UI
- Various UI refinements and fixes

Co-Authored-By: Gemini <noreply@google.com>
This commit is contained in:
mihai2mn
2026-01-15 20:09:40 +01:00
parent 5303bfc1ad
commit 3d0caa39e1
40 changed files with 2790 additions and 692 deletions

View File

@@ -1,4 +1,5 @@
import { Palette } from "std-widgets.slint";
import { RogPalette } from "../themes/rog_theme.slint";
export struct Node { x: length, y: length}
@@ -44,7 +45,7 @@ export component Graph inherits Rectangle {
for n in 11: Path {
viewbox-width: self.width / 1px;
viewbox-height: self.height / 1px;
stroke: Palette.alternate-foreground.darker(200%);
stroke: RogPalette.control-border;
stroke-width: 1px;
MoveTo {
x: scale_x_to_graph(n * 10px) / 1px;
@@ -60,7 +61,7 @@ export component Graph inherits Rectangle {
}
for n in 11: Text {
color: Palette.accent-background;
color: RogPalette.text-secondary;
font-size <=> root.axis_font_size;
text: "\{n * 10}c";
x: scale_x_to_graph(n * 10px) - self.width / 3;
@@ -70,7 +71,7 @@ export component Graph inherits Rectangle {
for n in 11: Path {
viewbox-width: self.width / 1px;
viewbox-height: self.height / 1px;
stroke: Palette.alternate-foreground.darker(200%);
stroke: RogPalette.control-border;
stroke-width: 1px;
MoveTo {
x: 0;
@@ -86,7 +87,7 @@ export component Graph inherits Rectangle {
}
for n in 11: Text {
color: Palette.accent-background;
color: RogPalette.text-secondary;
font-size <=> root.axis_font_size;
text: "\{n * 10}%";
x: - self.width;
@@ -97,7 +98,7 @@ export component Graph inherits Rectangle {
if idx + 1 != nodes.length: Path {
viewbox-width: self.width / 1px;
viewbox-height: self.height / 1px;
stroke: Palette.control-foreground;
stroke: RogPalette.accent;
stroke-width: 2px;
MoveTo {
x: scale_x_to_graph(nodes[idx].x) / 1px;
@@ -114,19 +115,19 @@ export component Graph inherits Rectangle {
for n[idx] in nodes: Rectangle {
states [
pressed when touch.pressed: {
point.background: Palette.selection-background;
tip.background: Palette.selection-background;
point.background: RogPalette.accent;
tip.background: RogPalette.accent;
tip.opacity: 1.0;
}
hover when touch.has-hover: {
point.background: Palette.accent-background;
tip.background: Palette.accent-background;
point.background: RogPalette.accent;
tip.background: RogPalette.accent;
tip.opacity: 1.0;
}
]
//
point := Rectangle {
background: Palette.control-foreground;
background: RogPalette.text-primary;
x: scale_x_to_graph(n.x) - self.width / 2;
y: graph.height - scale_y_to_graph(n.y) - self.height / 2;
width: 18px;
@@ -142,10 +143,14 @@ export component Graph inherits Rectangle {
} else if n.x + scale_x_to_node(self.mouse-x - self.pressed-x) < nodes[idx - 1].x {
n.x = nodes[idx - 1].x + pad;
}
// Y-Axis: Monotonic Non-Decreasing
if n.y + scale_y_to_node(self.height - self.mouse-y - self.pressed-y) > nodes[idx + 1].y {
n.y = nodes[idx + 1].y - pad;
n.y = nodes[idx + 1].y; // Allow equality
} else if n.y + scale_y_to_node(self.height - self.mouse-y - self.pressed-y) < nodes[idx - 1].y {
n.y = nodes[idx - 1].y + pad;
n.y = nodes[idx - 1].y; // Allow equality
} else if n.y + scale_y_to_node(self.height - self.mouse-y - self.pressed-y) < 0.0 {
n.y = 0px;
}
} else if idx == 0 {
if n.x + scale_x_to_node(self.mouse-x - self.pressed-x) < 0.0 {
@@ -153,10 +158,12 @@ export component Graph inherits Rectangle {
} else if n.x + scale_x_to_node(self.mouse-x - self.pressed-x) > nodes[idx + 1].x {
n.x = nodes[idx + 1].x - pad;
}
// Y-Axis: <= Next Point
if n.y - scale_y_to_node(self.mouse-y - self.pressed-y) < 0.0 {
n.y = 1px;
n.y = 0px; // Allow 0 RPM
} else if n.y + scale_y_to_node(self.height - self.mouse-y - self.pressed-y) > nodes[idx + 1].y {
n.y = nodes[idx + 1].y - pad;
n.y = nodes[idx + 1].y; // Allow equality
}
} else if idx == nodes.length - 1 {
if n.x + scale_x_to_node(self.mouse-x - self.pressed-x) > scale_x_to_node(graph.width) {
@@ -164,10 +171,14 @@ export component Graph inherits Rectangle {
} else if n.x + scale_x_to_node(self.mouse-x - self.pressed-x) < nodes[idx - 1].x {
n.x = nodes[idx - 1].x + pad;
}
// Y-Axis: >= Previous Point
if n.y - scale_y_to_node(self.mouse-y - self.pressed-y) > scale_y_to_node(graph.height) {
n.y = scale_y_to_node(graph.height - 1px);
n.y = scale_y_to_node(graph.height);
} else if n.y + scale_y_to_node(self.height - self.mouse-y - self.pressed-y) < nodes[idx - 1].y {
n.y = nodes[idx - 1].y + pad;
n.y = nodes[idx - 1].y; // Allow equality
} else if n.y + scale_y_to_node(self.height - self.mouse-y - self.pressed-y) < 0.0 {
n.y = 0px;
}
}
}
@@ -189,7 +200,7 @@ export component Graph inherits Rectangle {
}
tip := Rectangle {
background: Palette.control-foreground;
background: RogPalette.control-background;
opacity: 0.3;
x: final_x_pos();
y: final_y_pos();
@@ -224,7 +235,7 @@ export component Graph inherits Rectangle {
}
//
label := Text {
color: Palette.accent-foreground;
color: RogPalette.text-primary;
font-size: 16px;
text: "\{Math.floor(n.x / 1px)}c, \{fan_pct()}%";
}