### Build and Run Commands

Source: https://docs.slint.dev/latest/docs/slint/tutorial/getting_started

Commands to compile and execute the Slint application for different environments.

```bash
cmake -B build
cmake --build build
./build/my_application
```

```bash
npm install
npm start
```

```bash
cargo run
```

```bash
uv sync
```

--------------------------------

### Install Slint Language Server via Cargo

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/manual-setup

Commands to install the slint-lsp binary using Rust's package manager, cargo. Users can install the stable release or the latest development version from the git repository.

```bash
cargo install slint-lsp
```

```bash
cargo install slint-lsp --git https://github.com/slint-ui/slint --force
```

--------------------------------

### Run Embedded Demo with probe-rs

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Use this command to build and run the printerdemo_mcu example on a Raspberry Pi Pico using probe-rs. Ensure probe-rs is installed and a probe is connected.

```bash
CARGO_TARGET_THUMBV6M_NONE_EABI_LINKER="flip-link" CARGO_TARGET_THUMBV6M_NONE_EABI_RUNNER="probe-rs run --chip RP2040" cargo run -p printerdemo_mcu --no-default-features --features=mcu-board-support/pico-st7789 --target=thumbv6m-none-eabi --release
```

--------------------------------

### Configure Application Entry Points

Source: https://docs.slint.dev/latest/docs/slint/tutorial/getting_started

Language-specific code to initialize and run the Slint MainWindow component.

```cpp
#include "app-window.h"

int main(int argc, char **argv)
{
    auto main_window = MainWindow::create();
    main_window->run();
}
```

```javascript
import * as slint from "slint-ui";

const ui = slint.loadFile(new URL("./ui/app-window.slint", import.meta.url));
const mainWindow = new ui.MainWindow();
await mainWindow.run();
```

```rust
slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let main_window = MainWindow::new()?;
    main_window.run()
}
```

--------------------------------

### Basic SpinBox Example

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/basic-widgets/spinbox

A basic example demonstrating the SpinBox widget within a VerticalBox layout. It shows how to set an initial value.

```slint
import { SpinBox, VerticalBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 50px;


    VerticalBox {
        alignment: center;


        SpinBox {
            value: 42;
        }
    }
}
```

--------------------------------

### Initialize Slint Project Directories

Source: https://docs.slint.dev/latest/docs/slint/tutorial/getting_started

Commands to rename and navigate into the extracted project template directories for C++, Node.js, Rust, and Python.

```bash
mv slint-cpp-template-main memory
cd memory
```

```bash
mv slint-nodejs-template-main memory
cd memory
```

```bash
mv slint-rust-template-main memory
cd memory
```

```bash
mv slint-python-template-main memory
cd memory
```

--------------------------------

### Basic TimePickerPopup Example

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/misc/timepicker

This example demonstrates how to use the TimePickerPopup widget. It shows how to trigger the popup using a button and handle the accepted and canceled callbacks.

```slint
import {
    TimePickerPopup,
    Button
} from "std-widgets.slint";
export component Example inherits Window {
    width: 400px;
    height: 600px;


    time-picker-button := Button {
        text: @tr("Open TimePicker");


        clicked => {
            time-picker.show();
        }
    }


    time-picker := TimePickerPopup {
        x: (root.width - self.width) / 2;
        y: (root.height - self.height ) / 2;
        width: 360px;
        height: 524px;
        canceled => {
            time-picker.close();
        }


        accepted(time) => {
            debug(time);
            time-picker.close();
        }
    }
}

```

--------------------------------

### Basic TextEdit Example

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/views/textedit

Demonstrates the basic usage of the TextEdit widget within a VerticalBox layout. It initializes the TextEdit with multi-line text.

```slint
import {
    TextEdit,
    VerticalBox
} from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 200px;


    VerticalBox {
        TextEdit {
            font-size: 14px;
            text: "Lorem ipsum dolor sit amet,\n consectetur adipisici elit";
        }
    }
}

```

--------------------------------

### Basic ContextMenuArea Example

Source: https://docs.slint.dev/latest/docs/slint/reference/window/contextmenuarea

Demonstrates how to set up a ContextMenuArea with several menu items, including a sub-menu and a separator. The 'activated' callback is used to log actions.

```slint
export component Example {
    ContextMenuArea {
        Menu {
            MenuItem {
                title: @tr("Cut");
                activated => { debug("Cut"); }
            }
            MenuItem {
                title: @tr("Copy");
                activated => { debug("Copy"); }
            }
            MenuItem {
                title: @tr("Paste");
                activated => { debug("Paste"); }
            }
            MenuSeparator {}
            Menu {
                title: @tr("Find");
                MenuItem {
                    title: @tr("Find Next");
                }
                MenuItem {
                    title: @tr("Find Previous");
                }
            }
        }
    }
}
```

--------------------------------

### Basic PopupWindow Example

Source: https://docs.slint.dev/latest/docs/slint/reference/window/popupwindow

Demonstrates how to create and show a PopupWindow when a TouchArea is clicked. The popup contains a yellow rectangle.

```slint
export component Example inherits Window {
    width: 100px;
    height: 100px;


    popup := PopupWindow {
        Rectangle { height:100%; width: 100%; background: yellow; }
        x: 20px; y: 20px; height: 50px; width: 50px;
    }


    TouchArea {
        height:100%; width: 100%;
        clicked => { popup.show(); }
    }
}

```

--------------------------------

### Basic ComboBox Example

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/basic-widgets/combobox

Demonstrates the basic usage of the ComboBox widget with a predefined model and initial value.

```slint
import { ComboBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 100px;
    height: 100px;
    background: transparent;
    ComboBox {
        x: 5px; y: 5px;
        width: 100px;
        model: ["first", "second", "third"];
        current-value: "first";
    }
}
```

--------------------------------

### Run Slint Live Preview

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/manual-setup

Command to launch the slint-viewer utility for real-time UI previewing with auto-reload functionality.

```bash
slint-viewer --auto-reload <path/to/file.slint>
```

--------------------------------

### Configure main.py for Slint Application

Source: https://docs.slint.dev/latest/docs/slint/tutorial/getting_started

This Python script serves as the entry point for the Slint application. It imports the necessary Slint library, defines the main window by inheriting from the UI component, and then displays and runs the application window. It assumes the UI file is accessible.

```python
import slint


class MainWindow(slint.loader.ui.app_window.MainWindow):
    pass


main_window = MainWindow()
main_window.show()
main_window.run()
```

--------------------------------

### Install System Dependencies for Slint

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/manual-setup

Required system-level libraries for running Slint tools on Debian-based Linux distributions.

```shell
sudo apt install -y build-essential libx11-xcb1 libx11-dev libxcb1-dev libxkbcommon0 libinput10 libinput-dev libgbm1 libgbm-dev
```

--------------------------------

### FocusScope Component Example

Source: https://docs.slint.dev/latest/docs/slint/reference/keyboard-input/focusscope

Demonstrates the usage of FocusScope with key event handling and key bindings.

```APIDOC
## FocusScope Component Example

This example shows how to use the `FocusScope` component to handle keyboard events and define key bindings.

```slint
export component Example inherits Window {
    width: 100px;
    height: 100px;
    forward-focus: my-key-handler;
    my-key-handler := FocusScope {
        key-pressed(event) => {
            debug(event.text);
            if (event.modifiers.control) {
                debug("control was pressed during this event");
            }
            if (event.text == Key.Escape) {
                debug("Esc key was pressed")
            }
            accept
        }

        KeyBinding {
            keys: @keys(Control + X);
            activated => {
                debug("Control + X pressed")
            }
        }
    }
}
```
```

--------------------------------

### Basic Slider Example

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/basic-widgets/slider

A basic example demonstrating how to include a Slider widget within a Slint application. It shows the Slider's default orientation and how to set an initial value.

```slint
import {
    Slider,
    VerticalBox
} from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 40px;


    VerticalBox {
        alignment: center;


        Slider {
            value: 42;
        }
    }
}
```

--------------------------------

### Basic ScaleRotateGestureHandler Example

Source: https://docs.slint.dev/latest/docs/slint/reference/gestures/scalerotategesturehandler

This example demonstrates how to use the ScaleRotateGestureHandler to enable pinch and rotation gestures on a Rectangle element. The `started` callback captures the initial scale and rotation, while the `updated` callback applies the gesture's transformations to the element's size and rotation.

```slint
export component Example inherits Window {
    width: 400px;
    height: 400px;


    property <float> start-scale;
    property <angle> start-rotation;


    gesture := ScaleRotateGestureHandler {
        started => {
            start-scale = rect.current-scale;
            start-rotation = rect.current-rotation;
        }
        updated => {
            rect.current-scale = start-scale * self.scale;
            rect.current-rotation = start-rotation + self.rotation;
        }


        rect := Rectangle {
            background: @radial-gradient(circle, #4488ff, #224488);
            border-radius: 8px;

            property <float> current-scale: 1.0;
            property <angle> current-rotation: 0deg;
            width: 200px * self.current-scale;
            height: 200px * self.current-scale;
            x: (parent.width - self.width) / 2;
            y: (parent.height - self.height) / 2;

            Text {
                text: "Pinch & rotate";
                color: white;
            }
        }
    }
}

```

--------------------------------

### HorizontalLayout with Alignment to Start

Source: https://docs.slint.dev/latest/docs/slint/guide/language/coding/positioning-and-layouts

Shows how specifying an alignment like 'start' in HorizontalLayout prevents children from stretching. Elements will retain their specified minimum widths and align to the start of the layout.

```slint
export component Example inherits Window {
    width: 200px;
    height: 200px;
    HorizontalLayout {
        alignment: start;
        Rectangle { background: blue; min-width: 20px; }
        Rectangle { background: yellow; min-width: 30px; }
    }
}
```

--------------------------------

### Rust Application Package Name Example

Source: https://docs.slint.dev/latest/docs/slint/guide/development/translations

Example of a package name in Cargo.toml. The domain name for translations must match this package name.

```toml
[package]
name = "gallery"
```

--------------------------------

### Basic Text and Wrapping Example

Source: https://docs.slint.dev/latest/docs/slint/reference/elements/text

Demonstrates basic text display with color and how text wraps to multiple lines when the 'wrap' property is set to 'word-wrap' and a width is specified.

```slint
// text-example.slint
export component TextExample inherits Window {
    // Text colored red.
    Text {
        x:0; y:0;
        text: "Hello World";
        color: red;
    }


    // This paragraph breaks into multiple lines of text.
    Text {
        x:0; y: 30px;
        text: "This paragraph breaks into multiple lines of text";
        wrap: word-wrap;
        width: 150px;
        height: 100%;
    }
}

```

--------------------------------

### Install Linux X11 Runtime Dependencies

Source: https://docs.slint.dev/latest/docs/slint/guide/backends-and-renderers/backend_winit

This command installs the necessary development libraries for X11 support on Debian-based Linux distributions. These dependencies are required for the Winit backend to function correctly on X11 windowing systems.

```bash
sudo apt install libx11-xcb-dev xinput libxcursor-dev libxkbcommon-x11-dev libx11-dev
```

--------------------------------

### Basic VerticalLayout Example

Source: https://docs.slint.dev/latest/docs/slint/reference/layouts/verticallayout

Demonstrates a basic VerticalLayout with fixed and stretched elements. Elements not explicitly sized are computed by the layout.

```slint
export component Foo inherits Window {
    width: 200px;
    height: 100px;
    VerticalLayout {
        spacing: 5px;
        Rectangle { background: red; width: 10px; }
        Rectangle { background: blue; min-width: 10px; }
        Rectangle { background: yellow; vertical-stretch: 1; }
        Rectangle { background: green; vertical-stretch: 2; }
    }
}
```

--------------------------------

### Basic StandardTableView Example

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/views/standardtableview

Demonstrates the basic structure of a StandardTableView with defined columns and rows. Each row contains items with text content.

```slint
import { StandardTableView } from "std-widgets.slint";
export component Example inherits Window {
    width: 230px;
    height: 200px;


    StandardTableView {
        width: 230px;
        height: 200px;
        columns: [
            { title: "Header 1" },
            { title: "Header 2" },
        ];
        rows: [
            [
                { text: "Item 1" }, { text: "Item 2" },
            ],
            [
                { text: "Item 1" }, { text: "Item 2" },
            ],
            [
                { text: "Item 1" }, { text: "Item 2" },
            ]
        ];
    }
}
```

--------------------------------

### Define Slint UI Component

Source: https://docs.slint.dev/latest/docs/slint/tutorial/getting_started

Standard Slint UI definition for a simple 'Hello World' window with green text, used across all language templates.

```slint
export component MainWindow inherits Window {
    Text {
        text: "hello world";
        color: green;
    }
}
```

--------------------------------

### Timer Usage Example

Source: https://docs.slint.dev/latest/docs/slint/reference/timer

This example demonstrates a timer that counts down from 10 to 0 every second, with a reset button.

```APIDOC
## Timer Example

### Description
A timer that counts down from a specified value, with functionality to reset the countdown.

### Component Definition
```slint
import { Button } from "std-widgets.slint";
export component Example inherits Window {
    property <int> value: 10;
    timer := Timer {
        interval: 1s;
        running: true;
        triggered() => {
            value -= 1;
            if (value == 0) {
                self.running = false;
            }
        }
    }
    HorizontalLayout {
        Text { text: value; }
        Button {
            text: "Reset";
            clicked() => { value = 10; timer.running = true; }
        }
    }
}
```
```

--------------------------------

### Install elf2uf2-rs for Pico Flashing

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Install the `elf2uf2-rs` utility using Cargo to convert the built ELF file into a UF2 file, which is used for flashing the Raspberry Pi Pico.

```bash
cargo install elf2uf2-rs

```

--------------------------------

### Install slint-tr-extractor Tool

Source: https://docs.slint.dev/latest/docs/slint/guide/development/translations

Install the `slint-tr-extractor` tool using cargo to extract translatable strings from `.slint` files.

```bash
cargo install slint-tr-extractor
```

--------------------------------

### Basic StandardListView Example

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/views/standardlistview

Demonstrates the basic usage of StandardListView with a predefined model containing text items. This is useful for displaying simple lists of text.

```slint
import {
    StandardListView,
    VerticalBox
} from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 200px;


    VerticalBox {
        StandardListView {
            model: [ { text: "Blue"}, { text: "Red" }, { text: "Green" },
                { text: "Yellow" }, { text: "Black"}, { text: "White"},
                { text: "Magenta" }, { text: "Cyan" },
            ];
        }
    }
}

```

--------------------------------

### StyledText Component Example

Source: https://docs.slint.dev/latest/docs/slint/reference/elements/styled-text

An example demonstrating how to use the StyledText element with markdown and HTML tags for text styling and dynamic content.

```APIDOC
## StyledText Component Example

### Description
This example shows how to use the `StyledText` element to display text with embedded styling and dynamic values. It utilizes markdown and HTML-like tags for formatting.

### Code
```
export component Example inherits Window {
    in property <string> value: 55;
    width: 200px;
    height: 200px;
    StyledText {
      text: @markdown("This is a piece of <u>Styled Text</u>\n" +
                      "with a red value inserted:" +
                      "<font color=\"red\">\{value}</font>");
    }
}
```
```

--------------------------------

### Basic StyledText Example

Source: https://docs.slint.dev/latest/docs/slint/reference/elements/styled-text

Demonstrates how to use StyledText to render text with basic HTML tags for underlining and inserting dynamic values with color.

```slint
export component Example inherits Window {
    in property <string> value: 55;
    width: 200px;
    height: 200px;
    StyledText {
      text: @markdown("This is a piece of <u>Styled Text</u>\n"
                      "with a red value inserted:"
                      "<font color=\"red\">\{value}</font>");
    }
}

```

--------------------------------

### Countdown Timer Example

Source: https://docs.slint.dev/latest/docs/slint/reference/timer

This example demonstrates a timer that counts down from 10 to 0 every second. The timer stops automatically when the value reaches 0 and can be reset.

```slint
import { Button } from "std-widgets.slint";
export component Example inherits Window {
    property <int> value: 10;
    timer := Timer {
        interval: 1s;
        running: true;
        triggered() => {
            value -= 1;
            if (value == 0) {
                self.running = false;
            }
        }
    }
    HorizontalLayout {
        Text { text: value; }
        Button {
            text: "Reset";
            clicked() => { value = 10; timer.running = true; }
        }
    }
}
```

--------------------------------

### Basic LineEdit Example

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/views/lineedit

A simple LineEdit widget within a VerticalBox, displaying a placeholder text.

```slint
import {
    LineEdit,
    VerticalBox
} from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 60px;


    VerticalBox {
        LineEdit {
            placeholder-text: "Enter text here";
        }
    }
}
```

--------------------------------

### Basic TouchArea Example

Source: https://docs.slint.dev/latest/docs/slint/reference/gestures/toucharea

Demonstrates a basic TouchArea that changes a rectangle's background color when clicked and its pressed state affects another rectangle's background.

```slint
export component Example inherits Window {
    width: 200px;
    height: 100px;
    area := TouchArea {
        width: parent.width;
        height: parent.height;
        clicked => {
            rect2.background = #ff0;
        }
    }
    Rectangle {
        x:0;
        width: parent.width / 2;
        height: parent.height;
        background: area.pressed ? blue: red;
    }
    rect2 := Rectangle {
        x: parent.width / 2;
        width: parent.width / 2;
        height: parent.height;
    }
}

```

--------------------------------

### Basic Rectangle Usage

Source: https://docs.slint.dev/latest/docs/slint/reference/elements/rectangle

Demonstrates creating basic rectangles with different background colors and borders. Includes examples of solid colors, gradients, and rounded corners.

```slint
export component ExampleRectangle inherits Window {
    width: 200px; height: 800px; background: transparent;

    Rectangle {
        x: 10px; y: 10px;
        width: 180px;
        height: 180px;
        background: #315afd;
    }


    // Rectangle with a border
    Rectangle {
        x: 10px; y: 210px;
        width: 180px;
        height: 180px;
        background: green;
        border-width: 2px;
        border-color: red;
    }


    // Transparent Rectangle with a border and a radius
    Rectangle {
        x: 10px; y: 410px;
        width: 180px;
        height: 180px;
        border-width: 4px;
        border-color: black;
        border-radius: 30px;
    }


    // A radius of width/2 makes it a circle
    Rectangle {
        x: 10px; y: 610px;
        width: 180px;
        height: 180px;
        background: yellow;
        border-width: 2px;
        border-color: blue;
        border-radius: self.width/2;
    }
}
```

--------------------------------

### Format Slint Files via CLI

Source: https://docs.slint.dev/latest/docs/slint/guide/tooling/manual-setup

Usage patterns for the slint-lsp format command to clean up and standardize Slint code files.

```bash
slint-lsp format <path>
slint-lsp format -i <path>
slint-lsp format /dev/stdin
```

--------------------------------

### Basic TabWidget Example

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/views/tabwidget

Demonstrates the basic structure of a TabWidget with two tabs, each containing a colored Rectangle. This is useful for creating simple tabbed interfaces.

```slint
import { TabWidget } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 200px;
    TabWidget {
        Tab {
            title: "First";
            Rectangle { background: orange; }
        }
        Tab {
            title: "Second";
            Rectangle { background: pink; }
        }
    }
}
```

--------------------------------

### Timer Control Example

Source: https://docs.slint.dev/latest/docs/slint/reference/timer

Illustrates how to control the timer's running state and stop it after a certain number of ticks.

```APIDOC
## Timer Control

### Description
This example shows a timer that ticks every 8 seconds and stops itself after 5 ticks.

### Code Snippet
```slint
property <int> count: 0;
Timer {
    interval: 8s; // every 8 seconds the timer will activate (tick)
    triggered() => { // The triggered callback activates every time the timer ticks
        if count >= 5 {
            self.running = false; // stop the timer after 5 ticks
        }
        count += 1;
    }
}
```
```

--------------------------------

### Basic Flickable Example

Source: https://docs.slint.dev/latest/docs/slint/reference/gestures/flickable

Demonstrates a basic Flickable with text that requires scrolling to view. The viewport-height is set to allow scrolling.

```slint
export component Example inherits Window {
    width: 270px;
    height: 100px;


    Flickable {
        viewport-height: 300px;
        Text {
            x:0;
            y: 150px;
            text: "This is some text that you have to scroll to see";
        }
    }
}

```

--------------------------------

### Wasm Entry Point and Application Code

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/web

Use the wasm_bindgen(start) attribute to mark the application's entry point. The UI is created and run as usual within the main function.

```rust
#[cfg(target_family = "wasm")]
use wasm_bindgen::prelude::*;


slint::include_modules!(); // or slint!(...)


#[cfg_attr(target_family = "wasm", wasm_bindgen(start))]
pub fn main() {
    // Usual application code
    let main_window = MainWindow::new().unwrap();
    main_window.run().unwrap();
}
```

--------------------------------

### Rotated Conic Gradient Example

Source: https://docs.slint.dev/latest/docs/slint/reference/colors-and-brushes

Demonstrates a conic gradient rotated by 90 degrees clockwise. This shifts the starting position of the color transitions.

```slint
export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;
    Rectangle {
        background: @conic-gradient(from 90deg, #f00 0deg, #0f0 120deg, #00f 240deg, #f00 360deg);
    }
}
```

--------------------------------

### Load Demo to Raspberry Pi Pico 2 using picotool (Linux)

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

On Linux, this command uploads the built demo to the Raspberry Pi Pico 2. It requires `picotool` to be built from source and the device to be connected while holding the 'bootsel' button.

```bash
# If you're on Linux: mount the device
udisksctl mount -b /dev/sda1
# upload
picotool load -u -v -x -t elf target/thumbv8m.main-none-eabihf/release/printerdemo_mcu

```

--------------------------------

### Initializing TextEdit

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/views/textedit

Shows how to set the initial text content of a TextEdit widget.

```slint
TextEdit {
    text: "Initial text";
}

```

--------------------------------

### Run Slint Demos via Docker CLI on Torizon OS

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Execute Slint demos on a Torizon OS device using the docker run command. This example uses the i.MX8 GPU build. Adjust the image name for other platforms.

```bash
sudo docker run --rm --privileged \
  --user=torizon \
  -v /dev:/dev \
  -v /tmp:/tmp \
  -v /run/udev:/run/udev \
  --device-cgroup-rule='c 199:* rmw' \
  --device-cgroup-rule='c 226:* rmw' \
  --device-cgroup-rule='c 13:* rmw' \
  --device-cgroup-rule='c 4:* rmw' \
  ghcr.io/slint-ui/slint/torizon-demos-arm64-imx8

```

--------------------------------

### Install wasm-pack using Cargo

Source: https://docs.slint.dev/latest/docs/slint/tutorial/running_in_a_browser

Installs the wasm-pack tool, which is necessary for building Rust code into WebAssembly modules.

```bash
cargo install wasm-pack

```

--------------------------------

### SwipeGestureHandler Example

Source: https://docs.slint.dev/latest/docs/slint/reference/gestures/swipegesturehandler

This example demonstrates how to use SwipeGestureHandler to create a horizontal carousel. It handles swipe-right and swipe-left gestures to navigate between pages, with visual feedback during the swipe.

```slint
export component Example inherits Window {
    width: 270px;
    height: 100px;


    property <int> current-page: 0;


    sgr := SwipeGestureHandler {
        handle-swipe-right: current-page > 0;
        handle-swipe-left: current-page < 5;
        swiped => {
            if self.current-position.x > self.pressed-position.x + self.width / 4 {
                current-page -= 1;
            } else if self.current-position.x < self.pressed-position.x - self.width / 4 {
                current-page += 1;
            }
        }


        HorizontalLayout {
            property <length> position: - current-page * root.width;
            animate position { duration: 200ms; easing: ease-in-out; }
            property <length> swipe-offset;
            x: position + swipe-offset;
            states [
                swiping when sgr.swiping : {
                    swipe-offset: sgr.current-position.x - sgr.pressed-position.x;
                    out { animate swipe-offset { duration: 200ms; easing: ease-in-out; }  }
                }
            ]


            Rectangle { width: root.width; background: green; }
            Rectangle { width: root.width; background: limegreen; }
            Rectangle { width: root.width; background: yellow; }
            Rectangle { width: root.width; background: orange; }
            Rectangle { width: root.width; background: red; }
            Rectangle { width: root.width; background: violet; }
        }
    }
}
```

--------------------------------

### Timer with Running Property Set to False

Source: https://docs.slint.dev/latest/docs/slint/reference/timer

This timer is initialized with `running: false`, meaning it will not start automatically. The `triggered` callback is defined but will not execute until the timer is explicitly started.

```slint
Timer {
    property <int> count: 0;
    interval: 250ms;
    running: false; // timer is not running
    triggered() => {
        debug("count is:", count);
    }
}
```

--------------------------------

### Recommended Project Directory Structure

Source: https://docs.slint.dev/latest/docs/slint/guide/development/best-practices

Adopt a clear directory structure to manage project growth and improve maintainability. Separate business logic, UI definitions, and assets.

```plaintext
my-project
├── src
│   ├── main.cpp / main.rs / main.js / main.py
│        <this is where your main business logic lives>
├── ui
    ├── app-window.slint <the entry point for your Slint UI>
    ├── <additional .slint files here>
    ├── images
        ├── logo.svg
        ├── highlight-marker.svg
        ├── <all your images go here>

```

--------------------------------

### Flash Printer Demo to Raspberry Pi Pico

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

After installing `elf2uf2-rs`, connect the Pico in bootloader mode (holding 'bootsel' button) and use this command to flash the demo. The device will appear as a storage device named `RPI-RP2`.

```bash
elf2uf2-rs -d target/thumbv6m-none-eabi/release/printerdemo_mcu

```

--------------------------------

### Slint Custom Button Widget Example

Source: https://docs.slint.dev/latest/docs/slint/guide/development/custom-controls

Defines and uses a custom `Button` widget in Slint. This example shows how to create reusable UI components with custom styling, properties, and callbacks.

```slint
component Button inherits Rectangle {
    in-out property text <=> txt.text;
    callback clicked <=> touch.clicked;
    border-radius: root.height / 2;
    border-width: 1px;
    border-color: root.background.darker(25%);
    background: touch.pressed ? #6b8282 : touch.has-hover ? #6c616c :  #456;
    height: txt.preferred-height * 1.33;
    min-width: txt.preferred-width + 20px;
    txt := Text {
        x: (parent.width - self.width)/2 + (touch.pressed ? 2px : 0);
        y: (parent.height - self.height)/2 + (touch.pressed ? 1px : 0);
        color: touch.pressed ? #fff : #eee;
    }
    touch := TouchArea { }
}


export component Recipe inherits Window {
    VerticalLayout {
        alignment: start;
        Button { text: "Button"; }
    }
}
```

--------------------------------

### Run Specific Slint Demo via Docker CLI

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Launch a particular Slint demo, such as 'printerdemo', on a Torizon OS device using Docker. This command includes necessary volume mounts and device cgroup rules.

```bash
sudo docker run --rm --privileged --user=torizon \
  -v /dev:/dev -v /tmp:/tmp -v /run/udev:/run/udev \
  --device-cgroup-rule='c 199:* rmw' --device-cgroup-rule='c 226:* rmw' \
  --device-cgroup-rule='c 13:* rmw' --device-cgroup-rule='c 4:* rmw' \
  ghcr.io/slint-ui/slint/torizon-demos-arm64-imx8 printerdemo

```

--------------------------------

### Setting SpinBox Value

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/basic-widgets/spinbox

Demonstrates how to set the initial value of a SpinBox.

```slint
SpinBox {
    value: 50;
}
```

--------------------------------

### Basic TextInput Example

Source: https://docs.slint.dev/latest/docs/slint/reference/keyboard-input/textinput

This example demonstrates a basic TextInput component within a Rectangle. It includes custom logic to adjust the TextInput's position based on cursor movement to keep it within visible margins. The TextInput's width is set to be the maximum of its parent's width and its preferred width, and it's vertically centered.

```slint
export component Example inherits Window {
    width: 270px;
    height: 40px;
    Rectangle {
        clip: true;


        TextInput {
            text: "Edit me";
            width: max(parent.width, self.preferred-width);
            vertical-alignment: center;


            private property <length> margin: 1rem;
            cursor-position-changed(cursor-position) => {
                if cursor-position.x + self.x < margin {
                    self.x = - cursor-position.x + margin;
                } else if cursor-position.x + self.x > parent.width - margin - self.text-cursor-width {
                    self.x = parent.width - cursor-position.x - margin - self.text-cursor-width;
                }
            }
        }
    }
}
```

--------------------------------

### Basic FocusScope with Key Handling

Source: https://docs.slint.dev/latest/docs/slint/reference/keyboard-input/focusscope

This example demonstrates a FocusScope that captures key presses, including modifier keys and specific key combinations like Escape and Control+X. It logs events to the debug console.

```slint
export component Example inherits Window {
    width: 100px;
    height: 100px;
    forward-focus: my-key-handler;
    my-key-handler := FocusScope {
        key-pressed(event) => {
            debug(event.text);
            if (event.modifiers.control) {
                debug("control was pressed during this event");
            }
            if (event.text == Key.Escape) {
                debug("Esc key was pressed")
            }
            accept
        }


        KeyBinding {
            keys: @keys(Control + X);
            activated => {
                debug("Control + X pressed")
            }
        }
    }
}
```

--------------------------------

### ScrollView with Scrolled Callback

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/views/scrollview

Example of using the ScrollView widget and implementing the `scrolled()` callback to log the current viewport position.

```APIDOC
```slint
import { ScrollView } from "std-widgets.slint";

export component Example inherits Window {
    width: 200px;
    height: 200px;

    ScrollView {
        width: 200px;
        height: 200px;
        viewport-width: 300px;
        viewport-height: 300px;

        Rectangle { width: 30px; height: 30px; x: 275px; y: 50px; background: blue; }
        Rectangle { width: 30px; height: 30px; x: 175px; y: 130px; background: red; }
        Rectangle { width: 30px; height: 30px; x: 25px; y: 210px; background: yellow; }
        Rectangle { width: 30px; height: 30px; x: 98px; y: 55px; background: orange; }

        scrolled() => {
            debug("viewport-x: ", self.viewport-x);
            debug("viewport-y: ", self.viewport-y);
        }
    }
}
```
```

--------------------------------

### Configuring TableView Columns

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/views/standardtableview

Shows how to define the columns for a StandardTableView, including setting titles and other properties like minimum width and stretch factor.

```slint
StandardTableView {
    columns: [{ title: "Header 1" }, { title: "Header 2" }];
    rows: [[{ text: "Item 1" }, { text: "Item 2" }]];
}
```

--------------------------------

### SwipeGestureHandler Configuration

Source: https://docs.slint.dev/latest/docs/slint/reference/gestures/swipegesturehandler

Configure swipe directions and handle the 'swiped' callback. The example demonstrates how to use SwipeGestureHandler to navigate pages.

```APIDOC
## SwipeGestureHandler

Use the `SwipeGestureHandler` to handle swipe gestures in some particular direction. Recognition is limited to the element’s geometry.
The `SwipeGestureHandler` recognizes touchscreen swipes and mouse drags.

### Properties
* **enabled** (bool): When disabled, the `SwipeGestureHandler` doesn’t recognize any gestures. Default: `true`
* **pressed-position** (struct Point `(out)`): The position of the pointer when the swipe started. Default: `a struct with all default values`
* **current-position** (struct Point `(out)`): The current pointer position. Default: `a struct with all default values`
* **swiping** (bool `(out)`): `true` while the gesture is recognized, false otherwise. Default: `false`

### Handle swipe directions properties
* **handle-swipe-left** (bool): Default: `false`
* **handle-swipe-right** (bool): Default: `false`
* **handle-swipe-up** (bool): Default: `false`
* **handle-swipe-down** (bool): Default: `false`

### Callbacks
* **moved()**: Invoked when the pointer is moved.
* **swiped()**: Invoked after the swipe gesture was recognized and the pointer was released.
* **cancelled()**: Invoked when the swipe is cancelled programmatically or if the window loses focus.

### Functions
* **cancel()**: Cancel any on-going swipe gesture recognition.
```

--------------------------------

### VSCode Launch Configuration for Debugging

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Configure your `.vscode/launch.json` to flash and debug the MCU demo on the Raspberry Pi Pico. This configuration uses the `probe-rs-debug` type and specifies the `release-with-debug` binary.

```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "preLaunchTask": "build mcu demo for pico",
            "type": "probe-rs-debug",
            "request": "launch",
            "name": "Flash and Debug MCU Demo",
            "cwd": "${workspaceFolder}",
            "connectUnderReset": false,
            "chip": "RP2040",
            "flashingConfig": {
                "flashingEnabled": true,
                "resetAfterFlashing": true,
                "haltAfterReset": true
            },
            "coreConfigs": [
                {
                    "coreIndex": 0,
                    "rttEnabled": true,
                    "programBinary": "./target/thumbv6m-none-eabi/release-with-debug/printerdemo_mcu"
                }
            ]
        },
    ]
}
```

--------------------------------

### Basic HorizontalLayout Example

Source: https://docs.slint.dev/latest/docs/slint/reference/layouts/horizontallayout

Demonstrates how to use HorizontalLayout to arrange child elements with fixed and stretched widths. Elements without a fixed width are computed by the layout respecting minimum/maximum sizes and stretch factors.

```slint
export component Foo inherits Window {
    width: 200px;
    height: 100px;
    HorizontalLayout {
        spacing: 5px;
        Rectangle { background: red; width: 10px; }
        Rectangle { background: blue; min-width: 10px; }
        Rectangle { background: yellow; horizontal-stretch: 1; }
        Rectangle { background: green; horizontal-stretch: 2; }
    }
}

```

--------------------------------

### Text Horizontal Alignment

Source: https://docs.slint.dev/latest/docs/slint/reference/elements/text

Aligns the text to the left edge of its containing box. Other options include 'start', 'end', 'center', and 'right'.

```slint
Text {
    x: 0;
    text: "Hello";
    color: black;
    font-size: 40pt;
    horizontal-alignment: left;
}

```

--------------------------------

### Handling Canceled Callback in TimePickerPopup

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/misc/timepicker

This example demonstrates how to handle the `canceled` callback for the TimePickerPopup. This callback is invoked when the user clicks the cancel button.

```slint
time-picker := TimePickerPopup {
    canceled() => {
        time-picker.close();
    }
}

```

--------------------------------

### Setting CheckBox Label Text

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/basic-widgets/checkbox

Example of defining the label text displayed next to the checkbox component.

```slint
CheckBox {
    text: "CheckBox with text";
}
```

--------------------------------

### Radial Gradient Example

Source: https://docs.slint.dev/latest/docs/slint/reference/colors-and-brushes

Creates a rectangle with a circular radial gradient background. The colors transition from red to green to blue at specified percentages.

```slint
export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;
    Rectangle {
        background: @radial-gradient(circle, #f00 0%, #0f0 50%, #00f 100%);
    }
}
```

--------------------------------

### Preview Designs with slint-viewer using --style Argument

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/style

Select the widget style for previewing Slint designs with the `slint-viewer` command-line tool by using the `--style` argument.

```bash
slint-viewer --style material /path/to/design.slint
```

--------------------------------

### Basic String Initialization

Source: https://docs.slint.dev/latest/docs/slint/reference/primitive-types

Demonstrates how to initialize a string property in a Slint component.

```slint
export component Example inherits Text {
    text: "hello";
}
```

--------------------------------

### Linear Gradient Example

Source: https://docs.slint.dev/latest/docs/slint/reference/colors-and-brushes

Defines a rectangle with a background that transitions through three colors using a linear gradient. The gradient is oriented at 90 degrees.

```slint
export component Example inherits Window {
    preferred-width: 100px;
    preferred-height: 100px;


    Rectangle {
        background: @linear-gradient(90deg, #3f87a6 0%, #ebf8e1 50%, #f69d3c 100%);
    }
}
```

--------------------------------

### Handle DatePickerPopup Acceptance

Source: https://docs.slint.dev/latest/docs/slint/reference/std-widgets/misc/datepicker

Specifies the action to take when the user confirms their date selection in the DatePickerPopup. This example logs the selected date and closes the popup.

```slint
date-picker := DatePickerPopup {
    accepted(date) => {
        debug("Selected date: ", date);
        date-picker.close();
    }
}

```

--------------------------------

### Stretch Algorithm Examples

Source: https://docs.slint.dev/latest/docs/slint/guide/language/coding/positioning-and-layouts

Demonstrates how the 'horizontal-stretch' and 'vertical-stretch' properties influence element sizing within layouts when the alignment is set to stretch. Elements with larger stretch factors or minimum sizes will occupy more space.

```slint
export component Example inherits Window {
    width: 300px;
    height: 200px;
    VerticalLayout {
        // Same stretch factor (1 by default): the size is divided equally
        HorizontalLayout {
            Rectangle { background: blue; }
            Rectangle { background: yellow;}
            Rectangle { background: green;}
        }
        // Elements with a bigger min-width are given a bigger size before they expand
        HorizontalLayout {
            Rectangle { background: cyan; min-width: 100px;}
            Rectangle { background: magenta; min-width: 50px;}
            Rectangle { background: gold;}
        }
        // Stretch factor twice as big:  grows twice as much
        HorizontalLayout {
            Rectangle { background: navy; horizontal-stretch: 2;}
            Rectangle { background: gray; }
        }
        // All elements not having a maximum width have a stretch factor of 0 so they grow
        HorizontalLayout {
            Rectangle { background: red; max-width: 20px; }
            Rectangle { background: orange; horizontal-stretch: 0; }
            Rectangle { background: pink; horizontal-stretch: 0; }
        }
    }
}
```

--------------------------------

### Build Slint Printer Demo for Raspberry Pi Pico 2

Source: https://docs.slint.dev/latest/docs/slint/guide/platforms/embedded

Command to build the Slint Printer demo for the Raspberry Pi Pico 2, using a different target architecture (`thumbv8m.main-none-eabihf`) and feature flag.

```bash
cargo build -p printerdemo_mcu --no-default-features --features=mcu-board-support/pico2-st7789 --target=thumbv8m.main-none-eabihf --release

```