improve the 7guis timer example

slint-ui · May 12, 2022 · e35bbd3 · e35bbd3
1 parent 877934f
commit e35bbd3
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/examples/7guis/Cargo.toml b/examples/7guis/Cargo.toml
@@ -21,6 +21,10 @@ name = "circledraw"
 path = "crud.rs"
 name = "crud"
 
+[[bin]]
+path = "timer.rs"
+name = "timer"
+
 [dependencies]
 slint = { path = "../../api/rs/slint" }
 chrono = { version = "0.4", default-features = false, features = ["clock", "std"]}
diff --git a/examples/7guis/timer.rs b/examples/7guis/timer.rs
@@ -0,0 +1,18 @@
+// Copyright © SixtyFPS GmbH <info@slint-ui.com>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
+use slint::{Timer, TimerMode};
+
+slint::slint!(import { MainWindow } from "timer.slint";);
+
+pub fn main() {
+    let main_window = MainWindow::new();
+    let timer = Timer::default();
+    {
+        let main_window_weak = main_window.as_weak();
+        timer.start(TimerMode::Repeated, std::time::Duration::from_millis(10), move || {
+            let main_window = main_window_weak.unwrap();
+            main_window.invoke_tick(10);
+        });
+    }
+    main_window.run();
+}
diff --git a/examples/7guis/timer.slint b/examples/7guis/timer.slint
@@ -3,19 +3,26 @@
 
 import { LineEdit, Button, Slider, HorizontalBox, VerticalBox } from "std-widgets.slint";
 
-Timer := Window {
+MainWindow := Window {
     property <duration> total-time: slider.value * 1s;
-    property <float> progress: 0.5;
-    animate progress { duration: total-time; }
+    property <duration> elapsed-time;
+
+    callback tick(duration);
+    tick(passed-time) => {
+        elapsed-time += passed-time;
+        elapsed-time = min(elapsed-time, total-time);
+    }
+
     VerticalBox {
         HorizontalBox {
             Text { text: "Elapsed Time:"; }
             Rectangle {
+                min-width: 200px;
                 max-height: 30px;
                 background: gray;
                 Rectangle {
                     height: 100%;
-                    width: parent.width * progress;
+                    width: parent.width * (elapsed-time/total-time);
                     background: lightblue;
                 }
             }
@@ -28,16 +35,16 @@ Timer := Window {
             slider := Slider {
                 maximum: 30s / 1s;
                 value: 10s / 1s;
+                changed(new-duration) => {
+                    root.total-time = new-duration * 1s;
+                    root.elapsed-time = min(root.elapsed-time, root.total-time);
+                }
             }
         }
         Button {
             text: "Reset";
             clicked => {
-                if (progress > 0.5) {
-                    progress = 0;
-                } else {
-                    progress = 1;
-                }
+                elapsed-time = 0
             }
         }
     }