Revision control
Copy as Markdown
// 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
topRightRadius: settings.individualRadius ? settings.radiustr : undefined
bottomRightRadius: settings.individualRadius ? settings.radiusbr : undefined
bottomLeftRadius: settings.individualRadius ? settings.radiusbl : undefined
topLeftRadius: settings.individualRadius ? settings.radiustl : undefined
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 {
id: rectangularShadow1
anchors.fill: sourceItem
offset.x: settings.offsetX
offset.y: settings.offsetY
radius: settings.radius
topRightRadius: settings.individualRadius ? settings.radiustr : undefined
bottomRightRadius: settings.individualRadius ? settings.radiusbr : undefined
bottomLeftRadius: settings.individualRadius ? settings.radiusbl : undefined
topLeftRadius: settings.individualRadius ? settings.radiustl : undefined
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 {
id: rectangularShadow2
anchors.fill: sourceItem
offset.x: -settings.offsetX
offset.y: -settings.offsetY
radius: settings.radius
topRightRadius: settings.individualRadius ? settings.radiustr : undefined
bottomRightRadius: settings.individualRadius ? settings.radiusbr : undefined
bottomLeftRadius: settings.individualRadius ? settings.radiusbl : undefined
topLeftRadius: settings.individualRadius ? settings.radiustl : undefined
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
}
}
Text {
anchors.horizontalCenter: lightArea.horizontalCenter
anchors.bottom: lightArea.top
color: "#202020"
font.pixelSize: 16 * dp
text: "Offset (" + settings.offsetX.toFixed(0) + ", " +
settings.offsetY.toFixed(0) + ")"
}
Rectangle {
id: lightArea
anchors.left: parent.left
anchors.leftMargin: 20
anchors.bottom: parent.bottom
anchors.bottomMargin: 10
width: settings.settingsViewWidth * 0.4
height: width
radius: 5
color: Qt.lighter(mainWindow.mainColor, 0.7)
border.width: 1
border.color: Qt.lighter(mainWindow.mainColor, 0.5)
Item {
id: lightItem
Rectangle {
anchors.centerIn: parent
width: 10
height: width
radius: width / 2
color: "#e0e0e0"
RectangularShadow {
anchors.centerIn: parent
width: parent.width * 3.0
height: width
radius: width / 2
blur: width
color: "#fff9f0"
opacity: settings.opacity
}
}
}
MouseArea {
id: lightMouseArea
anchors.fill: parent
preventStealing: true
Component.onCompleted: {
settingsView.resetPosition();
}
onPositionChanged:
(mouse)=> {
settingsView.updatePosition(mouse.x, mouse.y);
}
onPressed:
(mouse)=> {
settingsView.updatePosition(mouse.x, mouse.y);
}
}
}
}
SettingsView {
id: settingsView
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.margins: 20
visible: settings.showSettingsView
}
}