mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-27 22:04:08 +00:00
35c972c227
Some checks are pending
autofix.ci / format_fix (push) Waiting to run
autofix.ci / lint_typecheck (push) Waiting to run
CI / node_test (ubuntu-22.04) (push) Blocked by required conditions
CI / files-changed (push) Waiting to run
CI / build_and_test (--exclude bevy-example, ubuntu-22.04, 1.82) (push) Blocked by required conditions
CI / build_and_test (--exclude ffmpeg --exclude gstreamer-player, --exclude bevy-example, windows-2022, 1.82) (push) Blocked by required conditions
CI / node_test (macos-14) (push) Blocked by required conditions
CI / build_and_test (--exclude ffmpeg --exclude gstreamer-player, macos-14, stable) (push) Blocked by required conditions
CI / build_and_test (--exclude ffmpeg --exclude gstreamer-player, windows-2022, beta) (push) Blocked by required conditions
CI / build_and_test (--exclude ffmpeg --exclude gstreamer-player, windows-2022, stable) (push) Blocked by required conditions
CI / build_and_test (ubuntu-22.04, nightly) (push) Blocked by required conditions
CI / cpp_test_driver (ubuntu-22.04) (push) Blocked by required conditions
CI / cpp_test_driver (windows-2022) (push) Blocked by required conditions
CI / cpp_cmake (macos-14, 1.82) (push) Blocked by required conditions
CI / cpp_cmake (ubuntu-22.04, stable) (push) Blocked by required conditions
CI / cpp_cmake (windows-2022, nightly) (push) Blocked by required conditions
CI / cpp_package_test (push) Blocked by required conditions
CI / node_test (windows-2022) (push) Blocked by required conditions
CI / python_test (macos-14) (push) Blocked by required conditions
CI / python_test (ubuntu-22.04) (push) Blocked by required conditions
CI / python_test (windows-2022) (push) Blocked by required conditions
CI / cpp_test_driver (macos-13) (push) Blocked by required conditions
CI / mcu (stm32h735g, thumbv7em-none-eabihf) (push) Blocked by required conditions
CI / vsce_build_test (push) Blocked by required conditions
CI / mcu (pico-st7789, thumbv6m-none-eabi) (push) Blocked by required conditions
CI / mcu (pico2-st7789, thumbv8m.main-none-eabihf) (push) Blocked by required conditions
CI / mcu-embassy (push) Blocked by required conditions
CI / ffi_32bit_build (push) Blocked by required conditions
CI / docs (push) Blocked by required conditions
CI / wasm (push) Blocked by required conditions
CI / wasm_demo (push) Blocked by required conditions
CI / tree-sitter (push) Blocked by required conditions
CI / updater_test (0.3.0) (push) Blocked by required conditions
CI / fmt_test (push) Blocked by required conditions
CI / esp-idf-quick (push) Blocked by required conditions
CI / android (push) Blocked by required conditions
CI / miri (push) Blocked by required conditions
CI / test-figma-inspector (push) Blocked by required conditions
99 lines
7.9 KiB
Markdown
99 lines
7.9 KiB
Markdown
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
|
|
|
# Examples
|
|
|
|
These examples demonstrate the main features of Slint and how to use them in different language environments.
|
|
|
|
|
|
|
|
| Thumbnail | Description | Example |
|
|
| --- | --- | --- |
|
|
| [Widget Gallery ](./gallery/) | A simple application showing the different widgets. <br/> [Project...](./gallery) | [Wasm Demo](https://slint.dev/snapshots/master/demos/gallery/) |
|
|
| [Energy Meter](./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/) |
|
|
| [Todo app](./todo/) | A simple todo application. <br/> [Project...](./todo)<br><br>A simple todo application based on the [Model View Controller](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) pattern. <br/> [Project...](./todo-mvc) | [Wasm Demo](https://slint.dev/snapshots/master/demos/todo/)<br><br>[Wasm MVC Demo](https://slint.dev/snapshots/master/demos/todo-mvc/) |
|
|
| [Carousel](./carousel/) | A custom carousel widget that can be controlled by touch, mouse and keyboard. <br/> [Project...](./carousel) | [Wasm Demo](https://slint.dev/snapshots/master/demos/carousel/) |
|
|
| [Slide Puzzle](./slide_puzzle/) | Puzzle game based on a Flutter example. <br/> [Project...](./slide_puzzle) | [Wasm Demo](https://slint.dev/snapshots/master/demos/slide_puzzle/) |
|
|
| [Memory Game](./memory/) | A basic memory game used as an example the tutorial. <br/> [Project...](./memory) | [Wasm Demo](https://slint.dev/snapshots/master/demos/memory/) |
|
|
| [IOT Dashboard](./iot-dashboard/) | AA clone of one demo from the [QSkinny framework](https://qskinny.github.io/).<br/> Also shows how to dynamically load widgets from C++. <br/> [Project...](./iot-dashboard) | |
|
|
| [Image Filter](./imagefilter/) | A Rust-only example that shows how to use the Rust image crate to do image manipulationsand feed the result into Slint. <br/> [Project...](./imagefilter/) | [Wasm Demo](https://slint.dev/snapshots/master/demos/imagefilter/) |
|
|
| [Plotter](./plotter/) | A Rust-only example that shows how to use the Rust plotters crate to do plot a graph and integrate the result into Slint. <br/> [Project...](./plotter/) | [Wasm Demo](https://slint.dev/snapshots/master/demos/plotter/) |
|
|
| [Using Bash](./bash/) | Some examples of how to use the `slint-viewer` to add a GUI to shell scripts. <br/> [Project...](./bash/) | |
|
|
| [OpenGL Underlay](./opengl_underlay/) | A Rust and C++ example that shows how render Slint on top of graphical effect rendered using custom OpenGL code. <br/> [Project...](./opengl_underlay/) | [Wasm Demo](https://slint.dev/snapshots/master/demos/opengl_underlay/) |
|
|
| [OpenGL](./opengl_texture/) | A Rust and C++ example that shows how render a scene with custom OpenGL code into a texture and render that texture within a Slint scene. <br/> [Project...](./opengl_texture/) | |
|
|
| [FFmpeg ](./ffmpeg/) | A Rust example that shows how render video frames with FFmpeg within a Slint scene. <br/> [Project...](./ffmpeg/) | |
|
|
| [Maps](./maps/) | A rust example that load image tiles asynchronously from OpenStreetMap server and allow panning and zooming. <br/> [Project...](./maps/) | |
|
|
| [Virtual Keyboard](./virtual_keyboard/) | A Rust and C++ example that shows how to implement a custom virtual keyboard in Slint. <br/> [Project...](./virtual_keyboard/) | |
|
|
| [7GUIs](./7guis/) | Our implementations of the ["7GUIs"](https://7guis.github.io/7guis/) Tasks. <br/> [Project...](./7guis/) | |
|
|
| [Slint & Bevy](./7guis/) | A demo that shows how to embed [Bevy](https://bevyengine.org) into Slint <br/> [Project...](./bevy/) | |
|
|
|
|
#### External examples
|
|
| Thumbnail | Description |
|
|
| --- | --- |
|
|
| [Cargo UI](https://github.com/slint-ui/cargo-ui) | A rust application that makes use of threads in the background. <br/> [Project...](https://github.com/slint-ui/cargo-ui) |
|
|
|
|
|
|
---
|
|
### Loading the example with the `viewer`
|
|
|
|
Simply load the .slint file with the viewer application
|
|
|
|
```sh
|
|
cargo run --release --bin slint-viewer -- examples/gallery/gallery.slint
|
|
```
|
|
|
|
---
|
|
### Running the Rust Examples
|
|
|
|
You can run the examples either by going into folder or into the rust sub-folder and use `cargo run`, for example:
|
|
|
|
```sh
|
|
cd examples/gallery
|
|
cargo run --release
|
|
```
|
|
|
|
or you can run them from anywhere in the Cargo workspace by name:
|
|
|
|
```sh
|
|
cargo run --release --bin gallery
|
|
```
|
|
|
|
---
|
|
### Wasm builds
|
|
|
|
In order to make the wasm build of the example, you first need to edit the Cargo.toml
|
|
files to uncomment the line starting with `#wasm#` (or use the `sed` line bellow)
|
|
You can then use wasm-pack (which you may need to obtain with `cargo install wasm-pack`).
|
|
This will generate the wasm in the `./pkg` directory, which the `index.html` file will open.
|
|
Since wasm files cannot be served from `file://` URL, you need to open a wab server to serve
|
|
the content
|
|
|
|
```sh
|
|
cd examples/imagefilter/rust
|
|
sed -i "s/^#wasm# //" Cargo.toml
|
|
wasm-pack build --release --target web
|
|
python3 -m http.server
|
|
```
|
|
|
|
---
|
|
### Running the C++ Examples
|
|
|
|
* **When compiling Slint from sources:** If you follow the [C++ build instructions](/docs/building.md#c-build), this will build the C++
|
|
examples as well by default
|
|
* **From [installed binary packages](/api/cpp/README.md#binary-packages):** Simply run cmake in one of the example directory containing a CMakeLists.txt
|
|
|
|
```sh
|
|
mkdir build && cd build
|
|
cmake -GNinja -DCMAKE_PREFIX_PATH="<path to installed>" ..
|
|
cmake --build .
|
|
```
|
|
|
|
---
|
|
### Running the Node Examples
|
|
|
|
You can run the examples by going into the node sub-folder and use [`pnpm`](https://pnpm.io), for example:
|
|
|
|
```sh
|
|
cd examples/todo/node
|
|
pnpm install
|
|
pnpm start
|
|
```
|