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 @@
-
- Random Refresh +
+ Random Refresh
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