Permalink
Browse files

Add scale factor for the ring

+ Scale factor feature added to 360player.js
+ User can set threeSixtyPlayer.config.scaleArcWidth to a value between
0 (hide) and 100 (regular until now)
+ Ring thickness slider added to Customize view

Hope Scott approves!
  • Loading branch information...
tomasdev committed Apr 27, 2012
1 parent ba28eea commit dbc6c46e4904e204add961c7f9fb127d66447242
@@ -180,6 +180,14 @@ <h1><a href="http://www.schillmania.com/projects/soundmanager2/" title="Javascri
<div class="slider" title="Amount to downsample EQ data by"></div>
</dd>
<dt>Ring Thickness</dt>
<dd class="title">(Scale)</dd>
<dd>1-100</dd>
<dd class="control">
<div class="bar" title="Click to move here"></div>
<div class="slider" title="Scale factor for the ring width"></div>
</dd>
</dl>
<div id="options" class="col">
@@ -216,6 +216,8 @@ function Controller(o) {
threeSixtyPlayer.config.eqDataLineRatio = parseInt((self.controls[3].value/100)*3*1000)/1000;
threeSixtyPlayer.config.eqDataDownsample = (self.controls[4].value);
threeSixtyPlayer.config.scaleArcWidth = (self.controls[5].value);
threeSixtyPlayer.config.useEQData = (document.getElementById('disabled-1').checked?true:false);
@@ -102,6 +102,8 @@ function ThreeSixtyPlayer() {
fontSizeMax: null, // set according to CSS
scaleArcWidth: 1, // thickness factor
useFavIcon: false // Experimental (also requires usePeakData: true).. Try to draw a "VU Meter" in the favicon area, if browser supports it (Firefox + Opera as of 2009)
};
@@ -809,6 +811,7 @@ function ThreeSixtyPlayer() {
this.updatePlaying = function() {
var timeNow = (this._360data.showHMSTime?self.getTime(this.position,true):parseInt(this.position/1000, 10));
var ringScaleFactor = self.config.scaleArcWidth / 100;
if (this.bytesLoaded) {
this._360data.lastValues.bytesLoaded = this.bytesLoaded;
@@ -823,13 +826,15 @@ function ThreeSixtyPlayer() {
this._360data.lastValues.durationEstimate = this.durationEstimate;
}
self.drawSolidArc(this._360data.oCanvas,self.config.backgroundRingColor,this._360data.width,this._360data.radius,self.deg2rad(fullCircle),false);
// background ring
self.drawSolidArc(this._360data.oCanvas,self.config.backgroundRingColor,this._360data.width,this._360data.radius * ringScaleFactor,self.deg2rad(fullCircle),false);
self.drawSolidArc(this._360data.oCanvas,(this._360data.metadata?self.config.loadRingColorMetadata:self.config.loadRingColor),this._360data.width,this._360data.radius,self.deg2rad(fullCircle*(this._360data.lastValues.bytesLoaded/this._360data.lastValues.bytesTotal)),0,true);
// loaded ring
self.drawSolidArc(this._360data.oCanvas,(this._360data.metadata?self.config.loadRingColorMetadata:self.config.loadRingColor),this._360data.width,this._360data.radius * ringScaleFactor,self.deg2rad(fullCircle*(this._360data.lastValues.bytesLoaded/this._360data.lastValues.bytesTotal)),0,true);
// don't draw if 0 (full black circle in Opera)
if (this._360data.lastValues.position !== 0) {
self.drawSolidArc(this._360data.oCanvas,(this._360data.metadata?self.config.playRingColorMetadata:self.config.playRingColor),this._360data.width,this._360data.radius,self.deg2rad((this._360data.didFinish===1?fullCircle:fullCircle*(this._360data.lastValues.position/this._360data.lastValues.durationEstimate))),0,true);
self.drawSolidArc(this._360data.oCanvas,(this._360data.metadata?self.config.playRingColorMetadata:self.config.playRingColor),this._360data.width,this._360data.radius * ringScaleFactor,self.deg2rad((this._360data.didFinish===1?fullCircle:fullCircle*(this._360data.lastValues.position/this._360data.lastValues.durationEstimate))),0,true);
}
// metadata goes here

0 comments on commit dbc6c46

Please sign in to comment.