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

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

enum CameraView {
    front,
    back
}
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;
    property <CameraView> camera-view: CameraView.front;
    control-background: @image-url("../images/overhead-frame.png", nine-slice(50));

    function toggle-view() {
        if camera-view == CameraView.front {
            camera-view = CameraView.back;
        } else {
            camera-view = CameraView.front;
        }
    }

    tile := Rectangle {
        x: 0;
        Image {
            x: 1px;
            source: root.cam;
            width: tile.width - 2px;
            image-fit: cover;
            height: 60%;
            horizontal-alignment: center;
            vertical-alignment: center;
        }

        Image {
            x: 1px;
            source: @image-url("../images/back-yard.jpg");
            width: tile.width - 2px;
            image-fit: cover;
            height: 60%;
            horizontal-alignment: center;
            vertical-alignment: center;
            opacity: camera-view == CameraView.back ? 1 : 0;
            animate opacity {
                duration: 300ms;
                easing: ease-in-out-sine;
            }
        }


        TouchArea {
            clicked => {
                toggle-view();
            }
        }

        HaText {
            y: root.height - self.height - 10px;
            text: camera-view == CameraView.back ? "Back Yard" : "Front Porch";
            color: Colors.white;
            font-size: 1.5rem;
            font-weight: 200;
        }
    }

    Timer {
        interval: 2s;
        running: AppState.kiosk-mode;
        triggered => {
            toggle-view();
        }
    }
}