From 5edf0861bc9795ec00e88130d512286106533bb3 Mon Sep 17 00:00:00 2001 From: Ben Keen Date: Thu, 27 Dec 2012 22:06:59 -0800 Subject: [PATCH 1/3] Added fadeOutSpeed option; added slower speed option for GUI --- gui/css/gui.css | 4 ++-- gui/index.html | 9 ++++++++- gui/js/gui.js | 2 +- js/spinners/spinners.js | 12 +++++++----- 4 files changed, 18 insertions(+), 9 deletions(-) diff --git a/gui/css/gui.css b/gui/css/gui.css index 1543816..bbd95aa 100644 --- a/gui/css/gui.css +++ b/gui/css/gui.css @@ -129,12 +129,12 @@ input { } #gui .option label { float: left; - width: 80px; + width: 90px; } #gui .option .slider { float: left; position: relative; - width: 300px; + width: 290px; margin-top: 4px; } #gui .option input.value { diff --git a/gui/index.html b/gui/index.html index d44c3e3..dc62ff9 100644 --- a/gui/index.html +++ b/gui/index.html @@ -87,9 +87,15 @@

Spinners

-
+
+ +
+ +
+ +
@@ -107,6 +113,7 @@

Spinners

opacity: #{opacity}, padding: #{padding}, rotation: #{rotation}, + fadeOutSpeed: #{fadeOutSpeed}, color: '#{color}' }).play(); diff --git a/gui/js/gui.js b/gui/js/gui.js index 72cf9e3..d482b83 100644 --- a/gui/js/gui.js +++ b/gui/js/gui.js @@ -80,7 +80,7 @@ $(document).ready(function() { $(this).addClass('disabled').siblings().removeClass('disabled'); }); - }) + }); // collect the options function getOptions() { diff --git a/js/spinners/spinners.js b/js/spinners/spinners.js index 4825bf2..0801448 100644 --- a/js/spinners/spinners.js +++ b/js/spinners/spinners.js @@ -55,10 +55,11 @@ var _ = { } }; -function getOpacityArray(dashes) { - var step = 1 / dashes, array = []; - for (var i = 0;i Date: Fri, 28 Dec 2012 18:49:42 -0800 Subject: [PATCH 2/3] Added pauseColor, pauseOpacity settings; tweaked GUI to space things out a little better --- gui/css/gui.css | 13 ++++++------- gui/index.html | 18 ++++++++++++++++-- gui/js/gui.js | 5 +++-- js/spinners/spinners.js | 22 +++++++++++++++++++--- 4 files changed, 44 insertions(+), 14 deletions(-) diff --git a/gui/css/gui.css b/gui/css/gui.css index bbd95aa..af67178 100644 --- a/gui/css/gui.css +++ b/gui/css/gui.css @@ -61,8 +61,8 @@ input { } #gui .result .frame { float: left; - width: 200px; - height: 200px; + width: 230px; + height: 230px; position: relative; border: 1px solid #e0e0e0; border-top-color: #dcdcdc; @@ -113,10 +113,9 @@ input { cursor: default; } - #gui .modify { float: right; - width: 480px; + width: 450px; margin-bottom: 18px; } @@ -124,17 +123,17 @@ input { float: left; clear: both; width: 100%; - margin-bottom: 10px; + margin-bottom: 3px; line-height: 20px; } #gui .option label { float: left; - width: 90px; + width: 100px; } #gui .option .slider { float: left; position: relative; - width: 290px; + width: 260px; margin-top: 4px; } #gui .option input.value { diff --git a/gui/index.html b/gui/index.html index dc62ff9..80af17e 100644 --- a/gui/index.html +++ b/gui/index.html @@ -47,7 +47,7 @@

Spinners

- +
@@ -88,7 +88,7 @@

Spinners

- +
@@ -101,6 +101,18 @@

Spinners

+ +
+ + +
+ +
+ +
+ +
+
@@ -115,6 +127,8 @@

Spinners

rotation: #{rotation}, fadeOutSpeed: #{fadeOutSpeed}, color: '#{color}' + pauseColor: '#{pauseColor}', + pauseOpacity: #{pauseOpacity} }).play(); spinner.center(); diff --git a/gui/js/gui.js b/gui/js/gui.js index d482b83..f7a1dcb 100644 --- a/gui/js/gui.js +++ b/gui/js/gui.js @@ -59,7 +59,7 @@ $(document).ready(function() { } // colors should start with # - if ($(this).attr('name') == 'color' && $(this).val().substr(0,1) != '#') { + if (($.inArray($(this).attr('name'), ['color','pauseColor']) != -1) && $(this).val().substr(0,1) != '#') { $(this).val('#' + $(this).val()); } @@ -93,6 +93,7 @@ $(document).ready(function() { // add color options.color = $("#gui input[name='color']").val(); + options.pauseColor = $("#gui input[name='pauseColor']").val(); return options; } @@ -126,7 +127,7 @@ $(document).ready(function() { $.each(ho.split('&'), function(i, pair) { var p = pair.split('='), name = p[0], value = p[1]; options[name] = value; - if (name != 'color') options[name] = parseFloat(options[name]); + if (name != 'color' && name != 'pauseColor') options[name] = parseFloat(options[name]); else if (options[name].substr(0,1) != '#') options[name] = '#' + options[name]; }); return options; diff --git a/js/spinners/spinners.js b/js/spinners/spinners.js index 0801448..6ed4019 100644 --- a/js/spinners/spinners.js +++ b/js/spinners/spinners.js @@ -380,6 +380,8 @@ function Spinner(element) { opacity: 1, padding: 3, fadeOutSpeed: 0, + pauseColor: '#000', + pauseOpacity: 0.3, rotation: 700 }, arguments[1] || {})); @@ -387,6 +389,7 @@ function Spinner(element) { All.add(this); } + $.extend(Spinner.prototype, { setOptions: function(options) { this.options = $.extend({}, this.options, options || {}); @@ -429,6 +432,7 @@ $.extend(Spinner.prototype, { } if (this._centered) this.center(); + if (this._state == "paused") this._renderPause(); }, remove: function() { @@ -467,7 +471,6 @@ $.extend(Spinner.prototype, { return this; }, - /* * Draw */ @@ -516,7 +519,6 @@ $.extend(Spinner.prototype, { this.drawPosition(this._position); }, - /* * Controls */ @@ -532,9 +534,10 @@ $.extend(Spinner.prototype, { pause: function() { if (this._state == 'paused') return; - this._pause(); + if (this._layout !== null) this._renderPause(); + this._state = 'paused'; return this; }, @@ -626,6 +629,19 @@ $.extend(Spinner.prototype, { }); this._centered = true; + }, + + _renderPause: function() { + var radius = this.getLayout().workspace.radius, + dashes = this.options.dashes, + rotation = radian(360 / dashes); + + this.ctx.clearRect(radius * -1, radius * -1, radius * 2, radius * 2); + + for (var i = 0, len = dashes; i < len; i++) { + this.drawDash(this.options.pauseOpacity, this.options.pauseColor); + this.ctx.rotate(rotation); + } } }); From 6be03d6c906db487b0afc09e64f413b126845077 Mon Sep 17 00:00:00 2001 From: Ben Keen Date: Sat, 29 Dec 2012 10:04:51 -0800 Subject: [PATCH 3/3] Bug fix: missed trailing comma in generated GUI JS --- gui/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gui/index.html b/gui/index.html index 80af17e..4052f38 100644 --- a/gui/index.html +++ b/gui/index.html @@ -126,7 +126,7 @@

Spinners

padding: #{padding}, rotation: #{rotation}, fadeOutSpeed: #{fadeOutSpeed}, - color: '#{color}' + color: '#{color}', pauseColor: '#{pauseColor}', pauseOpacity: #{pauseOpacity} }).play();