liquid-ass/shell.qml

pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Quickshell

ShellRoot {
    FloatingWindow {
        color: "grey"
        implicitWidth: 840
        implicitHeight: 845

        maximumSize {
            width: 840
            height: 845
        }

        minimumSize {
            width: 840
            height: 845
        }

        ColumnLayout {
            anchors {
                centerIn: parent
            }

            Item {
                Layout.preferredWidth: 600
                Layout.preferredHeight: 600

                Image {
                    id: backgroundContent
                    fillMode: Image.PreserveAspectCrop
                    source: "root:resources/scene.jpg"
                    anchors.fill: parent
                }

                GlassSurface {
                    source: backgroundContent
                    width: 400
                    height: 300
                    radius: 20
                    anchors.centerIn: parent

                    // parameters
                    time: timeSlider.value
                    speed: speedSlider.value
                    strength: warpSlider.value
                    scale: scaleSlider.value
                    edgeReflectionStrength: edgeReflectionSlider.value
                    edgeReflectionWidth: edgeWidthSlider.value
                }

                RowLayout {
                    spacing: 40

                    Repeater {
                        model: ["1", "2", "3"]
                        delegate: GlassSurface {
                            id: surface
                            required property var modelData
                            source: backgroundContent
                            width: 100
                            height: 100                            
                            radius: 40

                            time: timeSlider.value
                            speed: speedSlider.value
                            strength: warpSlider.value
                            scale: scaleSlider.value
                            edgeReflectionStrength: edgeReflectionSlider.value
                            edgeReflectionWidth: edgeWidthSlider.value

                            Text {
                                text: surface.modelData
                                color: Qt.rgba(1, 1, 1, 0.2)
                                font.bold: true
                                font.pointSize: 16
                                anchors.centerIn: parent
                            }
                        }
                    }

                    anchors {
                        horizontalCenter: parent.horizontalCenter
                        bottom: parent.bottom
                        bottomMargin: 25
                    }
                }
            }

            RowLayout {
                Text {
                    text: "Time:"
                }

                Slider {
                    id: timeSlider
                    from: 0
                    to: Math.PI * 2
                    value: Math.PI

                    Layout.fillWidth: true
                    Layout.preferredHeight: 30
                }
            }

            RowLayout {
                Text {
                    text: "Warp Strength:"
                }

                Slider {
                    id: warpSlider
                    from: 0
                    to: 10
                    value: 3

                    Layout.fillWidth: true
                    Layout.preferredHeight: 30
                }
            }

            RowLayout {
                Text {
                    text: "Flow Speed:"
                }

                Slider {
                    id: speedSlider
                    from: 0
                    to: 1
                    value: 0.2

                    Layout.fillWidth: true
                    Layout.preferredHeight: 30
                }
            }

            RowLayout {
                Text {
                    text: "Edge Reflection:"
                }

                Slider {
                    id: edgeReflectionSlider
                    from: 0
                    to: 1
                    value: 0.3

                    Layout.fillWidth: true
                    Layout.preferredHeight: 30
                }
            }

            RowLayout {
                Text {
                    text: "Edge Width:"
                }

                Slider {
                    id: edgeWidthSlider
                    from: 0.01
                    to: 0.2
                    value: 0.1

                    Layout.fillWidth: true
                    Layout.preferredHeight: 30
                }
            }

            RowLayout {
                Text {
                    text: "Scale:"
                }

                Slider {
                    id: scaleSlider
                    from: 0.0
                    to: 20.0
                    value: 3.0

                    Layout.fillWidth: true
                    Layout.preferredHeight: 30
                }
            }
        }
    }
}