slint/examples/printerdemo_mcu/ui/ink_page.slint

// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { DemoPalette, Page } from "common.slint";

export struct InkLevel := {
    color: color,
    level: float,
}

export InkPage := Page {
    header: "Ink Level";

    property <[InkLevel]> ink-levels;
    property <bool> page-visible;


    Rectangle {
        x: (parent.width - width) / 2;
        y: (parent.height - height);
        height: 82%;
        width: 60%;

        HorizontalLayout {
            spacing: root.width * 5%;
            for color-info in ink-levels : Rectangle {
                ink := Rectangle {
                    width: parent.width;
                    height: parent.height * color-info.level;
                    y: parent.height - self.height;
                    clip: true;
                    Rectangle {
                        background: color-info.color;
                        border-radius: width / 2;
                        border-width: 2px;
                        height: parent.height + parent.y;
                        y: -parent.y;
                    }
                    states [
                        inactive when !root.page-visible : {
                            height: 2px;
                        }
                    ]
                    transitions [
                        out inactive : {
                            animate height {
                                duration: 750ms;
                                delay: 50ms;
                                easing: ease-in-out;
                            }
                        }
                        in inactive : {
                            animate height { duration: 200ms; easing: ease-in; }
                        }
                    ]
                }

                Rectangle {
                    y: max(ink.y - height, 0phx);
                    height: 2px;
                    // w = 2*sqrt(r² - (max(0, min(r-y , y-h+r)))²)
                    property <length> r: (parent.width - height) / 2;
                    property <length> y2: max(0phx, max(r - y, y - parent.height + r));
                    width: 2*sqrt((r*r - y2*y2)/(1phx * 1phx))*1phx;  // FIXME: it would be nice if sqrt could do proper unit handling
                    x: (parent.width - width) / 2;
                    background: DemoPalette.neutral-box;
                }

                Rectangle {
                    border-radius: width / 2;
                    border-color: DemoPalette.neutral-box;
                    border-width: 2px;
                }
            }
        }

    }

}