LedDisplay/OmobiDisplayApp/ressources/qml/ColorPicker.qml
Dorian Zedler ce6d436c85
- finished implementing protocol
- added Initializing and Loading states
- added color picker
2020-10-14 23:54:12 +02:00

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
}
}
}