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

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

export component ArmButton inherits Rectangle {
    callback clicked <=> ta.clicked;
    in property <int> label;
    background: ta.pressed ? Palette.control-alternate-background.transparentize(0.5) : Palette.control-alternate-background;
    border-radius: 10px;
    width: 130px;
    height: 95px;
    HaText {
        font-size: root.label == -2 ? Style.H1-font-size * 0.6 : Style.H2-font-size;
        text: root.label == -2 ? "⌫" : root.label;
        color: Palette.control-alternate-foreground;
        visible: root.label != -1;
    }

    ta := TouchArea {
        enabled: root.label != -1;
    }
}

export component Alarm inherits Control {
    property <int> current-page: AppState.current-page;
    property <bool> unlocked: false;
    property <bool> is-active: false;
    property <string> passcode;
    property <string> indirect-passcode: passcode == "-1" ? "" : passcode;
    show-label: false;

    hidden-text := HaText {
        font-size: Style.H1-font-size;
        text: root.indirect-passcode;
        opacity: 0;
    }

    content := Rectangle {
        TouchArea {
            clicked => {
                AppState.showFullScreen(root.index);
            }
        }

        HaText {
            visible: root.full-screen;
            text: "Enter Code";
            horizontal-alignment: center;
            font-size: Style.H2-font-size;
            color: Palette.hvac-knob-foreground;
            font-weight: 300;
            x: parent.width / 2 - self.width / 2;
            y: 100px;
        }

        Rectangle {
            drop-shadow-blur: Measurements.tile-shadow-blur * 10;
            drop-shadow-color: Palette.glow-color;
            width: 70%;
            height: 70%;
            VerticalLayout {
                visible: !root.full-screen;
                alignment: center;
                spacing: 80px;
                HaText {
                    text: "Home Alarm \nOff";
                    horizontal-alignment: center;
                    font-size: Style.H2-font-size;
                    color: Palette.hvac-knob-foreground;
                    font-weight: 300;
                    x: parent.width / 2 - self.width / 2;
                }

                Rectangle {
                    width: 100%;
                    height: 50px;
                    border-radius: self.height / 2;
                    background: Palette.alternate-background;

                    HaText {
                        text: "Arm Alarm";
                        color: Palette.foreground;
                        font-size: 2rem;
                    }
                }
            }

            Rectangle {
                width: 400px;
                states [
                    isVisible when root.full-screen: {
                        opacity: 1;
                        in {
                            animate opacity {
                                duration: 300ms;
                                easing: ease-in-out-sine;
                            }
                        }
                    }
                    notVisible when !root.full-screen: {
                        opacity: 0;
                        in {
                            animate opacity {
                                duration: 300ms;
                                easing: ease-in-out-sine;
                            }
                        }
                    }
                ]
                x: parent.width / 2 - self.width / 2;
                Rectangle {
                    width: 130px * 3 + 2 * 10px;
                    height: (95px * 5) + (4 * 10px);
                    visible: root.full-screen;

                    container := Rectangle {
                        y: 0;
                        border-radius: 10px;
                        width: 100%;
                        height: 95px;
                        background: Palette.alternate-background;
                        le := LineEdit {
                            font-size: Style.H1-font-size;
                            text: root.indirect-passcode;
                            input-type: password;
                            width: Math.max(290px, hidden-text.width);
                            changed width => {
                                if self.width > 300px {
                                    root.passcode = -1;
                                }
                            }
                        }

                        mask := Rectangle {
                            width: le.width + (17px * 2);
                            height: container.height - 1px;
                            x: le.x - 17px;
                            y: container.y + 1px;
                            border-width: 18px;
                            border-color: Palette.lineedit-background;
                        }

                        Rectangle {
                            width: (container.width - mask.width) / 2;
                            height: container.height;
                            x: container.x;
                            y: container.y;
                            border-radius: 10px;
                            background: Palette.lineedit-background;
                        }

                        Rectangle {
                            width: (container.width - mask.width) / 2;
                            height: container.height;
                            x: mask.x + mask.width;
                            y: container.y;
                            border-radius: 10px;
                            background: Palette.lineedit-background;
                        }
                    }

                    TouchArea { }

                    for row-model[r] in [
                        [1, 2, 3],
                        [4, 5, 6],
                        [7, 8, 9],
                        [-1, 0, -2],
                    ]: Rectangle {
                        y: (r * 105px) + 105px;
                        width: 100%;
                        height: 170px;

                        HorizontalLayout {
                            spacing: 10px;
                            for num[c] in row-model: ArmButton {
                                label: num;
                                clicked => {
                                    if num >= 0 && root.passcode == -1 {
                                        root.passcode = num;
                                    } else if num >= 0 {
                                        root.passcode += num;
                                    } else if num == -2 {
                                        root.passcode = -1;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        x: 0;
        VerticalLayout {
            alignment: end;
            spacing: 5px;
            padding: 5px;

            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;
                }
            }
        }
    }

    closeButton := Image {
        opacity: root.full-screen ? 1 : 0;
        animate opacity {
            duration: Animation.full-screen-duration;
            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);
            }
        }
    }
}