Add example for custom carousel widget (#1739)

Add a new example that contains a custom carousel widget

.github/workflows/wasm_demos.yaml

@@ -40,6 +40,11 @@ jobs:
         sed -i "s/#wasm# //" Cargo.toml
         wasm-pack build --release --target web
       working-directory: examples/todo/rust
+    - name: Carousel demo WASM build
+      run: |
+        sed -i "s/#wasm# //" Cargo.toml
+        wasm-pack build --release --target web
+      working-directory: examples/carousel/rust
     - name: Sliding Puzzle demo WASM build
       run: |
         sed -i "s/#wasm# //" Cargo.toml
@@ -74,6 +79,7 @@ jobs:
               examples/printerdemo/rust/
               examples/printerdemo_old/rust/
               examples/todo/
+              examples/carousel/
               examples/memory/
               examples/slide_puzzle/
               examples/imagefilter/

.gitignore

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

.reuse/dep5

@@ -62,3 +62,11 @@ License: GPL-3.0-only OR LicenseRef-Slint-commercial
 Files: editors/vscode/*.json editors/vscode/README.md
 Copyright: Copyright © SixtyFPS GmbH <info@slint-ui.com>
 License: GPL-3.0-only OR LicenseRef-Slint-commercial
+
+Files: examples/carousel/icons/*.svg
+Copyright: Material Icons <https://fonts.google.com/icons?selected=Material+Iconse>
+License: Apache-2.0
+
+Files: examples/carousel/fonts/*.ttf
+Copyright: Roboto <https://fonts.google.com/specimen/Roboto/about>
+License: Apache-2.0

Cargo.toml

@@ -21,6 +21,7 @@ members = [
     'examples/printerdemo_mcu',
     'examples/slide_puzzle',
     'examples/todo/rust',
+    'examples/carousel/rust',
     'examples/mcu-board-support',
     'helper_crates/const-field-offset',
     'helper_crates/vtable',
@@ -58,6 +59,7 @@ default-members = [
     'examples/printerdemo/rust',
     'examples/slide_puzzle',
     'examples/todo/rust',
+    'examples/carousel/rust',
     'internal/backends/winit',
     'internal/backends/qt',
     'internal/backends/selector',

examples/CMakeLists.txt

@@ -19,6 +19,7 @@ if (SLINT_FEATURE_INTERPRETER)
     add_subdirectory(printerdemo/cpp_interpreted/)
 endif()
 if (TARGET Slint::slint-compiler)
+    add_subdirectory(carousel/cpp/)
     add_subdirectory(printerdemo_old/cpp/)
     add_subdirectory(todo/cpp/)
     add_subdirectory(gallery/)

examples/README.md

@@ -32,6 +32,16 @@ A simple todo mvc application
 
 ![Screenshot of the Todo Demo](https://slint-ui.com/resources/todo_screenshot.png "Todo Demo")
 
+### [`carousel`](./carousel)
+
+A custom carousel widget that can be controlled by touch, mouse and keyboard
+
+| `.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")
+
 ### [`slide_puzzle`](./slide_puzzle)
 
 Puzzle game based on a Flutter example. See [Readme](./slide_puzzle)

examples/carousel/cpp/CMakeLists.txt

@@ -0,0 +1,13 @@
+# Copyright © SixtyFPS GmbH <info@slint-ui.com>
+# SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
+
+cmake_minimum_required(VERSION 3.14)
+project(slint_cpp_carousel LANGUAGES CXX)
+
+if (NOT TARGET Slint::Slint)
+    find_package(Slint REQUIRED)
+endif()
+
+add_executable(carousel main.cpp)
+target_link_libraries(carousel PRIVATE Slint::Slint)
+slint_target_sources(carousel ../ui/carousel_demo.slint)

examples/carousel/cpp/main.cpp

@@ -0,0 +1,9 @@
+// Copyright © SixtyFPS GmbH <info@slint-ui.com>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
+
+#include "carousel_demo.h"
+
+int main()
+{
+    MainWindow::create()->run();
+}

examples/carousel/node/README

@@ -0,0 +1,4 @@
+Run with
+
+# npm install
+# npm start

examples/carousel/node/main.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+// Copyright © SixtyFPS GmbH <info@slint-ui.com>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
+
+const path = require("path");
+let slint = require("slint-ui");
+
+let demo = require("../ui/carousel_demo.slint");
+let app = new demo.MainWindow();
+
+app.run();

examples/carousel/node/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "carousel",
+    "version": "0.3.1",
+    "main": "main.js",
+    "dependencies": {
+        "slint-ui": "../../../api/node"
+    },
+    "scripts": {
+        "start": "node ."
+    }
+}

examples/carousel/rust/Cargo.toml

@@ -0,0 +1,34 @@
+# Copyright © SixtyFPS GmbH <info@slint-ui.com>
+# SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
+
+[package]
+name = "carousel"
+version = "0.3.1"
+authors = ["Slint Developers <info@slint-ui.com>"]
+edition = "2021"
+build = "build.rs"
+publish = false
+license = "GPL-3.0-only OR LicenseRef-Slint-commercial"
+
+[[bin]]
+path = "main.rs"
+name = "carousel"
+
+[dependencies]
+slint = { path = "../../../api/rs/slint" }
+
+[build-dependencies]
+slint-build = { path = "../../../api/rs/build" }
+
+# 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.
+
+#wasm# [lib]
+#wasm# crate-type = ["cdylib"]
+#wasm# path = "main.rs"
+#wasm#
+#wasm# [target.'cfg(target_arch = "wasm32")'.dependencies]
+#wasm# wasm-bindgen = { version = "0.2" }
+#wasm# web-sys = { version = "0.3", features=["console"] }
+#wasm# console_error_panic_hook = "0.1.5"

examples/carousel/rust/build.rs

@@ -0,0 +1,6 @@
+// Copyright © SixtyFPS GmbH <info@slint-ui.com>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
+
+fn main() {
+    slint_build::compile("../ui/carousel_demo.slint").unwrap();
+}

examples/carousel/rust/index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+
+<!-- Copyright © SixtyFPS GmbH <info@slint-ui.com> -->
+<!-- SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial -->
+
+<html>
+<!--
+  This is a static html file used to display the wasm build.
+  In order to generate the build
+   - uncomment the #wasm# lines in Cargo.toml
+   - Run `wasm-pack build --release --target web` in this directory.
+-->
+
+<head>
+  <meta charset="UTF-8">
+  <title>Slint Carousel example (Web Assembly version)</title>
+  <link rel="stylesheet" href="https://slint-ui.com/css/demos-v1.css">
+  <style>
+    @media screen and (max-width: 992px) and (orientation: landscape) {
+      .hide-in-mobile-landscape {
+        display: none;
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+
+      canvas {
+        width: 100vw !important;
+        height: 100vh !important;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <h1 class="hide-in-mobile-landscape">Carousel example</h1>
+  <p class="hide-in-mobile-landscape">This is the <a href="https://slint-ui.com">Slint</a> Carousel example compiled to
+    WebAssembly.</p>
+  <div id="spinner" style="position: relative;">
+    <div class="spinner">Loading...</div>
+  </div>
+  <canvas id="canvas" width="640" height="480" unselectable="on"></canvas>
+  <p class="hide-in-mobile-landscape links">
+    <a href="https://github.com/slint-ui/slint/blob/master/examples/carousel/ui/carousel_demo.slint">
+      View Source Code on GitHub</a> -
+    <a
+      href="https://slint-ui.com/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/carousel/ui/carousel_demo.slint">
+      Edit in the online code editor
+    </a>
+  </p>
+  <script type="module">
+    import init from './pkg/carousel.js';
+    init().finally(() => {
+      document.getElementById("spinner").remove();
+    });
+  </script>
+</body>
+
+</html>

examples/carousel/rust/main.rs

@@ -0,0 +1,17 @@
+// Copyright © SixtyFPS GmbH <info@slint-ui.com>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
+
+#[cfg(target_arch = "wasm32")]
+use wasm_bindgen::prelude::*;
+
+slint::include_modules!();
+
+#[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();
+
+    MainWindow::new().run()
+}

examples/carousel/ui/card.slint

@@ -0,0 +1,72 @@
+// Copyright © SixtyFPS GmbH <info@slint-ui.com>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
+
+import { Theme } from "theme.slint";
+import { TitleLabel } from "title_label.slint";
+
+export Card := Rectangle {
+    callback clicked <=> touch-area.clicked;  
+
+    property <string> title: "title";
+    property <bool> is-selected: false;
+    property <image> image-source <=> image.source;
+    property <length> spacing: Theme.spacing-medium;
+    property <length> title-spacing: Theme.spacing-medium;
+    property <length> title-area-height: Theme.size-small;
+
+    background: transparent;
+    width: Theme.size-medium;
+    height: Theme.size-medium;
+
+    // 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;
+
+            animate colorize { duration: Theme.duration-fast; }
+        }
+
+        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; }
+    }
+
+    // Selection text
+    titleArea := TitleLabel {
+        x: root.spacing + parent.width;
+        y: parent.height - self.height;
+        text <=> title;
+        visible: false;
+    }
+
+    states [
+        selected when is-selected : {
+            width: Theme.size-big;
+            height: Theme.size-big;
+            titleArea.visible: true;
+        }
+     ]
+
+     animate width { duration: Theme.duration-regular; easing: ease-in; }
+     animate height { duration: Theme.duration-regular; easing: ease-in; }
+}