- added color indicator to main overview page
- redesigned chips and made them consistent
This commit is contained in:
parent
ac7659614b
commit
5a16d3ebdc
GPG key ID:
D3B255CB8BC7CD37
10 changed files with 121 additions and 140 deletions
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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, QVariant>());
|
||||
|
||||
int parameter = data["parameter"].toInt();
|
||||
|
|
|
|||
78
OmobiDisplayApp/ressources/qml/Chip.qml
Normal file
78
OmobiDisplayApp/ressources/qml/Chip.qml
Normal file
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ ItemDelegate {
|
|||
textEditDialog.open()
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Chip {
|
||||
anchors {
|
||||
right: nextPageIconText.left
|
||||
verticalCenter: parent.verticalCenter
|
||||
|
|
@ -21,28 +21,11 @@ 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 {
|
||||
id: nextPageIconText
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ Page {
|
|||
Layout.alignment: Layout.Center
|
||||
|
||||
clip: true
|
||||
boundsBehavior: Flickable.OvershootBounds
|
||||
|
||||
model: backend.bleController.availableDevicesModel
|
||||
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
}
|
||||
|
||||
Chip {
|
||||
Layout.fillHeight: true
|
||||
Layout.preferredWidth: parent.width * 0.1
|
||||
|
||||
opacity: model.active ? 1:0.5
|
||||
|
||||
color: model.color
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
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"
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<file>ConnectPage.qml</file>
|
||||
<file>ConnectedPage.qml</file>
|
||||
<file>DisplayTextDelegate.qml</file>
|
||||
<file>CollapsableItemDelegate.qml</file>
|
||||
<file>DisplayTextModelListView.qml</file>
|
||||
<file>TextEditDialog.qml</file>
|
||||
<file>TextInputDelegate.qml</file>
|
||||
|
|
@ -13,5 +12,6 @@
|
|||
<file>ComboBoxDelegate.qml</file>
|
||||
<file>ColorPickerDelegate.qml</file>
|
||||
<file>ColorPicker.qml</file>
|
||||
<file>Chip.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<qmt>
|
||||
<project>
|
||||
<uid>{53c9b534-ff35-4fc2-bbb2-1ecf37f46c4a}</uid>
|
||||
<root-package>
|
||||
<instance>
|
||||
<MPackage>
|
||||
<base-MObject>
|
||||
<MObject>
|
||||
<base-MElement>
|
||||
<MElement>
|
||||
<uid>{3502968e-5cd9-4ab0-b3b9-52d8cd1ec0d3}</uid>
|
||||
</MElement>
|
||||
</base-MElement>
|
||||
<name>test</name>
|
||||
<children>
|
||||
<handles>
|
||||
<handles>
|
||||
<qlist>
|
||||
<item>
|
||||
<handle>
|
||||
<uid>{ede58291-b8a9-4a30-9631-1771046708c7}</uid>
|
||||
<target>
|
||||
<instance type="MCanvasDiagram">
|
||||
<MCanvasDiagram>
|
||||
<base-MDiagram>
|
||||
<MDiagram>
|
||||
<base-MObject>
|
||||
<MObject>
|
||||
<base-MElement>
|
||||
<MElement>
|
||||
<uid>{ede58291-b8a9-4a30-9631-1771046708c7}</uid>
|
||||
</MElement>
|
||||
</base-MElement>
|
||||
<name>test</name>
|
||||
</MObject>
|
||||
</base-MObject>
|
||||
</MDiagram>
|
||||
</base-MDiagram>
|
||||
</MCanvasDiagram>
|
||||
</instance>
|
||||
</target>
|
||||
</handle>
|
||||
</item>
|
||||
</qlist>
|
||||
</handles>
|
||||
</handles>
|
||||
</children>
|
||||
</MObject>
|
||||
</base-MObject>
|
||||
</MPackage>
|
||||
</instance>
|
||||
</root-package>
|
||||
</project>
|
||||
</qmt>
|
||||
Loading…
Reference in a new issue