Qt Quick 3D - Scene Effects Example
// Copyright (C) 2022 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Item {
id: colorPicker
property bool isHovered: false
property alias color: root.color
width: 100
height: 26
Rectangle {
id: border
color: "transparent"
border.width: 2
border.color: isHovered ? palette.dark : palette.alternateBase
anchors.fill: parent
Image {
anchors.fill: parent
anchors.margins: 4
source: "qrc:/images/grid_8x8.png"
fillMode: Image.Tile
}
Rectangle {
anchors.fill: parent
anchors.margins: 4
color: colorPicker.color
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: colorPicker.isHovered = true
onExited: colorPicker.isHovered = false
onClicked: {
colorPickerPopup.open()
}
}
}
Dialog {
id: colorPickerPopup
title: "Color Picker"
anchors.centerIn: Overlay.overlay
modal: true
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
RowLayout {
anchors.centerIn: parent
id: root
property color color: "red"
spacing: 0
Item {
width: 135
height: 135
ShaderEffect {
id: hsvWheel
anchors.centerIn: parent
blending: true
width: 128
height: 128
property real value: 1.0
fragmentShader: "qrc:/shaders/huesaturation.frag.qsb"
Item {
id: reticule
function reflectColor(hue, saturation) {
let angleDegrees = hue * 360
if (angleDegrees > 180)
angleDegrees = angleDegrees - 360
let angleRadians = angleDegrees * (Math.PI / 180)
let vector = Qt.vector2d(Math.cos(angleRadians), Math.sin(angleRadians)).normalized().times(0.5).times(saturation)
vector = vector.plus(Qt.vector2d(0.5, 0.5))
reticule.x = vector.x * hsvWheel.width
reticule.y = vector.y * hsvWheel.width
}
Rectangle {
x: -5
y: -5
width: 10
height: 10
radius: 5
color: "transparent"
border.width: 1
border.color: "black"
Rectangle {
x: 0.5
y: 0.5
width: 9
height: 9
radius: 4.5
color: root.color
border.width: 1
border.color: "white"
}
}
}
MouseArea {
anchors.fill: parent
function handleMouseMove(x, y, width) {
let normalizedX = x / width - 0.5;
let normalizedY = y / width - 0.5;
let angle = Math.atan2(normalizedY, normalizedX);
let toCenter = Qt.vector2d(normalizedX, normalizedY);
let radius = toCenter.length() * 2.0;
let degrees = angle * (180 / Math.PI)
if (degrees < 0)
degrees = 360 + degrees
let hue = degrees / 360
root.color = Qt.hsva(hue, radius, root.color.hsvValue, root.color.a)
if (radius <= 1.0)
return Qt.vector2d(x, y)
// Limit to radius of 1.0
toCenter = toCenter.normalized();
let halfWidth = width * 0.5;
let newX = halfWidth * toCenter.x + halfWidth
let newY = halfWidth * toCenter.y + halfWidth
return Qt.vector2d(newX, newY)
}
onPositionChanged: (mouse) => {
let pos = handleMouseMove(mouse.x, mouse.y, hsvWheel.width)
reticule.x = pos.x;
reticule.y = pos.y;
}
}
}
}
Component.onCompleted: {
updateColorSections()
reticule.reflectColor(root.color.hsvHue, root.color.hsvSaturation)
}
Connections {
target: root
function onColorChanged() {
root.updateColorSections()
}
}
function updateColorSections() {
rgbSection.redValue = root.color.r * 255
rgbSection.greenValue = root.color.g * 255
rgbSection.blueValue = root.color.b * 255
hsvSection.hueValue = root.color.hsvHue * 360
hsvSection.saturationValue = root.color.hsvSaturation * 100
hsvSection.valueValue = root.color.hsvValue * 100
alphaSection.alphaValue = root.color.a * 255
}
ColumnLayout {
width: 250
SectionLayout {
title: "RGB"
id: rgbSection
property int redValue: 0
property int greenValue: 0
property int blueValue: 0
function updateRGB() {
root.color = Qt.rgba(redValue / 255, greenValue / 255, blueValue / 255, alphaSection.alphaValue / 255)
reticule.reflectColor(root.color.hsvHue, root.color.hsvSaturation)
}
RowLayout {
Label {
text: "R:"
}
Slider {
id: redSlider
Layout.fillWidth: true
from: 0
to: 255
value: rgbSection.redValue
onValueChanged: {
if (value !== rgbSection.redValue) {
rgbSection.redValue = value
if (activeFocus)
rgbSection.updateRGB()
}
}
}
SpinBox {
from: 0
to: 255
value: rgbSection.redValue
onValueChanged: {
if (value !== rgbSection.redValue) {
rgbSection.redValue = value
if (activeFocus)
rgbSection.updateRGB()
}
}
}
}
RowLayout {
Label {
text: "G:"
}
Slider {
id: greenSlider
Layout.fillWidth: true
from: 0
to: 255
value: rgbSection.greenValue
onValueChanged: {
if (value !== rgbSection.greenValue) {
rgbSection.greenValue = value
if (activeFocus)
rgbSection.updateRGB()
}
}
}
SpinBox {
from: 0
to: 255
value: rgbSection.greenValue
onValueChanged: {
if (value !== rgbSection.greenValue) {
rgbSection.greenValue = value
if (activeFocus)
rgbSection.updateRGB()
}
}
}
}
RowLayout {
Label {
text: "B:"
}
Slider {
id: blueSlider
Layout.fillWidth: true
from: 0
to: 255
value: rgbSection.blueValue
onValueChanged: {
if (value !== rgbSection.blueValue) {
rgbSection.blueValue = value
if (activeFocus)
rgbSection.updateRGB()
}
}
}
SpinBox {
from: 0
to: 255
value: rgbSection.blueValue
onValueChanged: {
if (value !== rgbSection.blueValue) {
rgbSection.blueValue = value
if (activeFocus)
rgbSection.updateRGB()
}
}
}
}
RowLayout {
Label {
text: "Hex:"
Layout.fillWidth: true
}
TextField {
id: hexTextField
maximumLength: 6
implicitWidth: 75
function updateText() {
if (activeFocus)
return
let redText = rgbSection.redValue.toString(16).toUpperCase()
let greenText = rgbSection.greenValue.toString(16).toUpperCase()
let blueText = rgbSection.blueValue.toString(16).toUpperCase()
if (redText.length == 1)
redText = "0" + redText
if (greenText.length == 1)
greenText = "0" + greenText
if (blueText.length == 1)
blueText = "0" + blueText
text = redText + greenText + blueText;
}
function expandText(text) {
let newText = text.toUpperCase()
let expandLength = 6 - newText.length
for (let i = 0; i < expandLength; ++i)
newText = "0" + newText
return newText
}
Component.onCompleted: updateText()
validator: RegularExpressionValidator {
regularExpression: /^[0-9A-Fa-f]{0,6}$/
}
onTextChanged: {
if (!acceptableInput)
return;
let colorText = expandText(text)
rgbSection.redValue = parseInt(colorText.substr(0, 2), 16)
rgbSection.greenValue = parseInt(colorText.substr(2, 2), 16)
rgbSection.blueValue = parseInt(colorText.substr(4, 2), 16)
if (activeFocus)
rgbSection.updateRGB()
}
onAccepted: {
text = expandText(text)
}
}
Connections {
target: rgbSection
function onRedValueChanged() {
hexTextField.updateText()
}
function onGreenValueChanged() {
hexTextField.updateText()
}
function onBlueValueChanged() {
hexTextField.updateText()
}
}
}
}
SectionLayout {
title: "HSV"
id: hsvSection
property int hueValue: 0
property int saturationValue: 0
property int valueValue: 0
function updateHSV() {
root.color = Qt.hsva(hueValue / 360, saturationValue / 100, valueValue / 100, alphaSection.alphaValue / 255)
reticule.reflectColor(root.color.hsvHue, root.color.hsvSaturation)
}
RowLayout {
Label {
text: "H:"
}
Slider {
id: hueSlider
Layout.fillWidth: true
from: 0
to: 360
value: hsvSection.hueValue
onValueChanged: {
if (value !== hsvSection.hueValue) {
hsvSection.hueValue = value
if (activeFocus)
hsvSection.updateHSV()
}
}
}
SpinBox {
from: 0
to: 360
value: hsvSection.hueValue
onValueChanged: {
if (value !== hsvSection.hueValue) {
hsvSection.hueValue = value
if (activeFocus)
hsvSection.updateHSV()
}
}
}
}
RowLayout {
Label {
text: "S:"
}
Slider {
id: saturationSlider
Layout.fillWidth: true
from: 0
to: 100
value: hsvSection.saturationValue
onValueChanged: {
if (value !== hsvSection.saturationValue) {
hsvSection.saturationValue = value
if (activeFocus)
hsvSection.updateHSV()
}
}
}
SpinBox {
from: 0
to: 100
value: hsvSection.saturationValue
onValueChanged: {
if (value !== hsvSection.saturationValue) {
hsvSection.saturationValue = value
if (activeFocus)
hsvSection.updateHSV()
}
}
}
}
RowLayout {
Label {
text: "V:"
}
Slider {
id: valueSlider
Layout.fillWidth: true
from: 0
to: 100
value: hsvSection.valueValue
onValueChanged: {
if (value !== hsvSection.valueValue) {
hsvSection.valueValue = value
if (activeFocus)
hsvSection.updateHSV()
}
}
}
SpinBox {
from: 0
to: 100
value: hsvSection.valueValue
onValueChanged: {
if (value !== hsvSection.valueValue) {
hsvSection.valueValue = value
if (activeFocus)
hsvSection.updateHSV()
}
}
}
}
}
SectionLayout {
title: "Opacity / Alpha"
id: alphaSection
property int alphaValue: 0
RowLayout {
Label {
text: "V:"
}
Slider {
id: alphaSlider
Layout.fillWidth: true
from: 0
to: 255
value: alphaSection.alphaValue
onValueChanged: {
if (value !== alphaSection.alphaValue) {
alphaSection.alphaValue = value
if (activeFocus)
hsvSection.updateHSV()
}
}
}
SpinBox {
from: 0
to: 255
value: alphaSection.alphaValue
onValueChanged: {
if (value !== alphaSection.alphaValue) {
alphaSection.alphaValue = value
if (activeFocus)
hsvSection.updateHSV()
}
}
}
}
}
}
}
}
}
