General : cleaning and optimizing CSS

General : responsive design
General : reload button now spins when you reload block
General : update jQuery plugin Knob to 1.2.11
General : optimizing security (config file esm.config.json is now in the conf/ folder with an htaccess)
CPU : retrieves correctly CPU frequency for Raspberry Pi
CPU : add CPU temperature (+ option to enable/disable)
System : little correction for getting distro name
Swap : fix if swap is disabled
Services status : adds protocol TCP or UDP for checking service status
Services status : new option to hide port number (see show_port in services section)

2 files changed, 282 insertions, 200 deletions

diff --git a/js/esm.js b/js/esm.js
index 40ed93b..c40d875 100644
--- a/js/esm.js
+++ b/js/esm.js
@@ -3,11 +3,17 @@ var esm = {};
 
 esm.getSystem = function() {
 
-    $.get('libs/system.php', function(data) {
+    var module = 'system';
+    
+    esm.reloadBlock_spin(module);
 
-        var $box = $('.box#esm-system .box-content tbody');
+    $.get('libs/'+module+'.php', function(data) {
 
-        esm.insertDatas($box, 'system', data);
+        var $box = $('.box#esm-'+module+' .box-content tbody');
+
+        esm.insertDatas($box, module, data);
+
+        esm.reloadBlock_spin(module);
 
     }, 'json');
 
@@ -16,14 +22,20 @@ esm.getSystem = function() {
 
 esm.getLoad_average = function() {
 
-    $.get('libs/load_average.php', function(data) {
+    var module = 'load_average';
+    
+    esm.reloadBlock_spin(module);
+
+    $.get('libs/'+module+'.php', function(data) {
 
-        var $box = $('.box#esm-load_average .box-content');
+        var $box = $('.box#esm-'+module+' .box-content');
 
         esm.reconfigureGauge($('input#load-average_1', $box), data[0]);
         esm.reconfigureGauge($('input#load-average_5', $box), data[1]);
         esm.reconfigureGauge($('input#load-average_15', $box), data[2]);
 
+        esm.reloadBlock_spin(module);
+
     }, 'json');
 
 }
@@ -31,11 +43,17 @@ esm.getLoad_average = function() {
 
 esm.getCpu = function() {
 
-    $.get('libs/cpu.php', function(data) {
+    var module = 'cpu';
+    
+    esm.reloadBlock_spin(module);
+
+    $.get('libs/'+module+'.php', function(data) {
+
+        var $box = $('.box#esm-'+module+' .box-content tbody');
 
-        var $box = $('.box#esm-cpu .box-content tbody');
+        esm.insertDatas($box, module, data);
 
-        esm.insertDatas($box, 'cpu', data);
+        esm.reloadBlock_spin(module);
 
     }, 'json');
 
@@ -44,11 +62,17 @@ esm.getCpu = function() {
 
 esm.getMemory = function() {
 
-    $.get('libs/memory.php', function(data) {
+    var module = 'memory';
+    
+    esm.reloadBlock_spin(module);
 
-        var $box = $('.box#esm-memory .box-content tbody');
+    $.get('libs/'+module+'.php', function(data) {
 
-        esm.insertDatas($box, 'memory', data);
+        var $box = $('.box#esm-'+module+' .box-content tbody');
+
+        esm.insertDatas($box, module, data);
+
+        esm.reloadBlock_spin(module);
 
         // Percent bar
         var $progress = $('.progressbar', $box);
@@ -72,11 +96,15 @@ esm.getMemory = function() {
 
 esm.getSwap = function() {
 
-    $.get('libs/swap.php', function(data) {
+    var module = 'swap';
+    
+    esm.reloadBlock_spin(module);
+
+    $.get('libs/'+module+'.php', function(data) {
 
-        var $box = $('.box#esm-swap .box-content tbody');
+        var $box = $('.box#esm-'+module+' .box-content tbody');
 
-        esm.insertDatas($box, 'swap', data);
+        esm.insertDatas($box, module, data);
 
         // Percent bar
         var $progress = $('.progressbar', $box);
@@ -92,6 +120,8 @@ esm.getSwap = function() {
             $progress.addClass('orange');
         else
             $progress.addClass('red');
+    
+        esm.reloadBlock_spin(module);
 
     }, 'json');
 
@@ -100,9 +130,13 @@ esm.getSwap = function() {
 
 esm.getDisk = function() {
 
-    $.get('libs/disk.php', function(data) {
+    var module = 'disk';
+    
+    esm.reloadBlock_spin(module);
 
-        var $box = $('.box#esm-disk .box-content tbody');
+    $.get('libs/'+module+'.php', function(data) {
+
+        var $box = $('.box#esm-'+module+' .box-content tbody');
         $box.empty();
 
         for (var line in data)
@@ -127,6 +161,8 @@ esm.getDisk = function() {
 
             $box.append(html);
         }
+    
+        esm.reloadBlock_spin(module);
 
     }, 'json');
 
@@ -135,9 +171,13 @@ esm.getDisk = function() {
 
 esm.getLast_login = function() {
 
-    $.get('libs/last_login.php', function(data) {
+    var module = 'last_login';
+    
+    esm.reloadBlock_spin(module);
+
+    $.get('libs/'+module+'.php', function(data) {
 
-        var $box = $('.box#esm-last_login .box-content tbody');
+        var $box = $('.box#esm-'+module+' .box-content tbody');
         $box.empty();
 
         for (var line in data)
@@ -150,6 +190,8 @@ esm.getLast_login = function() {
 
             $box.append(html);
         }
+    
+        esm.reloadBlock_spin(module);
 
     }, 'json');
 
@@ -158,9 +200,13 @@ esm.getLast_login = function() {
 
 esm.getNetwork = function() {
 
-    $.get('libs/network.php', function(data) {
+    var module = 'network';
+    
+    esm.reloadBlock_spin(module);
+
+    $.get('libs/'+module+'.php', function(data) {
 
-        var $box = $('.box#esm-network .box-content tbody');
+        var $box = $('.box#esm-'+module+' .box-content tbody');
         $box.empty();
 
         for (var line in data)
@@ -176,6 +222,8 @@ esm.getNetwork = function() {
             $box.append(html);
         }
 
+        esm.reloadBlock_spin(module);
+
     }, 'json');
 
 }
@@ -183,9 +231,13 @@ esm.getNetwork = function() {
 
 esm.getPing = function() {
 
-    $.get('libs/ping.php', function(data) {
+    var module = 'ping';
+    
+    esm.reloadBlock_spin(module);
+
+    $.get('libs/'+module+'.php', function(data) {
 
-        var $box = $('.box#esm-ping .box-content tbody');
+        var $box = $('.box#esm-'+module+' .box-content tbody');
         $box.empty();
 
         for (var line in data)
@@ -198,6 +250,8 @@ esm.getPing = function() {
 
             $box.append(html);
         }
+    
+        esm.reloadBlock_spin(module);
 
     }, 'json');
 
@@ -206,9 +260,13 @@ esm.getPing = function() {
 
 esm.getServices = function() {
 
-    $.get('libs/services.php', function(data) {
+    var module = 'services';
+    
+    esm.reloadBlock_spin(module);
+
+    $.get('libs/'+module+'.php', function(data) {
 
-        var $box = $('.box#esm-services .box-content tbody');
+        var $box = $('.box#esm-'+module+' .box-content tbody');
         $box.empty();
 
         for (var line in data)
@@ -225,14 +283,14 @@ esm.getServices = function() {
 
             $box.append(html);
         }
+    
+        esm.reloadBlock_spin(module);
 
     }, 'json');
 
 }
 
 
-
-
 esm.getAll = function() {
     esm.getSystem();
     esm.getCpu();
@@ -247,7 +305,18 @@ esm.getAll = function() {
 }
 
 esm.reloadBlock = function(block) {
+
     esm.mapping[block]();
+
+}
+
+esm.reloadBlock_spin = function(block) {
+
+    var $module = $('.box#esm-'+block);
+
+    $('.reload', $module).toggleClass('spin disabled');
+    $('.box-content', $module).toggleClass('faded');
+
 }
 
 esm.insertDatas = function($box, block, datas) {
diff --git a/js/plugins/jquery.knob.js b/js/plugins/jquery.knob.js
index a23a1c6..163847b 100644
--- a/js/plugins/jquery.knob.js
+++ b/js/plugins/jquery.knob.js
@@ -2,7 +2,7 @@
 /**
  * Downward compatible, touchable dial
  *
- * Version: 1.2.8
+ * Version: 1.2.11
  * Requires: jQuery v1.7+
  *
  * Copyright (c) 2012 Anthony Terrien
@@ -10,7 +10,15 @@
  *
  * Thanks to vor, eskimoblood, spiffistan, FabrizioC
  */
-(function($) {
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else {
+        // Browser globals
+        factory(jQuery);
+    }
+}(function ($) {
 
     /**
      * Kontrol library
@@ -80,43 +88,41 @@
                  ._draw();
             };
 
-            if(this.$.data('kontroled')) return;
+            if (this.$.data('kontroled')) return;
             this.$.data('kontroled', true);
 
             this.extend();
-            this.o = $.extend(
-                {
+            this.o = $.extend({
                     // Config
-                    min : this.$.data('min') !== undefined ? this.$.data('min') : 0,
-                    max : this.$.data('max') !== undefined ? this.$.data('max') : 100,
-                    stopper : true,
-                    readOnly : this.$.data('readonly') || (this.$.attr('readonly') === 'readonly'),
+                    min: this.$.data('min') !== undefined ? this.$.data('min') : 0,
+                    max: this.$.data('max') !== undefined ? this.$.data('max') : 100,
+                    stopper: true,
+                    readOnly: this.$.data('readonly') || (this.$.attr('readonly') === 'readonly'),
 
                     // UI
-                    cursor : (this.$.data('cursor') === true && 30) ||
-                                this.$.data('cursor') || 0,
-                    thickness : (
-                                    this.$.data('thickness') &&
-                                    Math.max(Math.min(this.$.data('thickness'), 1), 0.01)
-                                ) || 0.35,
-                    lineCap : this.$.data('linecap') || 'butt',
-                    width : this.$.data('width') || 200,
-                    height : this.$.data('height') || 200,
-                    displayInput : this.$.data('displayinput') == null || this.$.data('displayinput'),
-                    displayPrevious : this.$.data('displayprevious'),
-                    fgColor : this.$.data('fgcolor') || '#87CEEB',
+                    cursor: this.$.data('cursor') === true && 30
+                            || this.$.data('cursor') || 0,
+                    thickness: this.$.data('thickness')
+                               && Math.max(Math.min(this.$.data('thickness'), 1), 0.01)
+                               || 0.35,
+                    lineCap: this.$.data('linecap') || 'butt',
+                    width: this.$.data('width') || 200,
+                    height: this.$.data('height') || 200,
+                    displayInput: this.$.data('displayinput') == null || this.$.data('displayinput'),
+                    displayPrevious: this.$.data('displayprevious'),
+                    fgColor: this.$.data('fgcolor') || '#87CEEB',
                     inputColor: this.$.data('inputcolor'),
                     font: this.$.data('font') || 'Arial',
                     fontWeight: this.$.data('font-weight') || 'bold',
-                    inline : false,
-                    step : this.$.data('step') || 1,
+                    inline: false,
+                    step: this.$.data('step') || 1,
                     rotation: this.$.data('rotation'),
 
                     // Hooks
-                    draw : null, // function () {}
-                    change : null, // function (value) {}
-                    cancel : null, // function () {}
-                    release : null, // function (value) {}
+                    draw: null, // function () {}
+                    change: null, // function (value) {}
+                    cancel: null, // function () {}
+                    release: null, // function (value) {}
 
                     // Output formatting, allows to add unit: %, ms ...
                     format: function(v) {
@@ -130,12 +136,12 @@
 
             // finalize options
             this.o.flip = this.o.rotation === 'anticlockwise' || this.o.rotation === 'acw';
-            if(!this.o.inputColor) {
+            if (!this.o.inputColor) {
                 this.o.inputColor = this.o.fgColor;
             }
 
             // routing value
-            if(this.$.is('fieldset')) {
+            if (this.$.is('fieldset')) {
 
                 // fieldset = array of integer
                 this.v = {};
@@ -146,33 +152,31 @@
                     s.v[k] = s.o.parse($this.val());
 
                     $this.bind(
-                        'change blur'
-                        , function () {
+                        'change blur',
+                        function () {
                             var val = {};
                             val[k] = $this.val();
-                            s.val(val);
+                            s.val(s._validate(val));
                         }
                     );
                 });
                 this.$.find('legend').remove();
-
             } else {
 
                 // input = integer
                 this.i = this.$;
                 this.v = this.o.parse(this.$.val());
-                (this.v === '') && (this.v = this.o.min);
-
+                this.v === '' && (this.v = this.o.min);
                 this.$.bind(
-                    'change blur'
-                    , function () {
+                    'change blur',
+                    function () {
                         s.val(s._validate(s.o.parse(s.$.val())));
                     }
                 );
 
             }
 
-            (!this.o.displayInput) && this.$.hide();
+            !this.o.displayInput && this.$.hide();
 
             // adds needed DOM elements (canvas, div)
             this.$c = $(document.createElement('canvas')).attr({
@@ -191,7 +195,7 @@
             this.$div = this.$.parent();
 
             if (typeof G_vmlCanvasManager !== 'undefined') {
-              G_vmlCanvasManager.initElement(this.$c[0]);
+                G_vmlCanvasManager.initElement(this.$c[0]);
             }
 
             this.c = this.$c[0].getContext ? this.$c[0].getContext('2d') : null;
@@ -205,21 +209,20 @@
             }
 
             // hdpi support
-            this.scale = (window.devicePixelRatio || 1) /
-                        (
+            this.scale = (window.devicePixelRatio || 1) / (
                             this.c.webkitBackingStorePixelRatio ||
                             this.c.mozBackingStorePixelRatio ||
                             this.c.msBackingStorePixelRatio ||
                             this.c.oBackingStorePixelRatio ||
                             this.c.backingStorePixelRatio || 1
-                        );
+                         );
 
             // detects relative width / height
-            this.relativeWidth = ((this.o.width % 1 !== 0) &&
-                this.o.width.indexOf('%'));
-            this.relativeHeight = ((this.o.height % 1 !== 0) &&
-                this.o.height.indexOf('%'));
-            this.relative = (this.relativeWidth || this.relativeHeight);
+            this.relativeWidth =  this.o.width % 1 !== 0
+                                  && this.o.width.indexOf('%');
+            this.relativeHeight = this.o.height % 1 !== 0
+                                  && this.o.height.indexOf('%');
+            this.relative = this.relativeWidth || this.relativeHeight;
 
             // computes size and carves the component
             this._carve();
@@ -253,15 +256,15 @@
         };
 
         this._carve = function() {
-            if(this.relative) {
+            if (this.relative) {
                 var w = this.relativeWidth ?
-                            this.$div.parent().width() *
-                            parseInt(this.o.width) / 100 :
-                            this.$div.parent().width(),
+                        this.$div.parent().width() *
+                        parseInt(this.o.width) / 100
+                        : this.$div.parent().width(),
                     h = this.relativeHeight ?
-                            this.$div.parent().height() *
-                            parseInt(this.o.height) / 100 :
-                            this.$div.parent().height();
+                        this.$div.parent().height() *
+                        parseInt(this.o.height) / 100
+                        : this.$div.parent().height();
 
                 // apply relative
                 this.w = this.h = Math.min(w, h);
@@ -302,25 +305,21 @@
 
             s.clear();
 
-            s.dH
-            && (d = s.dH());
-
-            (d !== false) && s.draw();
+            s.dH && (d = s.dH());
 
+            d !== false && s.draw();
         };
 
         this._touch = function (e) {
-
             var touchMove = function (e) {
-
                 var v = s.xy2val(
                             e.originalEvent.touches[s.t].pageX,
                             e.originalEvent.touches[s.t].pageY
-                            );
+                        );
 
                 if (v == s.cv) return;
 
-                if (s.cH && (s.cH(v) === false)) return;
+                if (s.cH && s.cH(v) === false) return;
 
                 s.change(s._validate(v));
                 s._draw();
@@ -336,8 +335,8 @@
             k.c.d
                 .bind("touchmove.k", touchMove)
                 .bind(
-                    "touchend.k"
-                    , function () {
+                    "touchend.k",
+                    function () {
                         k.c.d.unbind('touchmove.k touchend.k');
                         s.val(s.cv);
                     }
@@ -347,7 +346,6 @@
         };
 
         this._mouse = function (e) {
-
             var mouseMove = function (e) {
                 var v = s.xy2val(e.pageX, e.pageY);
 
@@ -367,23 +365,21 @@
                 .bind("mousemove.k", mouseMove)
                 .bind(
                     // Escape key cancel current change
-                    "keyup.k"
-                    , function (e) {
+                    "keyup.k",
+                    function (e) {
                         if (e.keyCode === 27) {
                             k.c.d.unbind("mouseup.k mousemove.k keyup.k");
 
-                            if (
-                                s.eH
-                                && (s.eH() === false)
-                            ) return;
+                            if (s.eH && s.eH() === false)
+                                return;
 
                             s.cancel();
                         }
                     }
                 )
                 .bind(
-                    "mouseup.k"
-                    , function (e) {
+                    "mouseup.k",
+                    function (e) {
                         k.c.d.unbind('mousemove.k mouseup.k keyup.k');
                         s.val(s.cv);
                     }
@@ -396,26 +392,26 @@
             var o = this.$c.offset();
             this.x = o.left;
             this.y = o.top;
+
             return this;
         };
 
         this._listen = function () {
-
             if (!this.o.readOnly) {
                 this.$c
                     .bind(
-                        "mousedown"
-                        , function (e) {
+                        "mousedown",
+                        function (e) {
                             e.preventDefault();
                             s._xy()._mouse(e);
-                         }
+                        }
                     )
                     .bind(
-                        "touchstart"
-                        , function (e) {
+                        "touchstart",
+                        function (e) {
                             e.preventDefault();
                             s._xy()._touch(e);
-                         }
+                        }
                     );
 
                 this.listen();
@@ -423,10 +419,9 @@
                 this.$.attr('readonly', 'readonly');
             }
 
-            if(this.relative) {
+            if (this.relative) {
                 $(window).resize(function() {
-                    s._carve()
-                     .init();
+                    s._carve().init();
                     s._draw();
                 });
             }
@@ -456,8 +451,9 @@
             this.$c[0].width = this.$c[0].width;
         };
 
-        this._validate = function(v) {
-            return (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step;
+        this._validate = function (v) {
+            var val = (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step;
+            return Math.round(val * 100) / 100;
         };
 
         // Abstract methods
@@ -474,14 +470,19 @@
         this.h2rgba = function (h, a) {
             var rgb;
             h = h.substring(1,7)
-            rgb = [parseInt(h.substring(0,2),16)
-                   ,parseInt(h.substring(2,4),16)
-                   ,parseInt(h.substring(4,6),16)];
+            rgb = [
+                parseInt(h.substring(0,2), 16),
+                parseInt(h.substring(2,4), 16),
+                parseInt(h.substring(4,6), 16)
+            ];
+
             return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")";
         };
 
         this.copy = function (f, t) {
-            for (var i in f) { t[i] = f[i]; }
+            for (var i in f) {
+                t[i] = f[i];
+            }
         };
     };
 
@@ -501,14 +502,12 @@
         this.PI2 = 2*Math.PI;
 
         this.extend = function () {
-            this.o = $.extend(
-                {
-                    bgColor : this.$.data('bgcolor') || '#EEEEEE',
-                    angleOffset : this.$.data('angleoffset') || 0,
-                    angleArc : this.$.data('anglearc') || 360,
-                    inline : true
-                }, this.o
-            );
+            this.o = $.extend({
+                bgColor: this.$.data('bgcolor') || '#EEEEEE',
+                angleOffset: this.$.data('angleoffset') || 0,
+                angleArc: this.$.data('anglearc') || 360,
+                inline: true
+            }, this.o);
         };
 
         this.val = function (v, triggerRelease) {
@@ -517,10 +516,10 @@
                 // reverse format
                 v = this.o.parse(v);
 
-                if (
-                    triggerRelease !== false && (v != this.v) && this.rH &&
-                        (this.rH(v) === false)
-                ) return;
+                if (triggerRelease !== false
+                    && v != this.v
+                    && this.rH
+                    && this.rH(v) === false) { return; }
 
                 this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v;
                 this.v = this.cv;
@@ -535,23 +534,23 @@
             var a, ret;
 
             a = Math.atan2(
-                        x - (this.x + this.w2)
-                        , - (y - this.y - this.w2)
+                        x - (this.x + this.w2),
+                        - (y - this.y - this.w2)
                     ) - this.angleOffset;
 
             if (this.o.flip) {
                 a = this.angleArc - a - this.PI2;
             }
 
-            if(this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) {
+            if (this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) {
+
                 // if isset angleArc option, set to min if .5 under min
                 a = 0;
             } else if (a < 0) {
                 a += this.PI2;
             }
 
-            ret = ~~ (0.5 + (a * (this.o.max - this.o.min) / this.angleArc))
-                    + this.o.min;
+            ret = (a * (this.o.max - this.o.min) / this.angleArc) + this.o.min;
 
             this.o.stopper && (ret = max(min(ret, this.o.max), this.o.min));
 
@@ -559,60 +558,75 @@
         };
 
         this.listen = function () {
+
             // bind MouseWheel
-            var s = this, mwTimerStop, mwTimerRelease,
+            var s = this, mwTimerStop,
+                mwTimerRelease,
                 mw = function (e) {
                     e.preventDefault();
 
-                    var ori = e.originalEvent
-                        ,deltaX = ori.detail || ori.wheelDeltaX
-                        ,deltaY = ori.detail || ori.wheelDeltaY
-                        ,v = s._validate(s.o.parse(s.$.val()))
-                            + (deltaX>0 || deltaY>0 ? s.o.step : deltaX<0 || deltaY<0 ? -s.o.step : 0);
+                    var ori = e.originalEvent,
+                        deltaX = ori.detail || ori.wheelDeltaX,
+                        deltaY = ori.detail || ori.wheelDeltaY,
+                        v = s._validate(s.o.parse(s.$.val()))
+                            + (
+                                deltaX > 0 || deltaY > 0
+                                ? s.o.step
+                                : deltaX < 0 || deltaY < 0 ? -s.o.step : 0
+                              );
 
                     v = max(min(v, s.o.max), s.o.min);
 
                     s.val(v, false);
 
-                    if(s.rH) {
+                    if (s.rH) {
                         // Handle mousewheel stop
                         clearTimeout(mwTimerStop);
-                        mwTimerStop = setTimeout(function() {
+                        mwTimerStop = setTimeout(function () {
                             s.rH(v);
                             mwTimerStop = null;
                         }, 100);
 
                         // Handle mousewheel releases
-                        if(!mwTimerRelease) {
-                            mwTimerRelease = setTimeout(function() {
-                                if(mwTimerStop) s.rH(v);
+                        if (!mwTimerRelease) {
+                            mwTimerRelease = setTimeout(function () {
+                                if (mwTimerStop)
+                                    s.rH(v);
                                 mwTimerRelease = null;
                             }, 200);
                         }
                     }
-                }
-                , kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step};
+                },
+                kval,
+                to,
+                m = 1,
+                kv = {
+                    37: -s.o.step,
+                    38: s.o.step,
+                    39: s.o.step,
+                    40: -s.o.step
+                };
 
             this.$
                 .bind(
-                    "keydown"
-                    ,function (e) {
+                    "keydown",
+                    function (e) {
                         var kc = e.keyCode;
 
                         // numpad support
-                        if(kc >= 96 && kc <= 105) {
+                        if (kc >= 96 && kc <= 105) {
                             kc = e.keyCode = kc - 48;
                         }
 
                         kval = parseInt(String.fromCharCode(kc));
 
                         if (isNaN(kval)) {
-
-                            (kc !== 13)         // enter
-                            && (kc !== 8)       // bs
-                            && (kc !== 9)       // tab
-                            && (kc !== 189)     // -
-                            && (kc !== 190 || s.$.val().match(/\./))     // . only allowed once
+                            (kc !== 13)                     // enter
+                            && kc !== 8                     // bs
+                            && kc !== 9                     // tab
+                            && kc !== 189                   // -
+                            && (kc !== 190
+                                || s.$.val().match(/\./))   // . allowed once
                             && e.preventDefault();
 
                             // arrows
@@ -622,20 +636,20 @@
                                 var v = s.o.parse(s.$.val()) + kv[kc] * m;
                                 s.o.stopper && (v = max(min(v, s.o.max), s.o.min));
 
-                                s.change(v);
+                                s.change(s._validate(v));
                                 s._draw();
 
                                 // long time keydown speed-up
-                                to = window.setTimeout(
-                                    function () { m *= 2; }, 30
-                                );
+                                to = window.setTimeout(function () {
+                                    m *= 2;
+                                }, 30);
                             }
                         }
                     }
                 )
                 .bind(
-                    "keyup"
-                    ,function (e) {
+                    "keyup",
+                    function (e) {
                         if (isNaN(kval)) {
                             if (to) {
                                 window.clearTimeout(to);
@@ -648,7 +662,6 @@
                             (s.$.val() > s.o.max && s.$.val(s.o.max))
                             || (s.$.val() < s.o.min && s.$.val(s.o.min));
                         }
-
                     }
                 );
 
@@ -657,11 +670,8 @@
         };
 
         this.init = function () {
-
-            if (
-                this.v < this.o.min
-                || this.v > this.o.max
-            ) this.v = this.o.min;
+            if (this.v < this.o.min
+                || this.v > this.o.max) { this.v = this.o.min; }
 
             this.$.val(this.v);
             this.w2 = this.w / 2;
@@ -686,30 +696,29 @@
             this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc;
 
             var s = max(
-                            String(Math.abs(this.o.max)).length
-                            , String(Math.abs(this.o.min)).length
-                            , 2
-                            ) + 2;
+                String(Math.abs(this.o.max)).length,
+                String(Math.abs(this.o.min)).length,
+                2
+            ) + 2;
 
             this.o.displayInput
                 && this.i.css({
-                        'width' : ((this.w / 2 + 4) >> 0) + 'px'
-                        ,'height' : ((this.w / 3) >> 0) + 'px'
-                        ,'position' : 'absolute'
-                        ,'vertical-align' : 'middle'
-                        ,'margin-top' : ((this.w / 3) >> 0) + 'px'
-                        ,'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px'
-                        ,'border' : 0
-                        ,'background' : 'none'
-                        ,'font' : this.o.fontWeight + ' ' + ((this.w / s) >> 0) + 'px ' + this.o.font
-                        ,'text-align' : 'center'
-                        ,'color' : this.o.inputColor || this.o.fgColor
-                        ,'padding' : '0px'
-                        ,'-webkit-appearance': 'none'
-                        })
-                || this.i.css({
-                        'width' : '0px'
-                        ,'visibility' : 'hidden'
+                        'width' : ((this.w / 2 + 4) >> 0) + 'px',
+                        'height' : ((this.w / 3) >> 0) + 'px',
+                        'position' : 'absolute',
+                        'vertical-align' : 'middle',
+                        'margin-top' : ((this.w / 3) >> 0) + 'px',
+                        'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px',
+                        'border' : 0,
+                        'background' : 'none',
+                        'font' : this.o.fontWeight + ' ' + ((this.w / s) >> 0) + 'px ' + this.o.font,
+                        'text-align' : 'center',
+                        'color' : this.o.inputColor || this.o.fgColor,
+                        'padding' : '0px',
+                        '-webkit-appearance': 'none'
+                        }) || this.i.css({
+                            'width': '0px',
+                            'visibility': 'hidden'
                         });
         };
 
@@ -735,6 +744,7 @@
           this.o.cursor
               && (sa = ea - this.cursorExt)
               && (ea = ea + this.cursorExt);
+
           return {
               s: sa,
               e: ea,
@@ -743,30 +753,33 @@
         };
 
         this.draw = function () {
-
             var c = this.g,                 // context
-                a = this.arc(this.cv)       // Arc
-                , pa                        // Previous arc
-                , r = 1;
+                a = this.arc(this.cv),      // Arc
+                pa,                         // Previous arc
+                r = 1;
 
             c.lineWidth = this.lineWidth;
             c.lineCap = this.lineCap;
-            c.strokeStyle = this.o.bgColor;
-            c.arc(this.xy, this.xy, this.radius, this.endAngle - 0.00001, this.startAngle + 0.00001, true);
-            c.stroke();
+
+            if (this.o.bgColor !== "none") {
+                c.beginPath();
+                    c.strokeStyle = this.o.bgColor;
+                    c.arc(this.xy, this.xy, this.radius, this.endAngle - 0.00001, this.startAngle + 0.00001, true);
+                c.stroke();
+            }
 
             if (this.o.displayPrevious) {
                 pa = this.arc(this.v);
                 c.beginPath();
-                    c.strokeStyle = this.pColor;
-                    c.arc(this.xy, this.xy, this.radius, pa.s, pa.e, pa.d);
+                c.strokeStyle = this.pColor;
+                c.arc(this.xy, this.xy, this.radius, pa.s, pa.e, pa.d);
                 c.stroke();
-                r = (this.cv == this.v);
+                r = this.cv == this.v;
             }
 
             c.beginPath();
-                c.strokeStyle = r ? this.o.fgColor : this.fgColor ;
-                c.arc(this.xy, this.xy, this.radius, a.s, a.e, a.d);
+            c.strokeStyle = r ? this.o.fgColor : this.fgColor ;
+            c.arc(this.xy, this.xy, this.radius, a.s, a.e, a.d);
             c.stroke();
         };
 
@@ -786,4 +799,4 @@
         ).parent();
     };
 
-})(jQuery);
\ No newline at end of file
+}));