Pointer options

assets/main.css

@@ -79,10 +79,13 @@ label {
   font-size: 14px;
   vertical-align: top;
 }
-.opts label {
+.opts label:not(.omit) {
   line-height: 25px;
   width: 80px;
 }
+.omit{
+  width: 40px;
+}
 span.fd-slider {
   vertical-align: top;
   display: inline-block;
@@ -168,6 +171,15 @@ h3 {
   text-align: center; font-size: 2em; font-weight: bold;
   color: black; font-family: 'Amaranth', sans-serif;
 }
+#auto-animator {
+  position: absolute; top: 320px; left: 0; right: 0;
+  text-align: left; font-size: 2em; font-weight: bold;
+  color: black; font-family: 'Amaranth', sans-serif;
+}
+#auto-animator label{
+  width: 200px;
+  vertical-align: baseline;
+}  
 .reset {
   top: 65px !important; 
   font-size: 2em;

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "gauge.js",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "main": [
     "dist/gauge.js",
     "dist/gauge.min.js",

dist/gauge.coffee

@@ -192,6 +192,9 @@ class GaugePointer extends ValueUpdater
 	displayedValue: 0
 	value: 0
 	options:
+		pointerType: "triangle" # triangle / line
+		pointerEnd: "butt" # butt / round / square
+		hideCentre: false
 		strokeWidth: 0.035
 		length: 0.1
 		color: "#000000"
@@ -211,7 +214,8 @@ class GaugePointer extends ValueUpdater
 
 	setOptions: (options = null) ->
 		@options = mergeObjects(@options, options)
-		@length = 2 * @gauge.radius * @gauge.options.radiusScale * @options.length
+		@length = 2*@gauge.radius * @gauge.options.radiusScale * @options.length
+		@pointerEnd = @options.pointerEnd || "butt"
 		@strokeWidth = @canvas.height * @options.strokeWidth
 		@maxValue = @gauge.maxValue
 		@minValue = @gauge.minValue
@@ -233,16 +237,26 @@ class GaugePointer extends ValueUpdater
 		endX = Math.round(@strokeWidth * Math.cos(angle + Math.PI / 2))
 		endY = Math.round(@strokeWidth * Math.sin(angle + Math.PI / 2))
 
-		@ctx.beginPath()
-		@ctx.fillStyle = @options.color
-		@ctx.arc(0, 0, @strokeWidth, 0, Math.PI * 2, false)
-		@ctx.fill()
-
-		@ctx.beginPath()
-		@ctx.moveTo(startX, startY)
-		@ctx.lineTo(x, y)
-		@ctx.lineTo(endX, endY)
-		@ctx.fill()
+		if([email protected])
+			@ctx.beginPath()
+			@ctx.fillStyle = @options.color
+			@ctx.arc(0, 0, @strokeWidth, 0, Math.PI*2, false)
+			@ctx.fill()
+
+		if(@options.pointerType == "triangle")
+			@ctx.beginPath()
+			@ctx.moveTo(startX, startY)
+			@ctx.lineTo(x, y)
+			@ctx.lineTo(endX, endY)
+			@ctx.fill()
+		else
+			@ctx.beginPath()
+			@ctx.lineCap = @pointerEnd
+			@ctx.strokeStyle = @options.color
+			@ctx.lineWidth = @strokeWidth
+			@ctx.moveTo(0, 0)
+			@ctx.lineTo(x, y)
+			@ctx.stroke()
 
 		if @img
 			imgX = Math.round(@img.width * @options.iconScale)
@@ -292,6 +306,9 @@ class Gauge extends BaseGauge
 		gradientType: 0       	# 0 : radial, 1 : linear
 		strokeColor: "#e0e0e0"
 		pointer:
+			pointerType: "triangle"
+			pointerEnd: "butt"
+			hideCenter: false
 			length: 0.8
 			strokeWidth: 0.035
 			iconScale: 1.0

index.html

@@ -52,11 +52,13 @@ <h4>Variant selection</h4>
   </ul>
   <div id="preview">
   	<canvas width=380 height=150 id="canvas-preview"></canvas>
-  	<div id="preview-textfield"></div>
+    <div id="preview-textfield"></div>
+    <div id="auto-animator"><input type="checkbox" id="animator"> <label for="animator">Auto-Animate?</label></div>
   </div>
+
   <form id="opts" class="opts">
   	<h4>Options:</h4>
-  	<label>Current Val:</label><input type="text" name="currval" min="0" max="3000" step="25" value="1244"><br>
+  	<label>Current Val:</label><input type="text" name="currval" id="currval" min="0" max="3000" step="25" value="1244"><br>
     <label>Anim speed:</label><input type="text" name="animationSpeed" min="1" max="128" step="1" value="32"><br><br>
     <label>Angle:</label><input id="input-angle" type="text" name="angle" min="-50" max="50" step="1" value="15"><br>
     <label>Line width:</label><input id="input-line-width" type="text" name="lineWidth" min="0" max="70" value="44"><br>
@@ -69,6 +71,14 @@ <h4>Options:</h4>
     <label>Color stop:</label><input type="text" name="colorStop" class="color" value="8FC0DA"><br>
     <label>Background:</label><input type="text" name="strokeColor" class="color" value="E0E0E0"><br>
 
+    <label>Pointer line:</label><input type="checkbox" id="pointerType" name="pointerType" class=""><br>
+    <label>Hide centre:</label><input type="checkbox" id="hideCentre" name="hideCentre" class=""><br>
+    <label>Pointer End:</label>
+      <input type="radio" id="pointerEnd-butt" name="selector"><label class="omit" for="pointerEnd-butt">butt</label>
+      <input type="radio" id="pointerEnd-round" name="selector"><label class="omit" for="pointerEnd-round">round</label>
+      <input type="radio" id="pointerEnd-square" name="selector"><label class="omit" for="pointerEnd-square">square</label>
+    <br>
+
     <label>Ticks:</label><input type="checkbox" id="divisionsCbx" class="renderTicks"><br>
 
     <div class="subDivisions" style="display: none;">
@@ -108,7 +118,10 @@ <h2 id="usage">Usage</h2>
   lineWidth: <span id="opt-lineWidth" class="lit">5</span>, // The line thickness
   radiusScale: <span id="opt-radiusScale" class="lit">1.0</span>, // Relative radius
   pointer: {
-    length: <span id="opt-pointer-length" class="lit">10</span>, // // Relative to gauge radius
+    pointerType: '<span id="opt-pointerType" class="lit">triangle</span>', // [triangle] / line 
+    pointerEnd: '<span id="opt-pointerEnd" class="lit">butt</span>', // butt / round / square (line)
+    hideCentre: <span id="opt-hideCentre" class="lit">false</span>, // [show]/hide pointer center circle 
+    length: <span id="opt-pointer-length" class="lit">10</span>, // Relative to gauge radius
     strokeWidth: <span id="opt-pointer-strokeWidth" class="lit">0</span>, // The thickness
     color: '<span id="opt-pointer-color" class="lit">#000000</span>' // Fill color
   },
@@ -119,8 +132,8 @@ <h2 id="usage">Usage</h2>
   strokeColor: '<span id="opt-strokeColor" class="lit">0</span>',  // to see which ones work best for you
   generateGradient: true,
   highDpiSupport: true,     // High resolution support
-  <span  id="subDivisions" style="display: none;">// renderTicks is Optional
-  renderTicks: {
+  <span id="subDivisions" style="display: none;"> 
+  renderTicks: { // renderTicks is Optional
     divisions: <span id="opt-divisions" class="lit">8</span>,
     divWidth: <span id="opt-divWidth" class="lit">1</span>,
     divLength: <span id="opt-divLength" class="lit">0.8</span>,
@@ -276,11 +289,18 @@ <h2>Supported browsers</h2>
 
 <h2>Changes</h2>
 
+<h3 id="v1.3.7">Version 1.3.7 (30.11.2017)</h3>
+<p>
+<ul>
+<li>Added pointer/indicator options for Gauge type</li>
+</ul>
+</p>
+
 <h3 id="v1.3.6">Version 1.3.6 (28.11.2017)</h3>
 <p>
 <ul>
-<li>Added support for scalable staticzone sections</li>
-<li>Added optional Ticks(Major/Minor)</li>
+<li>Added support for scalable staticZone section heights on Gauge type</li>
+<li>Added optional Ticks(Major/Minor) on Gauge type</li>
 <li>Fixed <a href='https://github.com/bernii/gauge.js/pull/146'>issue #146</a>: Prevent requestAnimationFrame() callbacks from piling up</li>
 <li>Fixed <a href='https://github.com/bernii/gauge.js/pull/147'>issue #147</a>: Correct use of options.generateGradient for Donut </li>
 </ul>
@@ -385,48 +405,68 @@ <h2>Contact</h2>
     $('#subDivisions').toggle();
     fdSlider.redrawAll();
   })
+  function setTimerHolder() {
+    timerHolder = setTimeout(function() {
+      autoAnimate();
+    },3000);
+  }
+  var timerHolder = [];
+  function autoAnimate(){
+    var newValue = demoGauge.minValue + Math.floor(Math.random() * demoGauge.maxValue) ;
+    demoGauge.set(newValue);
+    $('[name=currval]').val(newValue);
+    fdSlider.updateSlider('currval');
+    setTimerHolder();
+  }
+  $('#animator').on('click', function(){
+    if(this.checked){
+      setTimerHolder();
+    } else {
+      clearTimeout(timerHolder);
+    }
+  });
 
   function update() {
     var opts = {};
     var tmp_opts = opts;
     tmp_opts.renderTicks = {};
 
     if ($('.subDivisions:visible').length) {
-    $('.renderTicks').each(function() {
-      var val = $(this).hasClass("color") ? this.value : parseFloat(this.value);
-      if($(this).hasClass("color")){
-        val = "#" + val;
-      }
-      if (this.name.indexOf("divLength") != -1 ||
-      this.name.indexOf("subLength") != -1) {
-        val /= 100;
-      }
-      if (this.name.indexOf("divWidth") != -1 ||
-      this.name.indexOf("subWidth") != -1) {
-        val /= 10;
-      }
-
-      $('#opt-' + this.name.replace(".", "-")).text(val);
-
-      if(this.name.indexOf(".") != -1){
-      	var elems = this.name.split(".");
+      $('.renderTicks').each(function() {
+        var val = $(this).hasClass("color") ? this.value : parseFloat(this.value);
+        if($(this).hasClass("color")){
+          val = "#" + val;
+        }
+        if (this.name.indexOf("divLength") != -1 ||
+        this.name.indexOf("subLength") != -1) {
+          val /= 100;
+        }
+        if (this.name.indexOf("divWidth") != -1 ||
+        this.name.indexOf("subWidth") != -1) {
+          val /= 10;
+        }
 
-      	for (var i=0; i < elems.length - 1; i++) {
-      		if (!(elems[i] in tmp_opts)) {
-      			tmp_opts.renderTicks[elems[i]] = {};
-      		}
-      		tmp_opts = tmp_opts.renderTicks[elems[i]];
-      	}
-      	tmp_opts.renderTicks[elems[elems.length - 1]] = val;
-      } else if ($(this).hasClass("color")) {
-        // color picker is removing # from color values
-      	opts.renderTicks[this.name] = "#" + this.value
-        $('#opt-' + this.name.replace(".", "-")).text("#" + this.value);
-      } else {
-      	opts.renderTicks[this.name] = val;
-      }
-    });
-  }
+        $('#opt-' + this.name.replace(".", "-")).text(val);
+
+        if(this.name.indexOf(".") != -1){
+          var elems = this.name.split(".");
+
+          for (var i=0; i < elems.length - 1; i++) {
+            if (!(elems[i] in tmp_opts)) {
+              tmp_opts.renderTicks[elems[i]] = {};
+            }
+            tmp_opts = tmp_opts.renderTicks[elems[i]];
+          }
+          tmp_opts.renderTicks[elems[elems.length - 1]] = val;
+        } else if ($(this).hasClass("color")) {
+          // color picker is removing # from color values
+          opts.renderTicks[this.name] = "#" + this.value
+          $('#opt-' + this.name.replace(".", "-")).text("#" + this.value);
+        } else {
+          opts.renderTicks[this.name] = val;
+        }
+      });
+    }
 
 
     $('.opts input[min], .opts .color').not('.renderTicks').each(function() {
@@ -471,6 +511,18 @@ <h2>Contact</h2>
       opts[this.name] = this.checked;
       $('#opt-' + this.name).text(this.checked);
     });
+    $('#pointerType').each(function(){
+      opts.pointer.pointerType = this.checked ? "line" : "triangle";
+      $('#opt-' + this.name).text(opts.pointer.pointerType);
+    });
+    $('#hideCentre').each(function(){
+      opts.pointer.hideCentre = this.checked ? true : false;
+      $('#opt-' + this.name).text(opts.pointer.hideCentre);
+    });
+    $('[name=selector]:checked').each(function(){
+        opts.pointer.pointerEnd = this.id.substring(this.id.indexOf('-') + 1);
+        $('#opt-pointerEnd').text(opts.pointer.pointerEnd);
+    });
     demoGauge.animationSpeed = opts.animationSpeed;
     opts.generateGradient = true;
     console.log(opts);
@@ -596,6 +648,9 @@ <h2>Contact</h2>
       this.checked = !!params[this.name];
       this.onclick = update;
     });
+    $('.opts input:radio').each(function() {
+      this.onclick = update;
+    });
     $('#share').click(function() {
       window.location.replace(this.checked ? '#?' + $('form').serialize() : '#!');
     });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gaugeJS",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "100% native and cool looking animated JavaScript/CoffeeScript gauge",
   "main": "dist/gauge.js",
   "repository": {