diff --git a/README.md b/README.md
index 37811f4..2cff799 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,9 @@ JustGage is a handy JavaScript plugin for generating and animating nice & cl
###Update log
+######January 5, 2016.
+ * **donut pointer** - render configurable triangle pointer in donut mode - demo at http://justgage.com/examples/pointer.html
+
######November 10, 2015.
* **reverse** - reverse the gauge direction - demo at http://justgage.com/examples/reverse.html
* **pointer** - render triangular value pointer - demo at http://justgage.com/examples/pointer.html
diff --git a/examples/counter.html b/examples/counter.html
index bb2cb34..6948b92 100644
--- a/examples/counter.html
+++ b/examples/counter.html
@@ -29,15 +29,15 @@
diff --git a/examples/pointer.html b/examples/pointer.html
index d6cbe8a..b20ae5f 100644
--- a/examples/pointer.html
+++ b/examples/pointer.html
@@ -117,12 +117,14 @@
min: 0,
max: 100,
symbol: '%',
+ donut: true,
pointer: true,
- gaugeWidthScale: 1.3,
+ gaugeWidthScale: 0.4,
pointerOptions: {
- toplength: 5,
- bottomlength: 5,
- bottomwidth: 4
+ toplength: 10,
+ bottomlength: 10,
+ bottomwidth: 8,
+ color: '#000'
},
customSectors: [{
color: "#ff0000",
diff --git a/justgage.js b/justgage.js
index 1c5f115..3ccd480 100644
--- a/justgage.js
+++ b/justgage.js
@@ -508,9 +508,38 @@ JustGage = function(config) {
var alpha, Ro, Ri, Cx, Cy, Xo, Yo, Xi, Yi, Xc, Yc, Xz, Yz, Xa, Ya, Xb, Yb, path;
if (donut) {
+
+ alpha = (1 - 2 * (value - min) / (max - min)) * Math.PI;
+ Ro = w / 2 - w / 7;
+ Ri = Ro - w / 6.666666666666667 * gws;
+
+ Cx = w / 2 + dx;
+ Cy = h / 1.95 + dy;
+
+ Xo = w / 2 + dx + Ro * Math.cos(alpha);
+ Yo = h - (h - Cy) - Ro * Math.sin(alpha);
+ Xi = w / 2 + dx + Ri * Math.cos(alpha);
+ Yi = h - (h - Cy) - Ri * Math.sin(alpha);
+
+ Xc = Xo + dlt * Math.cos(alpha);
+ Yc = Yo - dlt * Math.sin(alpha);
+ Xz = Xi - dlb * Math.cos(alpha);
+ Yz = Yi + dlb * Math.sin(alpha);
+
+ Xa = Xz + dw * Math.sin(alpha);
+ Ya = Yz + dw * Math.cos(alpha);
+ Xb = Xz - dw * Math.sin(alpha);
+ Yb = Yz - dw * Math.cos(alpha);
+
+ path = 'M' + Xa + ',' + Ya + ' ';
+ path += 'L' + Xb + ',' + Yb + ' ';
+ path += 'L' + Xc + ',' + Yc + ' ';
+ path += 'Z ';
+
return {
- path: null
+ path: path
};
+
} else {
alpha = (1 - (value - min) / (max - min)) * Math.PI;
Ro = w / 2 - w / 10;
@@ -606,6 +635,11 @@ JustGage = function(config) {
obj.config.donut
]
});
+
+ if (obj.config.donut) {
+ obj.needle.transform("r" + obj.config.donutStartAngle + ", " + (obj.params.widgetW / 2 + obj.params.dx) + ", " + (obj.params.widgetH / 1.95 + obj.params.dy));
+ }
+
}
// title