diff --git a/qml/CircleMeter.qml b/qml/CircleMeter.qml index 60b1154..6a8a086 100644 --- a/qml/CircleMeter.qml +++ b/qml/CircleMeter.qml @@ -11,13 +11,33 @@ Item { property double min: -1 /// maximum level property double max: 1 + /// numbers to write on the scale + property variant marks: [-1, -0.5, 0, 0.5, 1, -0.2, 0.2, -0.8, 0.8] /// theme object property QtObject theme + /// positions helper functions + function angle(level) { + return (level - min) / (max - min) * Math.PI - Math.PI / 2 + } + function getx(angle, k) { + return width * 0.5 + width * 0.5 * k * Math.sin(angle) + } + function gety(angle, k) { + // k: [0,1] + return height - height * k * Math.cos(angle) + } + /// Ellipse Canvas { id: ellipse anchors.fill: parent + + property double mark_k_min: 0.90 + property double mark_k_max: 0.95 + property double mark_k_text: 0.85 + property int font_size: 16 + onPaint: { var ctx = getContext('2d'); ctx.strokeStyle = theme.primaryColor @@ -28,6 +48,18 @@ Item { //ctx.closePath() ctx.stroke() console.log("ellipse done") + ctx.font = font_size + "px sans-serif" + ctx.textAlign = "center" + + for (var i = 0; i < marks.length; i++) { + var a = angle(marks[i]) + ctx.beginPath() + ctx.moveTo(getx(a, mark_k_min), gety(a, mark_k_min)) + ctx.lineTo(getx(a, mark_k_max), gety(a, mark_k_max)) + ctx.stroke() + ctx.fillText(marks[i], getx(a, mark_k_text), gety(a, mark_k_text)) + ctx.strokeText() + } } } @@ -36,16 +68,16 @@ Item { 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 + property double k_base: 0.1 + property double angle: parent.angle(level) 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.moveTo(getx(angle, k_base), gety(angle, k_base)) + ctx.lineTo(getx(angle, k), gety(angle, k)) ctx.stroke() console.log("angle: " + angle)