92 lines
2.1 KiB
QML
92 lines
2.1 KiB
QML
import QtQuick 2.0
|
|
import QtQuick.Controls 2.0
|
|
import QtQuick.Layouts 1.0
|
|
import QtQuick.Controls.Material 2.0
|
|
|
|
Rectangle {
|
|
id: control
|
|
|
|
property string value: ""
|
|
property string currentColor: rgbToHex(redSlider.value, greenSlider.value, blueSlider.value)
|
|
property bool isDarkColor: control.checkIsDarkColor(value)
|
|
|
|
implicitHeight: width
|
|
|
|
onValueChanged: {
|
|
var rgb = hexToRgb(value)
|
|
|
|
redSlider.value = rgb.r
|
|
greenSlider.value = rgb.g
|
|
blueSlider.value = rgb.b
|
|
}
|
|
|
|
onCurrentColorChanged: {
|
|
value = currentColor
|
|
}
|
|
|
|
function rgbToHex(r, g, b) {
|
|
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
|
}
|
|
|
|
function hexToRgb(hex) {
|
|
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
return result ? {
|
|
r: parseInt(result[1], 16),
|
|
g: parseInt(result[2], 16),
|
|
b: parseInt(result[3], 16)
|
|
} : null;
|
|
}
|
|
|
|
function checkIsDarkColor(color) {
|
|
var temp = Qt.darker(color, 1) //Force conversion to color QML type object
|
|
var a = 1 - ( 0.299 * temp.r + 0.587 * temp.g + 0.114 * temp.b);
|
|
return temp.a > 0 && a >= 0.3
|
|
}
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: parent.height * 0.5
|
|
color: control.currentColor
|
|
}
|
|
|
|
Slider {
|
|
id: redSlider
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
|
|
from: 0
|
|
to: 255
|
|
stepSize: 1
|
|
|
|
Material.accent: Material.Red
|
|
}
|
|
|
|
Slider {
|
|
id: greenSlider
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
|
|
from: 0
|
|
to: 255
|
|
stepSize: 1
|
|
|
|
Material.accent: Material.Green
|
|
}
|
|
|
|
Slider {
|
|
id: blueSlider
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
|
|
from: 0
|
|
to: 255
|
|
stepSize: 1
|
|
|
|
Material.accent: Material.Blue
|
|
}
|
|
|
|
}
|
|
}
|