Archive for the 'PanelsUI' Category
February 21st, 2007
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(%playback_time_seconds%,50,%length_seconds%)
$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“:
$puts(progress,$muldiv(%playback_time_seconds%,50,%length_seconds%))
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:
// PROGRESS BAR
$drawrect(9,9,52,7,brushcolor-null pencolor-101-101-101)
$puts(progress,$muldiv(%playback_time_seconds%,$sub($get(imgw),20),%length_seconds%))
$ifgreater($get(progress),0,
$drawrect(10,10,$get(progress),5,brushcolor-200-200-200 pencolor-null)
,)
February 20th, 2007
PanelsUI has a number of fascinating uses. To get the ball rolling, the first Fooblog2000 tip shall explain how to make tabs in this component. An understanding of the trackinfo mod (now renamed Track Display) syntax and functions is helpful. This tip makes use of Three functions; $select which runs different code based on the stored value of a particular PVAR (or persisting variable); $panel which is new to PanelsUI and shows a panel, toolbar, visualisation or playlist in the desired configuration; and thirdly, $button2 which creates a button using text.
$select($add($getpvar(display.mode),1),
run this code when display.mode = 0
,
run this code when display.mode = 1
,
run this code when display.mode = 2
)
display.mode is the persisting variable, a value of 1 is added to its value to give correct $select operation. To change this PVAR a button such as the one below can be used:
$button2(0,160,0,0,140,14,'$font(Calibri,9,,155-155-155)Mode 1','$font(Calibri,9,underline,155-155-155)Mode 1,'PVAR:SET:display.mode:1',)'
This code creates a text button of size 140×14 pixels, 160 pixels down the page. The text is size 9, Calibri font and colour 155-155-155. When moused over the text becomes underlined. Clicking this button changes the value of display.mode from 0 to 1. Thus selecting and running a different set of code. If this code changes the panel that is shown then a tab system has been created – for example, showing a track display panel:
$panel(Option1,Track Display,0,20,%_width%,140,)
With name “Option1″ and panel determined by the second term “Track Display”, this code will show a panel the width of the screen of height 140, starting 20 pixels down the screen. Changing the second term to “Album list” for example will instead show the traditional album list panel.
A complete code would look a little like this:
$select($add($getpvar(display.mode),1),
$panel(Option1,Track Display,0,20,%_width%,140,)
,
$panel(Option2,Album list,0,20,%_width%,140,)
,
$panel(Option3,Console,0,20,%_width%,140,)
)
$button2(0,160,0,0,140,14,$font(Calibri,9,,155-155-155)Mode0,$font(Calibri,9,underline,155-155-155)Mode0,'PVAR:SET:display.mode:0',)
$button2(14,160,0,0,140,14,$font(Calibri,9,,155-155-155)Mode1,$font(Calibri,9,underline,155-155-155)Mode1,'PVAR:SET:display.mode:1',)
$button2(28,160,0,0,140,14,$font(Calibri,9,,155-155-155)Mode2,$font(Calibri,9,underline,155-155-155)Mode2,'PVAR:SET:display.mode:2',)