custom drawings example update

MeetmeLeave · Jan 18, 2017 · d706eb1 · d706eb1
1 parent a0d1085
commit d706eb1
Showing 1 changed file with 88 additions and 85 deletions.
diff --git a/examples/custom-drawings.html b/examples/custom-drawings.html
@@ -10,6 +10,8 @@
 
 <button onclick="animateGauges()">Animate</button>
 <button onclick="stopGaugesAnimation()">Stop animation</button>
+<input type="text" id="gauge-size" value="400">
+<button onclick="resize()">Resize</button>
 
 <hr>
 
@@ -65,102 +67,103 @@
 ></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);
-            }
+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();
-                    gauge.options.renderTo.style.visibility = 'visible';
-                });
-            }
-        });
+}
+
+document.fonts && document.fonts.forEach(function(font) {
+    font.loaded.then(function() {
+        if (font.family.match(/Led/)) {
+            document.gauges.forEach(function(gauge) {
+                gauge.update();
+                gauge.options.renderTo.style.visibility = 'visible';
+            });
+        }
     });
+});
 
-    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 + 50));
-        });
-    }
-
-    function stopGaugesAnimation() {
-        timers.forEach(function(timer) {
-            clearInterval(timer);
-        });
-    }
+var timers = [];
 
-    function resize() {
-        var size = parseFloat(document.getElementById('gauge-size').value) || 400;
-
-        document.gauges.forEach(function (gauge) {
-            gauge.update({ width: size, height: size });
-        });
-    }
-
-    function setText() {
-        var text = document.getElementById('gauge-text').value;
-
-        document.gauges.forEach(function (gauge) {
-            gauge.update({ valueText: text });
-        });
-    }
-
-    window.onload = function() {
-        // refer gauge
-        var gauge = document.gauges[0];
-
-        // this will draw red or blue circle on a gauge plate depending on
-        // current value
-        gauge.on('beforeNeedle', function () {
-            // getting canvas 2d drawing context
-            var context = this.canvas.context;
-
-            // we can use gauge context special 'max' property which represents
-            // gauge radius in a real pixels and calculate size of relative pixel
-            // for our drawing needs
-            var pixel = context.max / 100;
-
-            // step out our circle center coordinate by 25% from gauge center
-            var centerX = 25 * pixel;
+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 + 50));
+    });
+}
 
-            // stay in center by Y-coordinate
-            var centerY = 0;
+function stopGaugesAnimation() {
+    timers.forEach(function(timer) {
+        clearInterval(timer);
+    });
+}
 
-            // use circle radius equal to 5%
-            var radius = 5 * pixel;
+function resize() {
+    var size = parseFloat(document.getElementById('gauge-size').value) || 400;
 
-            // save previous context state
-            context.save();
+    document.gauges.forEach(function (gauge) {
+        gauge.update({ width: size, height: size });
+    });
+}
 
-            // draw circle using canvas JS API
-            context.beginPath();
-            context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
-            context.fillStyle = this.options.value <= 0 ? '#00f' : '#f00';
-            context.fill();
-            context.closePath();
+function setText() {
+    var text = document.getElementById('gauge-text').value;
 
-            // restore previous context state to prevent break of
-            // further drawings
-            context.restore();
-        });
+    document.gauges.forEach(function (gauge) {
+        gauge.update({ valueText: text });
+    });
+}
+
+window.onload = function() {
+    // refer gauge
+    var gauge = document.gauges[0];
+
+    // this will draw red or blue circle on a gauge plate depending on
+    // current value
+    gauge.on('beforeNeedle', function () {
+        // getting canvas 2d drawing context
+        var context = this.canvas.context;
+
+        // we can use gauge context special 'max' property which represents
+        // gauge radius in a real pixels and calculate size of relative pixel
+        // for our drawing needs
+        var pixel = context.max / 100;
+
+        // step out our circle center coordinate by 30% of its radius from
+        // gauge center
+        var centerX = 30 * pixel;
+
+        // stay in center by Y-coordinate
+        var centerY = 0;
+
+        // use circle radius equal to 5%
+        var radius = 5 * pixel;
+
+        // save previous context state
+        context.save();
+
+        // draw circle using canvas JS API
+        context.beginPath();
+        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
+        context.fillStyle = this.options.value <= 0 ? '#00f' : '#f00';
+        context.fill();
+        context.closePath();
+
+        // restore previous context state to prevent break of
+        // further drawings
+        context.restore();
+    });
 
-        // redraw the gauge if it has been already drawn
-        gauge.draw();
-    }
+    // redraw the gauge if it has been already drawn
+    gauge.draw();
+}
 </script>
 </body>
 </html>