Implemented enhancement Mikhus#77 - use minimal path for 360 radial g…

…auge when configured
cwplus · Dec 1, 2016 · e80c747 · e80c747
1 parent c6aa1af
commit e80c747
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 16 deletions.
diff --git a/docs-coverage.svg b/docs-coverage.svg
diff --git a/examples/radial-min-path.html b/examples/radial-min-path.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Gauge Test</title>
+    <script src="../gauge.min.js"></script>
+    <style>body {
+        padding: 0;
+        margin: 0;
+        background: #fff
+    }</style>
+</head>
+<body>
+
+<input type="text" id="gauge-value" placeholder="put new gauge value here" value="0">
+<button onclick="animateGauges()">Animate</button>
+
+<hr>
+
+<canvas data-type="radial-gauge"
+        data-width="500"
+        data-height="500"
+        data-min-value="0"
+        data-max-value="360"
+        data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
+        data-minor-ticks="22"
+        data-ticks-angle="360"
+        data-start-angle="180"
+        data-stroke-ticks="false"
+        data-highlights="false"
+        data-color-plate="#33a"
+        data-color-major-ticks="#f5f5f5"
+        data-color-minor-ticks="#ddd"
+        data-color-numbers="#ccc"
+        data-color-needle="rgba(240, 128, 128, 1)"
+        data-color-needle-end="rgba(255, 160, 122, .9)"
+        data-value-box="true"
+        data-animated-value="true"
+        data-value-text-shadow="false"
+        data-color-circle-inner="#fff"
+        data-color-needle-circle-outer="#ccc"
+        data-needle-circle-size="15"
+        data-needle-circle-outer="false"
+        data-animation-rule="linear"
+        data-needle-type="line"
+        data-needle-start="75"
+        data-needle-end="99"
+        data-needle-width="3"
+        data-borders="true"
+        data-border-inner-width="0"
+        data-border-middle-width="0"
+        data-border-outer-width="10"
+        data-color-border-outer="#ccc"
+        data-color-border-outer-end="#ccc"
+        data-color-needle-shadow-down="#222"
+        data-border-shadow-width="0"
+        data-animation-target="needle"
+        data-units="ᵍ"
+        data-title="DIRECTION"
+        data-font-title-size="19"
+        data-color-title="#f5f5f5"
+        data-animation-duration="1500"
+        data-value="5"
+        data-animate-on-init="true"
+        data-use-min-path="true"
+></canvas>
+
+<script>
+    if (!Array.prototype.forEach) {
+        Array.prototype.forEach = function(cb) {
+            var i = 0, s = this.length;
+            for (; i < s; i++) {
+                cb && cb(this[i], i, this);
+            }
+        }
+    }
+
+    document.fonts && document.fonts.forEach(function(font) {
+        font.loaded.then(function() {
+            if (font.family.match(/Led/)) {
+                document.gauges.forEach(function(gauge) {
+                    gauge.update();
+                });
+            }
+        });
+    });
+
+    function animateGauges() {
+        document.gauges.forEach(function(gauge) {
+            gauge.value = parseFloat(
+                document.getElementById('gauge-value').value) || 0;
+            setTimeout(function() {
+                console.log('new gauge value:' + gauge.value);
+            }, 1510);
+        });
+    }
+</script>
+
+</html>
diff --git a/gauge.min.js b/gauge.min.js
diff --git a/gauge.min.js.map b/gauge.min.js.map
diff --git a/lib/BaseGauge.js b/lib/BaseGauge.js
@@ -183,14 +183,16 @@ export default class BaseGauge {
              * @type {number}
              * @access private
              */
-            this._value = value;
+            if (this._value === undefined) {
+                this._value = value;
+            }
 
             this.animation.animate(percent => {
                 this.options.value = fromValue + (value - fromValue) * percent;
 
                 this.draw();
             }, () => {
-                this.options.value = value;
+                this.options.value = this._value;
                 delete this._value;
                 this.draw();
             });

diff --git a/lib/RadialGauge.js b/lib/RadialGauge.js
@@ -34,7 +34,7 @@ const HPI = PI / 2;
 /**
  * Gauge configuration options
  *
- * @typedef {GenericOptions|{ticksAngle: number, startAngle: number, colorNeedleCircleOuter: string, colorNeedleCircleOuterEnd: string, colorNeedleCircleInner: string, colorNeedleCircleInnerEnd: string, needleCircleSize: number, needleCircleInner: boolean, needleCircleOuter: boolean, animationTarget: string}} RadialGaugeOptions
+ * @typedef {GenericOptions|{ticksAngle: number, startAngle: number, colorNeedleCircleOuter: string, colorNeedleCircleOuterEnd: string, colorNeedleCircleInner: string, colorNeedleCircleInnerEnd: string, needleCircleSize: number, needleCircleInner: boolean, needleCircleOuter: boolean, animationTarget: string, useMinPath: boolean}} RadialGaugeOptions
  */
 
 /**
@@ -61,6 +61,7 @@ const defaultRadialGaugeOptions = Object.assign({}, GenericOptions, {
 
     // custom animations
     animationTarget: 'needle', // 'needle' or 'plate'
+    useMinPath: false,
 
     barWidth: 0
 });
@@ -639,6 +640,19 @@ function drawRadialProgressBar(context, options) {
     context.restore();
 }
 
+/**
+ * Find and return gauge value to display
+ *
+ * @param {RadialGauge} gauge
+ */
+function displayValue(gauge) {
+    if (gauge.options.animatedValue) {
+        return gauge.options.value;
+    }
+
+    return gauge.value;
+}
+
 /**
  * Minimalistic HTML5 Canvas Gauge
  * @example
@@ -717,7 +731,34 @@ export default class RadialGauge extends BaseGauge {
         /* istanbul ignore if */
         if (options.startAngle > 360) options.startAngle = 360;
 
-        return BaseGauge.configure(options);
+        return options;
+    }
+
+    /**
+     * Sets the value for radial gauge
+     *
+     * @param {number} value
+     */
+    set value(value) {
+        if (this.options.animation &&
+            this.options.ticksAngle === 360 &&
+            this.options.useMinPath
+        ) {
+            this._value = value;
+            value = this.options.value +
+                ((((value - this.options.value) % 360) + 540) % 360) - 180;
+        }
+
+        super.value = value;
+    }
+
+    /**
+     * Returns current gauge value
+     *
+     * @return {number}
+     */
+    get value() {
+        return super.value;
     }
 
     /*  */
@@ -766,15 +807,15 @@ export default class RadialGauge extends BaseGauge {
                 canvas.context.save();
 
                 drawRadialProgressBar(canvas.context, options);
-                drawRadialValueBox(canvas.context, options,
-                    options.animatedValue ? this.options.value : this.value);
+                drawRadialValueBox(canvas.context, options, displayValue(this));
                 drawRadialNeedle(canvas.context, options);
             }
 
             else {
-                let plateValueAngle = -drawings.radians((
-                (options.value - options.minValue) /
-                (options.maxValue - options.minValue) * options.ticksAngle));
+                let plateValueAngle = -drawings.radians(
+                    (options.value - options.minValue) /
+                    (options.maxValue - options.minValue) *
+                    options.ticksAngle);
 
                 // clear the canvas
                 canvas.context.clearRect(x, y, w, h);
@@ -813,8 +854,7 @@ export default class RadialGauge extends BaseGauge {
             }
 
             // value box animations
-            drawRadialValueBox(canvas.context, options, options.animatedValue ?
-                this.options.value : this.value);
+            drawRadialValueBox(canvas.context, options, displayValue(this));
 
             super.draw();
         }

diff --git a/test-coverage.svg b/test-coverage.svg