mirror of
https://github.com/slint-ui/slint.git
synced 2025-11-01 20:31:27 +00:00
Update example readmes
Tidy up the main examples/README.md. All the main examples now live in a table with a thumbnail and description. Then each project has it's own README.md with more details.
This commit is contained in:
Nigel Breslaw
GitHub
parent
6f939b6c0a
commit
048c0eaf08
16 changed files with 149 additions and 188 deletions
|
|
@ -4,197 +4,37 @@
|
|||
|
||||
These examples demonstrate the main features of Slint and how to use them in different language environments.
|
||||
|
||||
### [`printerdemo`](./printerdemo)
|
||||
|
||||
A fictional user interface for the touch screen of a printer
|
||||
|
||||
| `.slint` Design | Rust Source | C++ Source | Node Source | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| [`ui.slint`](./printerdemo/ui/printerdemo.slint) | [`main.rs`](./printerdemo/rust/main.rs) | [`main.cpp`](./printerdemo/cpp/main.cpp) | [`main.js`](./printerdemo/node/main.js) | [Online simulation](https://slint.dev/snapshots/master/demos/printerdemo/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/printerdemo/ui/printerdemo.slint) |
|
||||
| Thumbnail | Description | Demo |
|
||||
| --- | --- | --- |
|
||||
| [Printer UI ](./printerdemo) | A fictional user interface for the touch screen of a printer. <br/> [Project...](./printerdemo) | [Wasm Demo](https://slint.dev/snapshots/master/demos/printerdemo/) |
|
||||
| [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/) | |
|
||||
| [Weather](./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/) |
|
||||
|
||||
|
||||
|
||||
### [`gallery`](./gallery)
|
||||
|
||||
A simple application showing the different widgets
|
||||
|
||||
| `.slint` Design | Rust Source | C++ Source | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| [`gallery.slint`](./gallery/gallery.slint) | [`main.rs`](./gallery/main.rs) | [`main.cpp`](./gallery/main.cpp) | [Online simulation](https://slint.dev/snapshots/master/demos/gallery/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/gallery/gallery.slint) |
|
||||
|
||||
|
||||
|
||||
### [`energy-monitor`](./energy-monitor)
|
||||
|
||||
A fictional user interface of a device that monitors energy consumption in a building.
|
||||
|
||||
| `.slint` Design | Rust Source | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- |
|
||||
| [`desktop_window.slint`](./energy-monitor/ui/desktop_window.slint) | [`main.rs`](./energy-monitor/src/main.rs) | [Online simulation](https://slint.dev/snapshots/master/demos/energy-monitor/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/energy-monitor/ui/desktop_window.slint) |
|
||||
|
||||
|
||||
|
||||
### [`todo`](./todo)
|
||||
|
||||
A simple todo application
|
||||
|
||||
| `.slint` Design | Rust Source | C++ Source | NodeJS | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| [`todo.slint`](./todo/ui/todo.slint) | [`main.rs`](./todo/rust/main.rs) | [`main.cpp`](./todo/cpp/main.cpp) | [`main.js`](./todo/node/main.js) | [Online simulation](https://slint.dev/snapshots/master/demos/todo/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/todo/ui/todo.slint) |
|
||||
|
||||
|
||||
|
||||
### [`todo-mvc`](./todo-mvc)
|
||||
|
||||
A simple todo application based on the [Model View Controller](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) pattern.
|
||||
|
||||
| `.slint` Design | Rust Source | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- |
|
||||
| [`index.slint`](./todo-mvc/ui/index.slint) | [`main.rs`](./todo/rust/main.rs) | [Online simulation](https://slint.dev/snapshots/master/demos/todo-mvc/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/todo-mvc/ui/index.slint) |
|
||||
|
||||
### [`carousel`](./carousel)
|
||||
|
||||
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 SlintPad |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| [`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.dev/snapshots/master/demos/carousel/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/carousel/ui/carousel_demo.slint) |
|
||||
|
||||
|
||||
|
||||
### [`slide_puzzle`](./slide_puzzle)
|
||||
|
||||
Puzzle game based on a Flutter example. See [Readme](./slide_puzzle)
|
||||
|
||||
| `.slint` Design | Rust Source | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- |
|
||||
| [`slide_puzzle.slint`](./slide_puzzle/slide_puzzle.slint) | [`main.rs`](./slide_puzzle/main.rs) | [Online simulation](https://slint.dev/snapshots/master/demos/slide_puzzle/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/slide_puzzle/slide_puzzle.slint) |
|
||||
|
||||
|
||||
|
||||
### [`memory`](./memory)
|
||||
|
||||
A basic memory game used as an example the tutorial:
|
||||
|
||||
* [Memory Game Tutorial (Rust)](https://slint.dev/docs/quickstart/rust)
|
||||
* [Memory Game Tutorial (C++)](https://slint.dev/docs/quickstart/cpp)
|
||||
|
||||
| `.slint` Design | Rust Source | C++ Source | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| [`memory.slint`](./memory/memory.slint) | [`main.rs`](./memory/main.rs) | [`memory.cpp`](./memory/memory.cpp) | [Online simulation](https://slint.dev/snapshots/master/demos/memory/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/memory/memory.slint) |
|
||||
|
||||
### [`iot-dashboard`](./iot-dashboard)
|
||||
|
||||
A clone of one demo from the [QSkinny framework](https://qskinny.github.io/).
|
||||
|
||||
Also show how a way to dynamically load widgets with the interpreter from C++.
|
||||
|
||||
| `.slint` Design | C++ Source | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- |
|
||||
| [`main.slint`](./iot-dashboard/main.slint) | [`main.cpp`](./iot-dashboard/main.cpp) | [Online preview](https://slint.dev/snapshots/master/editor/preview.html?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/iot-dashboard/main.slint) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/iot-dashboard/main.slint) |
|
||||
|
||||
|
||||
|
||||
### [`imagefilter`](./imagefilter)
|
||||
|
||||
A Rust-only example that shows how to use the Rust image crate to do image manipulations
|
||||
and feed the result into Slint.
|
||||
|
||||
| `.slint` Design | Rust Source | TypeScript Source | Online wasm Preview |
|
||||
| --- | --- | --- | --- |
|
||||
| [`main.slint`](./imagefilter/ui/main.slint) | [`main.rs`](./imagefilter/rust/main.rs) | [`main.ts`](./imagefilter/node/main.ts) | [Online simulation](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.
|
||||
|
||||
| `.slint` Design | Rust Source | Online wasm Preview |
|
||||
| --- | --- | --- |
|
||||
| [`plotter.slint`](./plotter/plotter.slint) | [`main.rs`](./plotter/main.rs) | [Online simulation](https://slint.dev/snapshots/master/demos/plotter/) |
|
||||
|
||||
|
||||
|
||||
### [`bash`](./bash)
|
||||
|
||||
Some examples of how to use the `slint-viewer` to add a GUI to shell scripts.
|
||||
|
||||
### [`opengl_underlay`](./opengl_underlay)
|
||||
|
||||
A Rust and C++ example that shows how render Slint on top of graphical effect rendered using custom OpenGL code. For more details check out the [Readme](./opengl_underlay).
|
||||
|
||||
| `.slint` Design | Rust Source | C++ Source | Online wasm Preview |
|
||||
| --- | --- | --- | --- |
|
||||
| [`scene.slint`](./opengl_underlay/scene.slint) | [`main.rs`](./opengl_underlay/main.rs) | [`main.cpp`](./opengl_underlay/main.cpp) | [Online simulation](https://slint.dev/snapshots/master/demos/opengl_underlay/) |
|
||||
|
||||
|
||||
|
||||
### [`opengl_texture`](./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. For more details check out the [Readme](./opengl_texture).
|
||||
|
||||
| `.slint` Design | Rust Source | C++ Source |
|
||||
| --- | --- | --- |
|
||||
| [`scene.slint`](./opengl_texture/scene.slint) | [`main.rs`](./opengl_texture/main.rs) | [`main.cpp`](./opengl_texture/main.cpp) |
|
||||
|
||||
|
||||
|
||||
### [`ffmpeg`](./ffmpeg)
|
||||
|
||||
A Rust example that shows how render video frames with FFmpeg within a Slint scene. For more details check out the [Readme](./ffmpeg).
|
||||
|
||||
| `.slint` Design | Rust Source |
|
||||
#### External examples
|
||||
| Thumbnail | Description |
|
||||
| --- | --- |
|
||||
| [`scene.slint`](./ffmpeg/scene.slint) | [`main.rs`](./opengl_texture/main.rs) |
|
||||
|
||||
|
||||
|
||||
### [`maps`](./maps)
|
||||
|
||||
A rust example that load image tiles asynchronously from OpenStreetMap server and allow panning and zooming
|
||||
|
||||
|
||||
|
||||
### [`virtual keyboard`](./virtual_keyboard)
|
||||
|
||||
| `.slint` Design | Rust Source | C++ Source |
|
||||
| --- | --- | --- |
|
||||
| [`main_window.slint`](./virtual_keyboard/ui/main_window.slint) | [`main.rs`](./virtual_keyboard/rust/main.rs) | [`main.cpp`](./virtual_keyboard/cpp/main.cpp) |
|
||||
|
||||
A Rust and C++ example that shows how to implement a custom virtual keyboard in Slint. For more details check out the [Readme](./virtual_keyboard).
|
||||
|
||||
|
||||
| [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) |
|
||||
|
||||
|
||||
### [`7guis`](./7guis)
|
||||
|
||||
Our implementations of the ["7GUIs"](https://7guis.github.io/7guis/) Tasks.
|
||||
|
||||
|
||||
|
||||
### [`weather-demo`](./weather-demo)
|
||||
|
||||
A simple, cross-platform (Desktop, Android, Wasm) weather application using real weather data from the [OpenWeather](https://openweathermap.org/) API.
|
||||
|
||||
| `.slint` Design | Rust Source (Desktop) | Rust Source (Android / Wasm) | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| [`main.slint`](./weather-demo/ui/main.slint) | [`main.rs`](./weather-demo/src/main.rs) | [`lib.rs`](./weather-demo/src/lib.rs) | [Online simulation](https://slint.dev/snapshots/master/demos/weather-demo/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/weather-demo/ui/main.slint) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### External examples
|
||||
|
||||
* [Cargo UI](https://github.com/slint-ui/cargo-ui): A rust application that makes use of threads in the background.
|
||||
|
||||
|
||||
|
||||
## Loading the example with the `viewer`
|
||||
---
|
||||
### Loading the example with the `viewer`
|
||||
|
||||
Simply load the .slint file with the viewer application
|
||||
|
||||
|
|
@ -202,7 +42,8 @@ Simply load the .slint file with the viewer application
|
|||
cargo run --release --bin slint-viewer -- examples/printerdemo/ui/printerdemo.slint
|
||||
```
|
||||
|
||||
## Running the Rust Examples
|
||||
---
|
||||
### Running the Rust Examples
|
||||
|
||||
You can run the examples either by going into the rust sub-folder and use `cargo run`, for example:
|
||||
|
||||
|
|
@ -217,6 +58,7 @@ or you can run them from anywhere in the Cargo workspace by name:
|
|||
cargo run --release --bin printerdemo
|
||||
```
|
||||
|
||||
---
|
||||
### Wasm builds
|
||||
|
||||
In order to make the wasm build of the example, you first need to edit the Cargo.toml
|
||||
|
|
@ -233,7 +75,8 @@ wasm-pack build --release --target web
|
|||
python3 -m http.server
|
||||
```
|
||||
|
||||
## Running the C++ Examples
|
||||
---
|
||||
### 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
|
||||
|
|
@ -245,7 +88,8 @@ examples as well by default
|
|||
cmake --build .
|
||||
```
|
||||
|
||||
## Running the Node Examples
|
||||
---
|
||||
### Running the Node Examples
|
||||
|
||||
You can run the examples by going into the node sub-folder and use `npm`, for example:
|
||||
|
||||
|
|
|
|||
|
|
@ -22,3 +22,5 @@ The examples also assume that [`jq`](https://stedolan.github.io/jq/) is in the p
|
|||
The `laptop.svg` icon is `emoji_u1f4bb.svg` from the Noto Emoji font from
|
||||
https://github.com/googlefonts/noto-emoji
|
||||
and licensed under the terms of the SIL Open Font License, version 1.1; copyright Google Inc.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,17 @@
|
|||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
|
||||
### `carousel`
|
||||
|
||||
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 SlintPad |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| [`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.dev/snapshots/master/demos/carousel/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/carousel/ui/carousel_demo.slint) |
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
|
|
|||
|
|
@ -24,3 +24,5 @@ On Windows:
|
|||
- `vcpkg install ffmpeg --triplet x64-windows`
|
||||
- Make sure `VCPKG_ROOT` is set to where `vcpkg` is installed
|
||||
- Make sure `%VCPKG_ROOT%\installed\x64-windows\bin` is in your path
|
||||
|
||||
|
||||
|
|
|
|||
11
examples/gallery/README.md
Normal file
11
examples/gallery/README.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
|
||||
### `printerdemo`
|
||||
|
||||
A fictional user interface for the touch screen of a printer
|
||||
|
||||
| `.slint` Design | Rust Source | C++ Source | Node Source | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| [`ui.slint`](./printerdemo/ui/printerdemo.slint) | [`main.rs`](./printerdemo/rust/main.rs) | [`main.cpp`](./printerdemo/cpp/main.cpp) | [`main.js`](./printerdemo/node/main.js) | [Online simulation](https://slint.dev/snapshots/master/demos/printerdemo/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/printerdemo/ui/printerdemo.slint) |
|
||||
|
||||
|
||||
12
examples/imagefilter/README.md
Normal file
12
examples/imagefilter/README.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
|
||||
### [`imagefilter`](./imagefilter)
|
||||
|
||||
A Rust-only example that shows how to use the Rust image crate to do image manipulations
|
||||
and feed the result into Slint.
|
||||
|
||||
| `.slint` Design | Rust Source | TypeScript Source | Online wasm Preview |
|
||||
| --- | --- | --- | --- |
|
||||
| [`main.slint`](./imagefilter/ui/main.slint) | [`main.rs`](./imagefilter/rust/main.rs) | [`main.ts`](./imagefilter/node/main.ts) | [Online simulation](https://slint.dev/snapshots/master/demos/imagefilter/) |
|
||||
|
||||
|
||||
5
examples/maps/README.md
Normal file
5
examples/maps/README.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
|
||||
A rust example that load image tiles asynchronously from OpenStreetMap server and allow panning and zooming
|
||||
|
||||
|
||||
14
examples/memory/README.md
Normal file
14
examples/memory/README.md
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
|
||||
### `memory`
|
||||
|
||||
A basic memory game used as an example the tutorial:
|
||||
|
||||
* [Memory Game Tutorial (Rust)](https://slint.dev/docs/quickstart/rust)
|
||||
* [Memory Game Tutorial (C++)](https://slint.dev/docs/quickstart/cpp)
|
||||
|
||||
| `.slint` Design | Rust Source | C++ Source | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| [`memory.slint`](./memory/memory.slint) | [`main.rs`](./memory/main.rs) | [`memory.cpp`](./memory/memory.cpp) | [Online simulation](https://slint.dev/snapshots/master/demos/memory/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/memory/memory.slint) |
|
||||
|
||||
|
||||
|
|
@ -10,3 +10,5 @@ This example application demonstrates how layer two scenes together in a window:
|
|||
This is implemented using the `set_rendering_notifier` function on the `slint::Window` type. It takes a callback as a parameter and that is invoked during different phases of the rendering. In this example the invocation during the setup phase is used to prepare the pipeline for OpenGL rendering later. Then the `BeforeRendering` phase is used to render the graphical effect with OpenGL. Afterwards, Slint will render the scene of elements into the same back-buffer as the previous OpenGL code rendered into.
|
||||
|
||||
Since the graphical effect is continuous, the code in the callback requests a redraw of the contents by calling `slint::Window::request_redraw()`.
|
||||
|
||||
|
||||
|
|
|
|||
12
examples/plotter/README.md
Normal file
12
examples/plotter/README.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
|
||||
### `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.
|
||||
|
||||
| `.slint` Design | Rust Source | Online wasm Preview |
|
||||
| --- | --- | --- |
|
||||
| [`plotter.slint`](./plotter/plotter.slint) | [`main.rs`](./plotter/main.rs) | [Online simulation](https://slint.dev/snapshots/master/demos/plotter/) |
|
||||
|
||||
|
||||
11
examples/printerdemo/README.md
Normal file
11
examples/printerdemo/README.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
|
||||
### `printerdemo`
|
||||
|
||||
A fictional user interface for the touch screen of a printer
|
||||
|
||||
| `.slint` Design | Rust Source | C++ Source | Node Source | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| [`ui.slint`](./printerdemo/ui/printerdemo.slint) | [`main.rs`](./printerdemo/rust/main.rs) | [`main.cpp`](./printerdemo/cpp/main.cpp) | [`main.js`](./printerdemo/node/main.js) | [Online simulation](https://slint.dev/snapshots/master/demos/printerdemo/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/printerdemo/ui/printerdemo.slint) |
|
||||
|
||||
|
||||
|
|
@ -7,6 +7,12 @@ https://flutter.github.io/samples/slide_puzzle
|
|||
|
||||
This will allow to compare Slint and Flutter.
|
||||
|
||||
| `.slint` Design | Rust Source | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- |
|
||||
| [`slide_puzzle.slint`](./slide_puzzle/slide_puzzle.slint) | [`main.rs`](./slide_puzzle/main.rs) | [Online simulation](https://slint.dev/snapshots/master/demos/slide_puzzle/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/slide_puzzle/slide_puzzle.slint) |
|
||||
|
||||
|
||||
|
||||
Remaining feature to implement to have parity:
|
||||
|
||||
* "Spring" animation instead of a bezier curve.
|
||||
|
|
|
|||
9
examples/todo-mvc/README.md
Normal file
9
examples/todo-mvc/README.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
|
||||
### `todo-mvc`
|
||||
|
||||
A simple todo application based on the [Model View Controller](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) pattern.
|
||||
|
||||
| `.slint` Design | Rust Source | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- |
|
||||
| [`index.slint`](./todo-mvc/ui/index.slint) | [`main.rs`](./todo/rust/main.rs) | [Online simulation](https://slint.dev/snapshots/master/demos/todo-mvc/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/todo-mvc/ui/index.slint) |
|
||||
11
examples/todo/README.md
Normal file
11
examples/todo/README.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
|
||||
|
||||
### `todo`
|
||||
|
||||
A simple todo application
|
||||
|
||||
| `.slint` Design | Rust Source | C++ Source | NodeJS | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| [`todo.slint`](./todo/ui/todo.slint) | [`main.rs`](./todo/rust/main.rs) | [`main.cpp`](./todo/cpp/main.cpp) | [`main.js`](./todo/node/main.js) | [Online simulation](https://slint.dev/snapshots/master/demos/todo/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/todo/ui/todo.slint) |
|
||||
|
||||
|
||||
|
|
@ -70,3 +70,5 @@ int main()
|
|||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
# Weather Demo
|
||||
|
||||
A simple, cross-platform (Desktop, Android, Wasm) weather application using real weather data from the [OpenWeather](https://openweathermap.org/) API.
|
||||
|
||||
| `.slint` Design | Rust Source (Desktop) | Rust Source (Android / Wasm) | Online wasm Preview | Open in SlintPad |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| [`main.slint`](./weather-demo/ui/main.slint) | [`main.rs`](./weather-demo/src/main.rs) | [`lib.rs`](./weather-demo/src/lib.rs) | [Online simulation](https://slint.dev/snapshots/master/demos/weather-demo/) | [Preview in Online Code Editor](https://slint.dev/snapshots/master/editor?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/weather-demo/ui/main.slint) |
|
||||
|
||||
Weather Demo is a weather application made by [Felgo](https://felgo.com/).
|
||||
|
||||
The application retrieves weather data from the [OpenWeather](https://openweathermap.org/) API to provide:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue