227 lines
7.7 KiB
QML
227 lines
7.7 KiB
QML
import QtQuick
|
|
import QtQuick.Controls.Material
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import "."
|
|
import TactileIPC 1.0
|
|
|
|
Rectangle {
|
|
id: root
|
|
width: 340
|
|
color: Backend.lightMode ? "#F5F5F5" : "#2C2C2C"
|
|
radius: 8
|
|
border.color: Qt.rgba(0, 0, 0, 0.08)
|
|
property color accentColor: "#43a047"
|
|
|
|
function tr(text) {
|
|
I18n.retranslateToken
|
|
return qsTr(text)
|
|
}
|
|
|
|
Material.theme: Backend.lightMode ? Material.Light : Material.Dark
|
|
Material.accent: Material.Green
|
|
Material.primary: Material.Green
|
|
|
|
ScrollView {
|
|
id: scrollView
|
|
anchors.fill: parent
|
|
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
|
|
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
|
contentWidth: scrollView.availableWidth
|
|
contentHeight: contentLayout.implicitHeight + 24
|
|
|
|
ColumnLayout {
|
|
id: contentLayout
|
|
x: 12
|
|
y: 12
|
|
width: scrollView.availableWidth - 24
|
|
spacing: 12
|
|
|
|
LiveTrendCard {
|
|
id: card
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 180
|
|
title: root.tr("Payload Sum")
|
|
|
|
Connections {
|
|
target: Backend.data
|
|
function onMetricsChanged() {
|
|
if (Backend.data.frameCount > 0)
|
|
card.plot.append(Backend.data.metricSum)
|
|
}
|
|
}
|
|
}
|
|
|
|
CollapsiblePanel {
|
|
title: root.tr("Live Trend")
|
|
expanded: true
|
|
Layout.fillWidth: true
|
|
|
|
|
|
|
|
/*
|
|
Canvas {
|
|
id: trendCanvas
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 180
|
|
property var samples: [0.08, 0.24, 0.52, 0.41, 0.63, 0.47, 0.72, 0.58, 0.82, 0.69]
|
|
|
|
onPaint: {
|
|
const ctx = getContext("2d")
|
|
const w = width
|
|
const h = height
|
|
ctx.clearRect(0, 0, w, h)
|
|
|
|
ctx.strokeStyle = "#D8EAD9"
|
|
ctx.lineWidth = 1
|
|
for (let i = 1; i < 5; i++) {
|
|
const y = (h / 5) * i
|
|
ctx.beginPath()
|
|
ctx.moveTo(0, y)
|
|
ctx.lineTo(w, y)
|
|
ctx.stroke()
|
|
}
|
|
|
|
ctx.strokeStyle = root.accentColor
|
|
ctx.lineWidth = 2
|
|
ctx.beginPath()
|
|
for (let i = 0; i < samples.length; i++) {
|
|
const x = (w - 12) * (i / (samples.length - 1)) + 6
|
|
const y = h - (h - 12) * samples[i] - 6
|
|
if (i === 0)
|
|
ctx.moveTo(x, y)
|
|
else
|
|
ctx.lineTo(x, y)
|
|
}
|
|
ctx.stroke()
|
|
}
|
|
|
|
onWidthChanged: requestPaint()
|
|
onHeightChanged: requestPaint()
|
|
Component.onCompleted: requestPaint()
|
|
}
|
|
*/
|
|
}
|
|
|
|
CollapsiblePanel {
|
|
title: root.tr("Metrics")
|
|
expanded: true
|
|
Layout.fillWidth: true
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 8
|
|
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
radius: 6
|
|
color: Qt.rgba(0, 0, 0, 0.03)
|
|
border.color: Qt.rgba(0, 0, 0, 0.08)
|
|
height: 72
|
|
|
|
Column {
|
|
anchors.centerIn: parent
|
|
spacing: 4
|
|
Label { text: root.tr("峰值"); font.pixelSize: 12 }
|
|
Label { text: Backend.data.metricPeak.toFixed(0); font.pixelSize: 18; font.bold: true }
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
radius: 6
|
|
color: Qt.rgba(0, 0, 0, 0.03)
|
|
border.color: Qt.rgba(0, 0, 0, 0.08)
|
|
height: 72
|
|
|
|
Column {
|
|
anchors.centerIn: parent
|
|
spacing: 4
|
|
Label { text: root.tr("均方根"); font.pixelSize: 12 }
|
|
Label { text: Backend.data.metricRms.toFixed(0); font.pixelSize: 18; font.bold: true }
|
|
}
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 8
|
|
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
radius: 6
|
|
color: Qt.rgba(0, 0, 0, 0.03)
|
|
border.color: Qt.rgba(0, 0, 0, 0.08)
|
|
height: 72
|
|
|
|
Column {
|
|
anchors.centerIn: parent
|
|
spacing: 4
|
|
Label { text: root.tr("平均值"); font.pixelSize: 12 }
|
|
Label { text: Backend.data.metricAvg.toFixed(0); font.pixelSize: 18; font.bold: true }
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
radius: 6
|
|
color: Qt.rgba(0, 0, 0, 0.03)
|
|
border.color: Qt.rgba(0, 0, 0, 0.08)
|
|
height: 72
|
|
|
|
Column {
|
|
anchors.centerIn: parent
|
|
spacing: 4
|
|
Label { text: root.tr("变化量"); font.pixelSize: 12 }
|
|
Label { text: Backend.data.metricDelta.toFixed(0); font.pixelSize: 18; font.bold: true }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
CollapsiblePanel {
|
|
title: root.tr("Session")
|
|
expanded: true
|
|
Layout.fillWidth: true
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 8
|
|
Label { text: root.tr("Frames"); Layout.preferredWidth: 80 }
|
|
Label { text: Backend.data.frameCount; Layout.fillWidth: true; horizontalAlignment: Text.AlignRight }
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 8
|
|
Label { text: root.tr("Playback"); Layout.preferredWidth: 80 }
|
|
Label {
|
|
text: Backend.data.playbackRunning ? root.tr("Running") : root.tr("Idle")
|
|
Layout.fillWidth: true
|
|
horizontalAlignment: Text.AlignRight
|
|
}
|
|
}
|
|
}
|
|
|
|
CollapsiblePanel {
|
|
title: root.tr("Legend")
|
|
expanded: true
|
|
Layout.fillWidth: true
|
|
|
|
Legend {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
Layout.preferredHeight: 200
|
|
barWidth: 36
|
|
minValue: Backend.rangeMin
|
|
maxValue: Backend.rangeMax
|
|
colorLow: Backend.colorLow
|
|
colorMid: Backend.colorMid
|
|
colorHigh: Backend.colorHigh
|
|
}
|
|
}
|
|
|
|
Item { Layout.fillHeight: true }
|
|
}
|
|
}
|
|
}
|