From 591a5750a995922583074a1d2e7d7caab0610f33 Mon Sep 17 00:00:00 2001
From: Louis-Joseph Fournier <louisjoseph.fournier@gmail.com>
Date: Fri, 1 Jan 2016 10:22:06 +0100
Subject: [PATCH] CircleMeter: gradient for regions and better colors

---
 qml/CircleMeter.qml | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/qml/CircleMeter.qml b/qml/CircleMeter.qml
index 2589b20..a9bcbec 100644
--- a/qml/CircleMeter.qml
+++ b/qml/CircleMeter.qml
@@ -14,7 +14,7 @@ Item {
 	/// numbers to write on the scale
 	property variant marks: [-40, -20, 0, 20, 40]
 	/// marks regions colors
-	property variant region_color: ["red", "yellow", "green", "yellow", "red"]
+	property variant region_color: ["#F88E48", "#F8DE48", "#99E882", "#F8DE48", "#F88E48"]
 	/// theme object
 	property QtObject theme
 
@@ -150,15 +150,25 @@ Item {
 		property variant reg_drawed
 		anchors.fill: parent
 		property variant reg: find_region()
+		property double r_avg: (r_circle_min + r_circle_max) / 2
 		z: -4
 		onPaint: {
 			var ctx = getContext('2d');
 			ctx.clearRect(0,0,width,height)
 
-			//var reg = find_region()
-			var a1 = angle(reg[1])
-			var a2 = angle(reg[2])
-			ctx.fillStyle = region_color[reg[0]]
+			var a0 = angle(marks[reg[0]]) // angle of mark
+			var a1 = angle(reg[1]) // min angle of region
+			var a2 = angle(reg[2]) // max angle of region
+
+			// gradient
+			var x_center = getx(a0, r_avg);
+			var y_center = gety(a0, r_avg);
+			var grd = ctx.createRadialGradient(x_center, y_center, 2, x_center, y_center,
+				(reg[2] - reg[1]) * (width + height) / 2 / (max - min))
+			grd.addColorStop(0, region_color[reg[0]])
+			grd.addColorStop(1, "transparent")
+
+			ctx.fillStyle = grd
 			ctx.beginPath()
 			ctx.moveTo(getx(a1, r_circle_min), gety(a1, r_circle_min))
 			arc_part(ctx, r_circle_min, a1, a2)
@@ -166,7 +176,6 @@ Item {
 			ctx.lineTo(getx(a1, r_circle_min), gety(a1, r_circle_min))
 			ctx.fill()
 			reg_drawed = reg
-			console.log("redraw")
 		}
 
 		function update_level() {