slint/examples/plotter/plotter.slint

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

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

export component MainWindow inherits Window {
    in-out property <float> pitch: 0.15;
    in-out property <float> yaw: 0.5;

    pure callback render_plot(/* pitch */ float, /* yaw */ float, /* amplitude */ float) -> image;

    title: "Slint Plotter Integration Example";
    preferred-width: 800px;
    preferred-height: 600px;

    VerticalBox {
        Text {
            font-size: 20px;
            text: "2D Gaussian PDF";
            horizontal-alignment: center;
        }

        Image {
            source: root.render_plot(root.pitch, root.yaw, amplitude-slider.value / 10);
            touch := TouchArea {
                property <float> pressed-pitch;
                property <float> pressed-yaw;

                pointer-event(event) => {
                    if (event.button == PointerEventButton.left && event.kind == PointerEventKind.down) {
                        self.pressed-pitch = root.pitch;
                        self.pressed-yaw = root.yaw;
                    }
                }
                moved => {
                    if (self.enabled && self.pressed) {
                        root.pitch = self.pressed-pitch + (touch.mouse-y - touch.pressed-y) / self.height * 3.14;
                        root.yaw = self.pressed-yaw - (touch.mouse-x - touch.pressed-x) / self.width * 3.14;
                    }
                }
                mouse-cursor: self.pressed ? MouseCursor.grabbing : MouseCursor.grab;
            }
        }

        HorizontalBox {
            Text {
                text: "Amplitude:";
                font-weight: 600;
                vertical-alignment: center;
            }

            amplitude-slider := Slider {
                minimum: 0;
                maximum: 100;
                value: 50;
            }
        }
    }
}