Hydrogenaudio Forums > Noob: Panels UI Scripting

DoubleD

May 16 2007, 07:48

I've just started just fb2k a couple weeks ago and have been discouraged a few times simply because there is no central documentation. I think I've spent more time browsing forums and reading random pages that are usually useless and unrelated to what I'm looking for.

I just finished a general layout using Columns UI and then discovered the capabilities of Panels UI. I'm really interested in learning the scripting end of things so I can eventually have a seamless interface.

Right now, I'm trying to figure out how to use Panels UI to look like the screenshot (below).

I'm pretty much at a loss right now. I've checked out these pages looking for anything that has a full reference to the scripting with no luck. Now I could also be overlooking a lot of things so bear with me. I'm a complete noob when it comes to foobar.

I've been going through the numerous components pages as well as Wiki's for everything I find as well I found these pages a little helpful but not to the extent of what I'm looking for.

http://www.fooblog2000.com/getting-started-with-foobar2000/

http://wiki.hydrogenaudio.org/index.php?ti..._panels)#Panels
This has been the best thing I can find for reference but my first issue is with adding panels. Hmm, seems I overlooked a few things and might've fixed it already.

Basically what I'm looking is something that will get me started in the scripting. I realize I could start looking at people's examples but everything I've looked at already is quite complex. I've been scouring the forums and wiki's for something a little more basic and haven't had much luck.

Any ideas would be appreciated, or there is something I'm overlooking, feel free to blast my logic. I'll be trying to figure this all out as I go along and I'll post any findings I come across to help out anyone else in my situation.

Thanks, Dan

Spirit_of_the_ocean

May 16 2007, 08:26

Okay I see your problem. I had the same problem. The thing which is quite important is that you should start trying what happens when you change something.

The second Link is really important.

CODE

$panel(ID,Name,x,y,width,height,options)

This is the most important code when you work with panel ui.
$panel tells the ui that you want a panel there
ID : you can name it like you want
Name: is the kind of panel you want for example Columns Playlist
For example in my code

CODE

$panel(Playlist,Columns Playlist,431,$get(yOffset),510,$sub(%_height%,$add($get(yOffset),22)),)

X and y is the "starting point" where Panel should be placed

For example 0,0 is left on top

I think you should understand what width and height mean. Both tell the ui how big the panel should be.
Often you have no options and you have to make a ",". This is important because in other case the panel won't appear.

You should lokk which panels were used and this is really easy to see.
So you need to add some panels. and then you can see what happens. When you have questions please post.
But I have no idea what your status is.
So please ask some more specific questions.

DoubleD

May 16 2007, 08:45

yup, I actually figured that all out after I posted that message. This is huge work in progress and the thing I'm looking for now is how to get the width of an existing panel.

This is the code I have right now:

CODE

//Layout
$panel(Playlist Tree Panel,Playlist Tree Panel,0,0,300,$eval(%_height%-300),)
$panel(Album Art,Album Art,0,$eval(%_height%-299),300,300,)
$panel(Browser Artist,Browser Panel,300,0,$eval(%_width%-300),$eval(%_height%/2.5),)

Now how do I get the X pos of the next Browser window? I want the layout to be very fluid so when you resize it doesn't make it ugly as hell.

Also, can you use percentages in the math?

EDIT:

I've got some programming experience so you don't need to stretch out the details. Hopefully save you a few keystrokes of explanations. I'm just completely unfamiliar with the syntax.

Spirit_of_the_ocean

May 16 2007, 09:09

QUOTE

$eval()

* Evaluate mathematical functions
* Operations are + - * / @ (modulus) and {} to replace parenthesis

So you must change the $eval(%_width%-300) to $eval({%_width%-300} /3) If you want resizable Browser panels so the next x must be $eval( 300 +{%_width%-300} /3) if I am right.

You can make * 20/100 to have for example 20 percentages

DoubleD

May 16 2007, 09:29

hmm.. looks like $eval will only handle whole numbers.

$eval(%_width% * {30 / 100}) RETURNS 0

as wells as

$eval(30 / 100)

shakey_snake

May 16 2007, 09:32

remove the spaces.

DoubleD

May 16 2007, 09:37

Still returns 0

CODE

$eval(30/100)

Spirit_of_the_ocean

May 16 2007, 09:43

CODE

$eval(30/100)

Yes because 30:100 is 0,3

For example I used $imageabs2($eval(529/3*2),$eval(488/3*2),0,0,$eval(529/3*2),$eval(488/3*2),20,143,'images\CD Case\casesv5.png',alpha-230nokeepaspect)

To shrink a CD Case picture to 2/3

$eval({%_width%/ 100}*30 ) this should work

shakey_snake

May 16 2007, 09:58

QUOTE(DoubleD @ May 16 2007, 11:37)

Still returns 0

CODE

$eval(30/100)

eval returns only integers. it can internally calculate with decimals.

DoubleD

May 16 2007, 11:05

Alright.. Well here's what I have so far. Nothing pretty yet but I'm close the general layout I want besides adding TrackDisplay under the Columns Playlist panel.

Screenshot:

Code:

CODE

//Globals
$setpvar(FirstColumn.width,320)

//Playlist Tree Panel
$setpvar(PlaylistTree.height,$eval(%_height% - 300))

//Album Art Panel
$setpvar(AlbumArt.width,320)
$setpvar(AlbumArt.height,300)
$setpvar(AlbumArt.Y, $getpvar(PlaylistTree.height))

//Browser Panels
$setpvar(Browser.width,$eval({%_width% - $getpvar(PlaylistTree.width)} / 3))
$setpvar(Browser.height,$eval(%_height% / 2))
$setpvar(Browser.Artist.X, $getpvar(PlaylistTree.width))
$setpvar(Browser.Album.X, $eval($getpvar(Browser.Artist.X) + $getpvar(Browser.width)))
$setpvar(Browser.Title.X, $eval($getpvar(Browser.Album.X) + $getpvar(Browser.width)))

//Columns Playlist Panel
$setpvar(ColumnsList.X, $getpvar(FirstColumn.width))
$setpvar(ColumnsList.Y, $getpvar(Browser.height))
$setpvar(ColumnsList.width, $eval(%_width% - $getpvar(FirstColumn.width)))
$setpvar(ColumnsList.height, $eval(%_height% - $getpvar(Browser.height) + 1))

//Layout
$panel(PlaylistTree,Playlist Tree Panel,0,0,$getpvar(FirstColumn.width),$eval(%_height%-300),)
$panel(AlbumArt,Album Art,0,$getpvar(AlbumArt.Y),$getpvar(AlbumArt.width),$getpvar(AlbumArt.height),)
$panel(Browser.Artist,Browser Panel,$getpvar(Browser.Artist.X),0,$getpvar(Browser.width),$getpvar(Browser.height),)
$panel(Browser.Album,Browser Panel,$getpvar(Browser.Album.X),0,$getpvar(Browser.width),$getpvar(Browser.height),)
$panel(Browser.Title,Browser Panel,$getpvar(Browser.Title.X),0,$getpvar(Browser.width),$getpvar(Browser.height),)
$panel(ColumnsList,Columns Playlist,$getpvar(ColumnsList.X),$getpvar(ColumnsList.Y),$getpvar(ColumnsList.width),$getpvar(ColumnsList.height),)

This is my first attempt at anything so any criticism or compliments are well accepted.

Notes:
- is it possible to completely get rid of the vertical scroll bar and just use the scroll wheel on the mouse?

Spirit_of_the_ocean

May 16 2007, 11:37

Opps I recognized that the posted Image in your first Post doesn't seen to be a Panel ui Layout because Playlist Tabs are used but in Panel ui you can't use playlist Tabs

DoubleD

May 16 2007, 11:41

Ya. I was reading on a post somewhere that you can set up tabs with panels ui. Can you create the same functionality as playlist tabs?

I've also noticed that the browser panels and playlist tree are pretty flashy when resizing. Is that caused by a huge library (10,000+)? Also the title browser panel will glitch out and I'll get a double scroll bar and the text gets a little garbled. Is there another approach to having the same functionality? I haven't really read up on the library filter of panels ui yet but kind of seems like I could get it to work like that.

EDIT:

the first post was solely columns ui

Spirit_of_the_ocean

May 16 2007, 16:49

I am using still a version 0.81 beta so i have no idea about library filter because in my version there wasn't a library filter.
Yes tabs are worling but to create them is complicated.

This is an example code for tabs. This should work with version 12 too I hope:

CODE

// Background
$setpvar(display.mode,0)
$setpvar(display.mode,1)
$setpvar(display.mode,2)

// PerTrack
// *** TABS ***
$select($eval($getpvar(display.mode)+1),

// *** NOW PLAYING ***
$panel(NowPlay,Track Display,0,0,%_width%,$eval(%_height%-20),)
,
// *** PLAYLIST ***
$panel(Playlist,Single Column Playlist,0,0,%_width%,$eval(%_height%-20),)
,
// *** EXPLORER BROWSE ***
$panel(Spectrum,Spectrum analyser,0,0,%_width%,$eval(%_height%-20),)
)

$button2(10,$eval(%_height%-15),0,0,50,20,'$font(Arial,10,,255-255-255)Button1','$font(Arial,10,underline,)Button1',PVAR:SET:display.mode:0,)
$button2(110,$eval(%_height%-15),0,0,50,20,'$font(Arial,10,,255-255-255)Button2','$font(Arial,10,underline,)Button2',PVAR:SET:display.mode:1,)
$button2(210,$eval(%_height%-15),0,0,50,20,'$font(Arial,10,,255-255-255)Button3','$font(Arial,10,underline,)Button3',PVAR:SET:display.mode:2,)

Kiteroa

May 16 2007, 20:07

QUOTE(DoubleD @ May 17 2007, 05:05)

Alright.. Well here's what I have so far. Nothing pretty yet but I'm close the general layout I want besides adding TrackDisplay under the Columns Playlist panel.

Screenshot:

Code:

CODE

//Globals
$setpvar(FirstColumn.width,320)

//Playlist Tree Panel
$setpvar(PlaylistTree.height,$eval(%_height% - 300))

//Album Art Panel
$setpvar(AlbumArt.width,320)
$setpvar(AlbumArt.height,300)
$setpvar(AlbumArt.Y, $getpvar(PlaylistTree.height))

//Browser Panels
$setpvar(Browser.width,$eval({%_width% - $getpvar(PlaylistTree.width)} / 3))
$setpvar(Browser.height,$eval(%_height% / 2))
$setpvar(Browser.Artist.X, $getpvar(PlaylistTree.width))
$setpvar(Browser.Album.X, $eval($getpvar(Browser.Artist.X) + $getpvar(Browser.width)))
$setpvar(Browser.Title.X, $eval($getpvar(Browser.Album.X) + $getpvar(Browser.width)))

//Columns Playlist Panel
$setpvar(ColumnsList.X, $getpvar(FirstColumn.width))
$setpvar(ColumnsList.Y, $getpvar(Browser.height))
$setpvar(ColumnsList.width, $eval(%_width% - $getpvar(FirstColumn.width)))
$setpvar(ColumnsList.height, $eval(%_height% - $getpvar(Browser.height) + 1))

//Layout
$panel(PlaylistTree,Playlist Tree Panel,0,0,$getpvar(FirstColumn.width),$eval(%_height%-300),)
$panel(AlbumArt,Album Art,0,$getpvar(AlbumArt.Y),$getpvar(AlbumArt.width),$getpvar(AlbumArt.height),)
$panel(Browser.Artist,Browser Panel,$getpvar(Browser.Artist.X),0,$getpvar(Browser.width),$getpvar(Browser.height),)
$panel(Browser.Album,Browser Panel,$getpvar(Browser.Album.X),0,$getpvar(Browser.width),$getpvar(Browser.height),)
$panel(Browser.Title,Browser Panel,$getpvar(Browser.Title.X),0,$getpvar(Browser.width),$getpvar(Browser.height),)
$panel(ColumnsList,Columns Playlist,$getpvar(ColumnsList.X),$getpvar(ColumnsList.Y),$getpvar(ColumnsList.width),$getpvar(ColumnsList.height),)

This is my first attempt at anything so any criticism or compliments are well accepted.

Notes:
- is it possible to completely get rid of the vertical scroll bar and just use the scroll wheel on the mouse?

I recall someone managed to get rid of scroll bars by setting the panel to a large size which did not need scroll bars then resizing the panel to the size they wanted (which should have had scroll bars). The scroll bars did not appear on the reduced panel!

rama kandra

May 16 2007, 20:52

I am in the same place as you doubleD, and I fiddled around with it until I got upset and decided columnsUI did the job fine, and havnt tried using panels yet, but if you do get proficient at it, please make a little guide for beginners so that even I could have a shot at creating a layout... cool that you are making progress though.

DoubleD

May 20 2007, 16:44

Well here's the Progress so far. It's starting to look a little nicer but I'm running into a few problems.

I guess they're not really problems.. Just learning curves, so far most of this has been easy and now I have to get into the formatting end of things. Anyone recommend a good tutorials for formatting?

Any ideas for this layout as well. I'm pretty much open to anything. i'm going to start designing some buttons probably tomorrow and maybe get them functioning so I can drop the ugly crap in the bottom of the window.

Here's the code for it all so if anybody wants to steal some bits. giv'r 90

CODE

//Globals
$setpvar(FirstColumn.width,320)
$setpvar(TopRow.height,$eval({%_height% / 2} - 90))

// ** Tabs **
$setpvar(display.mode,0)
$setpvar(display.mode,1)
$setpvar(display.mode,2)

// ** Playlist Tree Panel **
$setpvar(PlaylistTree.height,$eval(%_height% - 300))

// ** Album Art Panel **
$setpvar(AlbumArt.width,$getpvar(FirstColumn.width))
$setpvar(AlbumArt.height,300)
$setpvar(AlbumArt.Y, $getpvar(PlaylistTree.height))

// ** Browser Panels **
$setpvar(Browser.width,$eval({%_width% - $getpvar(FirstColumn.width)} / 4))
$setpvar(Browser.Album.X, $getpvar(FirstColumn.width))
$setpvar(Browser.Title.X, $eval($getpvar(Browser.Album.X) + $getpvar(Browser.width)))

// ** Columns Playlist Panel **
$setpvar(ColumnsList.X, $getpvar(FirstColumn.width))
$setpvar(ColumnsList.Y, $add($getpvar(TopRow.height),40))
$setpvar(ColumnsList.width, $eval(%_width% - $getpvar(FirstColumn.width)))
$setpvar(ColumnsList.height, $eval(%_height% - $getpvar(TopRow.height)-80))

// ** TrackDisplay Panel **
$setpvar(TrackDisplay.X,$eval($getpvar(FirstColumn.width) + {$getpvar(Browser.width) * 2}))
$setpvar(TrackDisplay.Y, 0)
$setpvar(TrackDisplay.width, $eval(%_width% - {$getpvar(FirstColumn.width) + {$getpvar(Browser.width) * 2}}))

// ** Spectrum Analyser **
$setpvar(sAnal.Y, $getpvar(TopRow.height))
$drawrect(0,0,%_width%,%_height%,brushColor-79-79-79 penColor-null )

//PerTrack
$panel(PlaylistTree,Playlist Tree Panel,0,0,$getpvar(FirstColumn.width),$eval(%_height%-300),)
$panel(AlbumArt,Album Art,0,$getpvar(AlbumArt.Y),$getpvar(AlbumArt.width),$getpvar(AlbumArt.height),)
$panel(Browser.Title,Browser Panel,$getpvar(Browser.Title.X),0,$getpvar(Browser.width),$getpvar(TopRow.height),)
$panel(Browser.Album,Browser Panel,$getpvar(Browser.Album.X),0,$getpvar(Browser.width),$getpvar(TopRow.height),)
$panel(TrackDisplay,Track Display,$getpvar(TrackDisplay.X),$getpvar(TrackDisplay.Y),$getpvar(TrackDisplay.width),$getpvar(TopRow.height),)
$panel(ColumnsList,Columns Playlist,$getpvar(ColumnsList.X),$getpvar(ColumnsList.Y),$getpvar(ColumnsList.width),$getpvar(ColumnsList.height),)
$panel(sAnal2,Spectrum analyser,$getpvar(FirstColumn.Width),$getpvar(sAnal.Y),$sub(%_width%,$getpvar(FirstColumn.width)),40,)
$panel(Menu,Menu,$sub(%_width%,250),$sub(%_height%,20),330,20,)
$panel(Buttons,Buttons,$sub(%_width%,180),$sub(%_height%,40),180,20,)
$panel(Volume,Volume,$sub(%_width%,330),$sub(%_height%, 40),150,20,)

TrackDisplay (As simple as it is right now I'll post it for historical purposes)

CODE

$drawrect(0,0,0,0,pencolor-null brushcolor-75-75-75  )
$padding(2,4)$align(center,middle)$font(,13,,SYSCOL-8)

// PerSecond
$align(center,)
$if(%_trackinfo_notrack%,
    No track
,
    $font(Segoe UI,28, bold shadow,210-210-210)%title%$char(10)
    $font(Segoe UI,22,bold shadow,242-242-242)%artist%$char(10)
)
$char(10)
$font(Maiandra GD,26,shadow,242-242-242)%playback_time% of %length%$char(10)
$font(Segoe UI,16,bold shadow,242-242-242)Album: $font(Segoe UI,16,bold shadow, 250-250-250)%album%

The code is a mess and a lot of the vars are redundant and will be fixed up in the future. I'm just learning this junk so I'm trying to make it as simple as possible until I become a little more comfortable with it.
Anyways, comments are greatly appreciated.

Thanks Dan