added usecases demo

.github/workflows/wasm_demos.yaml

@@ -82,6 +82,7 @@ jobs:
                       demos/energy-monitor/
                       demos/home-automation/rust
                       demos/weather-demo/
+                      demos/usecases/rust
                       !/**/.gitignore
             - name: Clean cache # Otherwise the cache is much too big
               run: |

Cargo.toml

@@ -32,6 +32,7 @@ members = [
     'examples/mcu-board-support',
     'examples/uefi-demo',
     'demos/weather-demo',
+    'demos/usecases/rust',
     'helper_crates/const-field-offset',
     'helper_crates/vtable',
     'helper_crates/vtable/macro',

REUSE.toml

@@ -190,6 +190,7 @@ path = [
   "internal/compiler/widgets/cupertino/_**.svg",
   "internal/compiler/widgets/qt/_**.svg",
   "examples/todo-mvc/assets/**.svg",
+  "demos/usecases/ui/assets/**.svg"
 ]
 precedence = "aggregate"
 SPDX-FileCopyrightText = "Material Icons <https://github.com/material-icons/material-icons/blob/master/LICENSE>"

demos/README.md

@@ -11,6 +11,7 @@ These demos showcase different complex use-cases for building UIs with Slint.
 | [Printer UI ![Printer Demo image](https://github.com/user-attachments/assets/7e7400ad-283a-4404-b04a-8620ba4df452)](./printerdemo) |  A fictional user interface for the touch screen of a printer. <br/> [Project...](./printerdemo) | [Wasm Demo](https://slint.dev/snapshots/master/demos/printerdemo/) |
 | [Energy Meter![Energy meter demo image](https://github.com/user-attachments/assets/abfe03e3-ded6-4ddc-82b7-8303ee45515c "Energy meter demo image")](./energy-monitor/) |  A fictional user interface of a device that monitors energy consumption in a building. <br/> [Project...](./energy-monitor) | [Wasm Demo](https://slint.dev/snapshots/master/demos/energy-monitor/) |
 | [Weather![Weather demo image](./weather-demo/docs/img/desktop-preview.png "7 GUI's demo image")](./weather-demo/) | A simple, cross-platform (Desktop, Android, Wasm) weather application using real weather data from the [OpenWeather](https://openweathermap.org/) API. <br/> [Project...](./weather-demo/) | [Wasm Demo](https://slint.dev/snapshots/master/demos/weather-demo/) |
+| [Usecases ![Usecases Demo image](https://github.com/user-attachments/assets/72dd3e98-36b8-41b6-9d6e-6eb6053ace43)](./usecases) |  Different example use cases in one app. <br/> [Project...](./usecases) | [Wasm Demo](https://slint.dev/snapshots/master/demos/usecases/) |
 
 ---
 ### Running the Rust Demos

demos/usecases/cpp/.gitignore

@@ -0,0 +1 @@
+build

demos/usecases/cpp/CMakeLists.txt

@@ -0,0 +1,15 @@
+# Copyright © SixtyFPS GmbH <[email protected]>
+# SPDX-License-Identifier: MIT
+
+cmake_minimum_required(VERSION 3.21)
+project(slint_cpp_usecases LANGUAGES CXX)
+
+if (NOT TARGET Slint::Slint)
+    find_package(Slint REQUIRED)
+endif()
+
+set(SLINT_STYLE "cosmic-light" CACHE STRING "Style for demo" FORCE)
+
+add_executable(usecases main.cpp)
+target_link_libraries(usecases PRIVATE Slint::Slint)
+slint_target_sources(usecases ../ui/app.slint)

demos/usecases/cpp/main.cpp

@@ -0,0 +1,80 @@
+// Copyright © SixtyFPS GmbH <[email protected]>
+// SPDX-License-Identifier: MIT
+
+#include "app.h"
+
+void init_virtual_keyboard(slint::ComponentHandle<App> app)
+{
+    app->global<VirtualKeyboardHandler>().on_key_pressed([=](auto key) {
+        app->window().dispatch_key_press_event(key);
+        app->window().dispatch_key_release_event(key);
+    });
+}
+
+int main()
+{
+    auto app = App::create();
+
+    init_virtual_keyboard(app);
+
+    auto mails = std::make_shared<slint::VectorModel<CardListViewItem>>(std::vector {
+            CardListViewItem { "Simon Hausmann", "1 hour ago", "Meeting tomorrow",
+                               "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do "
+                               "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut "
+                               "enim ad minim veniam, quis nostrud exercitation ullamco laboris "
+                               "nisi ut aliquip ex ea commodo consequat." },
+            CardListViewItem { "Tobias Hunger", "1 day ago", "Meeting tomorrow",
+                               "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do "
+                               "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut "
+                               "enim ad minim veniam, quis nostrud exercitation ullamco laboris "
+                               "nisi ut aliquip ex ea commodo consequat." },
+            CardListViewItem { "Olivier Goffart", "2 hour ago", "Meeting tomorrow",
+                               "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do "
+                               "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut "
+                               "enim ad minim veniam, quis nostrud exercitation ullamco laboris "
+                               "nisi ut aliquip ex ea commodo consequat." },
+            CardListViewItem { "Aurindam Jana", "5 hour ago", "Meeting tomorrow",
+                               "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do "
+                               "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut "
+                               "enim ad minim veniam, quis nostrud exercitation ullamco laboris "
+                               "nisi ut aliquip ex ea commodo consequat." },
+            CardListViewItem { "Simon Hausmann", "7 hour ago", "Meeting tomorrow",
+                               "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do "
+                               "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut "
+                               "enim ad minim veniam, quis nostrud exercitation ullamco laboris "
+                               "nisi ut aliquip ex ea commodo consequat." },
+            CardListViewItem { "Tobias Hunger", "1 day ago", "Meeting tomorrow",
+                               "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do "
+                               "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut "
+                               "enim ad minim veniam, quis nostrud exercitation ullamco laboris "
+                               "nisi ut aliquip ex ea commodo consequat." },
+            CardListViewItem { "Olivier Goffart", "8 hour ago", "Meeting tomorrow",
+                               "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do "
+                               "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut "
+                               "enim ad minim veniam, quis nostrud exercitation ullamco laboris "
+                               "nisi ut aliquip ex ea commodo consequat." },
+            CardListViewItem { "Aurindam Jana", "9 hour ago", "Meeting tomorrow",
+                               "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do "
+                               "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut "
+                               "enim ad minim veniam, quis nostrud exercitation ullamco laboris "
+                               "nisi ut aliquip ex ea commodo consequat." },
+    });
+
+    app->global<MailBoxViewAdapter>().set_mails(mails);
+
+    app->global<MailBoxViewAdapter>().on_search_text_changed(
+            [mails, app = slint::ComponentWeakHandle(app)](const slint::SharedString &text) {
+                auto app_lock = app.lock();
+
+                std::string text_str(text.data());
+
+                (*app_lock)->global<MailBoxViewAdapter>().set_mails(
+                        std::make_shared<slint::FilterModel<CardListViewItem>>(
+                                mails, [text_str](auto e) {
+                                    std::string title_str(e.title.data());
+                                    return title_str.find(text_str) != std::string::npos;
+                                }));
+            });
+
+    app->run();
+}

demos/usecases/esp-idf/.gitignore

@@ -0,0 +1,6 @@
+build
+managed_components
+sdkconfig
+sdkconfig.old
+dependencies.lock
+.cache

demos/usecases/esp-idf/CMakeLists.txt

@@ -0,0 +1,15 @@
+# Copyright © SixtyFPS GmbH <[email protected]>
+# SPDX-License-Identifier: MIT
+
+cmake_minimum_required(VERSION 3.14)
+
+include($ENV{IDF_PATH}/tools/cmake/project.cmake)
+
+set(SLINT_ESP_LOCAL_EXAMPLE ON)
+set(SLINT_FEATURE_EXPERIMENTAL ON)
+set(EXTRA_COMPONENT_DIRS ../../../api/cpp/esp-idf/)
+set(SLINT_STYLE "cosmic-light" CACHE STRING "Style for demo" FORCE)
+
+add_compile_options(-fdiagnostics-color=always)
+
+project(slint_esp_usecases_mcu LANGUAGES CXX)

demos/usecases/esp-idf/README.md

@@ -0,0 +1,8 @@
+<!-- Copyright © SixtyFPS GmbH <[email protected]> ; SPDX-License-Identifier: MIT -->
+
+# Building
+
+```
+cd examples/usecases/esp-idf
+SLINT_SCALE_FACTOR=2 idf.py flash monitor
+```

demos/usecases/esp-idf/main/CMakeLists.txt

@@ -0,0 +1,12 @@
+# Copyright © SixtyFPS GmbH <[email protected]>
+# SPDX-License-Identifier: MIT
+
+
+idf_component_register(
+    SRCS "main.cpp"
+    INCLUDE_DIRS "."
+    REQUIRES esp32_p4_function_ev_board_noglib slint
+)
+
+slint_target_sources(${COMPONENT_LIB} ../../ui/app.slint)
+target_link_options(${COMPONENT_LIB} PUBLIC -Wl,--allow-multiple-definition)

demos/usecases/esp-idf/main/idf_component.yml

@@ -0,0 +1,7 @@
+# Copyright © SixtyFPS GmbH <[email protected]>
+# SPDX-License-Identifier: MIT
+
+## IDF Component Manager Manifest File
+dependencies:
+  idf: ">=5.1"
+  espressif/esp32_p4_function_ev_board_noglib: "^1.0.0"

demos/usecases/esp-idf/main/main.cpp

@@ -0,0 +1,48 @@
+// Copyright © SixtyFPS GmbH <[email protected]>
+// SPDX-License-Identifier: MIT
+
+#include "../../cpp/main.cpp"
+
+#include "slint-esp.h"
+#include <ctime>
+#include <memory>
+#include "esp_log.h"
+
+#include <slint-platform.h>
+
+#include <bsp/display.h>
+#include <bsp/esp-bsp.h>
+#include <bsp/touch.h>
+#include <vector>
+
+#undef BSP_LCD_H_RES
+#define BSP_LCD_H_RES 800
+#undef BSP_LCD_V_RES
+#define BSP_LCD_V_RES 1280
+
+extern "C" void app_main(void)
+{
+
+    /* Initialize I2C (for touch and audio) */
+    bsp_i2c_init();
+
+    /* Initialize display  */
+    esp_lcd_panel_handle_t panel_handle = NULL;
+    bsp_lcd_handles_t handles {};
+
+    bsp_display_new_with_handles(nullptr, &handles);
+
+    esp_lcd_touch_handle_t touch_handle = NULL;
+    const bsp_touch_config_t bsp_touch_cfg = {};
+    bsp_touch_new(&bsp_touch_cfg, &touch_handle);
+
+    panel_handle = handles.panel;
+
+    /* Set display brightness to 100% */
+    bsp_display_backlight_on();
+
+    slint_esp_init(slint::PhysicalSize({ BSP_LCD_H_RES, BSP_LCD_V_RES }), panel_handle,
+                   touch_handle);
+
+    main();
+}

demos/usecases/esp-idf/rust-toolchain.toml

@@ -0,0 +1,5 @@
+# Copyright © SixtyFPS GmbH <[email protected]>
+# SPDX-License-Identifier: MIT
+
+[toolchain]
+channel = "nightly"

demos/usecases/esp-idf/sdkconfig.defaults

@@ -0,0 +1,80 @@
+# This file was generated using idf.py save-defconfig. It can be edited manually.
+# Espressif IoT Development Framework (ESP-IDF) Project Minimal Configuration
+#
+CONFIG_IDF_TARGET="esp32p4"
+
+# CONFIG_SPIRAM=y
+# CONFIG_SPIRAM_MODE_HEX=y
+# CONFIG_SPIRAM_SPEED_200M=y
+# CONFIG_IDF_EXPERIMENTAL_FEATURES=y
+#
+# CONFIG_LV_CONF_SKIP=y
+#
+# #CLIB default
+# CONFIG_LV_USE_CLIB_MALLOC=y
+# CONFIG_LV_USE_CLIB_SPRINTF=y
+# CONFIG_LV_USE_CLIB_STRING=y
+#
+# # Performance monitor
+# CONFIG_LV_USE_OBSERVER=y
+# CONFIG_LV_USE_SYSMON=y
+# CONFIG_LV_USE_PERF_MONITOR=y
+#
+#
+# # CONFIG_LV_BUILD_EXAMPLES is not set
+#
+CONFIG_MAIN_TASK_STACK_SIZE=20584
+# #CONFIG_ESPTOOLPY_FLASHMODE_QIO=y
+CONFIG_ESPTOOLPY_FLASHSIZE_4MB=y
+CONFIG_ESPTOOLPY_FLASHSIZE="4MB"
+CONFIG_PARTITION_TABLE_SINGLE_APP_LARGE=y
+#
+CONFIG_COMPILER_OPTIMIZATION_SIZE=y
+
+
+
+CONFIG_IDF_TARGET="esp32p4"
+CONFIG_ESPTOOLPY_FLASHMODE_QIO=y
+#CONFIG_COMPILER_OPTIMIZATION_PERF=y
+CONFIG_SPIRAM=y
+CONFIG_SPIRAM_MODE_OCT=y
+CONFIG_SPIRAM_FETCH_INSTRUCTIONS=y
+CONFIG_SPIRAM_RODATA=y
+CONFIG_SPIRAM_SPEED_80M=y
+CONFIG_FREERTOS_HZ=1000
+CONFIG_BSP_LCD_RGB_BUFFER_NUMS=2
+CONFIG_BSP_LCD_RGB_BOUNCE_BUFFER_MODE=y
+CONFIG_BSP_DISPLAY_LVGL_AVOID_TEAR=y
+CONFIG_BSP_DISPLAY_LVGL_DIRECT_MODE=y
+CONFIG_LV_FONT_MONTSERRAT_12=y
+CONFIG_LV_FONT_MONTSERRAT_16=y
+CONFIG_LV_FONT_MONTSERRAT_24=y
+CONFIG_LV_USE_DEMO_WIDGETS=y
+CONFIG_LV_USE_DEMO_BENCHMARK=y
+CONFIG_LV_USE_DEMO_STRESS=y
+CONFIG_LV_USE_DEMO_MUSIC=y
+CONFIG_LV_DEMO_MUSIC_AUTO_PLAY=y
+CONFIG_LV_ATTRIBUTE_FAST_MEM_USE_IRAM=y
+CONFIG_LV_DISP_DEF_REFR_PERIOD=10
+
+CONFIG_SPIRAM=y
+CONFIG_SPIRAM_MODE_HEX=y
+CONFIG_SPIRAM_SPEED_200M=y
+CONFIG_IDF_EXPERIMENTAL_FEATURES=y
+
+## LVGL8 ##
+CONFIG_LV_MEM_SIZE_KILOBYTES=48
+CONFIG_LV_USE_PERF_MONITOR=y
+
+## LVGL9 ##
+CONFIG_LV_CONF_SKIP=y
+
+#CLIB default
+CONFIG_LV_USE_CLIB_MALLOC=y
+CONFIG_LV_USE_CLIB_SPRINTF=y
+CONFIG_LV_USE_CLIB_STRING=y
+
+# Performance monitor
+#CONFIG_LV_USE_OBSERVER=y
+#CONFIG_LV_USE_SYSMON=y
+#CONFIG_LV_USE_PERF_MONITOR=y

demos/usecases/rust/Cargo.toml

@@ -0,0 +1,34 @@
+# Copyright © SixtyFPS GmbH <[email protected]>
+# SPDX-License-Identifier: MIT
+
+[package]
+name = "usecases"
+version = "1.10.0"
+authors = ["Slint Developers <[email protected]>"]
+edition = "2021"
+build = "build.rs"
+publish = false
+license = "MIT"
+
+[lib]
+crate-type = ["lib", "cdylib"]
+path = "src/lib.rs"
+name = "usecases_lib"
+
+[[bin]]
+path = "src/main.rs"
+name = "usecases"
+
+[dependencies]
+slint = { path = "../../../api/rs/slint", features = ["serde"] }
+serde = { version = "1.0", features = ["derive"] }
+serde_json = "1.0"
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+wasm-bindgen = { version = "0.2" }
+console_error_panic_hook = "0.1.5"
+
+[build-dependencies]
+slint-build = { path = "../../../api/rs/build" }
+
+

demos/usecases/rust/build.rs

@@ -0,0 +1,12 @@
+// Copyright © SixtyFPS GmbH <[email protected]>
+// SPDX-License-Identifier: MIT
+
+use slint_build::CompilerConfiguration;
+
+fn main() {
+    slint_build::compile_with_config(
+        "../ui/app.slint",
+        CompilerConfiguration::new().with_style("cosmic".into()),
+    )
+    .unwrap();
+}