mirror of
https://github.com/slint-ui/slint.git
synced 2025-09-28 21:04:47 +00:00
Domain: slint-ui.com -> slint.dev
This commit is contained in:
parent
24c822dd60
commit
11dea135f7
1248 changed files with 1542 additions and 1542 deletions
|
@ -1,4 +1,4 @@
|
|||
# Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
# Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
# SPDX-License-Identifier: MIT
|
||||
|
||||
cmake_minimum_required(VERSION 3.21)
|
||||
|
|
|
@ -7,5 +7,5 @@ We recommend the following links to continue:
|
|||
|
||||
* [Examples](https://github.com/slint-ui/slint/tree/master/examples): In the Slint repository we have collected a few demos and examples. These are a great starting point to learn how to use many Slint features.
|
||||
* [Todo Example](https://github.com/slint-ui/slint/tree/master/examples/todo): This is one of the examples that implements a classic use-case.
|
||||
* [Memory Puzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example. And you can <a href="https://slint-ui.com/demos/memory/" target="_blank">play the wasm version</a> in your browser.
|
||||
* [Slint API Docs](https://slint-ui.com/docs/cpp/): The reference documentation for the C++ library.
|
||||
* [Memory Puzzle](https://github.com/slint-ui/slint/tree/master/examples/memory): This is a slightly more polished version of the code in this example. And you can <a href="https://slint.dev/demos/memory/" target="_blank">play the wasm version</a> in your browser.
|
||||
* [Slint API Docs](https://slint.dev/docs/cpp/): The reference documentation for the C++ library.
|
||||
|
|
|
@ -3,9 +3,9 @@
|
|||
What we'll do is take the list of tiles declared in the .slint language, duplicate it, and shuffle it.
|
||||
We'll do so by accessing the `memory_tiles` property through the C++ code. For each top-level property,
|
||||
a getter and a setter function is generated - in our case `get_memory_tiles` and `set_memory_tiles`.
|
||||
Since `memory_tiles` is an array in the `.slint` language, it's represented as a [`std::shared_ptr<slint::Model>`](https://slint-ui.com/docs/cpp/api/classslint_1_1model).
|
||||
Since `memory_tiles` is an array in the `.slint` language, it's represented as a [`std::shared_ptr<slint::Model>`](https://slint.dev/docs/cpp/api/classslint_1_1model).
|
||||
We can't modify the model generated by the .slint, but we can extract the tiles from it, and put it
|
||||
in a [`slint::VectorModel`](https://slint-ui.com/docs/cpp/api/classslint_1_1vectormodel) which inherits from `Model`.
|
||||
in a [`slint::VectorModel`](https://slint.dev/docs/cpp/api/classslint_1_1vectormodel) which inherits from `Model`.
|
||||
`VectorModel` allows us to make modifications and we can use it to replace the static generated model.
|
||||
|
||||
We modify the main function like so:
|
||||
|
@ -17,4 +17,4 @@ We modify the main function like so:
|
|||
Running this gives us a window on the screen that now shows a 4 by 4 grid of rectangles, which can show or obscure
|
||||
the icons when clicking. There's only one last aspect missing now, the rules for the game.
|
||||
|
||||
<video autoplay loop muted playsinline src="https://slint-ui.com/blog/memory-game-tutorial/creating-the-tiles-from-rust.mp4"></video>
|
||||
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/creating-the-tiles-from-rust.mp4"></video>
|
||||
|
|
|
@ -30,4 +30,4 @@ using the modulo and integer division to create a 4 by 4 grid.
|
|||
|
||||
Running this gives us a window that shows 8 tiles, which can be opened individually.
|
||||
|
||||
<video autoplay loop muted playsinline src="https://slint-ui.com/blog/memory-game-tutorial/from-one-to-multiple-tiles.mp4"></video>
|
||||
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/from-one-to-multiple-tiles.mp4"></video>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
# Getting Started
|
||||
|
||||
In this tutorial, we use C++ as the host programming language. We also support other programming languages like
|
||||
[Rust](https://slint-ui.com/docs/rust/slint/) or [JavaScript](https://slint-ui.com/docs/node/).
|
||||
[Rust](https://slint.dev/docs/rust/slint/) or [JavaScript](https://slint.dev/docs/node/).
|
||||
|
||||
You will need a development environment that can compile C++20, [CMake 3.21](https://cmake.org/download/),
|
||||
and we recommend [Ninja](https://ninja-build.org) for `-GNinja`.
|
||||
|
@ -77,7 +77,7 @@ If you are stepping through this tutorial on a Windows machine, you can run it w
|
|||
memory_game
|
||||
```
|
||||
|
||||

|
||||

|
||||
|
||||
Feel free to use your favorite IDE for this purpose, or use out-of-tree build, or Ninja, ...
|
||||
We just keep it simple here for the purpose of this blog.
|
||||
|
|
|
@ -2,11 +2,11 @@
|
|||
|
||||
The game is visually a little bare. Here are some ideas how you could make further changes to enhance it:
|
||||
|
||||
- The tiles could have rounded corners, to look a little less sharp. The [border-radius](https://slint-ui.com/docs/slint/src/builtins/elements.html#rectangle)
|
||||
- The tiles could have rounded corners, to look a little less sharp. The [border-radius](https://slint.dev/docs/slint/src/builtins/elements.html#rectangle)
|
||||
property of _Rectangle_ can be used to achieve that.
|
||||
|
||||
- In real world memory games, the back of the tiles often have some common graphic. You could add an image with
|
||||
the help of another _[Image](https://slint-ui.com/docs/slint/src/builtins/elements.html#image)_
|
||||
the help of another _[Image](https://slint.dev/docs/slint/src/builtins/elements.html#image)_
|
||||
element. Note that you may have to use _Rectangle_'s _clip property_
|
||||
element around it to ensure that the image is clipped away when the curtain effect opens.
|
||||
|
||||
|
|
|
@ -10,5 +10,5 @@ If you uncover two tiles with the same icon, then they remain visible - they're
|
|||
|
||||
This is how the game looks like in action:
|
||||
|
||||
<video autoplay loop muted playsinline src="https://slint-ui.com/blog/memory-game-tutorial/memory_clip.mp4"
|
||||
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/memory_clip.mp4"
|
||||
class="img-fluid img-thumbnail rounded"></video>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
// clang-format off
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
// ANCHOR: main
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
// main.cpp
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
// ANCHOR: main_window
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
struct TileData {
|
||||
|
|
|
@ -19,19 +19,19 @@ from our business logic.
|
|||
Inside the <span class="hljs-built_in">Rectangle</span> we place an <span class="hljs-built_in">Image</span> element that
|
||||
loads an icon with the <span class="hljs-built_in">@image-url()</span> macro. The path is relative to the folder in which
|
||||
the `memory.slint` is located. This icon and others we're going to use later need to be installed first. You can download a
|
||||
[Zip archive](https://slint-ui.com/blog/memory-game-tutorial/icons.zip) that we have prepared.
|
||||
[Zip archive](https://slint.dev/blog/memory-game-tutorial/icons.zip) that we have prepared.
|
||||
|
||||
If you are on Linux or macOS, download and extract it with the following two commands:
|
||||
|
||||
```sh
|
||||
curl -O https://slint-ui.com/blog/memory-game-tutorial/icons.zip
|
||||
curl -O https://slint.dev/blog/memory-game-tutorial/icons.zip
|
||||
unzip icons.zip
|
||||
```
|
||||
|
||||
If you are on Windows, use the following commands:
|
||||
|
||||
```
|
||||
powershell curl -Uri https://slint-ui.com/blog/memory-game-tutorial/icons.zip -Outfile icons.zip
|
||||
powershell curl -Uri https://slint.dev/blog/memory-game-tutorial/icons.zip -Outfile icons.zip
|
||||
powershell Expand-Archive -Path icons.zip -DestinationPath .
|
||||
```
|
||||
|
||||
|
@ -40,4 +40,4 @@ This should unpack an `icons` directory containing a bunch of icons.
|
|||
We compile the program with `cmake --build .` and running with the `./memory_game` gives us a
|
||||
window on the screen that shows the icon of a bus on a blue background.
|
||||
|
||||

|
||||

|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
// ANCHOR: main_window
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
|
||||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
struct TileData {
|
||||
|
|
|
@ -29,4 +29,4 @@ to the current element.
|
|||
Running this gives us a window on the screen with a rectangle that opens up to show us the bus icon, when clicking on
|
||||
it. Subsequent clicks will close and open the curtain again.
|
||||
|
||||
<video autoplay loop muted playsinline src="https://slint-ui.com/blog/memory-game-tutorial/polishing-the-tile.mp4"></video>
|
||||
<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/polishing-the-tile.mp4"></video>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue