From 5a16d3ebdc2a4b50b27ed569d59b26c20a55126b Mon Sep 17 00:00:00 2001 From: Dorian Zedler Date: Thu, 15 Oct 2020 12:52:19 +0200 Subject: [PATCH] - added color indicator to main overview page - redesigned chips and made them consistent --- OmobiDisplayApp/OmobiDisplayApp.pro | 8 +- OmobiDisplayApp/omobidisplaybackend.cpp | 2 +- OmobiDisplayApp/ressources/qml/Chip.qml | 78 +++++++++++++++++++ .../ressources/qml/ColorPicker.qml | 14 ++-- .../ressources/qml/ColorPickerDelegate.qml | 25 ++---- .../ressources/qml/ConnectPage.qml | 1 + .../ressources/qml/DisplayTextDelegate.qml | 70 ++++------------- .../qml/DisplayTextModelListView.qml | 6 +- OmobiDisplayApp/ressources/qml/qml.qrc | 2 +- OmobiDisplayApp/test.qmodel | 55 ------------- 10 files changed, 121 insertions(+), 140 deletions(-) create mode 100644 OmobiDisplayApp/ressources/qml/Chip.qml delete mode 100644 OmobiDisplayApp/test.qmodel diff --git a/OmobiDisplayApp/OmobiDisplayApp.pro b/OmobiDisplayApp/OmobiDisplayApp.pro index 8936c66..a3e28c9 100644 --- a/OmobiDisplayApp/OmobiDisplayApp.pro +++ b/OmobiDisplayApp/OmobiDisplayApp.pro @@ -39,5 +39,9 @@ include($$PWD/QBluetoothLeUart/QBluetoothLeUart.pri) DISTFILES += \ test.qmodel -STATECHARTS += \ - testChart.scxml +STATECHARTS += + +contains(ANDROID_TARGET_ARCH,armeabi-v7a) { + ANDROID_ABIS = \ + armeabi-v7a +} diff --git a/OmobiDisplayApp/omobidisplaybackend.cpp b/OmobiDisplayApp/omobidisplaybackend.cpp index a88085b..8e0b058 100644 --- a/OmobiDisplayApp/omobidisplaybackend.cpp +++ b/OmobiDisplayApp/omobidisplaybackend.cpp @@ -147,7 +147,7 @@ void OmobiDisplayBackend::handleBluetoothDataReceived(QString s){ if(index < 0) return; - if(this->textSetsBuffer.length() <= index) + while(this->textSetsBuffer.length() <= index) this->textSetsBuffer.append(QMap()); int parameter = data["parameter"].toInt(); diff --git a/OmobiDisplayApp/ressources/qml/Chip.qml b/OmobiDisplayApp/ressources/qml/Chip.qml new file mode 100644 index 0000000..3db1ea6 --- /dev/null +++ b/OmobiDisplayApp/ressources/qml/Chip.qml @@ -0,0 +1,78 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.12 +import QtGraphicalEffects 1.12 + +Item { + id: control + + property bool raised: false + property alias mouseArea: mouseArea + property string text: "" + property string color: "#fcba03" + property bool isDarkColor: control.checkIsDarkColor(color) + property double glowRadius: 0.001 + property double glowSpread: 0.2 + property bool glowVisible: true + property double glowScale: 0.9 + property double glowOpacity: Math.pow( control.opacity, 100 ) + + signal clicked + + function checkIsDarkColor(color) { + var c = color.substring(1); // strip # + var rgb = parseInt(c, 16); // convert rrggbb to decimal + var r = (rgb >> 16) & 0xff; // extract red + var g = (rgb >> 8) & 0xff; // extract green + var b = (rgb >> 0) & 0xff; // extract blue + + var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709 + + return luma < 150 + } + + RectangularGlow { + id: effect + glowRadius: control.glowRadius + spread: control.glowSpread + color: "black" + + visible: control.glowVisible + + cornerRadius: background.radius + anchors.fill: background + scale: control.glowScale + opacity: control.glowOpacity + } + + Rectangle { + id: background + anchors.fill: parent + color: control.color + radius: height * 0.5 + + Behavior on color { + ColorAnimation {} + } + } + + Text { + id: contentText + anchors.fill: parent + anchors.margins: parent.height * 0.25 + + font.pixelSize: height + fontSizeMode: Text.Fit + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + + color: control.isDarkColor ? "white":"black" + text: control.text + } + + MouseArea { + id: mouseArea + anchors.fill: parent + enabled: control.enabled + onClicked: control.clicked() + } +} diff --git a/OmobiDisplayApp/ressources/qml/ColorPicker.qml b/OmobiDisplayApp/ressources/qml/ColorPicker.qml index 97b7a63..bd38118 100644 --- a/OmobiDisplayApp/ressources/qml/ColorPicker.qml +++ b/OmobiDisplayApp/ressources/qml/ColorPicker.qml @@ -10,8 +10,6 @@ Rectangle { property string currentColor: rgbToHex(redSlider.value, greenSlider.value, blueSlider.value) property bool isDarkColor: control.checkIsDarkColor(value) - implicitHeight: width - onValueChanged: { var rgb = hexToRgb(value) @@ -38,18 +36,20 @@ Rectangle { } 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 + var rgb = hexToRgb(color) + var luma = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b; // per ITU-R BT.709 + + return luma < 50 } ColumnLayout { anchors.fill: parent - Rectangle { + Pane { Layout.fillWidth: true Layout.preferredHeight: parent.height * 0.5 - color: control.currentColor + Material.background: control.currentColor + Material.elevation: 5 } Slider { diff --git a/OmobiDisplayApp/ressources/qml/ColorPickerDelegate.qml b/OmobiDisplayApp/ressources/qml/ColorPickerDelegate.qml index 4d51c6a..28a93da 100644 --- a/OmobiDisplayApp/ressources/qml/ColorPickerDelegate.qml +++ b/OmobiDisplayApp/ressources/qml/ColorPickerDelegate.qml @@ -12,7 +12,7 @@ ItemDelegate { textEditDialog.open() } - Rectangle { + Chip { anchors { right: nextPageIconText.left verticalCenter: parent.verticalCenter @@ -21,27 +21,10 @@ ItemDelegate { width: parent.width * 0.15 height: parent.height * 0.6 - radius: height * 0.1 color: control.value === "" ? "transparent":control.value - border.width: 2 - border.color: control.value === "" ? "lightgrey":control.value - - - Text { - anchors.fill: parent - anchors.margins: parent.height * 0.1 - - font.pixelSize: height * 0.5 - fontSizeMode: Text.Fit - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - - color: colorPicker.isDarkColor && control.value !== "" ? "white":"black" - - text: value === "" ? "Not set": value - } + text: value === "" ? "Not set": value } Text { @@ -68,6 +51,10 @@ ItemDelegate { y: (parent.height - height) / 2 width: parent.width * 0.9 + height: Math.min(parent.height, contentHeight) + + contentWidth: parent.width * 0.9 - leftInset - rightInset + contentHeight: contentWidth Material.theme: control.Material.theme Material.accent: control.Material.accent diff --git a/OmobiDisplayApp/ressources/qml/ConnectPage.qml b/OmobiDisplayApp/ressources/qml/ConnectPage.qml index c3a7df1..b765333 100644 --- a/OmobiDisplayApp/ressources/qml/ConnectPage.qml +++ b/OmobiDisplayApp/ressources/qml/ConnectPage.qml @@ -42,6 +42,7 @@ Page { Layout.alignment: Layout.Center clip: true + boundsBehavior: Flickable.OvershootBounds model: backend.bleController.availableDevicesModel diff --git a/OmobiDisplayApp/ressources/qml/DisplayTextDelegate.qml b/OmobiDisplayApp/ressources/qml/DisplayTextDelegate.qml index d5ae84a..c059cd8 100644 --- a/OmobiDisplayApp/ressources/qml/DisplayTextDelegate.qml +++ b/OmobiDisplayApp/ressources/qml/DisplayTextDelegate.qml @@ -42,77 +42,41 @@ ItemDelegate { } } - Rectangle { + Chip { Layout.fillHeight: true Layout.preferredWidth: model.scroll ? parent.width * 0.15 : 0 visible: model.scroll - radius: height * 0.1 + color: Material.accent - color: model.active ? Material.accent:"lightgrey" + opacity: model.active ? 1:0.5 Behavior on color { ColorAnimation {} } - Text { - anchors.centerIn: parent - - width: parent.width * 0.9 - height: parent.height * 0.8 - - font.pixelSize: height - fontSizeMode: Text.Fit - minimumPixelSize: 1 - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - - color: "white" - - text: model.scroll ? qsTr("scrolling"):qsTr("false") - } + text: model.scroll ? qsTr("scrolling"):qsTr("false") } - Rectangle { + Chip { + Layout.fillHeight: true + Layout.preferredWidth: parent.width * 0.1 + + opacity: model.active ? 1:0.5 + + color: model.color + } + + Chip { Layout.preferredHeight: parent.height Layout.preferredWidth: parent.width * 0.15 - radius: height * 0.1 + color: model.active ? "#4CAF50" : "#F44336" - color: model.active ? "green" : "red" + text: model.active ? qsTr(" active "):qsTr("inactive") - Behavior on color { - ColorAnimation {} - } - - Text { - id: activeText - anchors.centerIn: parent - - width: parent.width * 0.8 - height: parent.height * 0.8 - - font.pixelSize: height - fontSizeMode: Text.Fit - minimumPixelSize: 1 - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - - color: "white" - text: model.active ? qsTr(" active "):qsTr("inactive") - } - - Button { - anchors.centerIn: parent - width: parent.width - height: parent.height * 1.4 - flat: true - - onClicked: { - model.active = !model.active - } - } + onClicked: model.active = !model.active } } } diff --git a/OmobiDisplayApp/ressources/qml/DisplayTextModelListView.qml b/OmobiDisplayApp/ressources/qml/DisplayTextModelListView.qml index 672940b..2bb882d 100644 --- a/OmobiDisplayApp/ressources/qml/DisplayTextModelListView.qml +++ b/OmobiDisplayApp/ressources/qml/DisplayTextModelListView.qml @@ -8,6 +8,10 @@ import de.itsblue.omobidisplayapp 1.0 ListView { id: control + spacing: 5 + + boundsBehavior: Flickable.OvershootBounds + model: backend.displayTextModel add: Transition { @@ -20,8 +24,6 @@ ListView { NumberAnimation { property: "scale"; from: 1; to: 0.9; duration: 200 } } - spacing: 5 - delegate: DisplayTextDelegate { id: delegate diff --git a/OmobiDisplayApp/ressources/qml/qml.qrc b/OmobiDisplayApp/ressources/qml/qml.qrc index e7c4ca4..0875c94 100644 --- a/OmobiDisplayApp/ressources/qml/qml.qrc +++ b/OmobiDisplayApp/ressources/qml/qml.qrc @@ -4,7 +4,6 @@ ConnectPage.qml ConnectedPage.qml DisplayTextDelegate.qml - CollapsableItemDelegate.qml DisplayTextModelListView.qml TextEditDialog.qml TextInputDelegate.qml @@ -13,5 +12,6 @@ ComboBoxDelegate.qml ColorPickerDelegate.qml ColorPicker.qml + Chip.qml diff --git a/OmobiDisplayApp/test.qmodel b/OmobiDisplayApp/test.qmodel deleted file mode 100644 index 2e8f120..0000000 --- a/OmobiDisplayApp/test.qmodel +++ /dev/null @@ -1,55 +0,0 @@ - - - - {53c9b534-ff35-4fc2-bbb2-1ecf37f46c4a} - - - - - - - - {3502968e-5cd9-4ab0-b3b9-52d8cd1ec0d3} - - - test - - - - - - - {ede58291-b8a9-4a30-9631-1771046708c7} - - - - - - - - - - {ede58291-b8a9-4a30-9631-1771046708c7} - - - test - - - - - - - - - - - - - - - - - - - -