Add mcu support to the carousel example (#1744)

The carousel example can be now also run on the supported mcu devices
This commit is contained in:
Florian Blasius 2022-10-19 14:54:39 +02:00 committed by GitHub
parent 328cee7289
commit b87705aa56
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 126 additions and 62 deletions

View file

@ -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

View file

@ -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:

3
.gitignore vendored
View file

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

View file

@ -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)

View file

@ -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```

View file

@ -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.

View file

@ -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();
}

View file

@ -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")
}

View file

@ -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
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;
touch-area := TouchArea {}
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 [
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; }
animate colorize { duration: Theme.duration-fast; }
}
// Selection text
titleArea := TitleLabel {
x: root.spacing + parent.width;
y: parent.height - self.height;
title-label := TitleLabel {
x: (parent.width - width) / 2;
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; }
}

View file

@ -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("icons/settings_black_24dp.svg") },
{ title: "About", image: @image-url("icons/info_black_24dp.svg") },
{ title: "Settings", image: @image-url("svg/settings_black.svg") },
{ title: "Home", image: @image-url("svg/home_black.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;
preferred-height: 400px;
width: 320px;
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;

View file

@ -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

View file

@ -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>

Before

Width:  |  Height:  |  Size: 236 B

View file

@ -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>

Before

Width:  |  Height:  |  Size: 307 B

View file

@ -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>

Before

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 238 B

View file

@ -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>

After

Width:  |  Height:  |  Size: 309 B

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -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-pressed: #BDBDBD;
property <brush> background-hover: background-regular.darker(0.2);
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;
}

View file

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

View file

@ -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;
}

View file

@ -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);
}
}
}