How to make a Progress Bar
February 21st, 2007, posted by FofR

The standard seek bar is all well and good but it doesn’t integrate well with Track Display and SCPL. A new approach is to use PanelsUI, the $drawrect function and a few of foobar’s standard functions. $drawrect was introduced in the original track info mod panel by Terrestrial and it uses a format like so:

$drawrect(X,Y,W,H,brushColor-R-G-B penColor-R-G-B OPTIONS)
$drawrect(10,10,50,5,brushcolor-200-200-200 pencolor-null)

X and Y determine the position of the bar, W and H determine the width and height, the brush colour is the fill colour of the box, pen colour is the border. Options can include alpha, border width and blurriness. From this basis a rectangle can be built that has a size dependent on a changing value, for instance a track’s progress.

When a track is playing, its progress can be called up using the string %playback_time_seconds%, similarly its total length is given by %length_seconds%. To convert this value into one that is usable the percentage of the track played must be converted into a relative width. For instance if our progress bar is to be 50 pixels across, at 50% played the rectangle drawn must be 25 pixels. This can be done using the following:


$muldiv first multiplies %playback_time_seconds% by 50 (width of rectangle) then divides that value by %length_seconds%. So, to check, if the track is 60 seconds long and is 30 seconds (half way) through: 30×50 = 1500, 1500/60 = 25 pixels. Using $puts we can quietly store this value in a variable, let’s call it “progress“:


If this code is placed in a //PerSecond section of PanelsUI then it will change its value as often as we need it to. To draw this rectangle we use the $get function to include the variable:

$drawrect(10,10,$get(progress),7,brushcolor-200-200-200 pencolor-null)

Thus the complete code is as follows, the first rectangle is a border and an $ifgreater clause has been added so that no rectangle is drawn if no time has passed:

$drawrect(9,9,52,7,brushcolor-null pencolor-101-101-101)
$drawrect(10,10,$get(progress),5,brushcolor-200-200-200 pencolor-null)

Comments are closed.