CircleMeter: first arrow implementation with Canvas

qml/CircleMeter.qml

@@ -6,7 +6,7 @@ import QtQuick 2.0
 
 Item {
 	/// current level
-	property double level: 0
+	property double level: 0.5 
 	/// minimum level
 	property double min: -1
 	/// maximum level
@@ -14,19 +14,41 @@ Item {
 	/// theme object
 	property QtObject theme
 
+	/// Ellipse
 	Canvas {
-		id: canvas
+		id: ellipse
 		anchors.fill: parent
 		onPaint: {
-			var ctx = canvas.getContext('2d');
+			var ctx = getContext('2d');
 			ctx.strokeStyle = theme.primaryColor
 			ctx.lineWidth = 1
 			ctx.beginPath()
 			ctx.moveTo(0,height - 1)
-			ctx.bezierCurveTo(0, 0, width * 0.5 * (1 - Math.cos(Math.PI/4)), height  * Math.sin(Math.PI/4), width / 2, 0)
+			ctx.bezierCurveTo(0, -height * 0.33, width - 1, -height * 0.33, width - 1, height - 1)
 			//ctx.closePath()
 			ctx.stroke()
-			console.log("canvas done")
+			console.log("ellipse done")
+		}
+	}
+
+	Canvas {
+		/// level arrow
+		id: arrow
+		anchors.fill: parent
+		property double k: 0.99
+		property double offset_base: 0.95
+		property double angle: (level - min) / (max - min) * Math.PI - Math.PI / 2
+
+		onPaint: {
+			var ctx = getContext('2d');
+			ctx.strokeStyle = theme.primaryColor
+			ctx.lineWidth = 1
+			ctx.beginPath()
+			ctx.moveTo(width / 2, (height - 1) * offset_base)
+			ctx.lineTo(width * 0.5 + width * 0.5 * k * Math.sin(angle), height * k * (1 - Math.cos(angle) + 1 - k))
+			ctx.stroke()
+
+			console.log("angle: " + angle)
 		}
 	}
 }