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

MOrE

Browse Source
This commit is contained in:
Luke D. Jones
2024-02-27 14:39:46 +13:00
parent 7b0f037cba
commit a88c33c201
64 changed files with 3424 additions and 7019 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
rog-control-center/ui/common_widgets.slint
View File

@@ -1,84 +1,110 @@
import { VerticalBox , StandardButton, Button} from "std-widgets.slint";
import { VerticalBox , StandardButton, Button, HorizontalBox, ComboBox, Switch, Slider} from "std-widgets.slint";
import { Theme } from "globals.slint";
export component SquareImageButton inherits Rectangle {
callback clicked;
in-out property <image> img;
border-radius: 7px;
border-width: 2px;
border-color: Theme.control-outline;
background: Theme.image-button-background;
touch := TouchArea {
clicked => {
root.clicked();
export component RogItem inherits Rectangle {
background: Theme.background-color;
border-color: Colors.black;
border-width: 3px;
border-radius: 10px;
}
export component SystemSlider inherits RogItem {
in property <string> text;
in-out property <float> value;
in-out property <float> minimum;
in-out property <float> maximum;
callback released(int);
HorizontalLayout {
HorizontalBox {
width: 30%;
alignment: LayoutAlignment.start;
Text {
font-size: 16px;
vertical-alignment: TextVerticalAlignment.center;
color: Theme.text-foreground-color;
text <=> root.text;
}
Text {
font-size: 16px;
vertical-alignment: TextVerticalAlignment.center;
color: Theme.text-foreground-color;
text: ": \{Math.round(root.value)}";
}
}
}
Image {
height: 90%;
width: 90%;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
source <=> root.img;
image-fit: contain;
// colorize: Theme.control-secondary;
HorizontalBox {
// alignment: LayoutAlignment.end;
padding-right: 20px;
Slider {
maximum: root.maximum;
minimum: root.minimum;
value <=> root.value;
released => {
root.released(Math.round(root.value))
}
}
}
}
}
export component RoundImageButton inherits Rectangle {
callback clicked;
in-out property <image> img;
in property <length> size;
width: self.size;
height: self.size;
border-radius: root.width / 2;
border-width: 6px;
border-color: Theme.control-outline;
background: Theme.image-button-background;
touch := TouchArea {
clicked => {
root.clicked();
export component SystemToggle inherits RogItem {
in property <string> text;
in-out property <bool> checked;
callback toggled(bool);
HorizontalLayout {
HorizontalBox {
alignment: LayoutAlignment.start;
Text {
font-size: 16px;
vertical-alignment: TextVerticalAlignment.center;
color: Theme.text-foreground-color;
text <=> root.text;
}
}
}
Image {
height: 60%;
width: 60%;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
source <=> root.img;
image-fit: contain;
// colorize: Theme.control-secondary;
HorizontalBox {
alignment: LayoutAlignment.end;
padding-right: 20px;
Switch {
checked <=> root.checked;
toggled => {
root.toggled(root.checked)
}
}
}
}
}
export component SquareCharButton inherits Rectangle {
callback clicked;
in-out property <string> char;
border-radius: 7px;
border-width: 2px;
border-color: Theme.control-outline;
background: Theme.image-button-background;
touch := TouchArea {
clicked => {
root.clicked();
export component SystemDropdown inherits RogItem {
in property <string> text;
in-out property <int> current_index;
in-out property <string> current_value;
in-out property <[string]> model;
callback selected(int);
HorizontalLayout {
HorizontalBox {
alignment: LayoutAlignment.start;
Text {
font-size: 16px;
vertical-alignment: TextVerticalAlignment.center;
color: Theme.text-foreground-color;
text <=> root.text;
}
}
}
Text {
// height: 90%;
// width: 90%;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
text: char;
font-size: 28px;
font-weight: 900;
horizontal-alignment: center;
vertical-alignment: center;
color: Theme.control-foreground;
HorizontalBox {
alignment: LayoutAlignment.end;
padding-right: 20px;
ComboBox {
model <=> root.model;
current-index <=> root.current_index;
current-value <=> root.current_value;
selected => {
root.selected(root.current_index)
}
}
}
}
}
@@ -87,33 +113,25 @@ export component ValueBar inherits Rectangle {
in property <float> value: 0.0;
in property <float> min: 0.0;
in property <float> max: 1.0;
function percentage(min: float, max: float, value: float) -> float{
function percentage(min: float, max: float, value: float) -> float {
if (min < 0.0 && max > 0.0) {
// do a percentage of each half as 0-50%
if (value >= max + min) {
return (value - (max + min) / 2) / (max - min);
}
return 0.50 - (value - (min - max) / 2) / (max - min);
}
return (value - min) / (max - min);
}
function set_x(min: float, max: float, value: float, width: length) -> length{
function set_x(min: float, max: float, value: float, width: length) -> length {
if (min < 0.0 && max > 0.0) {
if (value < max + min) {
return width / 2 - width * (percentage(min, max, value));
}
return width / 2;
}
return 0;
}
Rectangle {
border-radius: 3px;
background: Theme.neutral-box;
@@ -135,54 +153,6 @@ export component ValueBar inherits Rectangle {
}
}
// Single direction spinbox
export component SpinBoxUni inherits Rectangle {
in-out property <int> value;
in property <int> minimum;
in property <int> maximum: 100;
height: 32px;
HorizontalLayout {
spacing: 12px;
padding: 0;
SquareCharButton {
width: root.height - parent.padding * 2;
char: "-";
clicked => {
if (root.value > root.minimum) {
root.value -= 1;
}
}
}
Rectangle {
border-radius: 3px;
border-width: 2px;
border-color: Theme.control-outline;
// TODO: replace with visual min/max drawing
Text {
width: 100%;
height: 100%;
vertical-alignment: center;
horizontal-alignment: center;
text: root.value;
color: Theme.control-foreground;
}
}
SquareCharButton {
width: root.height - parent.padding * 2;
char: "+";
clicked => {
if (root.value < root.maximum) {
root.value += 1;
}
}
}
}
}
export component PopupNotification {
in property <string> heading;
in property <string> content;
@@ -238,7 +208,5 @@ export component PopupNotification {
public function show() {
_p.show();
}
}

6
rog-control-center/ui/globals.slint
View File

@@ -5,15 +5,15 @@ struct ButtonColours {
}
export global AppSize {
out property <length> width: 800px;
out property <length> height: 480px;
out property <length> width: 900px;
out property <length> height: 500px;
}
export global Theme {
out property <color> window-background: #000000;
out property <color> neutral-box: #BDC0D1;
// The background colour of pages and bars
out property <color> background-color: root.dark-mode ? #12387b : white;
out property <color> background-color: root.dark-mode ? #3a127b : white;
out property <color> text-foreground-color: root.dark-mode ? #F4F6FF : black;
out property <color> secondary-foreground-color: root.dark-mode ? #C1C3CA : #6C6E7A;
out property <color> image-button-background: root.dark-mode ? root.window-background : white;

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

@@ -1,45 +1,63 @@
import { Button, VerticalBox } from "std-widgets.slint";
import { SpinBoxUni, ValueBar, SquareImageButton, RoundImageButton } from "common_widgets.slint";
import { Theme, AppSize } from "globals.slint";
import { PageSystem, AvailableSystemProperties, SystemPage } from "pages/system.slint";
import { PageSystem, AvailableSystemProperties, SystemPageData } from "pages/system.slint";
import { SideBar } from "widgets/sidebar.slint";
import { PageAbout } from "pages/about.slint";
import { PageGpu } from "pages/gpu.slint";
import { PageFans } from "pages/fans.slint";
import { PageAnime } from "pages/anime.slint";
import { PageAura } from "pages/aura.slint";
import { PageAnime, AnimePageData } from "pages/anime.slint";
import { PageAura, AuraPageData, AuraEffect } from "pages/aura.slint";
import { PageAppSettings, AppSettingsPageData } from "pages/app_settings.slint";
export { AppSize, Theme, AvailableSystemProperties, SystemPage }
export { AppSize, AuraEffect, Theme, AvailableSystemProperties, SystemPageData, AuraPageData, AnimePageData, AppSettingsPageData }
export component MainWindow inherits Window {
default-font-family: "DejaVu Sans";
in property <[bool]> sidebar_items_avilable: [true, true, true, true, true, true];
private property <bool> show-notif;
private property <bool> fade-cover;
private property <bool> toast: false;
private property <string> toast_text: "I show when something is waiting";
callback show_toast(string);
show_toast(text) => {
toast = text != "";
toast_text = text;
}
callback exit-app();
callback show-notification(bool);
show-notification(yes) => {
show-notif = yes;
fade-cover = yes;
}
in-out property <bool> charge-available;
height: AppSize.height;
width: AppSize.width;
background: Colors.orange;
min-height: AppSize.height;
min-width: AppSize.width;
background: Colors.black;
HorizontalLayout {
padding: 0px;
side-bar := SideBar {
title: @tr("ROG");
model: [
@tr("Menu" => "System Control"),
@tr("Menu" => "Keyboard Aura"),
@tr("Menu" => "AniMe Matrix"),
@tr("Menu" => "Fan Curves"),
@tr("Menu" => "GPU Control"),
@tr("Menu" => "About"),
];
VerticalLayout {
side-bar := SideBar {
title: @tr("ROG");
model: [
@tr("Menu1" => "System Control"),
@tr("Menu2" => "Keyboard Aura"),
@tr("Menu3" => "AniMe Matrix"),
@tr("Menu4" => "Fan Curves"),
@tr("Menu5" => "App Settings"),
@tr("Menu6" => "About"),
];
available: root.sidebar_items_avilable;
}
Button {
max-height: 20px;
text: "Quit";
clicked => {
root.exit-app();
}
}
}
Rectangle {
@@ -61,7 +79,7 @@ export component MainWindow inherits Window {
width: root.width - side-bar.width;
}
if(side-bar.current-item == 4): PageGpu {
if(side-bar.current-item == 4): PageAppSettings {
width: root.width - side-bar.width;
}
@@ -85,10 +103,33 @@ export component MainWindow inherits Window {
// toolbar-dropdown.close();
if (show-notif) {
show-notif = false;
}
fade-cover = false;
}
}
}
if toast: Rectangle {
x: 0px;
y: 0px;
width: root.width;
height: 32px;
opacity: 0.8;
TouchArea {
height: 100%;
width: 100%;
clicked => {
toast = false;
}
}
Rectangle {
height: 100%;
width: 100%;
background: #1a043d;
Text {
color: Theme.text-foreground-color;
text: root.toast_text;
}
}
}
@@ -105,7 +146,6 @@ export component MainWindow inherits Window {
clicked => {
show-notif = false;
exit-app();
}
}

24
rog-control-center/ui/pages/about.slint
View File

@@ -3,16 +3,18 @@ import { Theme } from "../globals.slint";
import { AboutSlint } from "std-widgets.slint";
export component PageAbout inherits VerticalLayout {
Rectangle {
clip: true;
// TODO: slow with border-radius
padding: 8px;
// height: parent.height - infobar.height - mainview.padding - self.padding * 2;
// TODO: border-radius: 8px;
mainview := VerticalLayout {
padding: 10px;
spacing: 10px;
AboutSlint {}
}
padding: 10px;
spacing: 10px;
Text {
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
text: "A UI for asusctl made with slint";
font-size: 22px;
}
Text {
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
text: "Work in progress";
font-size: 22px;
}
}

290
rog-control-center/ui/pages/anime.slint
View File

@@ -1,49 +1,273 @@
import { ValueBar } from "../common_widgets.slint";
import { Theme } from "../globals.slint";
import { SystemDropdown, SystemToggle } from "../common_widgets.slint";
import { GroupBox, VerticalBox, Button, HorizontalBox } from "std-widgets.slint";
export component PageAnime inherits VerticalLayout {
Rectangle {
clip: true;
// TODO: slow with border-radius
export global AnimePageData {
in-out property <[string]> brightness_names: [
@tr("Anime Brightness" => "Off"),
@tr("Anime Brightness" => "Low"),
@tr("Anime Brightness" => "Med"),
@tr("Anime Brightness" => "High"),
];
in-out property <int> brightness;
callback set_brightness(int);
in-out property <bool> builtins_enabled;
callback set_builtins_enabled(bool);
in-out property <bool> enable_display;
callback set_enable_display(bool);
in-out property <bool> off_when_lid_closed;
callback set_off_when_lid_closed(bool);
in-out property <bool> off_when_suspended;
callback set_off_when_suspended(bool);
in-out property <bool> off_when_unplugged;
callback set_off_when_unplugged(bool);
in-out property <[string]> boot_anim_choices: [@tr("Glitch Construction"), @tr("Static Emergence")];
in property <int> boot_anim: 0;
in-out property <[string]> awake_anim_choices: [@tr("Binary Banner Scroll"), @tr("Rog Logo Glitch")];
in property <int> awake_anim: 0;
in-out property <[string]> sleep_anim_choices: [@tr("Banner Swipe"), @tr("Starfield")];
in property <int> sleep_anim: 0;
in-out property <[string]> shutdown_anim_choices: [@tr("Glitch Out"), @tr("See Ya")];
in property <int> shutdown_anim: 0;
callback set_builtin_animations(int, int, int, int);
}
export component PageAnime inherits Rectangle {
property <bool> show_fade_cover: false;
property <bool> show_display_advanced: false;
property <bool> show_builtin_advanced: false;
clip: true;
// TODO: slow with border-radius
padding: 8px;
// height: parent.height - infobar.height - mainview.padding - self.padding * 2;
// height: parent.height - infobar.height - mainview.padding - self.padding * 2;
// TODO: border-radius: 8px;
mainview := VerticalLayout {
padding: 10px;
VerticalLayout {
padding: 10px;
spacing: 10px;
HorizontalLayout {
spacing: 10px;
ValueBar {
height: 40px;
value: 10.5;
min: 0.0;
max: 100.0;
max-height: 32px;
SystemDropdown {
text: @tr("Anime Brightness" => "Brightness");
current_index <=> AnimePageData.brightness;
current_value: AnimePageData.brightness_names[AnimePageData.brightness];
model <=> AnimePageData.brightness_names;
selected => {
self.current_value = AnimePageData.brightness_names[AnimePageData.brightness];
AnimePageData.set_brightness(AnimePageData.brightness)
}
}
}
HorizontalLayout {
spacing: 10px;
max-height: 32px;
alignment: LayoutAlignment.stretch;
SystemToggle {
text: @tr("Enable display");
checked <=> AnimePageData.enable_display;
toggled => {
AnimePageData.set_enable_display(AnimePageData.enable_display)
}
}
ValueBar {
height: 40px;
value: -70;
min: -100;
max: 0;
Button {
text: @tr("Advanced");
width: 20%;
enabled <=> AnimePageData.enable_display;
clicked => {
root.show_fade_cover = true;
root.show_display_advanced = true;
}
}
}
HorizontalLayout {
spacing: 10px;
max-height: 32px;
alignment: LayoutAlignment.stretch;
SystemToggle {
text: @tr("Use built-in animations");
checked <=> AnimePageData.builtins_enabled;
toggled => {
AnimePageData.set_builtins_enabled(AnimePageData.builtins_enabled)
}
}
ValueBar {
height: 80px;
value: 40;
min: -50;
max: 50;
Button {
text: @tr("Advanced");
width: 20%;
enabled <=> AnimePageData.builtins_enabled;
clicked => {
root.show_fade_cover = true;
root.show_builtin_advanced = true;
}
}
}
}
ValueBar {
height: 80px;
value: -40;
min: -50;
max: 50;
if root.show_fade_cover: Rectangle {
width: 100%;
height: 100%;
background: Theme.background-color;
opacity: 0.8;
TouchArea {
height: 100%;
width: 100%;
// clicked => {
// // toolbar-dropdown.close();
// if (root.show_display_advanced) {
// root.show_display_advanced = false;
// }
// if (root.show_builtin_advanced) {
// root.show_builtin_advanced = false;
// }
// root.show_fade_cover = false;
// }
}
}
if root.show_builtin_advanced: Rectangle {
x: 0;
width: 100%;
height: 100%;
opacity: 1;
VerticalLayout {
padding: 50px;
spacing: 10px;
GroupBox {
height: 100px;
VerticalBox {
spacing: 10px;
alignment: LayoutAlignment.start;
Text {
font-size: 18px;
color: Theme.text-foreground-color;
horizontal-alignment: TextHorizontalAlignment.center;
text: @tr("Advanced Anime Display : TODO!");
}
SystemDropdown {
text: @tr("Anime built-in selection" => "Boot Animation");
current_index <=> AnimePageData.boot_anim;
current_value: AnimePageData.boot_anim_choices[AnimePageData.boot_anim];
model <=> AnimePageData.boot_anim_choices;
selected => {
AnimePageData.set_builtin_animations(AnimePageData.boot_anim, AnimePageData.awake_anim, AnimePageData.sleep_anim, AnimePageData.shutdown_anim)
}
}
SystemDropdown {
text: @tr("Anime built-in selection" => "Running Animation");
current_index <=> AnimePageData.awake_anim;
current_value: AnimePageData.awake_anim_choices[AnimePageData.awake_anim];
model <=> AnimePageData.awake_anim_choices;
selected => {
AnimePageData.set_builtin_animations(AnimePageData.boot_anim, AnimePageData.awake_anim, AnimePageData.sleep_anim, AnimePageData.shutdown_anim)
}
}
SystemDropdown {
text: @tr("Anime built-in selection" => "Sleep Animation");
current_index <=> AnimePageData.sleep_anim;
current_value: AnimePageData.sleep_anim_choices[AnimePageData.sleep_anim];
model <=> AnimePageData.sleep_anim_choices;
selected => {
AnimePageData.set_builtin_animations(AnimePageData.boot_anim, AnimePageData.awake_anim, AnimePageData.sleep_anim, AnimePageData.shutdown_anim)
}
}
SystemDropdown {
text: @tr("Anime built-in selection" => "Shutdown Animation");
current_index <=> AnimePageData.shutdown_anim;
current_value: AnimePageData.shutdown_anim_choices[AnimePageData.shutdown_anim];
model <=> AnimePageData.shutdown_anim_choices;
selected => {
AnimePageData.set_builtin_animations(AnimePageData.boot_anim, AnimePageData.awake_anim, AnimePageData.sleep_anim, AnimePageData.shutdown_anim)
}
}
}
}
}
ValueBar {
height: 80px;
value: -40;
min: -50;
max: 50;
Button {
x: root.width - self.width - 6px;
y: 6px;
text: "X";
height: 40px;
clicked => {
root.show_builtin_advanced = false;
root.show_fade_cover = false;
}
}
}
if root.show_display_advanced: Rectangle {
width: 100%;
height: 100%;
opacity: 1;
VerticalLayout {
padding: 50px;
spacing: 10px;
GroupBox {
height: 100px;
VerticalBox {
spacing: 10px;
alignment: LayoutAlignment.start;
Text {
font-size: 18px;
color: Theme.text-foreground-color;
horizontal-alignment: TextHorizontalAlignment.center;
text: @tr("Advanced Display Settings");
}
SystemToggle {
max-height: 42px;
text: @tr("Off when lid closed");
checked <=> AnimePageData.off_when_lid_closed;
toggled => {
AnimePageData.set_off_when_lid_closed(AnimePageData.off_when_lid_closed)
}
}
SystemToggle {
max-height: 42px;
text: @tr("Off when suspended");
checked <=> AnimePageData.off_when_suspended;
toggled => {
AnimePageData.set_off_when_suspended(AnimePageData.off_when_suspended)
}
}
SystemToggle {
max-height: 42px;
text: @tr("Off when on battery");
checked <=> AnimePageData.off_when_unplugged;
toggled => {
AnimePageData.set_off_when_unplugged(AnimePageData.off_when_unplugged)
}
}
}
}
}
Button {
x: root.width - self.width - 6px;
y: 6px;
text: "X";
height: 40px;
clicked => {
root.show_display_advanced = false;
root.show_fade_cover = false;
}
}
}

75
rog-control-center/ui/pages/app_settings.slint Normal file
View File

@@ -0,0 +1,75 @@
import { Theme } from "../globals.slint";
import { SystemToggle } from "../common_widgets.slint";
export global AppSettingsPageData {
in-out property <bool> run_in_background;
callback set_run_in_background(bool);
in-out property <bool> startup_in_background;
callback set_startup_in_background(bool);
in-out property <bool> enable_tray_icon;
callback set_enable_tray_icon(bool);
in-out property <bool> enable_notifications;
callback set_enable_notifications(bool);
}
export component PageAppSettings inherits VerticalLayout {
Rectangle {
clip: true;
// TODO: slow with border-radius
padding: 8px;
// height: parent.height - infobar.height - mainview.padding - self.padding * 2;
// TODO: border-radius: 8px;
mainview := VerticalLayout {
padding: 10px;
spacing: 10px;
HorizontalLayout {
spacing: 10px;
max-height: 32px;
SystemToggle {
text: @tr("Run in background after closing");
checked <=> AppSettingsPageData.run_in_background;
toggled => {
AppSettingsPageData.set_run_in_background(AppSettingsPageData.run_in_background)
}
}
SystemToggle {
width: parent.width * 1px / 2px;
text: @tr("Start app in background (UI closed)");
checked <=> AppSettingsPageData.startup_in_background;
toggled => {
AppSettingsPageData.set_run_in_background(AppSettingsPageData.startup_in_background)
}
}
}
HorizontalLayout {
max-height: 32px;
spacing: 10px;
SystemToggle {
text: @tr("Enable system tray icon");
checked <=> AppSettingsPageData.enable_tray_icon;
toggled => {
AppSettingsPageData.set_enable_tray_icon(AppSettingsPageData.enable_tray_icon)
}
}
SystemToggle {
width: parent.width * 1px / 2px;
text: @tr("Enable change notifications");
checked <=> AppSettingsPageData.enable_notifications;
toggled => {
AppSettingsPageData.set_enable_notifications(AppSettingsPageData.enable_notifications)
}
}
}
Text {
text: "TODO";
}
}
}
}

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

@@ -1,50 +1,290 @@
import { ValueBar } from "../common_widgets.slint";
import { SystemDropdown, RogItem } from "../common_widgets.slint";
import { Button, ComboBox, VerticalBox, GroupBox } from "std-widgets.slint";
import { StyleMetrics, Slider, HorizontalBox, TextEdit, SpinBox, LineEdit } from "std-widgets.slint";
import { ColorPicker, ColourSlider } from "../widgets/colour_picker.slint";
import { Theme } from "../globals.slint";
export struct AuraEffect {
/// The effect type
mode: int,
/// `AuraZone::None` for no zone or zoneless keyboards
zone: int,
/// Primary colour for all modes
colour1: color,
/// Secondary colour in some modes like Breathing or Stars
colour2: color,
/// One of three speeds for modes that support speed (most that animate)
speed: int,
/// Up, down, left, right. Only Rainbow mode seems to use this
direction: int,
}
export global AuraPageData {
in-out property <[string]> brightness_names: [
@tr("Aura brightness" => "Off"),
@tr("Aura brightness" => "Low"),
@tr("Aura brightness" => "Med"),
@tr("Aura brightness" => "High"),
];
in-out property <int> brightness;
callback set_brightness(int);
in-out property <[string]> mode_names: [
@tr("Basic aura mode" => "Static"),
@tr("Basic aura mode" => "Breathe"),
@tr("Basic aura mode" => "Strobe"),
@tr("Basic aura mode" => "Rainbow"),
@tr("Basic aura mode" => "Star"),
@tr("Basic aura mode" => "Rain"),
@tr("Basic aura mode" => "Highlight"),
@tr("Basic aura mode" => "Laser"),
@tr("Basic aura mode" => "Ripple"),
@tr("Basic aura mode" => "Nothing"),
@tr("Basic aura mode" => "Pulse"),
@tr("Basic aura mode" => "Comet"),
@tr("Basic aura mode" => "Flash"),
];
in-out property <[string]> available_mode_names: [
@tr("Basic aura mode" => "Static"),
@tr("Basic aura mode" => "Breathe"),
@tr("Basic aura mode" => "Strobe"),
];
in-out property <int> current_available_mode: 0;
in-out property <[int]> supported_basic_modes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12];
in-out property <int> led_mode;
callback set_led_mode(int);
in-out property <[string]> zone_names: [
@tr("Aura zone" => "None"),
@tr("Aura zone" => "Key1"),
@tr("Aura zone" => "Key2"),
@tr("Aura zone" => "Key3"),
@tr("Aura zone" => "Key4"),
@tr("Aura zone" => "Logo"),
@tr("Aura zone" => "Lightbar Left"),
@tr("Aura zone" => "Lightbar Right"),
];
in-out property <int> zone;
in-out property <[string]> direction_names: [
@tr("Aura direction" => "Right"),
@tr("Aura direction" => "Left"),
@tr("Aura direction" => "Up"),
@tr("Aura direction" => "Down"),
];
in-out property <int> direction;
in-out property <[string]> speed_names: [
@tr("Aura speed" => "Low"),
@tr("Aura speed" => "Medium"),
@tr("Aura speed" => "High"),
];
in-out property <int> speed;
in-out property <AuraEffect> led_mode_data: {
mode: 0,
zone: 0,
colour1: Colors.aquamarine,
colourbox1: Colors.aquamarine,
colour2: Colors.hotpink,
colourbox2: Colors.hotpink,
speed: 0,
direction: 0,
};
callback set_led_mode_data(AuraEffect);
in-out property <color> color1;
in-out property <brush> colorbox1;
in-out property <color> color2;
in-out property <brush> colorbox2;
callback update_led_mode_data(AuraEffect);
update_led_mode_data(data) => {
led_mode_data = data;
current_available_mode = data.mode;
zone = data.zone;
speed = data.speed;
direction = data.direction;
color1 = data.colour1;
color2 = data.colour2;
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;
}
export component PageAura inherits VerticalLayout {
Rectangle {
clip: true;
// TODO: slow with border-radius
padding: 8px;
// height: parent.height - infobar.height - mainview.padding - self.padding * 2;
// TODO: border-radius: 8px;
mainview := VerticalLayout {
padding: 10px;
spacing: 10px;
ValueBar {
height: 40px;
value: 10.5;
min: 0.0;
max: 100.0;
padding: 10px;
spacing: 10px;
alignment: LayoutAlignment.start;
HorizontalLayout {
spacing: 10px;
SystemDropdown {
text: @tr("Brightness");
current_index <=> AuraPageData.brightness;
current_value: AuraPageData.brightness_names[self.current-index];
model <=> AuraPageData.brightness_names;
selected => {
AuraPageData.set_brightness(AuraPageData.brightness)
}
}
ValueBar {
height: 40px;
value: -70;
min: -100;
max: 0;
}
ValueBar {
height: 80px;
value: 40;
min: -50;
max: 50;
}
ValueBar {
height: 80px;
value: -40;
min: -50;
max: 50;
}
ValueBar {
height: 80px;
value: -40;
min: -50;
max: 50;
SystemDropdown {
width: parent.width * 1px / 2px;
text: @tr("Aura mode");
current_index <=> AuraPageData.current_available_mode;
current_value: AuraPageData.available_mode_names[self.current-index];
model <=> AuraPageData.available_mode_names;
selected => {
AuraPageData.led_mode_data.mode = AuraPageData.current_available_mode;
self.current_value = AuraPageData.available_mode_names[self.current-index];
AuraPageData.set_led_mode(AuraPageData.current_available_mode);
}
}
}
RogItem {
HorizontalLayout {
spacing: 10px;
VerticalBox {
Text {
text: @tr("Colour 1");
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
}
HorizontalBox {
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);
}
init => {
self.colourbox = AuraPageData.led_mode_data.colour1;
self.final_colour = AuraPageData.led_mode_data.colour1;
}
}
}
}
VerticalBox {
Text {
text: @tr("Colour 2");
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
}
HorizontalBox {
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);
}
init => {
self.colourbox = AuraPageData.led_mode_data.colour2;
self.final_colour = AuraPageData.led_mode_data.colour2;
}
}
}
}
}
}
HorizontalLayout {
spacing: 10px;
RogItem {
padding: 0px;
VerticalBox {
Text {
text: @tr("Zone");
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
}
ComboBox {
current_index <=> AuraPageData.zone;
current_value: AuraPageData.zone_names[self.current-index];
model <=> AuraPageData.zone_names;
selected => {
AuraPageData.led_mode_data.zone = self.current-index;
}
}
}
}
RogItem {
padding: 0px;
VerticalBox {
Text {
text: @tr("Direction");
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
}
ComboBox {
current_index <=> AuraPageData.direction;
current_value: AuraPageData.direction_names[self.current-index];
model <=> AuraPageData.direction_names;
selected => {
AuraPageData.led_mode_data.direction = self.current-index;
}
}
}
}
RogItem {
padding: 0px;
VerticalBox {
Text {
text: @tr("Speed");
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
}
ComboBox {
current_index <=> AuraPageData.speed;
current_value: AuraPageData.speed_names[self.current-index];
model <=> AuraPageData.speed_names;
selected => {
AuraPageData.led_mode_data.speed = self.current-index;
}
}
}
}
}
Button {
text: @tr("Apply");
clicked => {
AuraPageData.led_mode_data.mode = AuraPageData.led_mode;
AuraPageData.led_mode_data.colour1 = AuraPageData.color1;
AuraPageData.led_mode_data.colour2 = AuraPageData.color2;
AuraPageData.set_led_mode_data(AuraPageData.led_mode_data);
}
}
}

36
rog-control-center/ui/pages/fans.slint
View File

@@ -1,4 +1,3 @@
import { ValueBar } from "../common_widgets.slint";
import { Theme } from "../globals.slint";
export component PageFans inherits VerticalLayout {
@@ -11,39 +10,8 @@ export component PageFans inherits VerticalLayout {
mainview := VerticalLayout {
padding: 10px;
spacing: 10px;
ValueBar {
height: 40px;
value: 10.5;
min: 0.0;
max: 100.0;
}
ValueBar {
height: 40px;
value: -70;
min: -100;
max: 0;
}
ValueBar {
height: 80px;
value: 40;
min: -50;
max: 50;
}
ValueBar {
height: 80px;
value: -40;
min: -50;
max: 50;
}
ValueBar {
height: 80px;
value: -40;
min: -50;
max: 50;
Text {
text: "TODO";
}
}
}

50
rog-control-center/ui/pages/gpu.slint
View File

@@ -1,50 +0,0 @@
import { ValueBar } from "../common_widgets.slint";
import { Theme } from "../globals.slint";
export component PageGpu inherits VerticalLayout {
Rectangle {
clip: true;
// TODO: slow with border-radius
padding: 8px;
// height: parent.height - infobar.height - mainview.padding - self.padding * 2;
// TODO: border-radius: 8px;
mainview := VerticalLayout {
padding: 10px;
spacing: 10px;
ValueBar {
height: 40px;
value: 10.5;
min: 0.0;
max: 100.0;
}
ValueBar {
height: 40px;
value: -70;
min: -100;
max: 0;
}
ValueBar {
height: 80px;
value: 40;
min: -50;
max: 50;
}
ValueBar {
height: 80px;
value: -40;
min: -50;
max: 50;
}
ValueBar {
height: 80px;
value: -40;
min: -50;
max: 50;
}
}
}
}

508
rog-control-center/ui/pages/system.slint
View File

@@ -1,15 +1,15 @@
import { ValueBar, SquareCharButton } from "../common_widgets.slint";
import { SystemSlider, SystemDropdown, SystemToggle } from "../common_widgets.slint";
import { Theme } from "../globals.slint";
import { HorizontalBox , VerticalBox, ScrollView, Slider, Button, Switch} from "std-widgets.slint";
import { HorizontalBox , VerticalBox, ScrollView, Slider, Button, Switch, ComboBox, GroupBox} from "std-widgets.slint";
export struct AvailableSystemProperties {
charge_limit: bool,
charge_control_end_threshold: bool,
panel_od: bool,
mini_led_mode: bool,
disable_nvidia_powerd_on_battery: bool,
ac_command: bool,
bat_command: bool,
throttle_policy: bool,
throttle_thermal_policy: bool,
ppt_pl1_spl: bool,
ppt_pl2_sppt: bool,
ppt_fppt: bool,
@@ -19,186 +19,360 @@ export struct AvailableSystemProperties {
nv_temp_target: bool,
}
export struct SystemValues {
charge_limit: int,
last_charge_limit: int,
panel_od: bool,
mini_led_mode: bool,
disable_nvidia_powerd_on_battery: bool,
}
export global SystemPageData {
in-out property <float> charge_control_end_threshold: 30;
callback set_charge_control_end_threshold(/* charge limit */ int);
export global SystemPage {
in-out property <float> charge_limit;
in-out property <int> last_charge_limit;
callback set_charge_limit(/* charge limit */ int);
in-out property <int> throttle_thermal_policy: 0;
in-out property <[string]> throttle_policy_choices: [@tr("Balanced"), @tr("Performance"), @tr("Quiet")];
callback set_throttle_thermal_policy(int);
in-out property <[string]> energy_performance_choices: [
@tr("Default"),
@tr("Performance"),
@tr("BalancePerformance"),
@tr("BalancePower"),
@tr("Power")
];
in-out property <int> throttle_balanced_epp: 0;
callback set_throttle_balanced_epp(int);
in-out property <int> throttle_performance_epp: 0;
callback set_throttle_performance_epp(int);
in-out property <int> throttle_quiet_epp: 0;
callback set_throttle_quiet_epp(int);
// if the EPP should change with throttle
in-out property <bool> throttle_policy_linked_epp: true;
callback set_throttle_policy_linked_epp(bool);
in-out property <int> throttle_policy_on_ac: 0;
callback set_throttle_policy_on_ac(int);
in-out property <int> throttle_policy_on_battery: 0;
callback set_throttle_policy_on_battery(int);
in-out property <bool> panel_od;
in-out property <bool> last_panel_od;
callback set_panel_od(/* panel_od */ bool);
callback set_panel_od(bool);
callback applied();
callback cancelled();
in-out property <bool> mini_led_mode;
callback set_mini_led_mode(bool);
in-out property <AvailableSystemProperties> available;
in-out property <float> ppt_pl1_spl: 5;
callback set_ppt_pl1_spl(int);
in-out property <float> ppt_pl2_sppt: 5;
callback set_ppt_pl2_sppt(int);
in-out property <float> ppt_fppt: 5;
callback set_ppt_fppt(int);
in-out property <float> ppt_apu_sppt: 5;
callback set_ppt_apu_sppt(int);
in-out property <float> ppt_platform_sppt: 5;
callback set_ppt_platform_sppt(int);
in-out property <float> nv_dynamic_boost: 5;
callback set_nv_dynamic_boost(int);
in-out property <float> nv_temp_target: 75;
callback set_nv_temp_target(int);
in-out property <AvailableSystemProperties> available: {
charge_control_end_threshold: true,
panel_od: true,
mini_led_mode: true,
disable_nvidia_powerd_on_battery: true,
ac_command: true,
bat_command: true,
throttle_thermal_policy: true,
ppt_pl1_spl: true,
ppt_pl2_sppt: true,
ppt_fppt: true,
ppt_apu_sppt: true,
ppt_platform_sppt: true,
nv_dynamic_boost: true,
nv_temp_target: true,
};
}
export component PageSystem inherits Rectangle {
background: Theme.background-color;
VerticalLayout {
ScrollView {
VerticalLayout {
// padding: 10px;
property <bool> show_fade_cover: false;
property <bool> show_throttle_advanced: false;
clip: true;
padding: 8px;
ScrollView {
VerticalLayout {
padding: 10px;
spacing: 10px;
min-height: root.height;
if SystemPage.available.charge-limit: Rectangle {
background: Theme.background-color;
VerticalBox {
Rectangle {
background: Theme.background-color;
border-color: Colors.black;
border-width: 6px;
border-radius: 10px;
height: 40px;
Text {
font-size: 18px;
color: Theme.text-foreground-color;
horizontal-alignment: TextHorizontalAlignment.center;
text: @tr("Base system settings");
}
}
HorizontalBox {
alignment: LayoutAlignment.start;
Text {
color: Theme.text-foreground-color;
text: @tr("ChargeLimit" => "Charge limit");
}
Text {
color: Theme.text-foreground-color;
text: "\{Math.floor(SystemPage.charge_limit)}";
}
}
HorizontalBox {
TouchArea { }
charge_slider := Slider {
maximum: 100;
minimum: 20;
value <=> SystemPage.charge_limit;
if SystemPageData.available.charge-control-end-threshold: SystemSlider {
text: @tr("Charge limit");
minimum: 20;
maximum: 100;
value <=> SystemPageData.charge_control_end_threshold;
released => {
SystemPage.set_charge_limit(SystemPage.charge_limit)
}
}
}
}
}
if SystemPage.available.panel-od: Rectangle {
background: Theme.background-color;
VerticalBox {
HorizontalBox {
alignment: LayoutAlignment.start;
Text {
color: Theme.text-foreground-color;
text: @tr("PanelOverdrive" => "Panel Overdrive");
}
Switch {
checked <=> SystemPage.panel_od;
toggled => {
SystemPage.set_panel_od(SystemPage.panel_od)
}
}
}
Text {
color: Theme.text-foreground-color;
text: @tr("PerformanceProfile" => "Performance Profile");
}
}
}
Rectangle {
background: Theme.background-color;
VerticalBox {
Text {
color: Theme.text-foreground-color;
text: @tr("nv_dynamic_boost" => "nv_dynamic_boost");
}
Text {
color: Theme.text-foreground-color;
text: @tr("nv_temp_target" => "nv_temp_target");
}
Text {
color: Theme.text-foreground-color;
text: @tr("ppt_pl1_spl" => "ppt_pl1_spl");
}
Text {
color: Theme.text-foreground-color;
text: @tr("ppt_pl2_sppt" => "ppt_pl2_sppt");
}
}
}
Rectangle {
background: Theme.background-color;
VerticalBox {
Text {
color: Theme.text-foreground-color;
text: @tr("PanelOverdrive" => "Panel Overdrive");
}
Text {
color: Theme.text-foreground-color;
text: @tr("PerformanceProfile" => "Performance Profile");
}
}
}
Rectangle {
background: Theme.background-color;
VerticalBox {
Text {
color: Theme.text-foreground-color;
text: @tr("PanelOverdrive" => "Panel Overdrive");
}
Text {
color: Theme.text-foreground-color;
text: @tr("PerformanceProfile" => "Performance Profile");
}
}
}
Rectangle {
background: Theme.background-color;
VerticalBox {
Text {
color: Theme.text-foreground-color;
text: @tr("PanelOverdrive" => "Panel Overdrive");
}
Text {
color: Theme.text-foreground-color;
text: @tr("PerformanceProfile" => "Performance Profile");
}
}
}
}
}
HorizontalLayout {
Button {
text: "Apply";
clicked => {
if SystemPage.last_charge_limit != Math.floor(SystemPage.charge_limit) {
SystemPage.set_charge_limit(SystemPage.charge_limit);
SystemPage.last_charge_limit = Math.floor(SystemPage.charge_limit);
}
SystemPage.applied();
SystemPageData.set_charge_control_end_threshold(Math.round(SystemPageData.charge_control_end_threshold))
}
}
Button {
text: "Cancel";
clicked => {
SystemPage.charge_limit = SystemPage.last_charge_limit;
SystemPage.cancelled();
if SystemPageData.available.throttle-thermal-policy: HorizontalLayout {
spacing: 10px;
SystemDropdown {
text: @tr("Throttle Policy");
current_index <=> SystemPageData.throttle_thermal_policy;
current_value: SystemPageData.throttle_policy_choices[SystemPageData.throttle_thermal_policy];
model <=> SystemPageData.throttle_policy_choices;
selected => {
SystemPageData.set_throttle_thermal_policy(SystemPageData.throttle_thermal_policy)
}
}
Button {
text: @tr("Advanced");
clicked => {
root.show_fade_cover = true;
root.show_throttle_advanced = true;
}
}
}
HorizontalBox {
padding: 0px;
spacing: 10px;
if SystemPageData.available.panel-od: SystemToggle {
text: @tr("Panel Overdrive");
checked <=> SystemPageData.panel_od;
toggled => {
SystemPageData.set_panel_od(SystemPageData.panel_od)
}
}
if SystemPageData.available.mini-led-mode: SystemToggle {
text: @tr("MiniLED Mode");
checked <=> SystemPageData.mini_led_mode;
toggled => {
SystemPageData.set_mini_led_mode(SystemPageData.mini_led_mode)
}
}
}
Rectangle {
background: Theme.background-color;
border-color: Colors.black;
border-width: 6px;
border-radius: 10px;
height: 40px;
Text {
font-size: 18px;
color: Theme.text-foreground-color;
horizontal-alignment: TextHorizontalAlignment.center;
text: @tr("System performance settings");
}
}
if SystemPageData.available.ppt-pl1-spl: SystemSlider {
text: @tr("ppt_pl1_spl" => "ppt_pl1_spl");
minimum: 5;
maximum: 250;
value <=> SystemPageData.ppt_pl1_spl;
released => {
SystemPageData.set_ppt_pl1_spl(Math.round(SystemPageData.ppt_pl1_spl))
}
}
if SystemPageData.available.ppt-pl2-sppt: SystemSlider {
text: @tr("ppt_pl2_sppt" => "ppt_pl2_sppt");
minimum: 5;
maximum: 250;
value <=> SystemPageData.ppt_pl2_sppt;
released => {
SystemPageData.set_ppt_pl2_sppt(Math.round(SystemPageData.ppt_pl2_sppt))
}
}
if SystemPageData.available.ppt-fppt: SystemSlider {
text: @tr("ppt_fppt" => "ppt_fppt");
minimum: 5;
maximum: 250;
value <=> SystemPageData.ppt_fppt;
released => {
SystemPageData.set_ppt_fppt(Math.round(SystemPageData.ppt_fppt))
}
}
if SystemPageData.available.ppt-apu-sppt: SystemSlider {
text: @tr("ppt_apu_sppt" => "ppt_apu_sppt");
minimum: 5;
maximum: 130;
value <=> SystemPageData.ppt_apu_sppt;
released => {
SystemPageData.set_ppt_apu_sppt(Math.round(SystemPageData.ppt_apu_sppt))
}
}
if SystemPageData.available.ppt-platform-sppt: SystemSlider {
text: @tr("ppt_platform_sppt" => "ppt_platform_sppt");
maximum: 130;
minimum: 5;
value <=> SystemPageData.ppt_platform_sppt;
released => {
SystemPageData.set_ppt_platform_sppt(Math.round(SystemPageData.ppt_platform_sppt))
}
}
if SystemPageData.available.nv-dynamic-boost: SystemSlider {
text: @tr("nv_dynamic_boost" => "nv_dynamic_boost");
minimum: 5;
maximum: 25;
value <=> SystemPageData.nv_dynamic_boost;
released => {
SystemPageData.set_nv_dynamic_boost(Math.round(SystemPageData.nv_dynamic_boost))
}
}
if SystemPageData.available.nv-temp-target: SystemSlider {
text: @tr("nv_temp_target" => "nv_temp_target");
minimum: 75;
maximum: 87;
value <=> SystemPageData.nv_temp_target;
released => {
SystemPageData.set_nv_temp_target(Math.round(SystemPageData.nv_temp_target))
}
}
}
}
if root.show_fade_cover: Rectangle {
width: 100%;
height: 100%;
background: Theme.background-color;
opacity: 0.8;
TouchArea {
height: 100%;
width: 100%;
clicked => {
// toolbar-dropdown.close();
if (root.show_throttle_advanced) {
root.show_throttle_advanced = false;
}
root.show_fade_cover = false;
}
}
}
if root.show_throttle_advanced: Rectangle {
width: 100%;
height: 100%;
opacity: 1;
ScrollView {
VerticalLayout {
padding: 50px;
padding-top: 5px;
spacing: 10px;
GroupBox {
VerticalBox {
spacing: 10px;
Text {
font-size: 18px;
horizontal-alignment: TextHorizontalAlignment.center;
vertical-alignment: TextVerticalAlignment.center;
text: @tr("Energy Performance Preference linked to Throttle Policy");
}
SystemToggle {
text: @tr("Change EPP based on Throttle Policy");
checked <=> SystemPageData.throttle_policy_linked_epp;
toggled => {
SystemPageData.set_throttle_policy_linked_epp(SystemPageData.throttle_policy_linked_epp)
}
}
SystemDropdown {
text: @tr("EPP for Balanced Policy");
current_index <=> SystemPageData.throttle_balanced_epp;
current_value: SystemPageData.energy_performance_choices[SystemPageData.throttle_balanced_epp];
model <=> SystemPageData.energy_performance_choices;
selected => {
SystemPageData.set_throttle_balanced_epp(SystemPageData.throttle_balanced_epp)
}
}
SystemDropdown {
text: @tr("EPP for Performance Policy");
current_index <=> SystemPageData.throttle_performance_epp;
current_value: SystemPageData.energy_performance_choices[SystemPageData.throttle_performance_epp];
model <=> SystemPageData.energy_performance_choices;
selected => {
SystemPageData.set_throttle_performance_epp(SystemPageData.throttle_performance_epp)
}
}
SystemDropdown {
text: @tr("EPP for Quiet Policy");
current_index <=> SystemPageData.throttle_quiet_epp;
current_value: SystemPageData.energy_performance_choices[SystemPageData.throttle_quiet_epp];
model <=> SystemPageData.energy_performance_choices;
selected => {
SystemPageData.set_throttle_quiet_epp(SystemPageData.throttle_quiet_epp)
}
}
}
}
GroupBox {
VerticalBox {
spacing: 10px;
Text {
font-size: 18px;
horizontal-alignment: TextHorizontalAlignment.center;
vertical-alignment: TextVerticalAlignment.center;
text: @tr("Throttle Policy for power state");
}
SystemDropdown {
text: @tr("Throttle Policy on Battery");
current_index <=> SystemPageData.throttle_policy_on_battery;
current_value: SystemPageData.throttle_policy_choices[SystemPageData.throttle_policy_on_battery];
model <=> SystemPageData.throttle_policy_choices;
selected => {
SystemPageData.set_throttle_policy_on_battery(SystemPageData.throttle_policy_on_battery)
}
}
SystemDropdown {
text: @tr("Throttle Policy on AC");
current_index <=> SystemPageData.throttle_policy_on_ac;
current_value: SystemPageData.throttle_policy_choices[SystemPageData.throttle_policy_on_ac];
model <=> SystemPageData.throttle_policy_choices;
selected => {
SystemPageData.set_throttle_policy_on_ac(SystemPageData.throttle_policy_on_ac)
}
}
}
}
}
}
Button {
x: root.width - self.width - 6px;
y: 6px;
text: "X";
height: 40px;
clicked => {
root.show_throttle_advanced = false;
root.show_fade_cover = false;
}
}
}
}

282
rog-control-center/ui/widgets/colour_picker.slint Normal file
View File

@@ -0,0 +1,282 @@
import { Slider, HorizontalBox, Button, LineEdit } from "std-widgets.slint";
export component ColourSlider inherits VerticalLayout {
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;
/// 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;
property <[color]> base_colours: [
Colors.rgb( 255, 0, 0),
Colors.rgb( 255, 128, 0),
Colors.rgb( 255, 255, 0),
Colors.rgb( 128, 255, 0),
Colors.rgb( 0, 255, 0),
Colors.rgb( 0, 255, 128),
Colors.rgb( 0, 255, 255),
Colors.rgb( 0, 128, 255),
Colors.rgb( 0, 0, 255),
Colors.rgb( 127, 0, 255),
Colors.rgb( 255, 0, 255),
Colors.rgb( 255, 0, 127),
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%)
];
function set_base_colour() {
// base_colour = base_colours[c1.value].mix(base_colours[c1.value+1], _index_rem);
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.colourbox = root.final_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]);
clip: true;
border-radius: 6px;
c1 := Slider {
width: parent.width;
height: parent.height;
minimum: 0;
maximum: 12;
changed => {
set_base_colour();
hex = set_hex_from_colour(final_colour);
}
}
}
Rectangle {
height: 32px;
// 11 colours
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;
border-radius: 6px;
c2 := Slider {
width: parent.width;
height: parent.height;
minimum: 0;
maximum: 11;
changed => {
set_base_colour();
hex = set_hex_from_colour(final_colour);
}
}
}
HorizontalLayout {
LineEdit {
// width: 50%;
text <=> root.hex;
edited => {
base_colour = hex_to_colour(self.text);
root.colourbox = base_colour;
}
}
Rectangle {
width: self.height;
background <=> root.colourbox;
}
}
}
component ColorButton {
callback select<=>i_touch_area.clicked;
in property <brush> color<=> i_container.background;
in property <bool> selected;
height: self.width;
i_container := Rectangle {
border_width: 2px;
}
i_touch_area := TouchArea { }
states [
selected when selected: {
i_container.border_color: Colors.black;
}
]
}
export component ColorPicker {
height: palette.length * 1px / colors_per_row / 1px * color_size;
private property <int> selected_color_index;
in-out property <float> colors_per_row: 13.0;
private property <length> color_size: self.width / colors_per_row;
out property <color> selected_color: palette[selected_color_index];
callback selected(color);
in property <[color]> palette: [
Colors.rgb(51,0,0),
Colors.rgb(51,25,0),
Colors.rgb(51,51,0),
Colors.rgb(25,51,0),
Colors.rgb(0,51,0),
Colors.rgb(0,51,25),
Colors.rgb(0,51,51),
Colors.rgb(0,25,51),
Colors.rgb(0,0,51),
Colors.rgb(25,0,51),
Colors.rgb(51,0,51),
Colors.rgb(51,0,25),
Colors.rgb(0,0,0),
//
Colors.rgb(102,0,0),
Colors.rgb(102,51,0),
Colors.rgb(102,102,0),
Colors.rgb(51,102,0),
Colors.rgb(0,102,0),
Colors.rgb(0,102,51),
Colors.rgb(0,102,102),
Colors.rgb(0,51,102),
Colors.rgb(0,0,102),
Colors.rgb(51,0,102),
Colors.rgb(102,0,102),
Colors.rgb(102,0,51),
Colors.rgb(32,32,32),
//
Colors.rgb(153,0,0),
Colors.rgb(153,76,0),
Colors.rgb(153,153,0),
Colors.rgb(76,153,0),
Colors.rgb(0,153,0),
Colors.rgb(0,153,76),
Colors.rgb(0,153,153),
Colors.rgb(0,76,153),
Colors.rgb(0,0,153),
Colors.rgb(76,0,153),
Colors.rgb(153,0,153),
Colors.rgb(153,0,76),
Colors.rgb(64,64,64),
//
Colors.rgb(204,0,0),
Colors.rgb(204,102,0),
Colors.rgb(204,204,0),
Colors.rgb(102,204,0),
Colors.rgb(0,204,0),
Colors.rgb(0,204,102),
Colors.rgb(0,204,204),
Colors.rgb(0,102,204),
Colors.rgb(0,0,204),
Colors.rgb(102,0,204),
Colors.rgb(204,0,204),
Colors.rgb(204,0,102),
Colors.rgb(96,96,96),
//
Colors.rgb(255,0,0),
Colors.rgb(255,128,0),
Colors.rgb(255,255,0),
Colors.rgb(128,255,0),
Colors.rgb(0,255,0),
Colors.rgb(0,255,128),
Colors.rgb(0,255,255),
Colors.rgb(0,128,255),
Colors.rgb(0,0,255),
Colors.rgb(128,0,255),
Colors.rgb(255,0,255),
Colors.rgb(255,0,128),
Colors.rgb(128,128,128),
//
Colors.rgb(255,51,51),
Colors.rgb(255,153,51),
Colors.rgb(255,255,51),
Colors.rgb(153,255,51),
Colors.rgb(51,255,51),
Colors.rgb(51,255,153),
Colors.rgb(51,255,255),
Colors.rgb(51,153,255),
Colors.rgb(51,51,255),
Colors.rgb(153,51,255),
Colors.rgb(255,51,255),
Colors.rgb(255,51,153),
Colors.rgb(160,160,160),
//
Colors.rgb(255,102,102),
Colors.rgb(255,178,102),
Colors.rgb(255,255,102),
Colors.rgb(178,255,102),
Colors.rgb(102,255,102),
Colors.rgb(102,255,178),
Colors.rgb(102,255,255),
Colors.rgb(102,178,255),
Colors.rgb(102,102,255),
Colors.rgb(178,102,255),
Colors.rgb(255,102,255),
Colors.rgb(255,102,178),
Colors.rgb(192,192,192),
//
Colors.rgb(255,153,153),
Colors.rgb(255,204,153),
Colors.rgb(255,255,153),
Colors.rgb(204,255,153),
Colors.rgb(153,255,153),
Colors.rgb(153,255,204),
Colors.rgb(153,255,255),
Colors.rgb(153,204,255),
Colors.rgb(153,153,255),
Colors.rgb(204,153,255),
Colors.rgb(255,153,255),
Colors.rgb(255,153,204),
Colors.rgb(224,224,224),
//
Colors.rgb(255,204,204),
Colors.rgb(255,229,204),
Colors.rgb(255,255,204),
Colors.rgb(229,255,204),
Colors.rgb(204,255,204),
Colors.rgb(204,255,229),
Colors.rgb(204,255,255),
Colors.rgb(204,229,255),
Colors.rgb(204,204,255),
Colors.rgb(229,204,255),
Colors.rgb(255,204,255),
Colors.rgb(255,204,229),
Colors.rgb(224,224,224),
];
Rectangle {
border_width: 1px;
border_color: Colors.black;
for color[index] in palette: ColorButton {
x: color_size * mod(index, colors_per_row);
y: color_size * floor(index / colors_per_row);
width: color_size;
color: color;
selected: index == selected_color_index;
select => {
selected_color_index = index;
// debug(Math.mod(selected_color_index, colors_per_row)); // X pos
// debug(Math.floor(selected_color_index / colors_per_row)); // Y pos
return selected(Math.mod(selected_color_index, colors_per_row) == colors_per_row - 1 ? Colors.rgb(255 / (palette.length / colors_per_row - 1) * Math.floor(selected_color_index / colors_per_row),0,0) : selected_color);
}
}
}
}

44
rog-control-center/ui/widgets/sidebar.slint
View File

@@ -8,10 +8,10 @@ component SideBarItem inherits Rectangle {
in property <bool> has-focus;
in-out property <string> text<=> label.text;
callback clicked<=>touch.clicked;
min-height: l.preferred-height;
min-height: self.visible ? l.preferred-height : 0px;
states [
pressed when touch.pressed: {
state.opacity: 0.8;
state.opacity: 0.8;
}
hover when touch.has-hover: {
state.opacity: 0.6;
@@ -22,14 +22,14 @@ component SideBarItem inherits Rectangle {
focused when root.has-focus: {
state.opacity: 0.8;
}
]
state := Rectangle {
]state := Rectangle {
opacity: 0;
border-width: 2px;
border-radius: 10px;
border-color: StyleMetrics.default-text-color;
background: StyleMetrics.window-background;
animate opacity{ duration: 150ms;
}
animate opacity { duration: 150ms; }
animate border-width { duration: 150ms; }
}
l := HorizontalLayout {
@@ -50,6 +50,7 @@ component SideBarItem inherits Rectangle {
export component SideBar inherits Rectangle {
in property <[string]> model: [];
in property <[bool]> available: [];
in property <string> title<=> label.text;
out property <int> current-item: 0;
out property <int> current-focused: fs.has-focus ? fs.focused-tab : -1;
@@ -65,22 +66,22 @@ export component SideBar inherits Rectangle {
key-pressed(event) => {
if (event.text == "\n") {
root.current-item = root.current-focused;
return accept;
return accept;
}
if (event.text == Key.UpArrow) {
self.focused-tab = Math.max(self.focused-tab - 1, 0);
return accept;
return accept;
}
if (event.text == Key.DownArrow) {
self.focused-tab = Math.min(self.focused-tab + 1, root.model.length - 1);
return accept;
return accept;
}
return reject;
}
key-released(event) => {
if (event.text == " ") {
root.current-item = root.current-focused;
return accept;
return accept;
}
return reject;
}
@@ -92,8 +93,7 @@ export component SideBar inherits Rectangle {
}
VerticalLayout {
padding-top: StyleMetrics.layout-padding;
padding-bottom: StyleMetrics.layout-padding;
padding: StyleMetrics.layout-padding;
spacing: StyleMetrics.layout-spacing;
alignment: start;
label := Text {
@@ -102,15 +102,17 @@ export component SideBar inherits Rectangle {
}
navigation := VerticalLayout {
spacing: 10px;
alignment: start;
vertical-stretch: 0;
for item [index] in root.model: SideBarItem {
clicked => {
root.current-item = index;
}
has-focus: index == root.current-focused;
text: item;
selected: index == root.current-item;
for item[index] in root.model: SideBarItem {
visible: root.available[index];
clicked => {
root.current-item = index;
}
has-focus: index == root.current-focused;
text: item;
selected: index == root.current-item;
}
}