itsblue-development/LedDisplay
itsblue-development/LedDisplay
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases 1 Wiki Activity

- added color indicator to main overview page

Browse source 
- redesigned chips and made them consistent
This commit is contained in:
Dorian Zedler 2020-10-15 12:52:19 +02:00
parent ac7659614b
commit 5a16d3ebdc
Signed by: dorian
GPG key ID: D3B255CB8BC7CD37
10 changed files with 121 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
OmobiDisplayApp/OmobiDisplayApp.pro
View file

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

2
OmobiDisplayApp/omobidisplaybackend.cpp
View file

@ -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
View 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()
}
}

14
OmobiDisplayApp/ressources/qml/ColorPicker.qml
View file

@ -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 {

25
OmobiDisplayApp/ressources/qml/ColorPickerDelegate.qml
View file

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

1
OmobiDisplayApp/ressources/qml/ConnectPage.qml
View file

@ -42,6 +42,7 @@ Page {
Layout.alignment: Layout.Center
clip: true
boundsBehavior: Flickable.OvershootBounds
model: backend.bleController.availableDevicesModel

70
OmobiDisplayApp/ressources/qml/DisplayTextDelegate.qml
View file

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

6
OmobiDisplayApp/ressources/qml/DisplayTextModelListView.qml
View file

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

2
OmobiDisplayApp/ressources/qml/qml.qrc
View file

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

55
OmobiDisplayApp/test.qmodel
View file

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