Telemetrix/ui/app-window.slint

// Copyright (C) 2026 Hector van der Aa <hector@h3cx.dev>
// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
// SPDX-License-Identifier: GPL-3.0-or-later

import { VerticalBox, Button } from "std-widgets.slint";
import { Palette } from "palette.slint";
import { DataWindow } from "components/data-window.slint";

component StatusBadge {
    in property <string> label;
    in property <brush> color;

    horizontal-stretch: 0;
    HorizontalLayout {
        spacing: 6px;
        Rectangle {
            width: 10px;
            height: 10px;
            background: color;
            border-radius: self.width / 2;
            y: (parent.height - self.height) / 2;
        }

        Text {
            text: label;
            color: Palette.text-primary;
            vertical-alignment: center;
            font-size: 14px;
        }
    }
}

component MenuButton {
    in property <string> text;
    callback clicked;

    height: 28px;

    Rectangle {
        border-width: 2px;
        border-color: area.has-hover ? Palette.brand : Palette.border;
        border-radius: 8px;

        background: area.pressed ? Palette.brand : area.has-hover ? Palette.bg-hover : Palette.bg-main;

        HorizontalLayout {
            padding-left: 12px;
            padding-right: 12px;

            Text {
                text: root.text;
                font-size: 14px;
                color: Palette.text-primary;
                vertical-alignment: center;
                horizontal-alignment: center;
            }
        }

        area := TouchArea {
            mouse-cursor: pointer;

            clicked => {
                root.clicked();
            }
        }
    }
}

export component AppWindow inherits Window {
    title: "My App";

    // Allow WM to resize normally
    min-width: 400px;
    min-height: 300px;

    preferred-width: 900px;
    preferred-height: 600px;

    VerticalBox {
        width: 100%;
        height: 100%;

        spacing: 0;
        padding: 0;

        // Top bar
        Rectangle {
            height: 40px;
            width: 100%;
            background: Palette.bg-main;

            HorizontalLayout {
                padding: 6px;
                spacing: 6px;

                MenuButton {
                    text: "Connect";
                }

                MenuButton {
                    text: "Window";
                }

                Rectangle {
                    horizontal-stretch: 1;
                }

                MenuButton {
                    text: "Setting";
                }
            }
        }

        Rectangle {
            width: 100%;
            height: 2px;
            background: Palette.brand;
        }

        // Main content
        Rectangle {
            background: Palette.bg-secondary;
            horizontal-stretch: 1;
            vertical-stretch: 1;
            Rectangle {
                width: parent.width / 2;
                height: parent.height / 2;
                x: 0px;
                y: 0px;
                DataWindow {
                    data1: [
                        { label: "Engine Temp", value: 97, unit: " °C" },
                        { label: "Engine RPM", value: 2573, unit: " RPM" },
                        { label: "Engine Map", value: 7, unit: "" },
                        { label: "Fuel Rate", value: 0.62, unit: " L/h" },
                        { label: "Injector PW", value: 2.7, unit: " ms" },
                        { label: "Ignition Adv", value: 21, unit: " °" },
                    ];
                    data2: [
                        { label: "GPS Speed", value: 38.9, unit: " km/h" },
                        { label: "GPS Satellites", value: 14, unit: "" },
                        { label: "Tank Pressure", value: 101.7, unit: " kPa" },
                        { label: "Air Temp", value: 24, unit: " °C" },
                        { label: "Humidity", value: 42, unit: " %" },
                        { label: "Barometric", value: 1012, unit: " hPa" }
                    ];
                }
            }

            Rectangle {
                width: parent.width / 2;
                height: parent.height / 2;
                x: parent.width / 2;
                y: 0px;
                DataWindow {
                    data1: [
                        { label: "Engine Temp", value: 97, unit: " °C" },
                        { label: "Engine RPM", value: 2573, unit: " RPM" },
                        { label: "Engine Map", value: 7, unit: "" },
                        { label: "Fuel Rate", value: 0.62, unit: " L/h" },
                        { label: "Injector PW", value: 2.7, unit: " ms" },
                        { label: "Ignition Adv", value: 21, unit: " °" },
                    ];
                    data2: [
                        { label: "GPS Speed", value: 38.9, unit: " km/h" },
                        { label: "GPS Satellites", value: 14, unit: "" },
                        { label: "Tank Pressure", value: 101.7, unit: " kPa" },
                        { label: "Air Temp", value: 24, unit: " °C" },
                        { label: "Humidity", value: 42, unit: " %" },
                        { label: "Barometric", value: 1012, unit: " hPa" }
                    ];
                }
            }
        }

        Rectangle {
            width: 100%;
            height: 2px;
            background: Palette.brand;
        }

        Rectangle {
            height: 32px;
            background: Palette.bg-main;
            width: 100%;

            HorizontalLayout {
                height: 100%;
                width: 100%;
                padding-top: 6px;
                padding-bottom: 6px;
                padding-left: 10px;
                padding-right: 10px;
                spacing: 20px;

                StatusBadge {
                    label: "LoRa";
                    color: Palette.success;
                }

                StatusBadge {
                    label: "V-Link";
                    color: Palette.error;
                }

                Rectangle {
                    horizontal-stretch: 0;
                    height: parent.height - (2 * parent.padding-top);
                    width: 2px;
                    background: Palette.bg-secondary;
                }

                Rectangle {
                    horizontal-stretch: 1;
                    Text {
                        text: "ENGINE [WARNING] - High Engine Temperature";
                        font-size: 14px;
                        color: Palette.text-primary;
                    }
                }

                Rectangle {
                    horizontal-stretch: 0;
                    height: parent.height - (2 * parent.padding-top);
                    width: 2px;
                    background: Palette.bg-secondary;
                }

                StatusBadge {
                    label: "Engine";
                    color: Palette.warning;
                }

                StatusBadge {
                    label: "ECU";
                    color: Palette.success;
                }

                StatusBadge {
                    label: "Telemetry";
                    color: Palette.success;
                }
            }
        }
    }
}