slint/examples/wgpu_texture/scene.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { Slider, GroupBox, HorizontalBox, VerticalBox, GridBox } from "std-widgets.slint";

export component App inherits Window {
    in property <image> texture <=> image.source;
    out property <int> requested-texture-width: image.width/1phx;
    out property <int> requested-texture-height: image.height/1phx;
    out property <float> selected-red <=> red.value;
    out property <float> selected-green <=> green.value;
    out property <float> selected-blue <=> blue.value;

    preferred-width: 500px;
    preferred-height: 600px;
    title: "Slint WGPU Texture Example";
    icon: @image-url("../../logo/slint-logo-small-light.png");

    VerticalBox {
        Text {
            text: "This text is rendered using Slint. The rotating cube below is rendered into an OpenGL texture.";
            wrap: word-wrap;
        }

        image := Image {
            preferred-width: 640px;
            preferred-height: 640px;
            min-width: 64px;
            min-height: 64px;
            width: 100%;
            //height: 100%;
        }

        GroupBox {
            title: "Cube Color Controls";

            GridBox {
                Row {
                    Text {
                        text: "Red:";
                        vertical-alignment: center;
                    }

                    red := Slider {
                        minimum: 0.1;
                        maximum: 1.0;
                        value: 0.2;
                    }
                }

                Row {
                    Text {
                        text: "Green:";
                        vertical-alignment: center;
                    }

                    green := Slider {
                        minimum: 0.1;
                        maximum: 1.0;
                        value: 0.5;
                    }
                }

                Row {
                    Text {
                        text: "Blue:";
                        vertical-alignment: center;
                    }

                    blue := Slider {
                        minimum: 0.1;
                        maximum: 1.0;
                        value: 0.9;
                    }
                }
            }
        }
    }
}