mirror of
https://github.com/Serial-Studio/Serial-Studio.git
synced 2025-01-31 17:42:55 +08:00
Add reset button to G-Meter
This commit is contained in:
Alex Spataru
parent
ae7276d13c
commit
422b122404
@ -37,29 +37,18 @@ Window {
|
|||||||
//
|
//
|
||||||
spacing: -1
|
spacing: -1
|
||||||
showIcon: false
|
showIcon: false
|
||||||
implicitWidth: 240
|
implicitWidth: 260
|
||||||
visible: opacity > 0
|
visible: opacity > 0
|
||||||
opacity: enabled ? 1 : 0
|
opacity: enabled ? 1 : 0
|
||||||
implicitHeight: implicitWidth + 32
|
implicitHeight: implicitWidth + 96
|
||||||
Behavior on opacity {NumberAnimation{}}
|
Behavior on opacity {NumberAnimation{}}
|
||||||
borderColor: Qt.rgba(81/255, 116/255, 151/255, 1)
|
borderColor: Qt.rgba(81/255, 116/255, 151/255, 1)
|
||||||
|
|
||||||
//
|
|
||||||
// Gauge object
|
|
||||||
//
|
|
||||||
Rectangle {
|
|
||||||
id: gauge
|
|
||||||
border.width: 2
|
|
||||||
radius: width / 2
|
|
||||||
anchors.fill: parent
|
|
||||||
anchors.margins: app.spacing * 2
|
|
||||||
color: Qt.rgba(18 / 255, 18 / 255, 24 / 255, 1)
|
|
||||||
border.color: Qt.rgba(230/255, 224/255, 178/255, 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Custom properties
|
// Custom properties
|
||||||
//
|
//
|
||||||
|
property real max: 0
|
||||||
|
property real min: 0
|
||||||
property int index: 0
|
property int index: 0
|
||||||
property real accX: 0
|
property real accX: 0
|
||||||
property real accY: 0
|
property real accY: 0
|
||||||
@ -67,20 +56,18 @@ Window {
|
|||||||
property real meanGForce: 0
|
property real meanGForce: 0
|
||||||
property real gConstant: 9.80665
|
property real gConstant: 9.80665
|
||||||
readonly property real indicatorWidth: 4
|
readonly property real indicatorWidth: 4
|
||||||
property real max: Number.MIN_SAFE_INTEGER
|
|
||||||
property real min: Number.MAX_SAFE_INTEGER
|
|
||||||
property color indicatorColor: Qt.rgba(230/255, 224/255, 178/255, 1)
|
property color indicatorColor: Qt.rgba(230/255, 224/255, 178/255, 1)
|
||||||
|
|
||||||
//
|
//
|
||||||
// Redraw numbers & indicator
|
// Redraw indicators automatically
|
||||||
//
|
//
|
||||||
onWidthChanged: numbersCanvas.requestPaint()
|
|
||||||
onHeightChanged: numbersCanvas.requestPaint()
|
|
||||||
onMeanGForceChanged: indicatorCanvas.requestPaint()
|
onMeanGForceChanged: indicatorCanvas.requestPaint()
|
||||||
|
|
||||||
//
|
//
|
||||||
// Animations
|
// Animations
|
||||||
//
|
//
|
||||||
|
Behavior on min {NumberAnimation{}}
|
||||||
|
Behavior on max {NumberAnimation{}}
|
||||||
Behavior on meanGForce {NumberAnimation{}}
|
Behavior on meanGForce {NumberAnimation{}}
|
||||||
|
|
||||||
//
|
//
|
||||||
@ -124,118 +111,188 @@ Window {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
// Units label
|
// Gauge & reset button
|
||||||
//
|
//
|
||||||
Label {
|
ColumnLayout {
|
||||||
text: qsTr("G Units")
|
spacing: 0
|
||||||
anchors.centerIn: parent
|
|
||||||
font.family: app.monoFont
|
|
||||||
anchors.verticalCenterOffset: 32
|
|
||||||
color: Qt.rgba(81/255, 116/255, 151/255, 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Numbers painter
|
|
||||||
//
|
|
||||||
Canvas {
|
|
||||||
opacity: 0.8
|
|
||||||
id: numbersCanvas
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.margins: app.spacing * 2
|
anchors.margins: app.spacing * 2
|
||||||
Component.onCompleted: requestPaint()
|
|
||||||
onPaint: {
|
|
||||||
var ctx = getContext('2d')
|
|
||||||
|
|
||||||
for (var i = 0; i <= 7; ++i) {
|
//
|
||||||
var startupTheta = -180
|
// Spacer
|
||||||
var theta = (startupTheta + i * 360/8) * (Math.PI / 180)
|
//
|
||||||
var dX = (gauge.width * 0.4) * Math.cos(theta) + gauge.width / 2 - 9/2
|
Item {
|
||||||
var dY = (gauge.height * 0.4) * Math.sin(theta) + gauge.height / 2 + 9/2
|
Layout.fillHeight: true
|
||||||
|
Layout.minimumHeight: app.spacing * 2
|
||||||
|
}
|
||||||
|
|
||||||
ctx.font = "bold 18px " + app.monoFont
|
//
|
||||||
ctx.fillStyle = accel.indicatorColor
|
// Gauge object
|
||||||
ctx.fillText(i, dX, dY)
|
//
|
||||||
|
Rectangle {
|
||||||
|
id: gauge
|
||||||
|
border.width: 2
|
||||||
|
radius: width / 2
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.minimumHeight: width
|
||||||
|
Layout.maximumHeight: width
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
color: Qt.rgba(18 / 255, 18 / 255, 24 / 255, 1)
|
||||||
|
border.color: Qt.rgba(230/255, 224/255, 178/255, 1)
|
||||||
|
|
||||||
if (i === 7) {
|
//
|
||||||
var x = gauge.width / 2
|
// Redraw numbers automatically
|
||||||
var y = gauge.height / 2
|
//
|
||||||
ctx.lineWidth = 2
|
onWidthChanged: numbersCanvas.requestPaint()
|
||||||
ctx.strokeStyle = accel.indicatorColor
|
onHeightChanged: numbersCanvas.requestPaint()
|
||||||
|
|
||||||
ctx.beginPath();
|
//
|
||||||
ctx.arc(x, y, Math.abs(dX - x) + 21, theta * 1.05, Math.PI * 0.95)
|
// Units label
|
||||||
ctx.stroke()
|
//
|
||||||
ctx.beginPath();
|
Label {
|
||||||
ctx.arc(x, y, Math.abs(dX - x) + 15, theta * 1.05, Math.PI * 0.95)
|
text: qsTr("G Units")
|
||||||
ctx.stroke()
|
anchors.centerIn: parent
|
||||||
|
font.family: app.monoFont
|
||||||
|
anchors.verticalCenterOffset: 32
|
||||||
|
color: Qt.rgba(81/255, 116/255, 151/255, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Numbers painter
|
||||||
|
//
|
||||||
|
Canvas {
|
||||||
|
opacity: 0.8
|
||||||
|
id: numbersCanvas
|
||||||
|
anchors.fill: parent
|
||||||
|
Component.onCompleted: requestPaint()
|
||||||
|
onPaint: {
|
||||||
|
var ctx = getContext('2d')
|
||||||
|
|
||||||
|
for (var i = 0; i <= 7; ++i) {
|
||||||
|
var radius = Math.min(gauge.width, gauge.height) / 2
|
||||||
|
|
||||||
|
var startupTheta = -180
|
||||||
|
var theta = (startupTheta + i * 360/8) * (Math.PI / 180)
|
||||||
|
var dX = (radius - 18) * Math.cos(theta) + radius - 9
|
||||||
|
var dY = (radius - 18) * Math.sin(theta) + radius + 9
|
||||||
|
|
||||||
|
ctx.font = "bold 18px " + app.monoFont
|
||||||
|
ctx.fillStyle = accel.indicatorColor
|
||||||
|
ctx.fillText(i, dX, dY)
|
||||||
|
|
||||||
|
if (i === 7) {
|
||||||
|
var x = radius
|
||||||
|
var y = radius
|
||||||
|
var spacing = 10 * Math.PI / 180.0;
|
||||||
|
var startAngle = theta + spacing
|
||||||
|
var finishAngle = Math.PI - spacing
|
||||||
|
|
||||||
|
ctx.lineWidth = 2
|
||||||
|
ctx.strokeStyle = accel.indicatorColor
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, radius - 21, startAngle, finishAngle)
|
||||||
|
ctx.stroke()
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, radius - 15, startAngle, finishAngle)
|
||||||
|
ctx.stroke()
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Indicator painter
|
// Indicator painter
|
||||||
//
|
//
|
||||||
Canvas {
|
Canvas {
|
||||||
id: indicatorCanvas
|
id: indicatorCanvas
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
anchors.margins: app.spacing * 2
|
Component.onCompleted: requestPaint()
|
||||||
Component.onCompleted: requestPaint()
|
onPaint: {
|
||||||
onPaint: {
|
var ctx = getContext('2d')
|
||||||
var ctx = getContext('2d')
|
|
||||||
|
|
||||||
function drawLineWithArrows(x0,y0,x1,y1,aWidth,aLength){
|
function drawLineWithArrows(x0,y0,x1,y1,aWidth,aLength){
|
||||||
var dx=x1-x0;
|
var dx=x1-x0;
|
||||||
var dy=y1-y0;
|
var dy=y1-y0;
|
||||||
var angle=Math.atan2(dy,dx);
|
var angle=Math.atan2(dy,dx);
|
||||||
var length=Math.sqrt(dx*dx+dy*dy);
|
var length=Math.sqrt(dx*dx+dy*dy);
|
||||||
|
|
||||||
ctx.translate(x0,y0);
|
ctx.translate(x0,y0);
|
||||||
ctx.rotate(angle);
|
ctx.rotate(angle);
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(0,0);
|
ctx.moveTo(0,0);
|
||||||
ctx.lineTo(length,0);
|
ctx.lineTo(length,0);
|
||||||
|
|
||||||
ctx.moveTo(length-aLength,-aWidth);
|
ctx.moveTo(length-aLength,-aWidth);
|
||||||
ctx.lineTo(length,0);
|
ctx.lineTo(length,0);
|
||||||
ctx.lineTo(length-aLength,aWidth);
|
ctx.lineTo(length-aLength,aWidth);
|
||||||
|
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
ctx.setTransform(1,0,0,1,0,0);
|
ctx.setTransform(1,0,0,1,0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawIndicator(value, color, width, lenGain) {
|
||||||
|
var deg = ((Math.min(value, 7.5) / 8) * 360) - 180
|
||||||
|
var rad = deg * (Math.PI / 180)
|
||||||
|
var len = Math.min(gauge.width, gauge.height) * lenGain
|
||||||
|
|
||||||
|
var x = gauge.width / 2
|
||||||
|
var y = gauge.height / 2
|
||||||
|
var x1 = x + Math.cos(rad) * len
|
||||||
|
var y1 = y + Math.sin(rad) * len
|
||||||
|
|
||||||
|
ctx.lineWidth = width
|
||||||
|
ctx.strokeStyle = color
|
||||||
|
drawLineWithArrows(x, y, x1, y1, width, width * 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.reset()
|
||||||
|
drawIndicator(accel.max, Qt.rgba(215/255, 45/255, 96/255, 1), accel.indicatorWidth * 0.8, 0.20)
|
||||||
|
drawIndicator(accel.min, Qt.rgba(45/255, 96/255, 115/255, 1), accel.indicatorWidth * 0.8, 0.20)
|
||||||
|
drawIndicator(accel.meanGForce, accel.indicatorColor, accel.indicatorWidth, 0.28)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawIndicator(value, color, width, lenGain) {
|
//
|
||||||
var deg = ((Math.min(value, 7.5) / 8) * 360) - 180
|
// Central gauge
|
||||||
var rad = deg * (Math.PI / 180)
|
//
|
||||||
var len = Math.min(gauge.width, gauge.height) * lenGain
|
Rectangle {
|
||||||
|
width: 24
|
||||||
var x = gauge.width / 2
|
height: 24
|
||||||
var y = gauge.height / 2
|
color: "#111"
|
||||||
var x1 = x + Math.cos(rad) * len
|
radius: width / 2
|
||||||
var y1 = y + Math.sin(rad) * len
|
anchors.centerIn: parent
|
||||||
|
border.color: accel.indicatorColor
|
||||||
ctx.lineWidth = width
|
border.width: accel.indicatorWidth - 1
|
||||||
ctx.strokeStyle = color
|
|
||||||
drawLineWithArrows(x, y, x1, y1, width, width * 2)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ctx.reset()
|
|
||||||
drawIndicator(accel.max, Qt.rgba(215/255, 45/255, 96/255, 1), accel.indicatorWidth * 0.8, 0.20)
|
|
||||||
drawIndicator(accel.min, Qt.rgba(45/255, 96/255, 115/255, 1), accel.indicatorWidth * 0.8, 0.20)
|
|
||||||
drawIndicator(accel.meanGForce, accel.indicatorColor, accel.indicatorWidth, 0.28)
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// Central gauge
|
// Spacer
|
||||||
//
|
//
|
||||||
Rectangle {
|
Item {
|
||||||
width: 24
|
Layout.fillHeight: true
|
||||||
height: 24
|
Layout.minimumHeight: app.spacing * 2
|
||||||
color: "#111"
|
}
|
||||||
radius: width / 2
|
|
||||||
anchors.centerIn: parent
|
//
|
||||||
border.color: accel.indicatorColor
|
// Reset button
|
||||||
border.width: accel.indicatorWidth - 1
|
//
|
||||||
|
Button {
|
||||||
|
text: qsTr("Reset")
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
onClicked: {
|
||||||
|
accel.max = 0
|
||||||
|
accel.min = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Spacer
|
||||||
|
//
|
||||||
|
Item {
|
||||||
|
Layout.fillHeight: true
|
||||||
|
Layout.minimumHeight: app.spacing * 2
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 55 KiB |
Loading…
x
Reference in New Issue
Block a user