Align various sensor displays

nymea-app/ui/devicepages/SensorDevicePage.qml

@@ -31,6 +31,7 @@
 import QtQuick 2.5
 import QtQuick.Controls 2.1
 import QtQuick.Layouts 1.1
+import QtGraphicalEffects 1.0
 import Nymea 1.0
 import "../components"
 import "../customviews"
@@ -362,16 +363,29 @@ ThingPageBase {
             Behavior on progress { NumberAnimation { duration: Style.slowAnimationDuration; easing.type: Easing.InOutQuad } }
             onProgressChanged: requestPaint();
 
-            Label {
+            ColumnLayout {
                 anchors.centerIn: parent
-                anchors.verticalCenter: -Style.smallMargins
+                anchors.verticalCenterOffset: -Style.smallMargins
                 width: parent.width * 0.6
-                text: Types.toUiValue(progressCanvas.state.value, progressCanvas.stateType.unit).toFixed(1) + " " + Types.toUiUnit(progressCanvas.stateType.unit)
+
-                font.pixelSize: Math.min(Style.largeFont.pixelSize, parent.height / 6)
+                Label {
+                    Layout.fillWidth: true
+                    text: Types.toUiValue(progressCanvas.state.value, progressCanvas.stateType.unit).toFixed(1)
                     wrapMode: Text.WordWrap
-                horizontalAlignment: Text.AlignHCenter
+                    font.pixelSize: Math.min(Style.hugeFont.pixelSize, progressCanvas.height / 8)
                     maximumLineCount: 2
+                    horizontalAlignment: Text.AlignHCenter
+                    elide: Text.ElideRight
                 }
+                Label {
+                    Layout.fillWidth: true
+                    text: Types.toUiUnit(progressCanvas.stateType.unit)
+                    font.pixelSize: Math.min(Style.largeFont.pixelSize, progressCanvas.height / 12)
+                    horizontalAlignment: Text.AlignHCenter
+                    elide: Text.ElideRight
+                }
+            }
+
 
             onPaint: {
                 var ctx = getContext("2d");
@@ -417,7 +431,7 @@ ThingPageBase {
 
     Component {
         id: scaleComponent
-        Canvas {
+        Item {
             id: scaleCanvas
             property string interfaceName: parent.interfaceName
             property StateType stateType: parent.stateType
@@ -475,32 +489,12 @@ ThingPageBase {
                 return baseAngle + angleRange * progress
             }
             Behavior on angle { NumberAnimation { duration: Style.slowAnimationDuration; easing.type: Easing.InOutQuad } }
-            onAngleChanged: requestPaint();
+            onAngleChanged: maskCanvas.requestPaint();
-
-            ColumnLayout {
-                anchors.centerIn: parent
-                anchors.verticalCenterOffset: -Style.smallMargins
-                width: parent.width * 0.6
-
-                Label {
-                    Layout.fillWidth: true
-                    text: scaleCanvas.scale[scaleCanvas.currentIndex].text
-                    font.pixelSize: Math.min(Style.largeFont.pixelSize, scaleCanvas.height / 6)
-                    wrapMode: Text.WordWrap
-//                    color: scaleCanvas.scale[scaleCanvas.currentIndex].color
-                    horizontalAlignment: Text.AlignHCenter
-                    maximumLineCount: 2
-                }
-                Label {
-                    Layout.fillWidth: true
-                    text: Types.toUiValue(scaleCanvas.state.value, scaleCanvas.stateType.unit).toFixed(1) + " " + Types.toUiUnit(scaleCanvas.stateType.unit)
-                    font.pixelSize: Math.min(Style.smallFont.pixelSize, scaleCanvas.height / 12)
-                    wrapMode: Text.WordWrap
-                    horizontalAlignment: Text.AlignHCenter
-                }
-            }
-
 
+            Canvas {
+                id: baseCanvas
+                anchors.fill: parent
+                visible: false
                 onPaint: {
                     var ctx = getContext("2d");
                     ctx.reset();
@@ -543,38 +537,76 @@ ThingPageBase {
                         ctx.stroke()
                         ctx.closePath()
                     }
+                }
+            }
+            Canvas {
+                id: maskCanvas
+                anchors.fill: parent
+                visible: false
+                onPaint: {
+                    var ctx = getContext("2d");
+                    ctx.reset();
 
-                var tipRadius = width / 2 - scaleCanvas.scaleWidth
-                var baseRadius = tipRadius - scaleCanvas.scaleWidth / 2
-
-                var tipX = tipRadius * Math.cos(scaleCanvas.angle * Math.PI/180)
-                var tipY = tipRadius * Math.sin(scaleCanvas.angle * Math.PI/180)
-
-                var base1X = baseRadius * Math.cos((scaleCanvas.angle - 5) * Math.PI/180)
-                var base1Y = baseRadius * Math.sin((scaleCanvas.angle - 5) * Math.PI/180)
-                var base2X = baseRadius * Math.cos((scaleCanvas.angle + 5) * Math.PI/180)
-                var base2Y = baseRadius * Math.sin((scaleCanvas.angle + 5) * Math.PI/180)
-
-
-                ctx.lineWidth = 1
-                ctx.fillStyle = Style.foregroundColor
                     ctx.beginPath()
-                ctx.moveTo(tipX, tipY)
+                    ctx.fillStyle = Style.foregroundColor
-                ctx.lineTo(base1X, base1Y)
+
-                ctx.lineTo(base2X, base2Y)
+                    ctx.translate(width / 2, height / 2)
-                ctx.moveTo(tipX, tipY)
+                    ctx.rotate(135 * Math.PI / 180)
+
+                    ctx.lineCap = "round"
+                    ctx.lineWidth = width * .1
+
+                    ctx.beginPath()
+                    ctx.strokeStyle = "#55ffffff"
+                    var startAngle = 0
+                    var endAngle = 270
+                    var radStart = startAngle * Math.PI/180;
+                    var radEnd = endAngle * Math.PI/180;
+                    ctx.arc(0, 0, width / 2 - ctx.lineWidth / 2, radStart, radEnd)
                     ctx.stroke()
-                ctx.fill()
                     ctx.closePath()
 
-
+                    ctx.beginPath()
-//                ctx.beginPath()
+                    ctx.strokeStyle = "#000000"
-//                ctx.strokeStyle = app.interfaceToColor(progressCanvas.interfaceName)
+                    radEnd = scaleCanvas.angle * Math.PI/180
-//                radEnd *= progressCanvas.progress
+                    ctx.arc(0, 0, width / 2 - ctx.lineWidth / 2, radStart, radEnd)
-//                ctx.arc(0, 0, width / 2 - ctx.lineWidth / 2, radStart, radEnd)
+                    ctx.stroke()
-//                ctx.stroke()
+                    ctx.closePath()
-//                ctx.closePath()
                 }
+            }
+
+            OpacityMask {
+                anchors.fill: parent
+                source: baseCanvas
+                maskSource: maskCanvas
+            }
+
+
+            ColumnLayout {
+                anchors.centerIn: parent
+                anchors.verticalCenterOffset: -Style.smallMargins
+                width: parent.width * 0.6
+
+                Label {
+                    Layout.fillWidth: true
+                    text: scaleCanvas.scale[scaleCanvas.currentIndex].text
+                    font.pixelSize: Math.min(Style.hugeFont.pixelSize, scaleCanvas.height / 8)
+                    wrapMode: Text.WordWrap
+    //                    color: scaleCanvas.scale[scaleCanvas.currentIndex].color
+                    horizontalAlignment: Text.AlignHCenter
+                    elide: Text.ElideRight
+                    maximumLineCount: 2
+                }
+                Label {
+                    Layout.fillWidth: true
+                    text: Types.toUiValue(scaleCanvas.state.value, scaleCanvas.stateType.unit).toFixed(1) + " " + Types.toUiUnit(scaleCanvas.stateType.unit)
+                    font.pixelSize: Math.min(Style.largeFont.pixelSize, scaleCanvas.height / 12)
+                    wrapMode: Text.WordWrap
+                    horizontalAlignment: Text.AlignHCenter
+                    elide: Text.ElideRight
+                }
+            }
+
 
             ColorIcon {
                 anchors.horizontalCenter: parent.horizontalCenter

nymea-app/ui/utils/AirQualityIndex.qml

@@ -163,7 +163,7 @@ Item {
             "color": Style.orange
         },
         {
-            "value": 50,
+            "value": 255,
             "angle": 270,
             "text": qsTr("Very high"),
             "color": Style.red