Add mcu support to the carousel example (#1744)

The carousel example can be now also run on the supported mcu devices

.github/workflows/build_docs.yaml

@@ -110,7 +110,7 @@ jobs:
       with:
           command: doc
           toolchain: nightly
-          args: --workspace --no-deps --all-features --exclude slint-node --exclude mcu-board-support --exclude printerdemo_mcu --exclude test-* --exclude plotter
+          args: --workspace --no-deps --all-features --exclude slint-node --exclude mcu-board-support --exclude printerdemo_mcu --exclude carousel --exclude test-* --exclude plotter
     - name: Clean cache # Don't cache docs to avoid them including removed classes being published
       run: |
           rm -rf target/doc target/cppdocs api/node/docs docs/tutorial/rust/book docs/tutorial/cpp/book

.github/workflows/ci.yaml

@@ -57,12 +57,12 @@ jobs:
       uses: actions-rs/cargo@v1
       with:
           command: build
-          args: --verbose --all-features --workspace ${{ matrix.extra_args }} --exclude test-driver-cpp --exclude mcu-board-support --exclude printerdemo_mcu  # mcu backend requires nightly
+          args: --verbose --all-features --workspace ${{ matrix.extra_args }} --exclude test-driver-cpp --exclude mcu-board-support --exclude printerdemo_mcu --exclude carousel  # mcu backend requires nightly
     - name: Run tests
       uses: actions-rs/cargo@v1
       with:
           command: test
-          args: --verbose --all-features --workspace ${{ matrix.extra_args }} --exclude test-driver-cpp --exclude mcu-board-support --exclude printerdemo_mcu   # mcu backend requires nightly
+          args: --verbose --all-features --workspace ${{ matrix.extra_args }} --exclude test-driver-cpp --exclude mcu-board-support --exclude printerdemo_mcu --exclude carousel   # mcu backend requires nightly
 
   cpp_test_driver:
     env:

.gitignore

@@ -7,4 +7,5 @@ tools/figma_import/figma_output
 *.code-workspace
 /build
 /_deps
-package-lock.json
+package-lock.json
+.DS_Store

examples/README.md

@@ -36,11 +36,13 @@ A simple todo mvc application
 
 A custom carousel widget that can be controlled by touch, mouse and keyboard
 
+The example can be run on desktop, wasm and mcu platforms
+
 | `.slint` Design | Rust Source | C++ Source | Node Source | Online wasm Preview | Open in code editor |
 | --- | --- | --- | --- | --- | --- |
 | [`ui.slint`](./carousel/ui/carousel_demo.slint) | [`main.rs`](./carousel/rust/main.rs) | [`main.cpp`](./carousel/cpp/main.cpp) | [`main.js`](./carousel/node/main.js) | [Online simulation](https://slint-ui.com/snapshots/master/demos/carousel/) | [Preview in Online Code Editor](https://slint-ui.com/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/carousel/ui/carousel_demo.slint) |
 
-![Screenshot of the Carousel Demo](https://user-images.githubusercontent.com/6715107/196391434-a8e9db64-a14c-4a9c-b08c-5a9fc74e4e3d.png "Carousel Demo")
+![Screenshot of the Carousel Demo](https://user-images.githubusercontent.com/6715107/196679740-840a4b67-afaa-4d47-9a31-bfe643c7de48.png "Carousel Demo")
 
 ### [`slide_puzzle`](./slide_puzzle)
 

examples/carousel/README.md

@@ -0,0 +1,5 @@
+See the [MCU backend Readme](../mcu-board-support) to see how to run the example on a smaller device like the Raspberry Pi Pico.
+
+The example can run with the mcu simulator with the following command
+
+```cargo run -p carousel --no-default-features --features=simulator --release```

examples/carousel/rust/Cargo.toml

@@ -15,11 +15,18 @@ path = "main.rs"
 name = "carousel"
 
 [dependencies]
-slint = { path = "../../../api/rs/slint" }
+slint = { path = "../../../api/rs/slint", default-features = false }
+mcu-board-support = { path = "../../mcu-board-support", optional = true }
 
 [build-dependencies]
 slint-build = { path = "../../../api/rs/build" }
 
+[features]
+default = ["slint/default"]
+mcu = ["mcu-board-support", "slint/compat-0-3-0"]
+simulator = ["mcu", "slint/renderer-winit-software", "slint/backend-winit", "slint/std"]
+
+
 # Remove the `#wasm#` to uncomment the wasm build.
 # This is commented out by default because we don't want to build it as a library by default
 # The CI has a script that does sed "s/#wasm# //" to generate the wasm build.

examples/carousel/rust/build.rs

@@ -1,6 +1,15 @@
 // Copyright © SixtyFPS GmbH <info@slint-ui.com>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
 
+#[cfg(not(feature = "mcu"))]
 fn main() {
     slint_build::compile("../ui/carousel_demo.slint").unwrap();
 }
+
+#[cfg(feature = "mcu")]
+fn main() {
+    let config = slint_build::CompilerConfiguration::new()
+        .embed_resources(slint_build::EmbedResourcesKind::EmbedForSoftwareRenderer);
+    slint_build::compile_with_config("../ui/carousel_demo.slint", config).unwrap();
+    slint_build::print_rustc_flags().unwrap();
+}

examples/carousel/rust/main.rs

@@ -1,11 +1,18 @@
 // Copyright © SixtyFPS GmbH <info@slint-ui.com>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
 
+#![cfg_attr(feature = "mcu", no_std)]
+#![cfg_attr(all(feature = "mcu", not(simulator)), no_main)]
+
+#[cfg(feature = "mcu")]
+extern crate alloc;
+
 #[cfg(target_arch = "wasm32")]
 use wasm_bindgen::prelude::*;
 
 slint::include_modules!();
 
+#[cfg(not(feature = "mcu"))]
 #[cfg_attr(target_arch = "wasm32", wasm_bindgen(start))]
 pub fn main() {
     // This provides better error messages in debug mode.
@@ -15,3 +22,12 @@ pub fn main() {
 
     MainWindow::new().run()
 }
+
+#[cfg(feature = "mcu")]
+#[mcu_board_support::entry]
+fn main() -> ! {
+    mcu_board_support::init();
+    MainWindow::new().run();
+
+    panic!("The MCU demo should not quit")
+}

examples/carousel/ui/card.slint

@@ -14,59 +14,67 @@ export Card := Rectangle {
     property <length> title-spacing: Theme.spacing-medium;
     property <length> title-area-height: Theme.size-small;
 
-    background: transparent;
+    border-radius: Theme.radius-regular;
+    background: Theme.background-regular;
     width: Theme.size-medium;
     height: Theme.size-medium;
+    clip: false;
 
-    // background
+    touch-area := TouchArea {}
-    background := Rectangle { 
-        opacity: 0.95;
-        clip: true;
-        border-radius: Theme.radius-regular;
-        background: Theme.background-regular;
-    
-        touch-area := TouchArea {}
-  
-        image := Image {
-            x: (parent.width - width) / 2;
-            y: (parent.height - height) / 2;
-            width: 80%;
-            height: 80%;
-            colorize: Theme.foreground;
 
-            animate colorize { duration: Theme.duration-fast; }
+    image := Image {
-        }
+        x: (parent.width - width) / 2;
+        y: (parent.height - height) / 2;
+        width: 80%;
+        height: 80%;
+        colorize: Theme.foreground;
 
-        states [   
+        animate colorize { duration: Theme.duration-fast; }
-            pressed when touch-area.pressed : {
-                background: Theme.background-pressed;
-                image.colorize: Theme.foreground-hover;
-            }
-            hover when touch-area.has-hover : {
-                background: Theme.background-hover;
-                image.colorize: Theme.foreground-hover;
-            }
-         ]
-
-         animate background { duration: Theme.duration-fast; }
     }
-
+    
     // Selection text
-    titleArea := TitleLabel {
+    title-label := TitleLabel {
-        x: root.spacing + parent.width;
+        x: (parent.width - width) / 2;
-        y: parent.height - self.height;
+        y: parent.height;
         text <=> title;
         visible: false;
+        color: Theme.foreground;
     }
 
     states [
-        selected when is-selected : {
+        pressed-selected when touch-area.pressed && is-selected  : {
+            background: Theme.background-selected-pressed;
+            image.colorize: Theme.foreground-selected-pressed;
             width: Theme.size-big;
             height: Theme.size-big;
-            titleArea.visible: true;
+            title-label.visible: true;
+        }
+        hover-selected when touch-area.has-hover && is-selected  : {
+            background: Theme.background-selected-hover;
+            image.colorize: Theme.foreground-selected-hover;
+            width: Theme.size-big;
+            height: Theme.size-big;
+            title-label.visible: true;
+        }
+        pressed when touch-area.pressed : {
+            background: Theme.background-pressed;
+            image.colorize: Theme.foreground-pressed;
+        }
+
+        hover when touch-area.has-hover: {
+            background: Theme.background-hover;
+            image.colorize: Theme.foreground-hover;
+        }
+        selected when is-selected : {
+            background: Theme.background-selected;
+            image.colorize: Theme.foreground-selected;
+            width: Theme.size-big;
+            height: Theme.size-big;
+            title-label.visible: true;
         }
      ]
 
      animate width { duration: Theme.duration-regular; easing: ease-in; }
      animate height { duration: Theme.duration-regular; easing: ease-in; }
+     animate background { duration: Theme.duration-fast; }
 }

examples/carousel/ui/carousel_demo.slint

@@ -7,22 +7,23 @@ import { Theme } from "theme.slint";
 
 MainWindow := Window {
     property<[{ title: string, image: image}]> navigation-items: [
-       { title: "Home", image: @image-url("icons/home_black_24dp.svg") },
+       { title: "Settings", image: @image-url("svg/settings_black.svg") },
-       { title: "Settings", image: @image-url("icons/settings_black_24dp.svg") },
+       { title: "Home", image: @image-url("svg/home_black.svg") },
-       { title: "About", image: @image-url("icons/info_black_24dp.svg") },
+       { title: "About", image: @image-url("svg/info_black.svg") },
     ];
-    property <int> selected-index: 0;
+    property <int> selected-index: 1;
 
     title: "Carousel example";
-    preferred-width: 600px;
+    width: 320px;
-    preferred-height: 400px;
+    height: 240px;
     background: Theme.window-background;
     padding: Theme.spacing-regular;
     forward-focus: carousel;
+    default-font-family: Theme.font-family;
 
     carousel := Carousel {  
         y: (root.height - height) / 2;
-        // width of a `Card`
+        height: 100%;
         itemWidth: Theme.size-medium;
         count: navigation-items.length;
         selected-index <=> root.selected-index;

examples/carousel/ui/icons/README.md

@@ -1,3 +0,0 @@
-The icons originate from Material-Icons font ( https://github.com/marella/material-design-icons/tree/main/svg ) and licensed under the Apache License Version 2.0 (SVG download)
-
-    https://github.com/marella/material-design-icons/blob/main/svg/LICENSE

examples/carousel/ui/icons/home_black_24dp.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/></svg>

examples/carousel/ui/icons/info_black_24dp.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>

examples/carousel/ui/icons/settings_black_24dp.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>

examples/carousel/ui/svg/home_black.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="128px" viewBox="0 0 24 24" width="128px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/></svg>

examples/carousel/ui/svg/info_black.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="128px" viewBox="0 0 24 24" width="128px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>

examples/carousel/ui/svg/settings_black.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="128px" viewBox="0 0 24 24" width="128px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>

examples/carousel/ui/theme.slint

@@ -8,10 +8,17 @@ export global Theme := {
     // brushes
     property <brush> window-background: #2C2F36;
     property <brush> background-regular: #0025FF;
-    property <brush> background-hover: #FFFFFF;
+    property <brush> background-hover: background-regular.darker(0.2);
-    property <brush> background-pressed: #BDBDBD;
+    property <brush> background-pressed: background-regular.darker(0.4);
+    property <brush> background-selected: foreground;
+    property <brush> background-selected-hover: background-selected.darker(0.2);
+    property <brush> background-selected-pressed: background-selected.darker(0.4);
     property <brush> foreground: #FFFFFF;
-    property <brush> foreground-hover: #0025FF;
+    property <brush> foreground-hover: foreground.darker(0.2);
+    property <brush> foreground-pressed: foreground.darker(0.4);
+    property <brush> foreground-selected: background-regular;
+    property <brush> foreground-selected-hover: foreground-selected.darker(0.2);
+    property <brush> foreground-selected-pressed: foreground-selected.darker(0.4);
 
     // durations
     property <duration> duration-fast: 100ms;
@@ -24,7 +31,7 @@ export global Theme := {
     property <length> size-small: 24px;
     property <length> size-regular: 32px;
     property <length> size-medium: 128px;
-    property <length> size-big: 200px;
+    property <length> size-big: 170px;
 
     // spacings
     property <length> spacing-regular: 4px;
@@ -33,7 +40,7 @@ export global Theme := {
     // typo
     property <string> font-family: "Roboto";
     property <length> font-size-regular: 12px;
-    property <length> font-size-extra-medium: 24px;
+    property <length> font-size-medium: 28px;
     property <int> font-weight-regular: 400;
     property <int> font-weight-bold: 900;
 }

examples/carousel/ui/title_label.slint

@@ -4,7 +4,8 @@
 import { Theme } from "theme.slint";
 import { Label } from "label.slint";
 
-export TitleLabel := Label {
+export TitleLabel := Text {
-    font-size: Theme.font-size-extra-medium;
+    font-family: Theme.font-family;
+    font-size: Theme.font-size-medium;
     font-weight: Theme.font-weight-bold;
 }

examples/mcu-board-support/pico_st7789.rs

@@ -222,6 +222,11 @@ impl slint::platform::Platform for PicoBackend {
                     })
                 {
                     window.dispatch_event(event);
+
+                    // removes hover state on widgets
+                    if matches!(event, WindowEvent::PointerReleased { .. }) {
+                        window.dispatch_event(WindowEvent::PointerExited);
+                    }
                     // Don't go to sleep after a touch event that forces a redraw
                     continue;
                 }

examples/mcu-board-support/stm32h735g.rs

@@ -341,6 +341,11 @@ impl slint::platform::Platform for StmBackend {
 
                 if let Some(event) = event {
                     window.dispatch_event(event);
+
+                    // removes hover state on widgets
+                    if matches!(event, WindowEvent::PointerReleased { .. }) {
+                        window.dispatch_event(WindowEvent::PointerExited);
+                    }
                 }
             }