slint/demos/home-automation/ui/components/overhead.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { Palette, Measurements } from "../common.slint";
import { FancySlider } from "general/fancySlider.slint";
import { HaText } from "general/haText.slint";
import { Control } from "control.slint";

export component Overhead inherits Control {
    show-label: false;
    full-screen: false;
    tile-shadow-blur: 0px;
    control-background: @image-url("../images/overhead-frame.png", nine-slice(50));

    in property <length> tilePadding: (root.height > Measurements.small-height-tile) ? 18px : 9px;
    tile := Rectangle {
        width: 100%;
        height: 100%;

        TouchArea {
            clicked => {
                slider.toggle();
            }
        }

        VerticalLayout {
            alignment: space-between;
            padding: tilePadding;
            width: 100%;
            height: 100%;
            HaText {
                text: root.name;
                font-size: 15pt;
                font-weight: 400;
                color: Palette.overhead-foreground;
            }

            slider := FancySlider {
                width: (root.height < Measurements.medium-height-tile) ? root.width - 0 - 18px : root.width * 0.8;
                value: 0.0;
                icon: @image-url("../images/brightness.svg");
            }
        }
    }
    TouchArea {
        clicked => {
            if self.mouse-x == slider.initial-position {
                slider.anim-duration = 300ms;
                slider.animated-value = (self.mouse-x / self.width) * (slider.maxValue - slider.minValue) + slider.minValue;
            }
        }
        moved => {
            if !slider.first-touch {
                slider.first-touch = true;
                slider.initial-position = self.mouse-x;
                slider.initial-value = (self.mouse-x / self.width) * (slider.maxValue - slider.minValue) + slider.minValue;
                slider.previous-value = slider.value;
                slider.anim-duration = 0ms;
            } else {
                slider.change-value = ((self.mouse-x / self.width) * (slider.maxValue - slider.minValue) + slider.minValue) - slider.initial-value;
                slider.value = Math.clamp(slider.previous-value + slider.change-value, slider.minValue, slider.maxValue);
                slider.animated-value = slider.value;
            }
        }

        changed pressed => {
            if !self.pressed {
                slider.first-touch = false;
            }
        }
    }
}