Skip to content

fadeOutSpeed option added #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
benkeen wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fadeOutSpeed option added #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5edf086
Added fadeOutSpeed option; added slower speed option for GUI
benkeen Dec 28, 2012
1acdb1d
Added pauseColor, pauseOpacity settings; tweaked GUI to space things …
benkeen Dec 29, 2012
6be03d6
Bug fix: missed trailing comma in generated GUI JS
benkeen Dec 29, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions gui/css/gui.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -113,28 +113,27 @@ input {
cursor: default;
}


#gui .modify {
float: right;
width: 480px;
width: 450px;
margin-bottom: 18px;
}

#gui .option {
float: left;
clear: both;
width: 100%;
margin-bottom: 10px;
margin-bottom: 3px;
line-height: 20px;
}
#gui .option label {
float: left;
width: 80px;
width: 100px;
}
#gui .option .slider {
float: left;
position: relative;
width: 300px;
width: 260px;
margin-top: 4px;
}
#gui .option input.value {
Expand Down
29 changes: 25 additions & 4 deletions gui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ <h1 id='title'>Spinners</h1>
</div>
</div>


<form class='modify'>
<div class='option'>
<label>radius</label>
Expand Down Expand Up @@ -87,14 +87,32 @@ <h1 id='title'>Spinners</h1>

<div class='option'>
<label>rotation</label>
<div class='slider'data-slider-min='100' data-slider-max='2500' data-slider-step='50'><!-- [] --></div>
<input type='text' class='value' name='rotation' value='700'/>
<div class='slider' data-slider-min='100' data-slider-max='3000' data-slider-step='50'><!-- [] --></div>
<input type='text' class='value' name='rotation' value='1400'/>
</div>

<div class='option'>
<label>fadeOutSpeed</label>
<div class='slider' data-slider-min='-8' data-slider-max='8' data-slider-step='1'><!-- [] --></div>
<input type='text' class='value' name='fadeOutSpeed' value='0'/>
</div>

<div class='option option-color'>
<label>color</label>
<input type='text' name='color' value='#000000' size='7'/>
</div>

<div class='option option-color'>
<label>pauseColor</label>
<input type='text' name='pauseColor' value='#000000' size='7'/>
</div>

<div class='option'>
<label>pauseOpacity</label>
<div class='slider' data-slider-min='0' data-slider-max='1' data-slider-step='.01'><!-- [] --></div>
<input type='text' class='value' name='pauseOpacity' value='0.40'/>
</div>

</form>

<div class='code'>
Expand All @@ -107,7 +125,10 @@ <h1 id='title'>Spinners</h1>
opacity: #{opacity},
padding: #{padding},
rotation: #{rotation},
color: '#{color}'
fadeOutSpeed: #{fadeOutSpeed},
color: '#{color}',
pauseColor: '#{pauseColor}',
pauseOpacity: #{pauseOpacity}
}).play();

spinner.center();</code></pre>
Expand Down
7 changes: 4 additions & 3 deletions gui/js/gui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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());
}

Expand All @@ -80,7 +80,7 @@ $(document).ready(function() {

$(this).addClass('disabled').siblings().removeClass('disabled');
});
})
});

// collect the options
function getOptions() {
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down
34 changes: 26 additions & 8 deletions js/spinners/spinners.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,11 @@ var _ = {
}
};

function getOpacityArray(dashes) {
var step = 1 / dashes, array = [];
for (var i = 0;i<dashes;i++)
array.push((i + 1) * step);
function getOpacityArray(dashes, fadeOutSpeed) {
var step = 1 / dashes, array = [];
for (var i = 0; i<dashes;i++) {
array.push((i + fadeOutSpeed) * step);
}
return array;
}

Expand Down Expand Up @@ -378,13 +379,17 @@ function Spinner(element) {
width: 1.8,
opacity: 1,
padding: 3,
fadeOutSpeed: 0,
pauseColor: '#000',
pauseOpacity: 0.3,
rotation: 700
}, arguments[1] || {}));

this.drawPosition(0);

All.add(this);
}

$.extend(Spinner.prototype, {
setOptions: function(options) {
this.options = $.extend({}, this.options, options || {});
Expand Down Expand Up @@ -427,6 +432,7 @@ $.extend(Spinner.prototype, {
}

if (this._centered) this.center();
if (this._state == "paused") this._renderPause();
},

remove: function() {
Expand Down Expand Up @@ -465,7 +471,6 @@ $.extend(Spinner.prototype, {
return this;
},


/*
* Draw
*/
Expand Down Expand Up @@ -514,7 +519,6 @@ $.extend(Spinner.prototype, {
this.drawPosition(this._position);
},


/*
* Controls
*/
Expand All @@ -530,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;
},
Expand Down Expand Up @@ -585,7 +590,7 @@ $.extend(Spinner.prototype, {
var layout = {
workspace: {
radius: radius,
opacities: getOpacityArray(dashes)
opacities: getOpacityArray(dashes, this.options.fadeOutSpeed)
},
dash: {
position: {
Expand Down Expand Up @@ -624,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);
}
}
});

Expand Down