SailTuner/qml/CircleMeter.qml

import QtQuick 2.0

/**
 * Meter in half circle
 */

Item {
	/// current level
	property double level: 0.5 
	/// minimum level
	property double min: -50
	/// maximum level
	property double max: 50
	/// numbers to write on the scale
	property variant marks: [-40, -20, 0, 20, 40]
	/// interval of little marks
	property double submarks_int: 5
	/// marks regions colors
	property variant region_color: ["#F88E48", "#F8DE48", "#99E882", "#F8DE48", "#F88E48"]
	/// theme object
	property QtObject theme

	property double r_circle_min: 0.85
	property double r_circle_max: 1

	property double r_arrow_base: 0.05
	property double _height: width / 2

	property double amin: angle(min)
	property double amax: angle(max)

	/// 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)
	}
	function dist(x1, y1, x2, y2) {
		return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
	}

	// return the 2 orthoganals points from b with ref a, with dist d from b
	function orth(ax, ay, bx, by, d) {
		var D = dist(ax, ay, bx, by)
		var k = d / D
		var kx = k * (bx - ax);
		var ky = k * (by - ay);
		return [
			bx + ky, by - kx,
			bx - ky, by + kx
		];
	}

	/// objects draw

	function arc(ctx, k) {
		ctx.beginPath()
		ctx.arc(width/2, height + 1, k * width / 2, 0, Math.PI, 1)
		ctx.stroke()
		return
	}

	function line_mark(ctx, value, r_min, r_max) {
		var a = angle(value)
		ctx.beginPath()
		ctx.moveTo(getx(a, r_min), gety(a, r_min))
		ctx.lineTo(getx(a, r_max), gety(a, r_max))
		ctx.stroke()
	}

	/// Ellipse
	Canvas {
		id: ellipse
		anchors.fill: parent

		property double r_text: 0.92

		property double l_marker: 0.035
		property double h_marker: 6

		property double l_submarker: 0.020
		property double h_submarker: 2

		property int font_size: 20

		onPaint: {
			var ctx = getContext('2d');
			ctx.strokeStyle = theme.primaryColor
			ctx.lineWidth = 1

			arc(ctx, r_circle_min)
			arc(ctx, r_circle_max)

			ctx.font = font_size + "px sans-serif"
			ctx.textAlign = "center"
			//ctx.fillStyle = theme.secondaryColor

			// first sub marks
			ctx.strokeStyle = theme.primaryColor
			ctx.lineWidth = h_submarker
			for (var j = marks[0] - submarks_int; j > min; j -= submarks_int) {
				line_mark(ctx, j, r_circle_min - l_submarker, r_circle_min + l_submarker)
			}

			ctx.fillStyle = theme.primaryColor
			for (var i = 0; i < marks.length; i++) {
				ctx.strokeStyle = theme.secondaryColor
				ctx.lineWidth = h_marker
				line_mark(ctx, marks[i], r_circle_min - l_marker, r_circle_min + l_marker)
				var a = angle(marks[i])
				ctx.fillText(marks[i], getx(a, r_text), gety(a, r_text) + 4)
				ctx.strokeText()
				// sub marks
				ctx.strokeStyle = theme.primaryColor
				ctx.lineWidth = h_submarker
				var j_max = (i == marks.length - 1 ? max : marks[i+1])
				for (var j = marks[i] + submarks_int; j < j_max; j += submarks_int) {
					line_mark(ctx, j, r_circle_min - l_submarker, r_circle_min + l_submarker)
				}
			}

			// "beetween" marks
			ctx.lineWidth = 1
			ctx.strokeStyle = theme.primaryColor
			for (var i = 0; i < marks.length - 1; i++) {
				line_mark(ctx, (marks[i] + marks[i+1])/2, r_circle_min, r_circle_max)
			}

			// center: arrow base
			ctx.lineWidth = 1
			ctx.strokeStyle = theme.secondaryColor
			arc(ctx, r_arrow_base)

			// bottom line
			ctx.lineWidth = 1
			ctx.strokeStyle = theme.primaryColor
			ctx.beginPath()
			ctx.moveTo(0, _height - 1)
			ctx.lineTo(width - 1, _height - 1)
			ctx.stroke()
		}
	}

	Canvas {
		/// level arrow
		id: arrow
		anchors.fill: parent
		property double k: 0.82
		property double angle: parent.angle(level)

		property double r_base: 0.055
		property double r_circle_base: r_arrow_base * 0.6
		property double k_head: 0.1 // arrow width factor of base
		property double lref: width / 2

		property bool is_line: false // simple line (true) or designed (false)
		property bool has_gradient: false // beautiful gradient

		onPaint: {
			var ctx = getContext('2d');
			ctx.clearRect(0,0,width,height)

			ctx.lineWidth = 1
			ctx.strokeStyle = theme.primaryColor

			// line only
			if (is_line) {
				var x = getx(angle, r_arrow_base)
				var y = gety(angle, r_arrow_base)
				var hx = getx(angle, k)
				var hy = gety(angle, k)
				ctx.beginPath()
				ctx.moveTo(x,y)
				ctx.lineTo(hx,hy)
				ctx.stroke()
				return
			}

			// arrow base center
			var x = getx(0, r_arrow_base + r_base)
			var y = gety(0, r_arrow_base + r_base)
			// arrow base radius
			var d_base = r_base * width / 2
			// arrow head width
			var d_head = d_base * k_head

			// base internal circle
			ctx.strokeStyle = theme.secondaryColor
			ctx.beginPath()
			ctx.arc(x, y + 0 *(r_base - r_circle_base) * lref, r_circle_base * lref, 0, Math.PI * 2)
			ctx.stroke()

			// base
			ctx.beginPath()
			ctx.strokeStyle = theme.primaryColor

			var x1 = x - d_base * Math.cos(angle)
			var y1 = y - d_base * Math.sin(angle)
			ctx.moveTo(x1, y1)
			ctx.arc(x, y, d_base, Math.PI + angle, angle, 1)
			// head
			var hx = getx(angle, k)
			var hy = gety(angle, k)
			var bout = orth(x, y, hx, hy, d_head)
			ctx.lineTo(bout[2], bout[3])
			ctx.lineTo(bout[0], bout[1])
			ctx.closePath()
			ctx.stroke()

			// gradient
			if (has_gradient) {
				var middle1 = orth(x, y, x + (hx - x) * 0.7, y + (hy - y) * 0.7, d_base + (d_head - d_base) * 0.7)
				var grd = ctx.createLinearGradient(middle1[0], middle1[1], middle1[2], middle1[3])
				grd.addColorStop(1, 'rgba(128,128,128,0.2)')
				grd.addColorStop(0, "transparent")
				ctx.fillStyle = grd
				ctx.fill()
			}
		}
	}

/*
	Behavior on level {
		NumberAnimation {
			duration: 50
			easing.amplitude: max - min
		}
	}
	*/
	onLevelChanged: {
		arrow.requestPaint()
	}
}