Introduce emptyThickness parameter

README.md

@@ -54,6 +54,7 @@ Specify options like in example above.
 | startAngle | Initial angle (for `0` value) <br> Default: `-Math.PI` |
 | reverse | Reverse animation and arc draw <br> Default: `false` |
 | thickness | Width of the arc. By default it's automatically calculated as 1/14 of `size` but you may set your own number <br> Default: `"auto"` |
+| emptyThickness | Width of the empty arc. By default it falls back to the `thickness` parameter <br> Default: `"auto"` |
 | lineCap | Arc line cap: `"butt"`, `"round"` or `"square"` - [read more](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.lineCap) <br> Default: `"butt"`
 | fill | The arc fill config. You may specify next:  <br>- `"#ff1e41"` <br>- `{ color: "#ff1e41" }` <br>- `{ color: 'rgba(255, 255, 255, .3)' }` <br>- `{ gradient: ["red", "green", "blue"] }` <br>- `{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }` <br>- `{ gradient: [ ... ], gradientAngle: Math.PI / 4 }` <br>- `{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }` <br>- `{ image: "http://i.imgur.com/pT0i89v.png" }`<br>- `{ image: imageInstance }`<br>- `{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }` <br> Default: `{ gradient: ["#3aeabb", "#fdd250"] }` |
 | emptyFill | Color of the "empty" arc. Only a color fill supported by now <br> Default: `"rgba(0, 0, 0, .1)"` |
@@ -255,7 +256,7 @@ npm install
 ### Modify
 
 You need to update `dist/circle-progress.min.js` after any change to `dist/circle-progress.js`:
- 
+
 ```sh
 npm run build-min
 ```
@@ -298,5 +299,5 @@ They will be generated in `docs/api/`.
 * release on Bower: just create a Git tag (e.g.): `git tag v1.2.3 && git push --tags`
 * release on GitHub - add release notes to the Git tag
 * release on NPM: `npm publish`, but be aware:
-  
+
   > Once a package is published with a given name and version, that specific name and version combination can never be used again - [NPM docs](https://docs.npmjs.com/cli/publish)

dist/circle-progress.js

@@ -67,6 +67,14 @@
      */
     thickness: 'auto',
 
+    /**
+     * Width of the empty arc (under the filled one) in pixels.
+     * If it's `'auto'`, it falls back to the value of the `thickness` property.
+     * @type {number|string}
+     * @default 'auto'
+     */
+    emptyThickness: 'auto',
+
     /**
      * Fill of the arc. You may set it to:
      *
@@ -170,13 +178,6 @@
      */
     ctx: null,
 
-    /**
-     * Radius of the outer circle. Automatically calculated as `[this.size]{@link CircleProgress#size} / 2`.
-     * @protected
-     * @type {number}
-     */
-    radius: 0.0,
-
     /**
      * Fill of the main arc. Automatically calculated, depending on [this.fill]{@link CircleProgress#fill} option.
      * @protected
@@ -202,7 +203,6 @@
      */
     init: function(config) {
       $.extend(this, config);
-      this.radius = this.size / 2;
       this.initWidget();
       this.initFill();
       this.draw();
@@ -341,17 +341,18 @@
         return;
 
       var ctx = this.ctx,
-        r = this.radius,
+        r = this.size / 2,
+        arcR = this.getRadius(),
         t = this.getThickness(),
         a = this.startAngle;
 
       ctx.save();
       ctx.beginPath();
 
       if (!this.reverse) {
-        ctx.arc(r, r, r - t / 2, a, a + Math.PI * 2 * v);
+        ctx.arc(r, r, arcR, a, a + Math.PI * 2 * v);
       } else {
-        ctx.arc(r, r, r - t / 2, a - Math.PI * 2 * v, a);
+        ctx.arc(r, r, arcR, a - Math.PI * 2 * v, a);
       }
 
       ctx.lineWidth = t;
@@ -368,23 +369,15 @@
      */
     drawEmptyArc: function(v) {
       var ctx = this.ctx,
-        r = this.radius,
-        t = this.getThickness(),
-        a = this.startAngle;
+        r = this.size / 2,
+        arcR = this.getRadius(),
+        t = this.getEmptyThickness();
 
       if (v < 1) {
         ctx.save();
         ctx.beginPath();
 
-        if (v <= 0) {
-          ctx.arc(r, r, r - t / 2, 0, Math.PI * 2);
-        } else {
-          if (!this.reverse) {
-            ctx.arc(r, r, r - t / 2, a + Math.PI * 2 * v, a);
-          } else {
-            ctx.arc(r, r, r - t / 2, a, a - Math.PI * 2 * v);
-          }
-        }
+        ctx.arc(r, r, arcR, 0, Math.PI * 2);
 
         ctx.lineWidth = t;
         ctx.strokeStyle = this.emptyFill;
@@ -441,6 +434,25 @@
       return $.isNumeric(this.thickness) ? this.thickness : this.size / 14;
     },
 
+    /**
+     * Get the empty arc thickness.
+     * @see CircleProgress#emptyThickness
+     * @protected
+     * @returns {number}
+     */
+    getEmptyThickness: function() {
+      return $.isNumeric(this.emptyThickness) ? this.emptyThickness : this.getThickness();
+    },
+
+    /**
+     * Returns the real arc radius, after the thickness has been accounted for.
+     * @private
+     * @returns {number}
+     */
+    getRadius: function() {
+      return (this.size / 2) - Math.max(this.getThickness(), this.getEmptyThickness()) / 2;
+    },
+
     /**
      * Get current value.
      * @protected

docs/examples.js

@@ -79,4 +79,20 @@
     // "data-" attributes are taken into account only on init (not on update/redraw)
     // "data-fill" (and other object options) should be in valid JSON format
   });
+
+  /*
+   * Example 6:
+   *
+   * - custom gradient
+   * - different thicknesses
+   */
+  var c6 = $('.sixth.circle');
+
+  c6.circleProgress({
+    value: 0.75,
+    lineCap: 'round',
+    emptyThickness: 15,
+    thickness: 5,
+    fill: {gradient: ['#f4ad60', '#fffaaa']}
+  });
 })(jQuery);

docs/index.html

@@ -33,6 +33,10 @@ <h1 class="page-title">
       <span>custom angle, <br> value update</span>
     </div>
 
+    <div class="sixth circle">
+        <span>different thicknesses</span>
+    </div>
+
     <div
       class="fifth circle"
       data-value="0.9"

tests/tests.js

@@ -55,8 +55,49 @@
     }).circleProgress('widget');
     var defaultSize = $.circleProgress.defaults.size;
 
-    assert.pixelHex(canvas, 1, defaultSize / 2 - 1, color);
-    assert.pixelHex(canvas, defaultSize - 1, defaultSize / 2 - 1, color);
+    assert.pixelHex(canvas, 2, defaultSize / 2 - 1, color);
+    assert.pixelHex(canvas, defaultSize - 2, defaultSize / 2 - 1, color);
+  });
+
+  QUnit.test("Test circle with emptyThickness < thickness", function(assert) {
+    var color = '#ff0000';
+    var emptyColor = '#00ff00';
+    var thickness = 4;
+    var emptyThickness = 2;
+
+    var canvas = createCircle({
+      value: 0.5,
+      thickness: thickness,
+      emptyThickness: emptyThickness,
+      fill: { color: color },
+      emptyFill: emptyColor,
+      animation: false
+    }).circleProgress('widget');
+    var defaultSize = $.circleProgress.defaults.size;
+
+    assert.pixelHex(canvas, defaultSize / 2 - 1, 1, color);
+    assert.pixelHex(canvas, defaultSize / 2 - 1, defaultSize - thickness / 2, emptyColor);
+  });
+
+  QUnit.test("Test circle with emptyThickness > thickness", function(assert) {
+    var color = '#ff0000';
+    var emptyColor = '#00ff00';
+    var thickness = 5;
+    var emptyThickness = 10;
+
+    var canvas = createCircle({
+      value: 0.5,
+      thickness: thickness,
+      emptyThickness: emptyThickness,
+      fill: { color: color },
+      emptyFill: emptyColor,
+      animation: false
+    }).circleProgress('widget');
+    var defaultSize = $.circleProgress.defaults.size;
+
+    assert.pixelHex(canvas, defaultSize / 2 - 1, 1, emptyColor);
+    assert.pixelHex(canvas, defaultSize / 2 - 1, defaultSize - emptyThickness / 2, emptyColor);
+    assert.pixelHex(canvas, defaultSize / 2 - 1, emptyThickness / 2, color);
   });
 
   QUnit.module("Layout tests with animation");
@@ -264,4 +305,36 @@
     assert.equal(50, $(canvas).height());
     assert.equal(50, canvas.width);
   });
-})();
+
+  QUnit.module("Value tests");
+
+  QUnit.test("Test that `emptyThickness` defaults to `thickness`", function (assert) {
+    var thickness = 10;
+    var canvas = createCircle({
+      value: 0,
+      thickness: thickness
+    });
+
+    assert.strictEqual(canvas.data('circle-progress').getEmptyThickness(), thickness);
+  });
+
+  $.each([
+    [1, 10],
+    [6, 6],
+    [20, 0.1]
+  ], function (i, testData) {
+    var thickness = testData[0],
+      emptyThickness = testData[1],
+      defaultSize = $.circleProgress.defaults.size;;
+
+    QUnit.test("Test that the arc radius is properly calculated with thickness = " + String(thickness) + " and emptyThickness = " + String(emptyThickness), function (assert) {
+      var canvas = createCircle({
+        thickness: thickness,
+        emptyThickness: emptyThickness
+      });
+
+      assert.strictEqual(canvas.data('circle-progress').getRadius(),
+        (defaultSize - Math.max(emptyThickness, thickness)) / 2);
+    });
+  });
+})();