language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-11-25 13:43:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

C++ tutorial: Remove inline sources from the creating tiles from C++ chapter

Browse source
This commit is contained in:
Simon Hausmann 2021-06-17 15:47:32 +02:00
parent 6e4da0c14e
commit 4affbf728d
4 changed files with 116 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/tutorial/cpp/src/CMakeLists.txt
View file

@ -16,3 +16,7 @@ endif()
add_executable(memory_tutorial_inital main_initial.cpp)
target_link_libraries(memory_tutorial_inital PRIVATE SixtyFPS::SixtyFPS)
sixtyfps_target_60_sources(memory_tutorial_inital memory.60)
add_executable(memory_tutorial_tiles_from_cpp main_tiles_from_cpp.cpp)
target_link_libraries(memory_tutorial_tiles_from_cpp PRIVATE SixtyFPS::SixtyFPS)
sixtyfps_target_60_sources(memory_tutorial_tiles_from_cpp memory_tiles_from_cpp.60)

23
docs/tutorial/cpp/src/creating_the_tiles_from_cpp.md
View file

@ -11,28 +11,7 @@ in a [`sixtyfps::VectorModel`](https://sixtyfps.io/docs/cpp/api/classsixtyfps_1_
We modify the main function like so:
```cpp
// main.cpp
#include "memory.h"
#include <random> // Added
int main()
{
auto main_window = MainWindow::create();
auto old_tiles = main_window->get_memory_tiles();
std::vector<TileData> new_tiles;
new_tiles.reserve(old_tiles->row_count() * 2);
for (int i = 0; i < old_tiles->row_count(); ++i) {
new_tiles.push_back(old_tiles->row_data(i));
new_tiles.push_back(old_tiles->row_data(i));
}
std::default_random_engine rng{};
std::shuffle(new_tiles.begin(), new_tiles.end(), rng);
auto tiles_model = std::make_shared<
sixtyfps::VectorModel<TileData>>(new_tiles);
main_window->set_memory_tiles(tiles_model);
main_window->run();
}
{{#include main_tiles_from_cpp.cpp:main}}
```
Running this gives us a window on the screen that now shows a 4 by 4 grid of rectangles, which can show or obscure

35
docs/tutorial/cpp/src/main_tiles_from_cpp.cpp Normal file
View file

@ -0,0 +1,35 @@
/* LICENSE BEGIN
This file is part of the SixtyFPS Project -- https://sixtyfps.io
Copyright (c) 2020 Olivier Goffart <olivier.goffart@sixtyfps.io>
Copyright (c) 2020 Simon Hausmann <simon.hausmann@sixtyfps.io>
SPDX-License-Identifier: GPL-3.0-only
This file is also available under commercial licensing terms.
Please contact info@sixtyfps.io for more information.
LICENSE END */
// main.cpp
#include "memory_tiles_from_cpp.h" // generated header from memory_tiles_from_cpp.60
// ANCHOR: main
// ...
#include <random> // Added
int main()
{
auto main_window = MainWindow::create();
auto old_tiles = main_window->get_memory_tiles();
std::vector<TileData> new_tiles;
new_tiles.reserve(old_tiles->row_count() * 2);
for (int i = 0; i < old_tiles->row_count(); ++i) {
new_tiles.push_back(old_tiles->row_data(i));
new_tiles.push_back(old_tiles->row_data(i));
}
std::default_random_engine rng {};
std::shuffle(new_tiles.begin(), new_tiles.end(), rng);
auto tiles_model = std::make_shared<sixtyfps::VectorModel<TileData>>(new_tiles);
main_window->set_memory_tiles(tiles_model);
main_window->run();
}
// ANCHOR_END: main

76
docs/tutorial/cpp/src/memory_tiles_from_cpp.60 Normal file
View file

@ -0,0 +1,76 @@
struct TileData := {
image: image,
image_visible: bool,
solved: bool,
}
MemoryTile := Rectangle {
callback clicked;
property <bool> open_curtain;
property <bool> solved;
property <image> icon;
height: 64px;
width: 64px;
background: solved ? #34CE57 : #3960D5;
animate background { duration: 800ms; }
Image {
source: icon;
width: parent.width;
height: parent.height;
}
// Left curtain
Rectangle {
background: #193076;
width: open_curtain ? 0px : (parent.width / 2);
height: parent.height;
animate width { duration: 250ms; easing: ease-in; }
}
// Right curtain
Rectangle {
background: #193076;
x: open_curtain ? parent.width : (parent.width / 2);
width: open_curtain ? 0px : (parent.width / 2);
height: parent.height;
animate width { duration: 250ms; easing: ease-in; }
animate x { duration: 250ms; easing: ease-in; }
}
TouchArea {
clicked => {
// Delegate to the user of this element
root.clicked();
}
}
}
MainWindow := Window {
width: 326px;
height: 326px;
property <[TileData]> memory_tiles: [
{ image: @image-url("icons/at.png") },
{ image: @image-url("icons/balance-scale.png") },
{ image: @image-url("icons/bicycle.png") },
{ image: @image-url("icons/bus.png") },
{ image: @image-url("icons/cloud.png") },
{ image: @image-url("icons/cogs.png") },
{ image: @image-url("icons/motorcycle.png") },
{ image: @image-url("icons/video.png") },
];
for tile[i] in memory_tiles : MemoryTile {
x: mod(i, 4) * 74px;
y: floor(i / 4) * 74px;
width: 64px;
height: 64px;
icon: tile.image;
open_curtain: tile.image_visible || tile.solved;
// propagate the solved status from the model to the tile
solved: tile.solved;
clicked => {
tile.image_visible = !tile.image_visible;
}
}
}