PanelsUI Tabs
February 20th, 2007, posted by FofR

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',)

Download Panel Tabs.pui Example

11 Responses to “PanelsUI Tabs”

  1. shakey_snake Says:

    don’t forget the ever important $setpvar(varName,value) !

  2. D.J.Yeh Says:

    After an hour of trial and error I finally realised that I need to put $setpvar(display.mode,0) under // PerSecond

  3. FofR Says:

    I have added a download link to an example .pui file. This works out of the box on my foobar2000. You must have the latest PanelsUI or $eval will not work correctly.

  4. Stefan Says:

    i’ve download your .pui file.. it works fine.. but i can’t see the text buttons.. i’ve already figured out where they should be and i can switch the tabs but the text doesn’t show up..

  5. wraithdu Says:

    It seems that if you have sections (// PerTrack, etc.) defined that the $select() function must be in a // PerTrack section. This includes the closing ‘)’. I’m not sure about the ‘,’ that break up the $select() since I haven’t got that far yet in my alternate layout. I will know soon though.

    I think this is because the // sections carry through any code divisions. IE a // Background section inside the $select() code will still be in effect outside the $select() until it’s changed.

  6. wraithdu Says:

    EDIT: Yep, the dividing ‘,’ must also be in a PerTrack section. Also be careful where you use // Background as some things won’t show up as the $select() is evaluated.

  7. Yotsuya Says:

    Here’s a bit of code I whipped up for someone the other day I thought you might find helpful. A single button that will flip through all the different panels (adjusted to fit your example):
    $button2(0,160,0,0,140,14,Mode,MODE,PVAR:SET:display.mode:
    $ifgreater($getpvar(display.mode),1,0,$add($getpvar(display.mode),1))
    ,)

    (it’s rather awkward posting lengthy code in this blog)

  8. FofR Says:

    RE: Code. I shall try an get a code tag added when I get some time.

    RE: Buttons not showing up – I have not defined a colour for the button text, your text may conflict with your background and appear invisible. Do they still work when you click them? Try adding a colour, changing the font and the positioning.

  9. D.J.Yeh Says:

    Three things:
    1.My previous reply was wrong. The $setpvar should be under // Background. If under Global or PerTrack the buttom won’t reply to your click, and under PerSecond it will automatically return to your first panel settings everytime you do some actions(play a new track, add something to playlist…etc).
    2.I noticed that if a button’s width isn’t enough for the text, the text won’t show up. This happens especially when you use %_width% to define the button’s width.
    3.I’m wondering if I can just define the pvar from 1 instead of 0: That way I don’t need $select($add($getpvar(…),1), I can just $select($getpvar(…),

  10. otter Says:

    How do I use the .pui file?

  11. nbanyan Says:

    Has anyone considered creating a UI designer to create pui files visually? It would streamline UI creation for those of us who don’t have the time to learn the code.