颜色映射图例，规格尺寸修改
This commit is contained in:
@@ -22,177 +22,205 @@ Rectangle {
|
||||
Material.accent: Material.Green
|
||||
Material.primary: Material.Green
|
||||
|
||||
ColumnLayout {
|
||||
ScrollView {
|
||||
id: scrollView
|
||||
anchors.fill: parent
|
||||
anchors.margins: 12
|
||||
spacing: 12
|
||||
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
|
||||
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
||||
contentWidth: scrollView.availableWidth
|
||||
contentHeight: contentLayout.implicitHeight + 24
|
||||
|
||||
LiveTrendCard {
|
||||
id: card
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 180
|
||||
title: root.tr("Payload Sum")
|
||||
ColumnLayout {
|
||||
id: contentLayout
|
||||
x: 12
|
||||
y: 12
|
||||
width: scrollView.availableWidth - 24
|
||||
spacing: 12
|
||||
|
||||
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
|
||||
LiveTrendCard {
|
||||
id: card
|
||||
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]
|
||||
title: root.tr("Payload Sum")
|
||||
|
||||
onPaint: {
|
||||
const ctx = getContext("2d")
|
||||
const w = width
|
||||
const h = height
|
||||
ctx.clearRect(0, 0, w, h)
|
||||
Connections {
|
||||
target: Backend.data
|
||||
function onMetricsChanged() {
|
||||
if (Backend.data.frameCount > 0)
|
||||
card.plot.append(Backend.data.metricSum)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ctx.strokeStyle = "#D8EAD9"
|
||||
ctx.lineWidth = 1
|
||||
for (let i = 1; i < 5; i++) {
|
||||
const y = (h / 5) * i
|
||||
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()
|
||||
ctx.moveTo(0, y)
|
||||
ctx.lineTo(w, y)
|
||||
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()
|
||||
}
|
||||
|
||||
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)
|
||||
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 }
|
||||
}
|
||||
}
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
onWidthChanged: requestPaint()
|
||||
onHeightChanged: requestPaint()
|
||||
Component.onCompleted: requestPaint()
|
||||
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 }
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item { Layout.fillHeight: true }
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user