Merge pull request #88 from Mikhus/v.2.1.0

V.2.1.0
Mikhus · Dec 2, 2016 · 95db7a0 · 95db7a0
2 parents 797b628 + 87e2d76
commit 95db7a0
Show file tree

Hide file tree

Showing 39 changed files with 1,749 additions and 133 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,4 @@ dist/
 .vscode
 complexity/
 *es6.js
+test/cjs/bundle.js
diff --git a/.travis.yml b/.travis.yml
@@ -1,9 +1,12 @@
-sudo: required  
+sudo: required
 dist: trusty
 language: node_js
 node_js:
+  - "7"
   - "6"
 before_install:
+  - source /opt/jdk_switcher/jdk_switcher.sh
+  - jdk_switcher use oraclejdk8
   - export CHROME_BIN=/usr/bin/google-chrome
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# HTML Canvas Gauges v2.0
+# HTML Canvas Gauges v2.1
 
 [![Build Status](https://travis-ci.org/Mikhus/canvas-gauges.svg?branch=master)](https://travis-ci.org/Mikhus/canvas-gauges) ![Test Coverage](https://rawgit.com/Mikhus/canvas-gauges/master/test-coverage.svg) ![Documentation Coverage](https://rawgit.com/Mikhus/canvas-gauges/master/docs-coverage.svg) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://rawgit.com/Mikhus/canvas-gauges/master/LICENSE)
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "canvas-gauges",
-    "version": "2.0.9",
+    "version": "2.1.0",
     "homepage": "https://github.com/Mikhus/canvas-gauges",
     "authors": [
         "Mykhailo Stadnyk <[email protected]>"

diff --git a/docs-coverage.svg b/docs-coverage.svg
diff --git a/examples/async.html b/examples/async.html
@@ -1,4 +1,4 @@
-<!doctype htm>
+<!doctype html>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@@ -68,8 +68,8 @@
 function initScriptedGauges() {
     new RadialGauge({
         renderTo: 'another-gauge',
-        width: 400,
-        height: 400,
+        width: 800,
+        height: 800,
         units: 'Km/h',
         title: false,
         value: 0,

diff --git a/examples/events.html b/examples/events.html
@@ -0,0 +1,147 @@
+<!doctype html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Gauge Test</title>
+    <script src="../gauge.min.js"></script>
+    <style>body {
+        padding: 0;
+        margin: 0;
+        background: #fff
+    }</style>
+</head>
+<body>
+
+<button onclick="animateGauges()">Animate</button>
+<button onclick="stopGaugesAnimation()">Stop animation</button>
+
+<hr>
+
+<canvas data-type="radial-gauge"
+        data-min-value="0"
+        data-max-value="360"
+        data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
+        data-minor-ticks="22"
+        data-ticks-angle="360"
+        data-start-angle="180"
+        data-stroke-ticks="false"
+        data-highlights="false"
+        data-color-plate="#222"
+        data-color-major-ticks="#f5f5f5"
+        data-color-minor-ticks="#ddd"
+        data-color-numbers="#ccc"
+        data-color-needle="rgba(240, 128, 128, 1)"
+        data-color-needle-end="rgba(255, 160, 122, .9)"
+        data-value-box="false"
+        data-value-text-shadow="false"
+        data-color-circle-inner="#fff"
+        data-color-needle-circle-outer="#ccc"
+        data-needle-circle-size="15"
+        data-needle-circle-outer="false"
+        data-needle-type="line"
+        data-needle-start="75"
+        data-needle-end="99"
+        data-needle-width="3"
+        data-borders="true"
+        data-border-inner-width="0"
+        data-border-middle-width="0"
+        data-border-outer-width="10"
+        data-color-border-outer="#ccc"
+        data-color-border-outer-end="#ccc"
+        data-color-needle-shadow-down="#222"
+        data-animation-target="plate"
+        data-animation-duration="1500"
+        data-animation-rule="linear"
+        data-width="500"
+        data-height="500"
+        data-units="ᵍ"
+        data-value="0"
+></canvas>
+
+<canvas data-type="linear-gauge"
+        data-width="160"
+        data-height="600"
+        data-border-radius="0"
+        data-borders="0"
+        data-bar-begin-circle="false"
+        data-title="Temperature"
+        data-units="°C"
+        data-minor-ticks="10"
+        data-value="99"
+        data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
+        data-tick-side="right"
+        data-number-side="right"
+        data-needle-side="right"
+        data-animation-rule="bounce"
+        data-animation-duration="750"
+        data-bar-stroke-width="5"
+        data-value-box-border-radius="0"
+        data-value-text-shadow="false"
+        data-color-plate="#eee"
+></canvas>
+
+<script>
+function domReady(handler) {
+    if (/comp|inter|loaded/.test((window.document || {}).readyState + ''))
+        return handler();
+
+    if (window.addEventListener)
+        window.addEventListener('DOMContentLoaded', handler, false);
+
+    else if (window.attachEvent)
+        window.attachEvent('onload', handler);
+}
+
+if (!Array.prototype.forEach) {
+    Array.prototype.forEach = function(cb) {
+        var i = 0, s = this.length;
+        for (; i < s; i++) {
+            cb && cb(this[i], i, this);
+        }
+    }
+}
+
+document.fonts && document.fonts.forEach(function(font) {
+    font.loaded.then(function() {
+        if (font.family.match(/Led/)) {
+            document.gauges.forEach(function(gauge) {
+                gauge.update();
+            });
+        }
+    });
+});
+
+var timers = [];
+
+function animateGauges() {
+    document.gauges.forEach(function(gauge) {
+        timers.push(setInterval(function() {
+            gauge.value = Math.random() *
+                (gauge.options.maxValue - gauge.options.minValue) / 4 +
+                gauge.options.minValue / 4;
+        }, gauge.animation.duration + 50));
+    });
+}
+
+function stopGaugesAnimation() {
+    timers.forEach(function(timer) {
+        clearInterval(timer);
+    });
+}
+
+domReady(function() {
+    document.gauges.forEach(function(gauge) {
+        var type = gauge.canvas.element.getAttribute('data-type');
+
+        gauge.on('beforeNeedle', function() {
+            console.log(type + ': drawing needle!');
+        });
+
+        gauge.on('beforePlate', function() {
+            console.log(type + ': drawing plate!');
+        });
+    });
+});
+</script>
+
+</html>
diff --git a/examples/issue-63.html b/examples/issue-63.html
@@ -1,11 +1,11 @@
-<!doctype htm>
+<!doctype html>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>Gauge Test</title>
     <script src="../gauge.min.js"></script>
     <style>body {
-        padding: 0;
+        padding: 20px;
         margin: 0;
         background: #fff
     }</style>
@@ -15,6 +15,9 @@
 <a href="#" onclick="gaugePS.value=570">570</a>
 <a href="#" onclick="gaugePS.value=583">583</a>
 <a href="#" onclick="gaugePS.value=830">830</a>
+
+<hr>
+
 <canvas id="gauge-ps"></canvas>
 
 <script>

diff --git a/examples/linear-component.html b/examples/linear-component.html
@@ -31,6 +31,7 @@
         data-needle-side="left"
         data-animate-on-init="true"
         data-color-plate="transparent"
+        data-font-value-size="45"
 ></canvas>
 
 <canvas data-type="linear-gauge"

diff --git a/examples/linear-min-non-zero.html b/examples/linear-min-non-zero.html
@@ -0,0 +1,141 @@
+<!doctype html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Gauge Test</title>
+    <script src="../gauge.min.js"></script>
+</head>
+<body style="background:#222">
+
+<button onclick="animateGauges()">Animate</button>
+<button onclick="stopGaugesAnimation()">Stop animation</button>
+
+<hr>
+
+<canvas data-type="linear-gauge"
+        data-width="160"
+        data-height="600"
+        data-border-radius="20"
+        data-borders="0"
+        data-bar-begin-circle="false"
+        data-title="Temperature"
+        data-units="°C"
+        data-minor-ticks="10"
+        data-value="99"
+        data-min-value="10"
+        data-max-value="30"
+        data-major-ticks="10, 20, 30"
+        data-highlights='[
+            {"from": 10, "to":20, "color": "blue"},
+            {"from": 20, "to": 30, "color": "red"}
+        ]'
+        data-tick-side="right"
+        data-number-side="right"
+        data-needle-side="right"
+        data-animation-rule="bounce"
+        data-animation-duration="750"
+        data-bar-stroke-width="5"
+        data-value-box-border-radius="0"
+        data-value-text-shadow="false"
+></canvas>
+
+<canvas data-type="linear-gauge"
+        data-width="160"
+        data-height="600"
+        data-border-radius="20"
+        data-borders="0"
+        data-bar-begin-circle="false"
+        data-title="Temperature"
+        data-units="°C"
+        data-minor-ticks="10"
+        data-value="99"
+        data-min-value="-30"
+        data-max-value="30"
+        data-major-ticks="-30, -20, -10, 0, 10, 20, 30"
+        data-highlights='[
+            {"from":-30, "to":0, "color": "blue"},
+            {"from": 0, "to": 30, "color": "red"}
+        ]'
+        data-tick-side="right"
+        data-number-side="right"
+        data-needle-side="right"
+        data-animation-rule="bounce"
+        data-animation-duration="750"
+        data-bar-stroke-width="5"
+        data-value-box-border-radius="0"
+        data-value-text-shadow="false"
+></canvas>
+
+<br>
+
+<canvas data-type="linear-gauge"
+        data-width="600"
+        data-height="160"
+        data-border-radius="0"
+        data-borders="0"
+        data-bar-begin-circle="false"
+        data-title="Temperature"
+        data-units="°C"
+        data-value="25.5"
+        data-bar-stroke-width="5"
+        data-min-value="-30"
+        data-max-value="30"
+        data-major-ticks="-30, -20, -10, 0, 10, 20, 30"
+        data-highlights='[
+            {"from":-30, "to":0, "color": "blue"},
+            {"from": 0, "to": 30, "color": "red"}
+        ]'
+></canvas>
+
+<br>
+
+<canvas data-type="linear-gauge"
+        data-width="600"
+        data-height="160"
+        data-border-radius="0"
+        data-borders="0"
+        data-bar-begin-circle="false"
+        data-title="Temperature"
+        data-units="°C"
+        data-value="25.5"
+        data-bar-stroke-width="5"
+        data-min-value="10"
+        data-max-value="30"
+        data-major-ticks="10, 20, 30"
+        data-highlights='[
+            {"from": 10, "to":20, "color": "blue"},
+            {"from": 20, "to": 30, "color": "red"}
+        ]'
+></canvas>
+
+<script>
+if (!Array.prototype.forEach) {
+    Array.prototype.forEach = function(cb) {
+        var i = 0, s = this.length;
+        for (; i < s; i++) {
+            cb && cb(this[i], i, this);
+        }
+    }
+}
+
+var timers = [];
+
+function animateGauges() {
+    document.gauges.forEach(function(gauge) {
+        timers.push(setInterval(function() {
+            gauge.value = Math.random() *
+                (gauge.options.maxValue - gauge.options.minValue) +
+                gauge.options.minValue;
+        }, gauge.animation.duration + 500));
+    });
+}
+
+function stopGaugesAnimation() {
+    timers.forEach(function(timer) {
+        clearInterval(timer);
+    });
+}
+</script>
+
+</body>
+</html>