Progress Bar examples - VU meter

Progress bars can be quite dynamic and don't need to be alone. They certainly cannot replace the Chart utility but you can do some decent graphics with them, even animated ones.

Here we draw a set of several Progress Bars with direction set to move from bottom to top 'btt'. We are letting the YUI Animation utility to handle the movement for us. In order to produce a more realistic movement, instead of giving random values to each of the bars independently, we are using Animation's own Bezier function to calculate a Bezier curve based on four random points, then we take eight evenly spaced points from that curve to use as values for each bar.

To keep them moving, we are listening to the event that signals the end of the animation. We are listening to the completion of the last bar drawn which, presumably, would be the last to end. This is not particularly relevant. The movement of the bar can be interrupted at any time by setting a new value and the bar will immediately resume its movement towards the new setting.

The code for this example is:

var pbvu = [],i,NUM_BARS= 8; for (i = 0; i < NUM_BARS;i++) { // Creating the ProgressBar instance pbvu[i] = new YAHOO.widget.ProgressBar({ direction:'btt', width:20, height:80, anim:true // with animation }).render('vumeter'); // Setting the duration of the animation pbvu[i].get('anim').duration = 0.3; } // Method that recalculates the new end values for the bars // The animation utility will itself take care of the movement var redrawVUs = function() { var points = [],i; for (i=0;i<4;i++) { points[i] = [i,Math.random() * 100]; } for (i = 0;i < NUM_BARS;i++) { pbvu[i].set('value',YAHOO.util.Bezier.getPosition(points,i/(NUM_BARS-1))[1]); } }; // We redraw the bars when the last one completes pbvu[NUM_BARS -1].on('complete',redrawVUs); // and draw them a first time. redrawVUs();

The only relevant style setting is the background image of the bar itself, the others simply deal with piling them one after the other with suitable spacing and all enclosed within a common border. The border and the shaded background on each of the bars are part of the standard ProgressBar SAM skin.

#vumeter { padding:3px; margin:10px; border: medium ridge silver; } #vumeter .yui-pb { margin:3px; display:inline-block; } #vumeter .yui-pb-bar { background-image: url(vumeter.png); }