Build wasm version of Speedometer example (#9754)

* Build wasm version of Speedometer example

* Tweak demo

Author: NigelBreslaw

.github/workflows/nightly_snapshot.yaml

@@ -388,7 +388,7 @@ jobs:
                 rm -rf $output_path/demos
                 mkdir -p $output_path/demos
 
-                for demo_subdir in examples,gallery, demos,printerdemo,rust examples,todo,rust examples,todo-mvc,rust examples,slide_puzzle, examples,memory, examples,imagefilter,rust examples,plotter, examples,opengl_underlay, examples,carousel,rust demos,energy-monitor, demos,weather-demo, demos,home-automation,rust demos,usecases,rust; do
+                for demo_subdir in examples,gallery, demos,printerdemo,rust examples,todo,rust examples,todo-mvc,rust examples,slide_puzzle, examples,speedometer,rust examples,memory, examples,imagefilter,rust examples,plotter, examples,opengl_underlay, examples,carousel,rust demos,energy-monitor, demos,weather-demo, demos,home-automation,rust demos,usecases,rust; do
                   IFS=',' read example_or_demo demo subdir <<< "${demo_subdir}"
 
                   mkdir -p $output_path/demos/$demo

.github/workflows/wasm_demos.yaml

@@ -76,6 +76,7 @@ jobs:
                       examples/carousel/rust/
                       examples/memory/
                       examples/slide_puzzle/
+                      examples/speedometer/rust/
                       examples/imagefilter/rust
                       examples/plotter/
                       examples/opengl_underlay/

Cargo.toml

@@ -25,6 +25,7 @@ members = [
   'demos/printerdemo/rust',
   'demos/printerdemo_mcu',
   'examples/slide_puzzle',
+  'examples/speedometer/rust',
   'examples/todo/rust',
   'examples/todo-mvc/rust',
   'examples/virtual_keyboard/rust',
@@ -82,6 +83,7 @@ default-members = [
   'examples/memory',
   'demos/printerdemo/rust',
   'examples/slide_puzzle',
+  'examples/speedometer/rust',
   'examples/todo/rust',
   'examples/virtual_keyboard/rust',
   'examples/carousel/rust',

examples/speedometer/README.md

@@ -5,5 +5,5 @@
 
 Demonstrate how to create a speedometer with Slint using conic gradients, scale and rotation.
 
-[Online Preview](https://slint.dev/snapshots/master/editor/preview.html?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/speedometer/demo.slint)
+| [Online simulation](https://slint.dev/snapshots/master/demos/speedometer/) |
 [Online code editor](https://slint.dev/snapshots/master/editor/index.html?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/speedometer/demo.slint)

examples/speedometer/demo.slint

@@ -10,22 +10,35 @@ component MiniDot {
     Rectangle {
         y: 160px;
         x: -(self.width / 2);
-        width: 4px;
+        width: 3px;
         height: 6px;
         background: #47505b;
         border-radius: self.width / 2;
     }
 }
 
+component MediumDot {
+    width: 0;
+    height: 0;
+    Rectangle {
+        y: 158px;
+        x: -(self.width / 2);
+        width: 4px;
+        height: 10px;
+        background: #505b63;
+        border-radius: self.width / 2;
+    }
+}
+
 component BigDot {
     width: 0;
     height: 0;
     Rectangle {
-        y: 159px;
+        y: 154px;
         x: -(self.width / 2);
         width: 5px;
-        height: 10px;
-        background: #a5adb3;
+        height: 14px;
+        background: #b2c7d8;
         border-radius: self.width / 2;
     }
 }
@@ -34,7 +47,7 @@ component KPHText {
     width: 0;
     height: 0;
     Text {
-        y: 127px;
+        y: 122px;
         width: 36px;
         color: white;
         text: (root.transform-rotation / 1deg).floor();
@@ -49,6 +62,11 @@ component KPHText {
 export component MainWindow inherits Window {
     property <color> background-color: #020414;
     property <int> speed: 0;
+    property <int> max-speed: 260;
+    property <int> total-mini-dots: max-speed / 2;
+    property <int> total-medium-dots: total-mini-dots / 10;
+    property <int> total-big-dots: total-mini-dots / 10;
+    property <int> kph-indicators: total-mini-dots / 10;
 
     width: 500px;
     height: 500px;
@@ -80,21 +98,15 @@ export component MainWindow inherits Window {
             height: 0px;
             transform-rotation: 50deg;
 
-            property <int> max-speed: 260;
-            property <int> total-mini-dots: max-speed / 2;
-            property <int> total-big-dots: total-mini-dots / 5;
-            property <int> kph-indicators: total-big-dots / 2;
-
             for i in total-mini-dots: MiniDot {
                 transform-rotation: 260deg * (i / total-mini-dots);
             }
+            for i in total-medium-dots: MediumDot {
+                transform-rotation: 260deg * (i / total-medium-dots) + 10deg;
+            }
             for i in total-big-dots + 1: BigDot {
                 transform-rotation: 260deg * (i / total-big-dots);
             }
-
-            for i in kph-indicators + 1: KPHText {
-                transform-rotation: 260deg * (i / kph-indicators);
-            }
         }
 
         holder := Rectangle {
@@ -139,6 +151,12 @@ export component MainWindow inherits Window {
             }
         }
     }
+    Rectangle {
+        transform-rotation: 50deg;
+        for i in kph-indicators + 1: KPHText {
+            transform-rotation: 260deg * (i / kph-indicators);
+        }
+    }
 
     control-buttons := HorizontalBox {
         spacing: 10px;

examples/speedometer/rust/Cargo.toml

@@ -0,0 +1,31 @@
+# Copyright © SixtyFPS GmbH <[email protected]>
+# SPDX-License-Identifier: MIT
+
+[package]
+name = "speedometer"
+version = "1.14.0"
+authors = ["Slint Developers <[email protected]>"]
+edition = "2021"
+publish = false
+license = "MIT"
+
+[[bin]]
+path = "main.rs"
+name = "speedometer"
+
+[lib]
+crate-type = ["lib", "cdylib"]
+path = "lib.rs"
+name = "speedometer_lib"
+
+[dependencies]
+slint = { path = "../../../api/rs/slint" }
+chrono = "0.4"
+
+[features]
+sw-renderer = []
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+wasm-bindgen = { version = "0.2" }
+web-sys = { version = "0.3", features = ["console"] }
+console_error_panic_hook = "0.1.5"

examples/speedometer/rust/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- Copyright © SixtyFPS GmbH <[email protected]> -->
+<!-- SPDX-License-Identifier: MIT -->
+<html>
+    <head>
+        <style>
+            #loading {
+                margin-top: 20px;
+                text-align: center;
+            }
+            .overlay {
+                position: absolute;
+                display: flex;
+                top: 0;
+                width: 100%;
+            }
+            canvas {
+                top: 0;
+                padding-left: 0;
+                padding-right: 0;
+                margin-left: auto;
+                margin-right: auto;
+                margin-top: 20px;
+                display: block;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="loading">Loading...</div>
+        <div class="overlay">
+            <!-- canvas required by the Slint runtime -->
+            <canvas id="canvas" data-slint-auto-resize-to-preferred="true" unselectable="on"></canvas>
+            <script type="module">
+                // import the generated file.
+                import init from "./pkg/speedometer_lib.js";
+                init();
+            </script>
+        </div>
+    </body>
+</html>

examples/speedometer/rust/lib.rs

@@ -0,0 +1,27 @@
+// Copyright © SixtyFPS GmbH <[email protected]>
+// SPDX-License-Identifier: MIT
+
+#[cfg(target_arch = "wasm32")]
+use wasm_bindgen::prelude::*;
+
+#[cfg(feature = "sw-renderer")]
+slint::slint! {
+    export { MainWindow } from "../demo.slint";
+}
+
+#[cfg(not(feature = "sw-renderer"))]
+slint::slint! {
+    export { MainWindow } from "../demo.slint";
+}
+
+#[cfg_attr(target_arch = "wasm32", wasm_bindgen(start))]
+pub fn main() {
+    // This provides better error messages in debug mode.
+    // It's disabled in release mode so it doesn't bloat up the file size.
+    #[cfg(all(debug_assertions, target_arch = "wasm32"))]
+    console_error_panic_hook::set_once();
+
+    let app = MainWindow::new().expect("MainWindow::new() failed");
+
+    app.run().expect("MainWindow::run() failed");
+}

examples/speedometer/rust/main.rs

@@ -0,0 +1,6 @@
+// Copyright © SixtyFPS GmbH <[email protected]>
+// SPDX-License-Identifier: MIT
+
+fn main() {
+    speedometer_lib::main();
+}