ios working

CONTRIBUTING.md

@@ -0,0 +1,19 @@
+Goals
+
+- More stability : meCoffee only has a limited set of devices ( tablets/phones ) available, if a problem occurs on a specific device it would be great if we could get fixes in meBarista sooner
+- More creativity : if features are wanted or somebody is a designer who can make things look good, all the better
+- More freedom : by doing meBarista in the open, meCoffee owners are guaranteed access to meBarista on their terms
+
+Proces
+
+- Create a feature-branch with a coherent set of changes : so if you have fixes for the latest iPhone and a nifty new feature for the home screen, create separate feature branches 'feature-iPhoneX-fixes' and 'feature-home-gauge-update'
+- When you are confident, create a pull-request
+- Pull request will be evaluated by meCoffee
+- A beta will be distributed through TestFlight(iOS) or the beta channel(Android)
+- Eventual release to production
+
+
+
+
+
+

config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="nl.digitalthings.mebarista.v2" version="0.1.0" android-versionCode="21" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget android-versionCode="21" id="nl.digitalthings.mebarista.v2" version="0.1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>meBarista</name>
     <description>meBarista accompanies your meCoffee espresso PID</description>
     <author email="info@mecoffee.nl" href="https://mecoffee.nl/">meCoffee.nl / Digital Things</author>
@@ -69,4 +69,5 @@
     <plugin name="cordova-plugin-bluetooth-serial" />
     <icon src="resources/ios/icon/icon-small@3x.png" />
     <plugin name="cordova-plugin-device" spec="~1.1.6" />
+    <engine name="ios" spec="^5.1.1" />
 </widget>

ionic.config.json

@@ -1,6 +1,9 @@
 {
   "name": "meBarista",
-  "app_id": "",
+  "integrations": {
+    "cordova": {}
+  },
+  "type": "angular",
   "v2": true,
   "typescript": true
 }

node_modules/svg-gauge/.npmignore

@@ -1,54 +0,0 @@
-/nbproject/
-/node_modules/
-
-### JetBrains IDEs ###
-# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
-# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
-
-# User-specific stuff:
-.idea/workspace.xml
-.idea/tasks.xml
-
-# Sensitive or high-churn files:
-.idea/dataSources.ids
-.idea/dataSources.xml
-.idea/dataSources.local.xml
-.idea/sqlDataSources.xml
-.idea/dynamic.xml
-.idea/uiDesigner.xml
-
-# Gradle:
-.idea/gradle.xml
-.idea/libraries
-
-# Mongo Explorer plugin:
-.idea/mongoSettings.xml
-
-## File-based project format:
-*.iws
-
-## Plugin-specific files:
-
-# IntelliJ
-/out/
-
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
-# Crashlytics plugin (for Android Studio and IntelliJ)
-com_crashlytics_export_strings.xml
-crashlytics.properties
-crashlytics-build.properties
-fabric.properties
-
-### WebStorm Patch ###
-# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
-
-# *.iml
-# modules.xml
-# .idea/misc.xml
-# *.ipr
-.idea/

node_modules/svg-gauge/Gulpfile.js

@@ -1,8 +1,8 @@
 var gulp = require("gulp"),
     del = require("del"),
     concat = require("gulp-concat"),
-    uglify = require("gulp-uglify"),
-    eventStream = require("event-stream");
+    uglify = require("gulp-uglify");
+    // eventStream = require("event-stream");
 
 
 var config = {
@@ -31,17 +31,17 @@ gulp.task("clean", function(cb) {
 });
 
 
-gulp.task("build", [], function() {
+gulp.task("build", function() {
    // do other build things
    // gulp.start("jshint");
 
-   return eventStream.merge(
-      gulp.src(["src/gauge.js"]/*, {debug: true}*/)
-            .pipe(concat("gauge.js"))
-            .pipe(gulp.dest(config.dist.dir))
-            .pipe(concat("gauge.min.js"))
-            .pipe(gulp.dest(config.dist.dir))
-            .pipe(uglify({comments: /^\/\*\!*/}))
-            .pipe(gulp.dest(config.dist.dir))
-   );
+   // return eventStream.merge(
+    return gulp.src(["src/gauge.js"]/*, {debug: true}*/)
+        .pipe(concat("gauge.js"))
+        .pipe(gulp.dest(config.dist.dir))
+        .pipe(concat("gauge.min.js"))
+        .pipe(gulp.dest(config.dist.dir))
+        .pipe(uglify())
+        .pipe(gulp.dest(config.dist.dir))
+   // );
 });

node_modules/svg-gauge/README.md

@@ -2,7 +2,18 @@
 Minmalistic, configurable, animated SVG gauge. Zero dependencies
 
 
-### Usage
+
+
+## Migration from 1.0.2
+
+The new gauge uses a viewbox of 100x100 as opposed to previous 1000x1000. All the stroke and font values have to be adjusted accordingly in your CSS. Just divide those by 10
+
+
+## Demo
+Check out the [live demo](http://codepen.io/naikus/pen/BzkoLL) for various options and styling tips for this gauge
+
+
+## Usage
 
 HTML
 ```html
@@ -18,19 +29,19 @@ CSS
 }
 .gauge-container > .gauge > .dial {
   stroke: #eee;
-  stroke-width: 20;
+  stroke-width: 2;
   fill: rgba(0,0,0,0);
 }
 .gauge-container > .gauge > .value {
   stroke: rgb(47, 227, 255);
-  stroke-width: 20;
+  stroke-width: 2;
   fill: rgba(0,0,0,0);
 }
 .gauge-container > .gauge > .value-text {
   fill: rgb(47, 227, 255);
   font-family: sans-serif;
   font-weight: bold;
-  font-size: 10em;
+  font-size: 1em;
 }
 ```
 Javascript
@@ -39,7 +50,7 @@ Javascript
 npm install svg-gauge
 
 // Require JS
-var Gauge = require("svg-guage");
+var Gauge = require("svg-gauge");
 
 // Standalone
 var Gauge = window.Gauge;
@@ -52,6 +63,18 @@ var cpuGauge = Gauge(document.getElementById("cpuSpeed"), {
       return Math.round(value) + "/" + this.max;
     },
     value: 50,
+    // Custom dial colors (Optional)
+    color: function(value) {
+      if(value < 20) {
+        return "#5ee432"; // green
+      }else if(value < 40) {
+        return "#fffa50"; // yellow
+      }else if(value < 60) {
+        return "#f7aa38"; // orange
+      }else {
+        return "#ef4655"; // red
+      }
+    }
 });
 
 // Set gauge value
@@ -68,17 +91,62 @@ cpuGauge.setValueAnimated(90, 1);
 | -------------------- | ------------------------------------------------------------------------------------- |
 | ```dialStartAngle``` | The angle in degrees to start the dial (```135```)       |
 | ```dialEndAngle```   | The angle in degrees to end the dial. This MUST be less than dialStartAngle (```45```)  |
-| ```radius```         | The radius of the gauge (```400```) |
+| ```radius```         | The radius of the gauge (```40```) |
+| ```min```            | The minimum value for the gauge. This can be a negative value (```0```)  |
 | ```max```            | The maximum value for the gauge (```100```)  |
 | ```label```          | Optional function that returns a string label that will be rendered in the center. This function will be passed the current value |
 | ```showValue```      | Whether to show the value at the center of the gauge (```true```) |
 | ```gaugeClass```     | The CSS class of the gauge (```gauge```) |
 | ```dialClass```      | The CSS class of the gauge's dial (```dial```) |
 | ```valueDialClass``` | The CSS class of the gauge's fill (value dial) (```value```) |
-| ```valueTextClass``` | The CSS class of the gauge's text (```value-text```) |
-
-
-
-
+| ```valueClass```     | The CSS class of the gauge's text (```value-text```) |
+| ```color (new)```    | An optional function that can return a color for current value  ```function(value) {}``` |
+| ```viewBox (new)```  | An optional string that specifies the crop region (```0 0 100 100```) |
+
+
+
+## That's all good, but what about React?
+```JSX
+import React from "react";
+import CreateReactClass from "create-react-class";
+import Gauge from "svg-gauge";
+
+const defaultOptions = {
+  animDuration: 1,
+  showValue: true,
+  max: 100
+  // Put any other defaults you want. e.g. dialStartAngle, dialEndAngle, radius, etc.
+};
+
+const Component = CreateReactClass({
+  displayName: "Gauge",
+  componentDidMount() {
+    this.renderGauge(this.props);
+  },
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const {props} = this;
+    if(props.value !== nextProps.value) {
+      this.renderGauge(nextProps);
+    }
+    return false;
+  },
+
+  render() {
+    return (
+      <div className="gauge-container" ref={el => this.gaugeEl = el}></div>
+    );
+  },
+
+  renderGauge(props) {
+    const gaugeOptions = Object.assign({}, defaultOptions, props);
+    if(!this.gauge) {
+      this.gauge = Gauge(this.gaugeEl, gaugeOptions);
+    }
+    this.gauge.setValueAnimated(props.value, gaugeOptions.animDuration);
+  }
+});
+```
 
-#### [Live Demo](http://codepen.io/naikus/pen/BzkoLL)
+## And Angular?
+Ha! [It's already there](https://github.com/mattlewis92/angular-gauge)

node_modules/svg-gauge/dist/gauge.js

@@ -14,6 +14,7 @@
 })(typeof window === "undefined" ? this : window, function(global, undefined) {
 
   var document = global.document,
+    slice = Array.prototype.slice,
     requestAnimationFrame = (global.requestAnimationFrame ||
         global.mozRequestAnimationFrame ||
         global.webkitRequestAnimationFrame ||
@@ -49,10 +50,12 @@
         };
 
     function animate() {
-      var progress = (currentIteration++) / iterations;
-      var value = change * easing(progress) + start;
+      var progress = currentIteration / iterations, 
+          value = change * easing(progress) + start;
       // console.log(progress + ", " + value);
-      step(value);
+      step(value, currentIteration);
+      currentIteration += 1;
+
       if(progress < 1) {
         requestAnimationFrame(animate);
       }
@@ -64,17 +67,41 @@
 
 
   var Gauge = (function() {
-
     var SVG_NS = "http://www.w3.org/2000/svg";
 
     var GaugeDefaults = {
+      centerX: 50,
+      centerY: 50
+    };
+
+    var defaultOptions = {
+      dialRadius: 40,
       dialStartAngle: 135,
       dialEndAngle: 45,
-      centerX: 500,
-      centerY: 500,
-      radius: 400
+      value: 0,
+      max: 100,
+      min: 0,
+      valueDialClass: "value",
+      valueClass: "value-text",
+      dialClass: "dial",
+      gaugeClass: "gauge",
+      showValue: true,
+      gaugeColor: null,
+      label: function(val) {return Math.round(val);}
     };
 
+    function shallowCopy(/* source, ...targets*/) {
+      var target = arguments[0], sources = slice.call(arguments, 1);
+      sources.forEach(function(s) {
+        for(var k in s) {
+          if(s.hasOwnProperty(k)) {
+            target[k] = s[k];
+          }
+        }
+      });
+      return target;
+    }
+
     /**
      * A utility function to create SVG dom tree
      * @param {String} name The SVG element name
@@ -104,15 +131,18 @@
       return percentage * gaugeSpanAngle / 100;
     }
 
-    function normalize(value, limit) {
+    function normalize(value, min, limit) {
       var val = Number(value);
       if(val > limit) return limit;
-      if(val < 0) return 0;
+      if(val < min) return min;
       return val;
     }
 
-    function getValueInPercentage(value, limit) {
-      return 100 * value / limit;
+    function getValueInPercentage(value, min, max) {
+      var newMax = max - min, newVal = value - min;
+      return 100 * newVal / newMax;
+      // var absMin = Math.abs(min);
+      // return 100 * (absMin + value) / (max + absMin);
     }
 
     /**
@@ -143,10 +173,6 @@
       };
     }
 
-    function defaultLabelRenderer(theValue) {
-      return Math.round(theValue);
-    }
-
     /**
      * Creates a Gauge object. This should be called without the 'new' operator. Various options
      * can be passed for the gauge:
@@ -163,25 +189,29 @@
      * @return a Gauge object
      */
     return function Gauge(elem, opts) {
-      opts = opts || {};
+      opts = shallowCopy({}, defaultOptions, opts);
       var gaugeContainer = elem,
-          limit = opts.max || 100,
-          value = normalize(opts.value || 0, limit),
-          radius = opts.radius || 400,
-          displayValue = opts.showValue === false ? false : true,
-          valueLabelRender = typeof (opts.label) === "function" ? opts.label : defaultLabelRenderer,
-          startAngle = typeof (opts.dialStartAngle) === "undefined" ? 135 : opts.dialStartAngle,
-          endAngle = typeof (opts.dialEndAngle) === "undefined" ? 45 : opts.dialEndAngle,
-          valueDialClass = typeof (opts.valueDialClass) === "undefined" ? 'value' : opts.valueDialClass,
-          valueTextClass = typeof (opts.valueTextClass) === "undefined" ? 'value-text' : opts.valueTextClass,
-          dialClass = typeof (opts.dialClass) === "undefined" ? 'dial' : opts.dialClass,
-          gaugeClass = typeof (opts.gaugeClass) === "undefined" ? 'gauge' : opts.gaugeClass,
-          gaugeTextElem,
+          limit = opts.max,
+          min = opts.min,
+          value = normalize(opts.value, min, limit),
+          radius = opts.dialRadius,
+          displayValue = opts.showValue,
+          startAngle = opts.dialStartAngle,
+          endAngle = opts.dialEndAngle,
+          valueDialClass = opts.valueDialClass,
+          valueTextClass = opts.valueClass,
+          valueLabelClass = opts.valueLabelClass,
+          dialClass = opts.dialClass,
+          gaugeClass = opts.gaugeClass,
+          gaugeColor = opts.color,
+          gaugeValueElem,
           gaugeValuePath,
+          label = opts.label,
+          viewBox = opts.viewBox,
           instance;
 
       if(startAngle < endAngle) {
-        console.log("WARNING! Start angle should be greater than end angle. Swapping");
+        console.log("WARN! startAngle < endAngle, Swapping");
         var tmp = startAngle;
         startAngle = endAngle;
         endAngle = tmp;
@@ -193,75 +223,113 @@
             end = coords.end,
             largeArcFlag = typeof(largeArc) === "undefined" ? 1 : largeArc;
 
-        return ["M", start.x, start.y, "A", radius, radius, "0", largeArcFlag, "1", end.x, end.y].join(" ");
+        return [
+          "M", start.x, start.y, 
+          "A", radius, radius, 0, largeArcFlag, 1, end.x, end.y
+        ].join(" ");
       }
 
       function initializeGauge(elem) {
-        gaugeTextElem = svg("text", {
+        gaugeValueElem = svg("text", {
+          x: 50,
+          y: 50,
+          fill: "#999",
           "class": valueTextClass,
-          "x": 500,
-          "y": 550,
-          "font-size": "700%",
+          "font-size": "100%",
           "font-family": "sans-serif",
-          "font-weight": "bold",
-          "text-anchor": "middle"
+          "font-weight": "normal",
+          "text-anchor": "middle",
+          "alignment-baseline": "middle",
+          "dominant-baseline": "central"
         });
+
         gaugeValuePath = svg("path", {
           "class": valueDialClass,
-          "fill": "transparent",
-          "stroke": "#666",
-          "stroke-width": 25,
-          "d": pathString(radius, startAngle, startAngle) // value of 0
+          fill: "none",
+          stroke: "#666",
+          "stroke-width": 2.5,
+          d: pathString(radius, startAngle, startAngle) // value of 0
         });
 
         var angle = getAngle(100, 360 - Math.abs(startAngle - endAngle));
         var flag = angle <= 180 ? 0 : 1;
-        var gaugeElement = svg("svg", {"viewBox": "0 0 1000 1000", "class": gaugeClass},
+        var gaugeElement = svg("svg", {"viewBox": viewBox || "0 0 100 100", "class": gaugeClass},
           [
             svg("path", {
               "class": dialClass,
-              "fill": "transparent",
-              "stroke": "#eee",
-              "stroke-width": 20,
-              "d": pathString(radius, startAngle, endAngle, flag)
+              fill: "none",
+              stroke: "#eee",
+              "stroke-width": 2,
+              d: pathString(radius, startAngle, endAngle, flag)
             }),
-            gaugeTextElem,
+            gaugeValueElem,
             gaugeValuePath
           ]
         );
         elem.appendChild(gaugeElement);
       }
 
-      function updateGauge(theValue) {
-        var val = getValueInPercentage(theValue, limit),
+      function updateGauge(theValue, frame) {
+        var val = getValueInPercentage(theValue, min, limit),
             // angle = getAngle(val, 360 - Math.abs(endAngle - startAngle)),
             angle = getAngle(val, 360 - Math.abs(startAngle - endAngle)),
             // this is because we are using arc greater than 180deg
             flag = angle <= 180 ? 0 : 1;
-        (displayValue && (gaugeTextElem.textContent = valueLabelRender.call(opts, theValue)));
+        if(displayValue) {
+          gaugeValueElem.textContent = label.call(opts, theValue);
+        }
         gaugeValuePath.setAttribute("d", pathString(radius, startAngle, angle + startAngle, flag));
       }
 
+      function setGaugeColor(value, duration) {        
+        var c = gaugeColor(value), 
+            dur = duration * 1000,
+            pathTransition = "stroke " + dur + "ms ease";
+            // textTransition = "fill " + dur + "ms ease";
+
+        gaugeValuePath.style = [
+          "stroke: " + c,
+          "-webkit-transition: " + pathTransition,
+          "-moz-transition: " + pathTransition,
+          "transition: " + pathTransition,
+        ].join(";");
+        /*
+        gaugeValueElem.style = [
+          "fill: " + c,
+          "-webkit-transition: " + textTransition,
+          "-moz-transition: " + textTransition,
+          "transition: " + textTransition,
+        ].join(";");
+        */
+      }
+
       instance = {
         setMaxValue: function(max) {
           limit = max;
         },
         setValue: function(val) {
-          value = normalize(val, limit);
+          value = normalize(val, min, limit);
+          if(gaugeColor) {
+            setGaugeColor(value, 0)
+          }
           updateGauge(value);
         },
         setValueAnimated: function(val, duration) {
         	var oldVal = value;
-          value = normalize(val, limit);
+          value = normalize(val, min, limit);
           if(oldVal === value) {
             return;
           }
+
+          if(gaugeColor) {
+            setGaugeColor(value, duration);
+          }
           Animation({
             start: oldVal || 0,
             end: value,
             duration: duration || 1,
-            step: function(val) {
-              updateGauge(Math.round(val * 100) / 100);
+            step: function(val, frame) {
+              updateGauge(val, frame);
             }
           });
         },
@@ -271,7 +339,7 @@
       };
 
       initializeGauge(gaugeContainer);
-      updateGauge(value);
+      instance.setValue(value);
       return instance;
     };
   })();

node_modules/svg-gauge/example/index.css

@@ -16,36 +16,38 @@
   }
   .gauge-container.one > .gauge > .dial {
     stroke: #334455;
-    stroke-width: 20;
-    fill: rgba(0,0,0,0);
+    stroke-width: 2;
   }
+  
   .gauge-container.one > .gauge > .value {
     stroke: rgb(47, 227, 255);
-    stroke-width: 20;
-    fill: rgba(0,0,0,0);
+    stroke-width: 2;
   }
+  
   .gauge-container.one > .gauge > .value-text {
     fill: rgb(47, 227, 255);
     font-family: sans, 'sans-serif';
     font-weight: bold;
-    font-size: 10em;
+    font-size: 0.6em;
   }
 
   /* ------------------- Alternate Style ------------------------- */
 
   .gauge-container.two {
+    height: auto;
+    border: 1px solid rgba(255,255,255,0.1);
   }
   .gauge-container.two > .gauge > .dial {
     stroke: #334455;
-    stroke-width: 100;
+    stroke-width: 10;
   }
   .gauge-container.two > .gauge > .value {
-    stroke: orange;
+    /*stroke: orange;*/
     stroke-dasharray: none;
-    stroke-width: 130;
+    stroke-width: 13;
   }
-  .gauge-container.two > .gauge > .value-text {
-    fill: orange;
+  .gauge-container.two > .gauge > .value {
+    /*fill: orange;*/
   }
 
 
@@ -55,12 +57,12 @@
   }
   .gauge-container.three > .gauge > .dial {
     stroke: #334455;
-    stroke-width: 20;
+    stroke-width: 2;
     /*stroke-dasharray: 125, 20;*/
   }
   .gauge-container.three > .gauge > .value {
     stroke: #C9DE3C;
-    stroke-width: 50;
+    stroke-width: 5;
     /*stroke-dasharray: 125, 20;*/
   }
   .gauge-container.three > .gauge > .value-text {
@@ -73,12 +75,12 @@
   .gauge-container.four > .gauge > .dial {
     stroke: #334455;
     fill: "#334455";
-    stroke-width: 50;
+    stroke-width: 5;
   }
   .gauge-container.four > .gauge > .value {
     stroke: #BE80FF;
     stroke-dasharray: none;
-    stroke-width: 50;
+    stroke-width: 5;
   }
   .gauge-container.four > .gauge > .value-text {
     fill: #BE80FF;
@@ -89,16 +91,16 @@
   .gauge-container.five > .gauge > .dial {
     stroke: #334455;
     fill: "#334455";
-    stroke-width: 50;
+    stroke-width: 5;
   }
   .gauge-container.five > .gauge > .value {
     stroke: #F8774B;
     stroke-dasharray: none;
-    stroke-width: 50;
+    stroke-width: 5;
   }
   .gauge-container.five > .gauge > .value-text {
     fill: #F8774B;
-    font-size: 7em;
+    font-size: 0.7em;
   }
 
 
@@ -107,14 +109,14 @@
     stroke: #334455;
     fill: "#334455";
     stroke-dasharray: 110 10;
-    stroke-width: 50;
+    stroke-width: 5;
   }
   .gauge-container.six > .gauge > .value {
     stroke: #FF6DAF;
-    stroke-dasharray: 110 10;
-    stroke-width: 52;
+    stroke-dasharray: 10 1;
+    stroke-width: 5.2;
   }
   .gauge-container.six > .gauge > .value-text {
     fill: #FF6DAF;
-    font-size: 7em;
-  }
+    font-size: 0.7em;
+  }

node_modules/svg-gauge/example/index.html

@@ -41,9 +41,7 @@
         margin: 0;
       }
 
-      #gauge1 .value-text {
-        font-size: 6em;
-      }
+
 
       @media only screen and (min-device-width: 768px) {
         .example > .code {
@@ -130,10 +128,23 @@
   var gauge2 = Gauge(
     document.getElementById("gauge2"),
     {
+      min: -100,
       max: 100,
       dialStartAngle: 180,
       dialEndAngle: 0,
-      value: 50
+      value: 50,
+      viewBox: "0 0 100 57",
+      color: function(value) {
+        if(value < 20) {
+          return "#5ee432";
+        }else if(value < 40) {
+          return "#fffa50";
+        }else if(value < 60) {
+          return "#f7aa38";
+        }else {
+          return "#ef4655";
+        }
+      }
     }
   );
 </code>
@@ -184,6 +195,7 @@
       max: 100,
       dialStartAngle: 180,
       dialEndAngle: -90,
+      viewBox: "0 0 57 57",
       value: 50
     }
   );
@@ -211,6 +223,7 @@
       max: 200,
       dialStartAngle: 0,
       dialEndAngle: -180,
+      viewBox: "0 35 100 100",
       value: 50
     }
   );
@@ -238,8 +251,8 @@
       max: 100,
       dialStartAngle: 90.01,
       dialEndAngle: 89.99,
-      radius: 150,
-      displayValue: false,
+      dialRadius: 150,
+      showValue: false,
       value: 50,
     }
   );
@@ -257,6 +270,8 @@
     <script type="text/javascript" src="../src/gauge.js"> </script>
     <script>
 
+      var pad = function(tar) {}
+
       var gauge0 = Gauge(document.getElementById("gauge0"));
 
       var gauge1 = Gauge(
@@ -267,7 +282,7 @@
           dialEndAngle: -90.001,
           value: 100,
           label: function(value) {
-            return Math.round(value) + "/" + this.max;
+            return (Math.round(value * 100) / 100) + "/" + this.max;
           }
         }
       );
@@ -275,10 +290,23 @@
       var gauge2 = Gauge(
         document.getElementById("gauge2"),
 		    {
+          min: -100,
           max: 100,
           dialStartAngle: 180,
           dialEndAngle: 0,
-          value: 50
+          value: 50,
+          viewBox: "0 0 100 57",
+          color: function(value) {
+            if(value < 20) {
+              return "#5ee432";
+            }else if(value < 40) {
+              return "#fffa50";
+            }else if(value < 60) {
+              return "#f7aa38";
+            }else {
+              return "#ef4655";
+            }
+          }
         }
       );
 
@@ -296,6 +324,7 @@
           max: 100,
           dialStartAngle: 180,
           dialEndAngle: -90,
+          viewBox: "0 0 60 60",
           value: 50
         }
       );
@@ -306,6 +335,7 @@
           max: 200,
           dialStartAngle: 0,
           dialEndAngle: -180,
+          viewBox: "0 35 100 100",
           value: 50
         }
       );
@@ -316,28 +346,28 @@
           max: 100,
           dialStartAngle: 90.01,
           dialEndAngle: 89.99,
-          radius: 150,
+          dialRadius: 15,
           showValue: false,
           value: 100
         }
       );
 
       (function loop() {
-        var value1 = Math.round(Math.random() * 100),
-            value2 = Math.round(Math.random() * 100),
-            value3 = Math.round(Math.random() * 100),
-            value4 = Math.round(Math.random() * 100),
-            value5 = Math.round(Math.random() * 200);
+        var value1 = Math.random() * 100,
+            value2 = Math.random(),
+            value3 = Math.random() * 100,
+            value4 = Math.random() * 100,
+            value5 = Math.random() * 200;
 
-        gauge0.setValueAnimated(value1, 1);
+        gauge0.setValue(value1, 1);
         gauge1.setValueAnimated(value1, 1);
-        gauge2.setValueAnimated(value2, 2);
+        gauge2.setValueAnimated(50 - value1, 3);
         gauge3.setValueAnimated(value3, 1.5);
         gauge4.setValueAnimated(value4, 2);
         gauge5.setValueAnimated(value5, 1);
         gauge6.setValueAnimated(value1, 1);
-        window.setTimeout(loop, 2500);
+        window.setTimeout(loop, 4000);
       })();
     </script>
   </body>
-</html>
+</html>

node_modules/svg-gauge/index.js

@@ -1,295 +1 @@
-/* global window, define, module */
-(function(global, factory) {
-  var Gauge = factory(global);
-  if(typeof define === "function" && define.amd) {
-    // AMD support
-    define(function() {return Gauge;});
-  }else if(typeof module === "object" && module.exports) {
-    // CommonJS support
-    module.exports = Gauge;
-  }else {
-    // We are probably running in the browser
-    global.Gauge = Gauge;
-  }
-})(typeof window === "undefined" ? this : window, function(global, undefined) {
-
-  var document = global.document,
-    requestAnimationFrame = (global.requestAnimationFrame ||
-        global.mozRequestAnimationFrame ||
-        global.webkitRequestAnimationFrame ||
-        global.msRequestAnimationFrame ||
-        function(cb) {
-          return setTimeout(cb, 1000 / 60);
-        });
-
-  // EXPERIMENTAL!!
-  /**
-   * Simplistic animation function for animating the gauge. That's all!
-   * Options are:
-   * {
-   *  duration: 1,    // In seconds
-   *  start: 0,       // The start value
-   *  end: 100,       // The end value
-   *  step: function, // REQUIRED! The step function that will be passed the value and does something
-   *  easing: function // The easing function. Default is easeInOutCubic
-   * }
-   */
-  function Animation(options) {
-    var duration = options.duration,
-        currentIteration = 1,
-        iterations = 60 * duration,
-        start = options.start || 0,
-        end = options.end,
-        change = end - start,
-        step = options.step,
-        easing = options.easing || function easeInOutCubic(pos) {
-          // https://github.com/danro/easing-js/blob/master/easing.js
-          if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
-          return 0.5 * (Math.pow((pos-2),3) + 2);
-        };
-
-    function animate() {
-      var progress = (currentIteration++) / iterations;
-      var value = change * easing(progress) + start;
-      // console.log(progress + ", " + value);
-      step(value);
-      if(progress < 1) {
-        requestAnimationFrame(animate);
-      }
-    }
-    // start!
-    requestAnimationFrame(animate);
-  }
-
-
-
-  var Gauge = (function() {
-
-    var SVG_NS = "http://www.w3.org/2000/svg";
-
-    var GaugeDefaults = {
-      dialStartAngle: 135,
-      dialEndAngle: 45,
-      centerX: 500,
-      centerY: 500,
-      radius: 400
-    };
-
-    /**
-     * A utility function to create SVG dom tree
-     * @param {String} name The SVG element name
-     * @param {Object} attrs The attributes as they appear in DOM e.g. stroke-width and not strokeWidth
-     * @param {Array} children An array of children (can be created by this same function)
-     * @return The SVG element
-     */
-    function svg(name, attrs, children) {
-      var elem = document.createElementNS(SVG_NS, name);
-      for(var attrName in attrs) {
-        elem.setAttribute(attrName, attrs[attrName]);
-      }
-
-      if(children) {
-        children.forEach(function(c) {
-          elem.appendChild(c);
-        });
-      }
-      return elem;
-    }
-
-    /**
-     * Translates percentage value to angle. e.g. If gauge span angle is 180deg, then 50%
-     * will be 90deg
-     */
-    function getAngle(percentage, gaugeSpanAngle) {
-      return percentage * gaugeSpanAngle / 100;
-    }
-
-    function normalize(value, limit) {
-      var val = Number(value);
-      if(val > limit) return limit;
-      if(val < 0) return 0;
-      return val;
-    }
-
-    function getValueInPercentage(value, limit) {
-      return 100 * value / limit;
-    }
-
-    /**
-     * Gets cartesian co-ordinates for a specified radius and angle (in degrees)
-     * @param cx {Number} The center x co-oriinate
-     * @param cy {Number} The center y co-ordinate
-     * @param radius {Number} The radius of the circle
-     * @param angle {Number} The angle in degrees
-     * @return An object with x,y co-ordinates
-     */
-    function getCartesian(cx, cy, radius, angle) {
-      var rad = angle * Math.PI / 180;
-      return {
-        x: Math.round((cx + radius * Math.cos(rad)) * 1000) / 1000,
-        y: Math.round((cy + radius * Math.sin(rad)) * 1000) / 1000
-      };
-    }
-
-    // Returns start and end points for dial
-    // i.e. starts at 135deg ends at 45deg with large arc flag
-    // REMEMBER!! angle=0 starts on X axis and then increases clockwise
-    function getDialCoords(radius, startAngle, endAngle) {
-      var cx = GaugeDefaults.centerX,
-          cy = GaugeDefaults.centerY;
-      return {
-        end: getCartesian(cx, cy, radius, endAngle),
-      	start: getCartesian(cx, cy, radius, startAngle)
-      };
-    }
-
-    function defaultLabelRenderer(theValue) {
-      return Math.round(theValue);
-    }
-
-    /**
-     * Creates a Gauge object. This should be called without the 'new' operator. Various options
-     * can be passed for the gauge:
-     * {
-     *    dialStartAngle: The angle to start the dial. MUST be greater than dialEndAngle. Default 135deg
-     *    dialEndAngle: The angle to end the dial. Default 45deg
-     *    radius: The gauge's radius. Default 400
-     *    max: The maximum value of the gauge. Default 100
-     *    value: The starting value of the gauge. Default 0
-     *    label: The function on how to render the center label (Should return a value)
-     * }
-     * @param {Element} elem The DOM into which to render the gauge
-     * @param {Object} opts The gauge options
-     * @return a Gauge object
-     */
-    return function Gauge(elem, opts) {
-      opts = opts || {};
-      var gaugeContainer = elem,
-          limit = opts.max || 100,
-          value = normalize(opts.value || 0, limit),
-          radius = opts.radius || 400,
-          displayValue = opts.showValue === false ? false : true,
-          valueLabelRender = typeof (opts.label) === "function" ? opts.label : defaultLabelRenderer,
-          startAngle = typeof (opts.dialStartAngle) === "undefined" ? 135 : opts.dialStartAngle,
-          endAngle = typeof (opts.dialEndAngle) === "undefined" ? 45 : opts.dialEndAngle,
-          valueDialClass = typeof (opts.valueDialClass) === "undefined" ? 'value' : opts.valueDialClass,
-          valueTextClass = typeof (opts.valueTextClass) === "undefined" ? 'value-text' : opts.valueTextClass,
-          dialClass = typeof (opts.dialClass) === "undefined" ? 'dial' : opts.dialClass,
-          gaugeClass = typeof (opts.gaugeClass) === "undefined" ? 'gauge' : opts.gaugeClass,
-          title = typeof (opts.title) === "undefined" ? 'title' : opts.title,
-          gaugeTextElem,
-          gaugeTitleElem,
-          gaugeValuePath,
-          instance;
-
-      if(startAngle < endAngle) {
-        console.log("WARNING! Start angle should be greater than end angle. Swapping");
-        var tmp = startAngle;
-        startAngle = endAngle;
-        endAngle = tmp;
-      }
-
-      function pathString(radius, startAngle, endAngle, largeArc) {
-        var coords = getDialCoords(radius, startAngle, endAngle),
-            start = coords.start,
-            end = coords.end,
-            largeArcFlag = typeof(largeArc) === "undefined" ? 1 : largeArc;
-
-        return ["M", start.x, start.y, "A", radius, radius, "0", largeArcFlag, "1", end.x, end.y].join(" ");
-      }
-
-      function initializeGauge(elem) {
-        gaugeTextElem = svg("text", {
-          "class": valueTextClass,
-          "x": 500,
-          "y": 375,
-          "font-size": "700%",
-          "font-family": "sans-serif",
-          "font-weight": "bold",
-          "text-anchor": "middle"
-        });
-        gaugeTitleElem = svg("text", {
-    //      "class": valueTextClass,
-          "class": "title",
-          "x": 500,
-          "y": 500,
-         // "font-size": "80%",
-          "font-family": "sans-serif",
-         // "font-weight": "bold",
-          "text-anchor": "middle"
-        });
-        
-        gaugeValuePath = svg("path", {
-          "class": valueDialClass,
-          "fill": "transparent",
-          "stroke": "#666",
-          "stroke-width": 25,
-          "d": pathString(radius, startAngle, startAngle) // value of 0
-        });
-        gaugeTitleElem.textContent = title;
-
-        var angle = getAngle(100, 360 - Math.abs(startAngle - endAngle));
-        var flag = angle <= 180 ? 0 : 1;
-        var gaugeElement = svg("svg", {"viewBox": "0 0 1000 525", "class": gaugeClass},
-          [
-            svg("path", {
-              "class": dialClass,
-              "fill": "transparent",
-              "stroke": "#eee",
-              "stroke-width": 20,
-              "d": pathString(radius, startAngle, endAngle, flag)
-            }),
-            gaugeTextElem,
-            gaugeTitleElem,
-            gaugeValuePath
-          ]
-        );
-        elem.appendChild(gaugeElement);
-      }
-
-      function updateGauge(theValue) {
-        var val = getValueInPercentage(theValue, limit),
-            // angle = getAngle(val, 360 - Math.abs(endAngle - startAngle)),
-            angle = getAngle(val, 360 - Math.abs(startAngle - endAngle)),
-            // this is because we are using arc greater than 180deg
-            flag = angle <= 180 ? 0 : 1;
-        (displayValue && (gaugeTextElem.textContent = valueLabelRender.call(opts, theValue)));
-        gaugeValuePath.setAttribute("d", pathString(radius, startAngle, angle + startAngle, flag));
-      }
-
-      instance = {
-        setMaxValue: function(max) {
-          limit = max;
-        },
-        setValue: function(val) {
-          value = normalize(val, limit);
-          updateGauge(value);
-        },
-        setValueAnimated: function(val, duration) {
-        	var oldVal = value;
-          value = normalize(val, limit);
-          if(oldVal === value) {
-            return;
-          }
-          Animation({
-            start: oldVal || 0,
-            end: value,
-            duration: duration || 1,
-            step: function(val) {
-              updateGauge(Math.round(val * 100) / 100);
-            }
-          });
-        },
-        getValue: function() {
-          return value;
-        }
-      };
-
-      initializeGauge(gaugeContainer);
-      updateGauge(value);
-      return instance;
-    };
-  })();
-
-  return Gauge;
-});
+module.exports = require("./src/gauge");

node_modules/svg-gauge/index.js.bkp

@@ -1 +0,0 @@
-module.exports = require("./src/gauge");

node_modules/svg-gauge/package.json

@@ -1,83 +1,58 @@
 {
   "_args": [
     [
-      "svg-gauge",
-      "/Users/janbranbergen/tmp/ionic/myApp"
+      "svg-gauge@1.0.6",
+      "/Users/or.e/Developer/meBarista_in_Ionic2"
     ]
   ],
-  "_from": "svg-gauge@latest",
-  "_id": "svg-gauge@1.0.2",
-  "_inCache": true,
-  "_installable": true,
+  "_from": "svg-gauge@1.0.6",
+  "_id": "svg-gauge@1.0.6",
+  "_inBundle": false,
+  "_integrity": "sha512-gRkznVhtS18eOM/GMPDXAvrLZOpqzNVDg4bFAPAEjiDKd1tZHFIe8Bwt3G6TFg/H+pFboetPPI+zoV+bOL26QQ==",
   "_location": "/svg-gauge",
-  "_nodeVersion": "5.1.0",
-  "_npmOperationalInternal": {
-    "host": "packages-18-east.internal.npmjs.com",
-    "tmp": "tmp/svg-gauge-1.0.2.tgz_1478079554462_0.9864934992510825"
-  },
-  "_npmUser": {
-    "email": "aniketn3@gmail.com",
-    "name": "naikus"
-  },
-  "_npmVersion": "3.3.12",
   "_phantomChildren": {},
   "_requested": {
+    "type": "version",
+    "registry": true,
+    "raw": "svg-gauge@1.0.6",
     "name": "svg-gauge",
-    "raw": "svg-gauge",
-    "rawSpec": "",
-    "scope": null,
-    "spec": "latest",
-    "type": "tag"
+    "escapedName": "svg-gauge",
+    "rawSpec": "1.0.6",
+    "saveSpec": null,
+    "fetchSpec": "1.0.6"
   },
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://registry.npmjs.org/svg-gauge/-/svg-gauge-1.0.2.tgz",
-  "_shasum": "824c09766faf6d27986015e29d3867ce32a51b85",
-  "_shrinkwrap": null,
-  "_spec": "svg-gauge",
-  "_where": "/Users/janbranbergen/tmp/ionic/myApp",
+  "_resolved": "https://registry.npmjs.org/svg-gauge/-/svg-gauge-1.0.6.tgz",
+  "_spec": "1.0.6",
+  "_where": "/Users/or.e/Developer/meBarista_in_Ionic2",
   "author": {
     "name": "aniketn3@gmail.com"
   },
   "bugs": {
     "url": "https://github.com/naikus/svg-gauge/issues"
   },
-  "dependencies": {},
   "description": "Minimal SVG animated gauge with zero dependencies",
   "devDependencies": {
-    "del": "^2.2.1",
-    "event-stream": "^3.3.3",
-    "gulp": "^3.9.1",
-    "gulp-concat": "^2.6.0",
-    "gulp-jshint": "^2.0.1",
-    "gulp-uglify": "^1.5.4"
+    "del": "^3.0.0",
+    "gulp": "^4.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-jshint": "^2.1.0",
+    "gulp-uglify": "^3.0.1"
   },
   "directories": {
     "test": "test"
   },
-  "dist": {
-    "shasum": "824c09766faf6d27986015e29d3867ce32a51b85",
-    "tarball": "https://registry.npmjs.org/svg-gauge/-/svg-gauge-1.0.2.tgz"
-  },
-  "gitHead": "91c508af87fc40ac7126dd0ca47cc06634a90012",
   "homepage": "https://github.com/naikus/svg-gauge#readme",
   "keywords": [
-    "Animation",
+    "SVG",
     "Gauge",
-    "SVG"
+    "Animation"
   ],
   "license": "MIT",
   "main": "index.js",
-  "maintainers": [
-    {
-      "name": "naikus",
-      "email": "aniketn3@gmail.com"
-    }
-  ],
   "name": "svg-gauge",
-  "optionalDependencies": {},
-  "readme": "ERROR: No README data found!",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/naikus/svg-gauge.git"
@@ -85,5 +60,5 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "version": "1.0.2"
+  "version": "1.0.6"
 }

node_modules/svg-gauge/src/gauge.js

@@ -14,6 +14,7 @@
 })(typeof window === "undefined" ? this : window, function(global, undefined) {
 
   var document = global.document,
+    slice = Array.prototype.slice,
     requestAnimationFrame = (global.requestAnimationFrame ||
         global.mozRequestAnimationFrame ||
         global.webkitRequestAnimationFrame ||
@@ -49,10 +50,12 @@
         };
 
     function animate() {
-      var progress = (currentIteration++) / iterations;
-      var value = change * easing(progress) + start;
+      var progress = currentIteration / iterations, 
+          value = change * easing(progress) + start;
       // console.log(progress + ", " + value);
-      step(value);
+      step(value, currentIteration);
+      currentIteration += 1;
+
       if(progress < 1) {
         requestAnimationFrame(animate);
       }
@@ -64,17 +67,41 @@
 
 
   var Gauge = (function() {
-
     var SVG_NS = "http://www.w3.org/2000/svg";
 
     var GaugeDefaults = {
+      centerX: 50,
+      centerY: 50
+    };
+
+    var defaultOptions = {
+      dialRadius: 40,
       dialStartAngle: 135,
       dialEndAngle: 45,
-      centerX: 500,
-      centerY: 500,
-      radius: 400
+      value: 0,
+      max: 100,
+      min: 0,
+      valueDialClass: "value",
+      valueClass: "value-text",
+      dialClass: "dial",
+      gaugeClass: "gauge",
+      showValue: true,
+      gaugeColor: null,
+      label: function(val) {return Math.round(val);}
     };
 
+    function shallowCopy(/* source, ...targets*/) {
+      var target = arguments[0], sources = slice.call(arguments, 1);
+      sources.forEach(function(s) {
+        for(var k in s) {
+          if(s.hasOwnProperty(k)) {
+            target[k] = s[k];
+          }
+        }
+      });
+      return target;
+    }
+
     /**
      * A utility function to create SVG dom tree
      * @param {String} name The SVG element name
@@ -104,15 +131,18 @@
       return percentage * gaugeSpanAngle / 100;
     }
 
-    function normalize(value, limit) {
+    function normalize(value, min, limit) {
       var val = Number(value);
       if(val > limit) return limit;
-      if(val < 0) return 0;
+      if(val < min) return min;
       return val;
     }
 
-    function getValueInPercentage(value, limit) {
-      return 100 * value / limit;
+    function getValueInPercentage(value, min, max) {
+      var newMax = max - min, newVal = value - min;
+      return 100 * newVal / newMax;
+      // var absMin = Math.abs(min);
+      // return 100 * (absMin + value) / (max + absMin);
     }
 
     /**
@@ -143,10 +173,6 @@
       };
     }
 
-    function defaultLabelRenderer(theValue) {
-      return Math.round(theValue);
-    }
-
     /**
      * Creates a Gauge object. This should be called without the 'new' operator. Various options
      * can be passed for the gauge:
@@ -163,25 +189,29 @@
      * @return a Gauge object
      */
     return function Gauge(elem, opts) {
-      opts = opts || {};
+      opts = shallowCopy({}, defaultOptions, opts);
       var gaugeContainer = elem,
-          limit = opts.max || 100,
-          value = normalize(opts.value || 0, limit),
-          radius = opts.radius || 400,
-          displayValue = opts.showValue === false ? false : true,
-          valueLabelRender = typeof (opts.label) === "function" ? opts.label : defaultLabelRenderer,
-          startAngle = typeof (opts.dialStartAngle) === "undefined" ? 135 : opts.dialStartAngle,
-          endAngle = typeof (opts.dialEndAngle) === "undefined" ? 45 : opts.dialEndAngle,
-          valueDialClass = typeof (opts.valueDialClass) === "undefined" ? 'value' : opts.valueDialClass,
-          valueTextClass = typeof (opts.valueTextClass) === "undefined" ? 'value-text' : opts.valueTextClass,
-          dialClass = typeof (opts.dialClass) === "undefined" ? 'dial' : opts.dialClass,
-          gaugeClass = typeof (opts.gaugeClass) === "undefined" ? 'gauge' : opts.gaugeClass,
-          gaugeTextElem,
+          limit = opts.max,
+          min = opts.min,
+          value = normalize(opts.value, min, limit),
+          radius = opts.dialRadius,
+          displayValue = opts.showValue,
+          startAngle = opts.dialStartAngle,
+          endAngle = opts.dialEndAngle,
+          valueDialClass = opts.valueDialClass,
+          valueTextClass = opts.valueClass,
+          valueLabelClass = opts.valueLabelClass,
+          dialClass = opts.dialClass,
+          gaugeClass = opts.gaugeClass,
+          gaugeColor = opts.color,
+          gaugeValueElem,
           gaugeValuePath,
+          label = opts.label,
+          viewBox = opts.viewBox,
           instance;
 
       if(startAngle < endAngle) {
-        console.log("WARNING! Start angle should be greater than end angle. Swapping");
+        console.log("WARN! startAngle < endAngle, Swapping");
         var tmp = startAngle;
         startAngle = endAngle;
         endAngle = tmp;
@@ -193,75 +223,113 @@
             end = coords.end,
             largeArcFlag = typeof(largeArc) === "undefined" ? 1 : largeArc;
 
-        return ["M", start.x, start.y, "A", radius, radius, "0", largeArcFlag, "1", end.x, end.y].join(" ");
+        return [
+          "M", start.x, start.y, 
+          "A", radius, radius, 0, largeArcFlag, 1, end.x, end.y
+        ].join(" ");
       }
 
       function initializeGauge(elem) {
-        gaugeTextElem = svg("text", {
+        gaugeValueElem = svg("text", {
+          x: 50,
+          y: 50,
+          fill: "#999",
           "class": valueTextClass,
-          "x": 500,
-          "y": 550,
-          "font-size": "700%",
+          "font-size": "100%",
           "font-family": "sans-serif",
-          "font-weight": "bold",
-          "text-anchor": "middle"
+          "font-weight": "normal",
+          "text-anchor": "middle",
+          "alignment-baseline": "middle",
+          "dominant-baseline": "central"
         });
+
         gaugeValuePath = svg("path", {
           "class": valueDialClass,
-          "fill": "transparent",
-          "stroke": "#666",
-          "stroke-width": 25,
-          "d": pathString(radius, startAngle, startAngle) // value of 0
+          fill: "none",
+          stroke: "#666",
+          "stroke-width": 2.5,
+          d: pathString(radius, startAngle, startAngle) // value of 0
         });
 
         var angle = getAngle(100, 360 - Math.abs(startAngle - endAngle));
         var flag = angle <= 180 ? 0 : 1;
-        var gaugeElement = svg("svg", {"viewBox": "0 0 1000 1000", "class": gaugeClass},
+        var gaugeElement = svg("svg", {"viewBox": viewBox || "0 0 100 100", "class": gaugeClass},
           [
             svg("path", {
               "class": dialClass,
-              "fill": "transparent",
-              "stroke": "#eee",
-              "stroke-width": 20,
-              "d": pathString(radius, startAngle, endAngle, flag)
+              fill: "none",
+              stroke: "#eee",
+              "stroke-width": 2,
+              d: pathString(radius, startAngle, endAngle, flag)
             }),
-            gaugeTextElem,
+            gaugeValueElem,
             gaugeValuePath
           ]
         );
         elem.appendChild(gaugeElement);
       }
 
-      function updateGauge(theValue) {
-        var val = getValueInPercentage(theValue, limit),
+      function updateGauge(theValue, frame) {
+        var val = getValueInPercentage(theValue, min, limit),
             // angle = getAngle(val, 360 - Math.abs(endAngle - startAngle)),
             angle = getAngle(val, 360 - Math.abs(startAngle - endAngle)),
             // this is because we are using arc greater than 180deg
             flag = angle <= 180 ? 0 : 1;
-        (displayValue && (gaugeTextElem.textContent = valueLabelRender.call(opts, theValue)));
+        if(displayValue) {
+          gaugeValueElem.textContent = label.call(opts, theValue);
+        }
         gaugeValuePath.setAttribute("d", pathString(radius, startAngle, angle + startAngle, flag));
       }
 
+      function setGaugeColor(value, duration) {        
+        var c = gaugeColor(value), 
+            dur = duration * 1000,
+            pathTransition = "stroke " + dur + "ms ease";
+            // textTransition = "fill " + dur + "ms ease";
+
+        gaugeValuePath.style = [
+          "stroke: " + c,
+          "-webkit-transition: " + pathTransition,
+          "-moz-transition: " + pathTransition,
+          "transition: " + pathTransition,
+        ].join(";");
+        /*
+        gaugeValueElem.style = [
+          "fill: " + c,
+          "-webkit-transition: " + textTransition,
+          "-moz-transition: " + textTransition,
+          "transition: " + textTransition,
+        ].join(";");
+        */
+      }
+
       instance = {
         setMaxValue: function(max) {
           limit = max;
         },
         setValue: function(val) {
-          value = normalize(val, limit);
+          value = normalize(val, min, limit);
+          if(gaugeColor) {
+            setGaugeColor(value, 0)
+          }
           updateGauge(value);
         },
         setValueAnimated: function(val, duration) {
         	var oldVal = value;
-          value = normalize(val, limit);
+          value = normalize(val, min, limit);
           if(oldVal === value) {
             return;
           }
+
+          if(gaugeColor) {
+            setGaugeColor(value, duration);
+          }
           Animation({
             start: oldVal || 0,
             end: value,
             duration: duration || 1,
-            step: function(val) {
-              updateGauge(Math.round(val * 100) / 100);
+            step: function(val, frame) {
+              updateGauge(val, frame);
             }
           });
         },
@@ -271,7 +339,7 @@
       };
 
       initializeGauge(gaugeContainer);
-      updateGauge(value);
+      instance.setValue(value);
       return instance;
     };
   })();

package.json

@@ -30,7 +30,17 @@
     "bindings": "^1.2.1",
     "buffer": "^5.0.6",
     "chart.js": "^2.5.0",
+    "cordova-ios": "^5.1.1",
+    "cordova-plugin-bluetooth-serial": "^0.4.7",
+    "cordova-plugin-compat": "^1.2.0",
+    "cordova-plugin-console": "^1.0.5",
+    "cordova-plugin-device": "^1.1.7",
+    "cordova-plugin-file": "^4.3.3",
+    "cordova-plugin-splashscreen": "^4.0.3",
+    "cordova-plugin-statusbar": "^2.2.1",
+    "cordova-plugin-whitelist": "^1.3.1",
     "ionic-angular": "2.3.0",
+    "ionic-plugin-keyboard": "^2.2.1",
     "ionicons": "3.0.0",
     "rxjs": "5.0.1",
     "svg-gauge": "^1.0.2",
@@ -52,7 +62,21 @@
     "ionic-plugin-keyboard",
     "cordova-plugin-bluetooth-serial"
   ],
-  "cordovaPlatforms": [
-  ],
-  "description": "meBarista, the App to control meCoffee"
-}
+  "cordovaPlatforms": [],
+  "description": "meBarista, the App to control meCoffee",
+  "cordova": {
+    "plugins": {
+      "ionic-plugin-keyboard": {},
+      "cordova-plugin-whitelist": {},
+      "cordova-plugin-console": {},
+      "cordova-plugin-statusbar": {},
+      "cordova-plugin-splashscreen": {},
+      "cordova-plugin-file": {},
+      "cordova-plugin-bluetooth-serial": {},
+      "cordova-plugin-device": {}
+    },
+    "platforms": [
+      "ios"
+    ]
+  }
+}