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
|
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Window
import QtQuick.Effects
import "CloudyRectMaterial"
Rectangle {
id: mainWindow
// Multiplier for resolution independency
readonly property real dp: 0.2 + Math.min(width, height) / 1200
// Color used everywhere in the example
property color mainColor: "#b0b0b0"
width: 1280
height: 720
color: mainColor
Settings {
id: settings
}
Settings {
id: defaultSettings
}
// Animate the mainColor
SequentialAnimation on mainColor {
loops: Animation.Infinite
ColorAnimation {
to: "#60c0d0"
duration: 8000
}
ColorAnimation {
to: "#80d090"
duration: 8000
}
ColorAnimation {
to: "#d0c0b0"
duration: 8000
}
ColorAnimation {
to: "#b0b0b0"
duration: 8000
}
}
CloudyRectMaterial {
id: cloudyRectMaterialLight
timeRunning: true
electricCloudColor: Qt.lighter(mainColor, 1.4)
visible: settings.showCustomMaterial
}
CloudyRectMaterial {
id: cloudyRectMaterialDark
timeRunning: true
electricCloudColor: Qt.lighter(mainColor, 0.6)
visible: settings.showCustomMaterial
}
Item {
id: mainArea
anchors.left: settingsView.right
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
Rectangle {
id: sourceItem
anchors.centerIn: parent
width: settings.itemSize * 2
height: settings.itemSize
radius: settings.radius
gradient: Gradient {
id: gradient
property real lightLevelUp: 1.05 - settings.offsetY * 0.004 * settings.opacity
property real lightLevelDown: 1.05 + settings.offsetY * 0.004 * settings.opacity
GradientStop {
color: Qt.lighter(mainColor, gradient.lightLevelUp)
position: 0
}
GradientStop {
color: Qt.lighter(mainColor, gradient.lightLevelDown)
position: 1
}
}
Image {
anchors.centerIn: parent
height: parent.height * 0.6
width: height
source: "images/qt_logo_white_rgb.png"
opacity: 0.1
}
}
RectangularShadow {
anchors.fill: sourceItem
offset.x: settings.offsetX
offset.y: settings.offsetY
radius: settings.radius
blur: settings.blur
spread: settings.spread
opacity: settings.opacity
color: Qt.lighter(mainColor, 1.3)
z: -1
material: settings.showCustomMaterial ? cloudyRectMaterialLight : null
Rectangle {
z: 1
x: parent.material.x - 1
y: parent.material.y - 1
width: parent.material.width + 2
height: parent.material.height + 2
color: "transparent"
border.width: 1
border.color: "#ffffff"
visible: settings.showDebug
}
}
RectangularShadow {
anchors.fill: sourceItem
offset.x: -settings.offsetX
offset.y: -settings.offsetY
radius: settings.radius
blur: settings.blur
spread: settings.spread
opacity: settings.opacity
color: Qt.lighter(mainColor, 0.7)
z: -2
material: settings.showCustomMaterial ? cloudyRectMaterialDark : null
Rectangle {
z: 1
x: parent.material.x - 1
y: parent.material.y - 1
width: parent.material.width + 2
height: parent.material.height + 2
color: "transparent"
border.width: 1
border.color: "#000000"
visible: settings.showDebug
}
}
}
SettingsView {
id: settingsView
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.margins: 20
visible: settings.showSettingsView
}
}
|
