Files
asusctl/rog-control-center/ui/pages/aura.slint

402 lines
17 KiB
Plaintext

import {
SystemDropdown,
RogItem,
SystemToggle,
SystemToggleVert,
} from "../widgets/common.slint";
import { Button, ComboBox, VerticalBox, GroupBox } from "std-widgets.slint";
import { RogPalette } from "../themes/rog_theme.slint";
import {
StyleMetrics,
Slider,
HorizontalBox,
TextEdit,
SpinBox,
LineEdit,
ScrollView,
} from "std-widgets.slint";
import { ColourSlider } from "../widgets/colour_picker.slint";
import {
AuraPageData,
AuraDevType,
PowerZones,
LaptopAuraPower,
AuraEffect,
} from "../types/aura_types.slint";
import { AuraPowerGroup, AuraPowerGroupOld } from "../widgets/aura_power.slint";
export component PageAura inherits Rectangle {
property <bool> show_fade_cover: false;
property <bool> show_aura_power: false;
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();
}
ScrollView {
VerticalLayout {
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.cb_brightness(AuraPageData.brightness)
}
}
SystemDropdown {
width: root.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.apply_effect({
mode: AuraPageData.supported_basic_modes[self.current-index],
zone: AuraPageData.led_mode_data.zone,
colour1: AuraPageData.led_mode_data.colour1,
colour2: AuraPageData.led_mode_data.colour2,
speed: AuraPageData.led_mode_data.speed,
direction: AuraPageData.led_mode_data.direction,
});
}
}
}
RogItem {
min-height: 220px;
max-height: 400px;
HorizontalLayout {
padding-top: 5px;
spacing: 10px;
VerticalBox {
Text {
text: @tr("Colour 1");
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
}
HorizontalBox {
c1 := ColourSlider {
enabled: AuraPageData.colour1_enabled;
final_colour <=> AuraPageData.color1;
colourbox <=> AuraPageData.colorbox1;
set_hex_from_colour(c) => {
return AuraPageData.cb_hex_from_colour(c);
}
hex_to_colour(s) => {
return AuraPageData.cb_hex_to_colour(s);
}
released => {
AuraPageData.apply_effect({
mode: AuraPageData.led_mode_data.mode,
zone: AuraPageData.led_mode_data.zone,
colour1: AuraPageData.color1,
colour2: AuraPageData.led_mode_data.colour2,
speed: AuraPageData.led_mode_data.speed,
direction: AuraPageData.led_mode_data.direction,
});
}
}
}
}
VerticalBox {
Text {
text: @tr("Colour 2");
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
}
HorizontalBox {
c2 := ColourSlider {
enabled: AuraPageData.colour2_enabled;
final_colour <=> AuraPageData.color2;
colourbox <=> AuraPageData.colorbox2;
set_hex_from_colour(c) => {
return AuraPageData.cb_hex_from_colour(c);
}
hex_to_colour(s) => {
return AuraPageData.cb_hex_to_colour(s);
}
released => {
AuraPageData.apply_effect({
mode: AuraPageData.led_mode_data.mode,
zone: AuraPageData.led_mode_data.zone,
colour1: AuraPageData.led_mode_data.colour1,
colour2: AuraPageData.color2,
speed: AuraPageData.led_mode_data.speed,
direction: AuraPageData.led_mode_data.direction,
});
}
}
}
}
}
}
HorizontalLayout {
spacing: 10px;
min-height: 80px;
max-height: 90px;
RogItem {
VerticalBox {
Text {
text: @tr("Zone");
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
}
ComboBox {
enabled: false;
current_index <=> AuraPageData.zone;
current_value: AuraPageData.zone_names[self.current-index];
model <=> AuraPageData.zone_names;
selected => {
AuraPageData.apply_effect({
mode: AuraPageData.led_mode_data.mode,
zone: self.current-index,
colour1: AuraPageData.led_mode_data.colour1,
colour2: AuraPageData.led_mode_data.colour2,
speed: AuraPageData.led_mode_data.speed,
direction: AuraPageData.led_mode_data.direction,
});
}
}
}
}
RogItem {
VerticalBox {
Text {
text: @tr("Direction");
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
}
ComboBox {
enabled: AuraPageData.direction_enabled;
current_index <=> AuraPageData.direction;
current_value: AuraPageData.direction_names[self.current-index];
model <=> AuraPageData.direction_names;
selected => {
AuraPageData.apply_effect({
mode: AuraPageData.led_mode_data.mode,
zone: AuraPageData.led_mode_data.zone,
colour1: AuraPageData.led_mode_data.colour1,
colour2: AuraPageData.led_mode_data.colour2,
speed: AuraPageData.led_mode_data.speed,
direction: self.current-index,
});
}
}
}
}
RogItem {
VerticalBox {
Text {
text: @tr("Speed");
vertical-alignment: TextVerticalAlignment.center;
horizontal-alignment: TextHorizontalAlignment.center;
}
ComboBox {
enabled: AuraPageData.speed_enabled;
current_index <=> AuraPageData.speed;
current_value: AuraPageData.speed_names[self.current-index];
model <=> AuraPageData.speed_names;
selected => {
AuraPageData.apply_effect({
mode: AuraPageData.led_mode_data.mode,
zone: AuraPageData.led_mode_data.zone,
colour1: AuraPageData.led_mode_data.colour1,
colour2: AuraPageData.led_mode_data.colour2,
speed: self.current-index,
direction: AuraPageData.led_mode_data.direction,
});
}
}
}
}
}
// Software Animation Controls (for Static-only keyboards)
if AuraPageData.soft_animation_available: RogItem {
min-height: 100px;
VerticalLayout {
padding: 10px;
spacing: 8px;
Text {
text: @tr("Software Animation (Static-only keyboards)");
font-size: 14px;
font-weight: 600;
color: RogPalette.accent;
}
HorizontalLayout {
spacing: 20px;
VerticalLayout {
Text {
text: @tr("Animation Mode");
color: RogPalette.text-secondary;
}
ComboBox {
current_index <=> AuraPageData.soft_animation_mode;
current_value: AuraPageData.soft_animation_modes[self.current-index];
model <=> AuraPageData.soft_animation_modes;
selected => {
AuraPageData.cb_soft_animation_mode(AuraPageData.soft_animation_mode);
}
}
}
}
}
}
HorizontalLayout {
Button {
text: @tr("Power Settings");
clicked => {
root.show_fade_cover = true;
root.show_aura_power = true;
}
}
}
}
if root.show_fade_cover: Rectangle {
background: RogPalette.background;
opacity: 0.8;
TouchArea {
height: 100%;
width: 100%;
clicked => {
root.show_fade_cover = false;
root.show_aura_power = false;
}
}
}
}
if root.show_aura_power && AuraPageData.device_type == AuraDevType.New: Rectangle {
background: RogPalette.background;
width: 100%;
height: 100%;
opacity: 1;
ScrollView {
VerticalLayout {
padding: 30px;
padding-top: 10px;
spacing: 10px;
alignment: LayoutAlignment.start;
for state[idx] in AuraPageData.led_power.states: zone := AuraPowerGroup {
group-title: AuraPageData.power_zone_names[state.zone_name_idx];
// TODO: use the zone name
boot_checked: state.boot;
boot_toggled => {
AuraPageData.led_power.states[idx].boot = zone.boot_checked;
AuraPageData.cb_led_power(AuraPageData.led_power);
}
awake_checked: state.awake;
awake_toggled => {
AuraPageData.led_power.states[idx].awake = zone.awake_checked;
AuraPageData.cb_led_power(AuraPageData.led_power);
}
sleep_checked: state.sleep;
sleep_toggled => {
AuraPageData.led_power.states[idx].sleep = zone.sleep_checked;
AuraPageData.cb_led_power(AuraPageData.led_power);
}
shutdown_checked: state.shutdown;
shutdown_toggled => {
AuraPageData.led_power.states[idx].shutdown = zone.shutdown_checked;
AuraPageData.cb_led_power(AuraPageData.led_power);
}
}
}
Button {
x: root.width - self.width - 6px;
y: 6px;
text: "✕";
height: 36px;
clicked => {
root.show_aura_power = false;
root.show_fade_cover = false;
}
}
}
}
if root.show_aura_power && AuraPageData.device_type == AuraDevType.Old: Rectangle {
background: RogPalette.background;
width: 100%;
height: 100%;
opacity: 1;
ScrollView {
VerticalLayout {
padding: 30px;
padding-top: 10px;
spacing: 10px;
alignment: LayoutAlignment.start;
Text {
text: "LED Power Zones (Legacy)";
font-size: 16px;
font-weight: 600;
color: #ff0033;
}
for state[idx] in AuraPageData.led_power.states: old_zone := AuraPowerGroupOld {
group-title: @tr("Power Zones");
zone_strings <=> AuraPageData.power_zone_names_old;
selected_zone => {
AuraPageData.led_power.states[idx].zone = AuraPageData.supported_power_zones[old_zone.current_zone];
AuraPageData.cb_led_power(AuraPageData.led_power);
}
boot_checked: state.boot;
boot_toggled => {
AuraPageData.led_power.states[idx].boot = old_zone.boot_checked;
AuraPageData.cb_led_power(AuraPageData.led_power);
}
awake_checked: state.awake;
awake_toggled => {
AuraPageData.led_power.states[idx].awake = old_zone.awake_checked;
AuraPageData.cb_led_power(AuraPageData.led_power);
}
sleep_checked: state.sleep;
sleep_toggled => {
AuraPageData.led_power.states[idx].sleep = old_zone.sleep_checked;
AuraPageData.cb_led_power(AuraPageData.led_power);
}
}
}
Button {
x: root.width - self.width - 6px;
y: 6px;
text: "✕";
height: 36px;
clicked => {
root.show_aura_power = false;
root.show_fade_cover = false;
}
}
}
}
}