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

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


export component Lamp inherits Control {
    in property <length> tilePadding: (root.height > Measurements.small-height-tile) ? 18px : 9px;

    show-label: false;
    tile-shadow-blur: 0px;

    tile := Rectangle {
        width: 100%;
        height: 100%;

        Rectangle {
            x: tile.width - self.width + 20px;
            width: 70%;
            height: 100%;

            Image {
                y: 0;
                source: @image-url("../images/lamp/0000.png");
            }
            Image {
                y: 0;
                source: @image-url("../images/lamp/0024.png");
                opacity: slider.value / 24;
            }
        }

        v := VerticalLayout {
            padding: tilePadding;
            width: 100%;
            height: 100%;
            alignment: space-between;
            HaText {
                text: root.name;
                font-size: Style.tile-title-font-size;
                font-weight: 200;
                color: white;
            }

            slider := FancySlider {
                maxValue: 24;
                value: 22;
                width: root.width * 0.8;
                icon: @image-url("../images/brightness.svg");
                colorize-icon: Colors.black;
            }
        }
    }
    TouchArea {
        clicked => {
            AppState.end-kiosk-mode();
            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;
            }
        }
    }
}