Add reset button to G-Meter

assets/qml/Widgets/AccelerometerDelegate.qml

@@ -37,29 +37,18 @@ Window {
     //
     spacing: -1
     showIcon: false
-    implicitWidth: 240
+    implicitWidth: 260
     visible: opacity > 0
     opacity: enabled ? 1 : 0
-    implicitHeight: implicitWidth + 32
+    implicitHeight: implicitWidth + 96
     Behavior on opacity {NumberAnimation{}}
     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
     //
+    property real max: 0
+    property real min: 0
     property int index: 0
     property real accX: 0
     property real accY: 0
@@ -67,20 +56,18 @@ Window {
     property real meanGForce: 0
     property real gConstant: 9.80665
     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)
 
     //
-    // Redraw numbers & indicator
+    // Redraw indicators automatically
     //
-    onWidthChanged: numbersCanvas.requestPaint()
-    onHeightChanged: numbersCanvas.requestPaint()
     onMeanGForceChanged: indicatorCanvas.requestPaint()
 
     //
     // Animations
     //
+    Behavior on min {NumberAnimation{}}
+    Behavior on max {NumberAnimation{}}
     Behavior on meanGForce {NumberAnimation{}}
 
     //
@@ -124,118 +111,188 @@ Window {
     }
 
     //
-    // Units label
+    // Gauge & reset button
     //
-    Label {
-        text: qsTr("G Units")
-        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
+    ColumnLayout {
+        spacing: 0
         anchors.fill: parent
         anchors.margins: app.spacing * 2
-        Component.onCompleted: requestPaint()
-        onPaint: {
-            var ctx = getContext('2d')
 
-            for (var i = 0; i <= 7; ++i) {
-                var startupTheta = -180
-                var theta = (startupTheta + i * 360/8) * (Math.PI / 180)
-                var dX = (gauge.width * 0.4) * Math.cos(theta) + gauge.width / 2 - 9/2
-                var dY = (gauge.height * 0.4) * Math.sin(theta) + gauge.height / 2 + 9/2
+        //
+        // Spacer
+        //
+        Item {
+            Layout.fillHeight: true
+            Layout.minimumHeight: app.spacing * 2
+        }
 
-                ctx.font = "bold 18px " + app.monoFont
-                ctx.fillStyle = accel.indicatorColor
-                ctx.fillText(i, dX, dY)
+        //
+        // Gauge object
+        //
+        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
-                    var y = gauge.height / 2
-                    ctx.lineWidth = 2
-                    ctx.strokeStyle = accel.indicatorColor
+            //
+            // Redraw numbers automatically
+            //
+            onWidthChanged: numbersCanvas.requestPaint()
+            onHeightChanged: numbersCanvas.requestPaint()
 
-                    ctx.beginPath();
-                    ctx.arc(x, y, Math.abs(dX - x) + 21, theta * 1.05, Math.PI * 0.95)
-                    ctx.stroke()
-                    ctx.beginPath();
-                    ctx.arc(x, y, Math.abs(dX - x) + 15, theta * 1.05, Math.PI * 0.95)
-                    ctx.stroke()
+            //
+            // Units label
+            //
+            Label {
+                text: qsTr("G Units")
+                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
-    //
-    Canvas {
-        id: indicatorCanvas
-        anchors.fill: parent
-        anchors.margins: app.spacing * 2
-        Component.onCompleted: requestPaint()
-        onPaint: {
-            var ctx = getContext('2d')
+            //
+            // Indicator painter
+            //
+            Canvas {
+                id: indicatorCanvas
+                anchors.fill: parent
+                Component.onCompleted: requestPaint()
+                onPaint: {
+                    var ctx = getContext('2d')
 
-            function drawLineWithArrows(x0,y0,x1,y1,aWidth,aLength){
-                var dx=x1-x0;
-                var dy=y1-y0;
-                var angle=Math.atan2(dy,dx);
-                var length=Math.sqrt(dx*dx+dy*dy);
+                    function drawLineWithArrows(x0,y0,x1,y1,aWidth,aLength){
+                        var dx=x1-x0;
+                        var dy=y1-y0;
+                        var angle=Math.atan2(dy,dx);
+                        var length=Math.sqrt(dx*dx+dy*dy);
 
-                ctx.translate(x0,y0);
-                ctx.rotate(angle);
-                ctx.beginPath();
-                ctx.moveTo(0,0);
-                ctx.lineTo(length,0);
+                        ctx.translate(x0,y0);
+                        ctx.rotate(angle);
+                        ctx.beginPath();
+                        ctx.moveTo(0,0);
+                        ctx.lineTo(length,0);
 
-                ctx.moveTo(length-aLength,-aWidth);
-                ctx.lineTo(length,0);
-                ctx.lineTo(length-aLength,aWidth);
+                        ctx.moveTo(length-aLength,-aWidth);
+                        ctx.lineTo(length,0);
+                        ctx.lineTo(length-aLength,aWidth);
 
-                ctx.stroke();
-                ctx.setTransform(1,0,0,1,0,0);
+                        ctx.stroke();
+                        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
-                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)
+            //
+            // Central gauge
+            //
+            Rectangle {
+                width: 24
+                height: 24
+                color: "#111"
+                radius: width / 2
+                anchors.centerIn: parent
+                border.color: accel.indicatorColor
+                border.width: accel.indicatorWidth - 1
             }
-
-            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
-    //
-    Rectangle {
-        width: 24
-        height: 24
-        color: "#111"
-        radius: width / 2
-        anchors.centerIn: parent
-        border.color: accel.indicatorColor
-        border.width: accel.indicatorWidth - 1
+        //
+        // Spacer
+        //
+        Item {
+            Layout.fillHeight: true
+            Layout.minimumHeight: app.spacing * 2
+        }
+
+        //
+        // Reset button
+        //
+        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
+        }
     }
 }