Skip to content

Commit

Permalink
Improve many parts of the UI (popups, connection feedbacks, service s…
Browse files Browse the repository at this point in the history 
…canning, characteristics r/w feedbacks, logging panel)
  • Loading branch information
@emericg
emericg committed Mar 8, 2024
1 parent 648cfd0 commit e3e153c
Show file tree
Hide file tree
Showing 14 changed files with 188 additions and 65 deletions.
5 changes: 3 additions & 2 deletions qml/PanelDevice.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,8 @@ Item {

text: qsTr("device info")
badgeText: (selectedDevice && selectedDevice.connected) ? " " : ""
badgeColor: Theme.colorGreen
badgeColor: (selectedDevice && selectedDevice.status === 2) ? Theme.colorYellow : Theme.colorGreen
badgeFade: (selectedDevice && selectedDevice.status === 2)
onClicked: deviceMenu.menuSelected(index)
sourceSize: 0
}
Expand All @@ -117,7 +118,7 @@ Item {
highlighted: (deviceMenu.currentSelection === index)

text: qsTr("services")
badgeText: (selectedDevice && selectedDevice.servicesScanned) ? selectedDevice.servicesCount : "?"
badgeText: (selectedDevice && selectedDevice.servicesCount) ? selectedDevice.servicesCount : "?"
onClicked: deviceMenu.menuSelected(index)
sourceSize: 0
}
Expand Down
96 changes: 82 additions & 14 deletions qml/PanelDeviceLog.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ Flickable {
////////

property string logFormat: "adv"
property bool logLegend: false

Rectangle {
width: detailView.ww
Expand Down Expand Up @@ -64,38 +65,106 @@ Flickable {

////////

Row {
Column {
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.margins: -4
spacing: 8

ButtonWireframeIcon {
id: formatButton
visible: (selectedDevice && selectedDevice.deviceLogCount > 0)

Row {
visible: logLegend
spacing: 8

Repeater {
model: [
"CONNECTION",
"STATE",
"DATA",
"ADVERTISEMENT",
"USER ACTION",
"ERROR",
]
delegate:
Row {
spacing: 6
Rectangle {
anchors.verticalCenter: parent.verticalCenter
width: 16
height: 16
radius: 4
color: {
if (index === 0) return Theme.colorMaterialGreen
if (index === 1) return Theme.colorMaterialLime
if (index === 2) return Theme.colorMaterialBlue
if (index === 3) return Theme.colorMaterialLightBlue
if (index === 4) return Theme.colorPrimary
if (index === 5) return Theme.colorError
return Theme.colorBox
}
}
Text {
anchors.verticalCenter: parent.verticalCenter
text: modelData
textFormat: Text.PlainText
color: {
if (index === 0) return Theme.colorMaterialGreen
if (index === 1) return Theme.colorMaterialLime
if (index === 2) return Theme.colorMaterialBlue
if (index === 3) return Theme.colorMaterialLightBlue
if (index === 4) return Theme.colorPrimary
if (index === 5) return Theme.colorError
return Theme.colorBox
}
}
}
}
}

fullColor: true
primaryColor: Theme.colorLightGrey
Row {
spacing: 8

visible: (selectedDevice && selectedDevice.deviceLog)
ButtonWireframeIcon { // formatButton
fullColor: true
primaryColor: Theme.colorLightGrey

text: qsTr("format:") + " " + logFormat
visible: (selectedDevice && selectedDevice.deviceLog)

onClicked: {
if (logFormat === "adv") logFormat = "txt"
else logFormat = "adv"
text: qsTr("format:") + " " + logFormat

onClicked: {
if (logFormat === "adv") logFormat = "txt"
else logFormat = "adv"
}
}

ButtonWireframeIcon { // legendButton
fullColor: true
primaryColor: logLegend ? Theme.colorGrey : Theme.colorLightGrey

visible: (selectedDevice && selectedDevice.deviceLog)

text: qsTr("legend")

onClicked: {
logLegend = !logLegend
}
}
}
}

////

Row {
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.margins: -4
spacing: 8

ButtonWireframeIcon {
id: clearButton
visible: (selectedDevice && selectedDevice.deviceLogCount > 0)

ButtonWireframeIcon { // clearButton
fullColor: true
primaryColor: Theme.colorLightGrey

Expand All @@ -109,8 +178,7 @@ Flickable {
}
}

ButtonWireframeIcon {
id: saveButton
ButtonWireframeIcon { // saveButton

fullColor: true
primaryColor: Theme.colorGrey
Expand Down
23 changes: 18 additions & 5 deletions qml/PanelDeviceServices.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Item {

////

Text { // status row
Text {
anchors.left: parent.left
anchors.right: parent.right

Expand Down Expand Up @@ -77,6 +77,7 @@ Item {
text: qsTr("load from cache")
source: "qrc:/assets/icons_material/baseline-save-24px.svg"

visible: (selectedDevice && selectedDevice.hasServiceCache)
enabled: (selectedDevice && selectedDevice.hasServiceCache &&
selectedDevice.status === DeviceUtils.DEVICE_OFFLINE)

Expand All @@ -101,10 +102,10 @@ Item {

header: Rectangle {
width: servicesView.width
height: (selectedDevice && selectedDevice.servicesCached) ? 40 : 0
height: visible ? 40 : 0
color: Theme.colorForeground

visible: (selectedDevice && selectedDevice.servicesCached)
visible: (selectedDevice && (selectedDevice.servicesCached || !selectedDevice.connected))

IconSvg {
anchors.left: parent.left
Expand All @@ -113,19 +114,31 @@ Item {
width: 24
height: 24
source: "qrc:/assets/icons_material/baseline-warning-24px.svg"
color: Theme.colorIcon
color: Theme.colorSubText
}

Text {
anchors.left: parent.left
anchors.leftMargin: 52
anchors.leftMargin: 56
anchors.right: parent.right
anchors.rightMargin: 16
anchors.verticalCenter: parent.verticalCenter

visible: (selectedDevice && selectedDevice.servicesCached)
text: qsTr("Services info loaded from cache")
color: Theme.colorText
}
Text {
anchors.left: parent.left
anchors.leftMargin: 56
anchors.right: parent.right
anchors.rightMargin: 16
anchors.verticalCenter: parent.verticalCenter

visible: (selectedDevice && !selectedDevice.servicesCached && !selectedDevice.connected)
text: qsTr("Device is disconnected")
color: Theme.colorText
}
}

model: (selectedDevice && selectedDevice.servicesList)
Expand Down
2 changes: 1 addition & 1 deletion qml/ScreenSettings.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ Loader {
contentWidth: -1
contentHeight: settingsColumn.height

boundsBehavior: isDesktop ? Flickable.OvershootBounds : Flickable.DragAndOvershootBounds
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar { visible: false }

Column {
Expand Down
24 changes: 17 additions & 7 deletions qml/components/BleCharacteristicWidget.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ Rectangle {

property var characteristic: modelData

property bool editable: (selectedDevice &&
selectedDevice.connected &&
selectedDevice.servicesScanned)

////////////////

Loader {
Expand All @@ -23,7 +27,7 @@ Rectangle {
parent: appContent

onConfirmed: {
//selectedDevice.askForWrite(characteristic.uuid_full, "wat")
// the popup itself is triggering the write
}
}
}
Expand Down Expand Up @@ -95,16 +99,24 @@ Rectangle {
model: modelData.propertiesList
ItemActionTag {
anchors.verticalCenter: parent.verticalCenter
enabled: (selectedDevice && selectedDevice.servicesScanned)
enabled: bleCharacteristicWidget.editable
text: modelData
colorBackground: {
if (!characteristic) return Theme.colorForeground
if (modelData === "Notify" && characteristic.notifyInProgress) return Theme.colorWarning
if (modelData === "Read" && characteristic.readInProgress) return Theme.colorWarning
if ((modelData === "Write" || modelData === "WriteNoResp") && characteristic.writeInProgress) return Theme.colorWarning
return Theme.colorForeground
}
highlighted: {
if (!characteristic) return false
if (modelData === "Notify") return characteristic.notifyInProgress
if (modelData === "Read") return characteristic.readInProgress
if (modelData === "Write" || modelData === "WriteNoResp") return characteristic.writeInProgress
return false
}
onClicked: {
if (selectedDevice && selectedDevice.servicesScanned) {
if (bleCharacteristicWidget.editable) {
if (text === "Notify") {
selectedDevice.askForNotify(characteristic.uuid_full)
}
Expand Down Expand Up @@ -137,10 +149,8 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
text: {
if (modelData.dataSize === 0) {
if (selectedDevice.servicesCached)
return qsTr("no data from cache")
else
return qsTr("no data")
if (selectedDevice.servicesCached) return qsTr("no data from cache")
else return qsTr("no data")
} else {
return modelData.dataSize + " " + qsTr("bytes")
}
Expand Down
10 changes: 7 additions & 3 deletions qml/components/BleServiceWidget.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,15 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
spacing: 8

Text { // serviceType
ItemTag { // serviceType
anchors.verticalCenter: parent.verticalCenter
text: modelData.serviceType
font.pixelSize: Theme.componentFontSize
color: Theme.colorSubText
}
ItemTag { // serviceStatus
anchors.verticalCenter: parent.verticalCenter
text: modelData.serviceStatusStr
}

IconSvg { // expandIcon
width: 24
height: 24
Expand Down Expand Up @@ -110,6 +113,7 @@ Rectangle {
model: modelData.characteristicList
delegate: BleCharacteristicWidget {
width: characteristicview.width
//editable: (modelData.serviceStatus === 3)
}
}

Expand Down
14 changes: 6 additions & 8 deletions qml/components/DeviceLogWidget.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import QtQuick.Layouts

import ThemeEngine

import "qrc:/js/UtilsBluetooth.js" as UtilsBluetooth

Rectangle {
id: logWidget
height: Math.max(24, logTxt.contentHeight) + 12
Expand All @@ -20,12 +18,12 @@ Rectangle {
width: 12

color: {
if (modelData.event == 1) return Theme.colorWarning
if (modelData.event == 2) return Theme.colorMaterialGreen
if (modelData.event == 3) return Theme.colorMaterialLime
if (modelData.event == 4) return Theme.colorMaterialBlue
if (modelData.event == 5) return Theme.colorMaterialLightBlue
if (modelData.event == 6) return Theme.colorMaterialGrey
if (modelData.event === 1) return Theme.colorError
if (modelData.event === 2) return Theme.colorMaterialGreen
if (modelData.event === 3) return Theme.colorMaterialLime
if (modelData.event === 4) return Theme.colorMaterialBlue
if (modelData.event === 5) return Theme.colorMaterialLightBlue
if (modelData.event === 6) return Theme.colorPrimary
return Theme.colorBox
}
}
Expand Down
3 changes: 3 additions & 0 deletions qml/components/FrequencyGraph.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,6 +343,7 @@ ChartView {
Row {
spacing: 6
Rectangle {
anchors.verticalCenter: parent.verticalCenter
width: 16
height: 16
radius: 4
Expand All @@ -359,6 +360,7 @@ ChartView {
Row {
spacing: 6
Rectangle {
anchors.verticalCenter: parent.verticalCenter
width: 16
height: 16
radius: 4
Expand All @@ -375,6 +377,7 @@ ChartView {
Row {
spacing: 6
Rectangle {
anchors.verticalCenter: parent.verticalCenter
width: 16
height: 16
radius: 4
Expand Down
6 changes: 5 additions & 1 deletion qml/components/ItemActionTag.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Rectangle {
width: contentText.contentWidth + 24

radius: Theme.componentRadius
color: (mousearea.containsMouse || control.highlighted) ? Qt.darker(Theme.colorForeground, 1.1) : Theme.colorForeground
color: (mousearea.containsMouse || control.highlighted) ? control.colorHighlight : control.colorBackground
Behavior on color { ColorAnimation { duration: 333; } }

// actions
Expand All @@ -24,6 +24,10 @@ Rectangle {
property int textCapitalization: Font.Normal
property bool highlighted: false

// colors
property string colorHighlight: Qt.darker(Theme.colorForeground, 1.1)
property string colorBackground: Theme.colorForeground

Text {
id: contentText
anchors.centerIn: parent
Expand Down
Loading

0 comments on commit e3e153c

Please sign in to comment.