From 5fd107df27764a7f23caf7092b8b2d472c416632 Mon Sep 17 00:00:00 2001 From: "Luke D. Jones" Date: Tue, 12 Mar 2024 21:33:39 +1300 Subject: [PATCH] Initial fan graph widget --- rog-control-center/ui/main_window.slint | 7 +- rog-control-center/ui/pages/fans.slint | 56 +++++++++--- rog-control-center/ui/widgets/graph.slint | 105 ++++++++++++++++++++++ 3 files changed, 154 insertions(+), 14 deletions(-) create mode 100644 rog-control-center/ui/widgets/graph.slint diff --git a/rog-control-center/ui/main_window.slint b/rog-control-center/ui/main_window.slint index ca979456..125dbb66 100644 --- a/rog-control-center/ui/main_window.slint +++ b/rog-control-center/ui/main_window.slint @@ -3,7 +3,8 @@ import { AppSize } from "globals.slint"; import { PageSystem, AvailableSystemProperties, SystemPageData } from "pages/system.slint"; import { SideBar } from "widgets/sidebar.slint"; import { PageAbout } from "pages/about.slint"; -import { PageFans } from "pages/fans.slint"; +import { PageFans, Node } from "pages/fans.slint"; +export { Node } import { PageAnime, AnimePageData } from "pages/anime.slint"; import { PageAura } from "pages/aura.slint"; import { AuraPageData, AuraDevType, AuraDevTuf, AuraDevRog1, PowerZones, KbAuraPowerState, AuraPowerDev, AuraEffect } from "types/aura_types.slint"; @@ -35,6 +36,7 @@ export component MainWindow inherits Window { aura.external_colour_change(); aura.external_colour_change(); } + pure callback verify_fan_curves([Node], length, length) -> [Node]; min-height: AppSize.height; min-width: AppSize.width; background: Colors.black; @@ -88,8 +90,9 @@ export component MainWindow inherits Window { width: root.width - side-bar.width; } - if(side-bar.current-item == 3): PageFans { + fans := PageFans { width: root.width - side-bar.width; + visible: side-bar.current-item == 3; } if(side-bar.current-item == 4): PageAppSettings { diff --git a/rog-control-center/ui/pages/fans.slint b/rog-control-center/ui/pages/fans.slint index 361a7ab0..887a5b83 100644 --- a/rog-control-center/ui/pages/fans.slint +++ b/rog-control-center/ui/pages/fans.slint @@ -1,16 +1,48 @@ +import { Palette } from "std-widgets.slint"; +import { Graph } from "../widgets/graph.slint"; + +export struct Node { x: length, y: length} + export component PageFans 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; - Text { - text: "TODO"; - } + in-out property <[Node]> nodes: [ + { + x: 10px, + y: 10px, + }, + { + x: 40px, + y: 30px, + }, + { + x: 70px, + y: 50px, + }, + { + x: 100px, + y: 70px, + }, + { + x: 130px, + y: 90px, + }, + { + x: 160px, + y: 110px, + }, + { + x: 190px, + y: 130px, + }, + { + x: 220px, + y: 150px, + }, + ]; + HorizontalLayout { + Graph { + // width: root.preferred-width; + // height: root.preferred-height; + nodes <=> root.nodes; } } } diff --git a/rog-control-center/ui/widgets/graph.slint b/rog-control-center/ui/widgets/graph.slint new file mode 100644 index 00000000..c9184cbf --- /dev/null +++ b/rog-control-center/ui/widgets/graph.slint @@ -0,0 +1,105 @@ +import { Palette } from "std-widgets.slint"; + +export struct Node { x: length, y: length} + +export component Graph inherits Rectangle { + Text { + text: "WORK IN PROGRESS"; + } + + preferred-height: 100%; + preferred-width: 100%; + pure callback verify_positions([Node], length, length) -> [Node]; + in-out property <[Node]> nodes; + + for l[idx] in nodes: path := Rectangle { + if idx + 1 != nodes.length: Path { + viewbox-width: self.width / 1px; + viewbox-height: self.height / 1px; + stroke: Palette.control-foreground; + stroke-width: 2px; + MoveTo { + x: nodes[idx].x / 1px; + y: root.height / 1px - nodes[idx].y / 1px; + } + + LineTo { + x: nodes[idx + 1].x / 1px; + y: root.height / 1px - nodes[idx + 1].y / 1px; + } + } + } + + for n[idx] in nodes: Rectangle { + states [ + pressed when touch.pressed: { + state.background: Palette.selection-background; + } + hover when touch.has-hover: { + state.background: Palette.accent-background; + } + ]state := Rectangle { + background: Palette.control-foreground; + x: n.x - self.width / 2; + y: root.height - n.y - self.height / 2; + width: 18px; + height: self.width; + border-radius: self.width / 2; + property pad: self.border-radius / 2; + + touch := TouchArea { + function check() { + if idx + 1 < nodes.length && idx > 0 { + if n.x + self.mouse-x - self.pressed-x > nodes[idx + 1].x { + n.x = nodes[idx + 1].x - pad; + } else if n.x + self.mouse-x - self.pressed-x < nodes[idx - 1].x { + n.x = nodes[idx - 1].x + pad; + } + + if n.y + self.height / 2 - self.mouse-y - self.pressed-y > nodes[idx + 1].y { + n.y = nodes[idx + 1].y - pad; + } else if n.y - self.mouse-y - self.pressed-y < nodes[idx - 1].y { + n.y = nodes[idx - 1].y + pad; + } + } else if idx == 0 { + if n.x + self.mouse-x - self.pressed-x < 0.0 { + n.x = 1px; + } else if n.x + self.mouse-x - self.pressed-x > nodes[idx + 1].x { + n.x = nodes[idx + 1].x - pad; + } + + if n.y + self.height / 2 - self.mouse-y - self.pressed-y < 0.0 { + n.y = 1px; + } else if n.y + self.height / 2 - self.mouse-y - self.pressed-y > nodes[idx + 1].y { + n.y = nodes[idx + 1].y - pad; + } + } else if idx == nodes.length - 1 { + if n.x + self.mouse-x - self.pressed-x > root.width { + n.x = root.width - 1px; + } else if n.x + self.mouse-x - self.pressed-x < nodes[idx - 1].x { + n.x = nodes[idx - 1].x + pad; + } + + if n.y + self.height / 2 - self.mouse-y - self.pressed-y > root.height { + n.y = root.height - 1px; + } else if n.y + self.height / 2 - self.mouse-y - self.pressed-y < nodes[idx - 1].y { + n.y = nodes[idx - 1].y + pad; + } + } + }moved => { + if (self.pressed) { + n.x += self.mouse-x - self.pressed-x; + n.y -= self.mouse-y - self.pressed-y; + self.check(); + // nodes[idx] = n; + } + } + + clicked => { + self.check(); + } + mouse-cursor: move; + } + } + } +}