Initial fan graph widget

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 {

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 {
+    in-out property <[Node]> nodes: [
-        clip: true;
+        {
-        // TODO: slow with border-radius
+            x: 10px,
-        padding: 8px;
+            y: 10px,
-        // height: parent.height - infobar.height - mainview.padding - self.padding * 2;
+        },
-        // TODO: border-radius: 8px;
+        {
-        mainview := VerticalLayout {
+            x: 40px,
-            padding: 10px;
+            y: 30px,
-            spacing: 10px;
+        },
-            Text {
+        {
-                text: "TODO";
+            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;
         }
     }
 }

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 <length> 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;
+            }
+        }
+    }
+}