aboutsummaryrefslogtreecommitdiffstats
path: root/examples/quick/multieffect/testbed/qml/main.qml
blob: 8fc761169eae1b75ef876244bc447a89e40439e1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
// Copyright (C) 2022 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Window
import QtQuick.Effects
import "CustomMultiEffect"

Rectangle {
    id: mainWindow

    // Multiplier for resolution independency
    readonly property real dp: 0.2 + Math.min(width, height) / 1200

    width: 1280
    height: 720
    color: "#404040"

    Settings {
        id: settings
        onReseted: {
            settingsView.resetSettings();
        }
    }

    Settings {
        id: defaultSettings
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            if (resetSettingsOverlay.showAnimationProgress == 0)
                settings.animateMovement = !settings.animateMovement;
        }
        onPressed: {
            resetSettingsOverlay.startShow();
        }
        onReleased: {
            resetSettingsOverlay.stopShow();
        }
    }


    Item {
        id: mainArea
        anchors.left: settingsView.right
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom

        TestSourceItem {
            id: testSourceItem
            anchors.centerIn: parent
            width: parent.width / 2
            height: parent.height / 2

            layer.enabled: true
            visible: false
        }
        TestMaskItem {
            id: testMaskItem
            anchors.fill: testSourceItem
        }

        Rectangle {
            readonly property int margin: 2
            x: quickMultiEffect.x + quickMultiEffect.itemRect.x - margin
            y: quickMultiEffect.y + quickMultiEffect.itemRect.y - margin
            width: quickMultiEffect.itemRect.width + margin * 2
            height: quickMultiEffect.itemRect.height + margin * 2
            visible: settings.showItemSize
            color: "transparent"
            border.color: "#ffffff"
            border.width: 2
        }

        MultiEffect {
            id: quickMultiEffect
            anchors.fill: testSourceItem
            visible: !settings.showCustomMultiEffect
            source: testSourceItem
            maskSource: testMaskItem
            autoPaddingEnabled: settings.autoPaddingEnabled
            paddingRect: settings.paddingRect
            brightness: settings.brightnessEnabled ? settings.brightness : 0
            contrast:  settings.contrastEnabled ? settings.contrast : 0
            saturation: settings.saturationEnabled ? settings.saturation : 0
            colorizationColor: settings.colorizationColor
            colorization: settings.colorizationEnabled ? settings.colorization : 0
            blurEnabled: settings.blurEnabled
            blur: settings.blur
            blurMax: settings.blurMax
            blurMultiplier: settings.blurMultiplier
            shadowEnabled: settings.shadowEnabled
            shadowOpacity: settings.shadowOpacity
            shadowBlur: settings.shadowBlur
            shadowHorizontalOffset: settings.shadowHorizontalOffset
            shadowVerticalOffset: settings.shadowVerticalOffset
            shadowColor: settings.shadowColor
            shadowScale: settings.shadowScale
            maskEnabled: settings.maskEnabled
            maskInverted: settings.maskInverted
            maskThresholdMin: settings.maskThresholdMin
            maskSpreadAtMin: settings.maskSpreadAtMin
            maskThresholdMax: settings.maskThresholdMax
            maskSpreadAtMax: settings.maskSpreadAtMax

            onItemSizeChanged: {
                if (visible)
                    warningsView.showSizeWarning();
            }
            onShaderChanged: {
                if (visible)
                    warningsView.showShaderWarning();
            }
        }

        // For comparison, custom effect created with QQEM and the MultiEffect node.
        CustomMultiEffect {
            id: customMultiEffect
            anchors.fill: testSourceItem
            visible: settings.showCustomMultiEffect
            source: testSourceItem
            maskSource: testMaskItem
            brightness: settings.brightnessEnabled ? settings.brightness : 0
            contrast:  settings.contrastEnabled ? settings.contrast : 0
            saturation: settings.saturationEnabled ? settings.saturation : 0
            colorizationColor: settings.colorizationColor
            colorization: settings.colorizationEnabled ? settings.colorization : 0
            blur: settings.blur
            blurMax: settings.blurMax
            blurMultiplier: settings.blurMultiplier
            shadowOpacity: settings.shadowOpacity
            shadowBlur: settings.shadowBlur
            shadowHorizontalOffset: settings.shadowHorizontalOffset
            shadowVerticalOffset: settings.shadowVerticalOffset
            shadowColor: settings.shadowColor
            shadowScale: settings.shadowScale
            maskInverted: settings.maskInverted
            maskThresholdMin: settings.maskThresholdMin
            maskSpreadAtMin: settings.maskSpreadAtMin
            maskThresholdMax: settings.maskThresholdMax
            maskSpreadAtMax: settings.maskSpreadAtMax
        }
    }

    SettingsView {
        id: settingsView
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.margins: 20
        visible: settings.showSettingsView
        Component.onCompleted: {
            settings.reset();
        }
    }

    FpsItem {
        anchors.right: parent.right
    }

    ShaderView {
        id: shaderView
        visible: settings.showShader
        anchors.horizontalCenter: mainArea.horizontalCenter
        anchors.top: mainArea.top
        anchors.topMargin: 20
        text: "Fragment shader: " + quickMultiEffect.fragmentShader + "\nVertex shader: " + quickMultiEffect.vertexShader
    }

    WarningsView {
        id: warningsView
        anchors.bottom: parent.bottom
        anchors.left: settingsView.right
        anchors.leftMargin: 40
        anchors.right: parent.right
    }

    ResetSettingsOverlay {
        id: resetSettingsOverlay
        onAnimationFinished: {
            settings.reset();
        }
    }
}