added donut pointer feature

toorshia · Jan 5, 2016 · 30b92b8 · 30b92b8
1 parent d859734
commit 30b92b8
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,9 @@ JustGage is a handy JavaScript plugin for generating and animating nice &amp; 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
@@ -29,15 +29,15 @@
 
 <body>
     <div class="container">
-        <div id="gg1" class="gauge"></div>
-        <a href="#" id="gg1_refresh">Random Refresh</a>
+        <div id="g1" class="gauge"></div>
+        <a href="#" id="g1_refresh">Random Refresh</a>
     </div>
     <script src="../raphael-2.1.4.min.js"></script>
     <script src="../justgage.js"></script>
     <script>
     document.addEventListener("DOMContentLoaded", function(event) {
-        var gg1 = new JustGage({
-            id: "gg1",
+        var g1 = new JustGage({
+            id: "g1",
             value: 72,
             min: 0,
             max: 100,
@@ -47,8 +47,8 @@
             hideInnerShadow: true
         });
 
-        document.getElementById('gg1_refresh').addEventListener('click', function() {
-            gg1.refresh(getRandomInt(0, 100));
+        document.getElementById('g1_refresh').addEventListener('click', function() {
+            g1.refresh(getRandomInt(0, 100));
         });
     });
     </script>

diff --git 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
@@ -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