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

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

export component Camera inherits Control {
    property <int> current-page: AppState.current-page;
    property <bool> unlocked: false;
    property <image> cam: @image-url("../images/front-porch.jpg");
    property <bool> is-active: false;

    tile := Rectangle {
        x: 0cm;
        Rectangle {
            border-radius: Measurements.tile-radius;
            clip: true;
            Image {
                source: root.cam;
                width: tile.width;
                image-fit: cover;
                height: tile.height;
                horizontal-alignment: center;
                vertical-alignment: center;
            }
        }

        VerticalLayout {
            alignment: end;
            spacing: 5px;
            padding: 5px;
            HorizontalLayout {
                width: tile.width;
                alignment: start;
                padding-left: 10px;
            }

            controls := Rectangle {
                border-radius: 20px;
                width: 95%;
                height: self.preferred-height;
                background: Palette.music-gradient.transparentize(0.2);
                animate height {
                    duration: 1000ms;
                    easing: ease-in-out-sine;
                }
                HorizontalLayout {
                    alignment: space-around;
                    padding-top: 15px;
                    padding-bottom: 15px;
                }
            }
        }

        TouchArea {
            enabled: !AppState.showing-full-screen;
            clicked => {
                AppState.showFullScreen(root.index);
            }
        }

        Image {
            source: @image-url("../images/enlarge.svg");
            opacity: root.full-screen ? 0 : 1;
            width: 40px;
            colorize: Colors.white;
            x: root.width - self.width - 30px;
            y: 30px;
            animate opacity {
                duration: 500ms;
                easing: ease-in-out-sine;
            }
        }

        closeButton := Image {
            opacity: root.full-screen ? 1 : 0;
            animate opacity {
                duration: 500ms;
                easing: ease-in-out-sine;
            }
            source: @image-url("../images/reduce.svg");
            colorize: white;
            x: root.width - self.width - 30px;
            y: 30px;
            width: 60px;
            height: 60px;
        }

        TouchArea {
            enabled: closeButton.opacity > 0.1;
            clicked => {
                root.full-screen = false;
                AppState.showFullScreen(-1);
            }
        }
    }
}