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 component InkPage inherits Page {
    header: "Ink Level";

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


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

        HorizontalLayout {
            spacing: root.width * 5%;
            for color-info in root.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: self.width / 2;
                        border-width: 2px;
                        height: parent.height + parent.y;
                        y: -parent.y;
                    }
                    states [
                        inactive when !root.page-visible : {
                            height: 2px;
                            out {
                                animate height {
                                    duration: 750ms;
                                    delay: 50ms;
                                    easing: ease-in-out;
                                }
                            }
                            in {
                                animate height { duration: 200ms; easing: ease-in; }
                            }
                        }
                    ]
                }

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

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

    }

}