IPB

Welcome Guest ( Log In | Register )

 
Closed TopicStart new topic
Noob: Panels UI Scripting, 1st Post - Be Gentle
DoubleD
post May 16 2007, 14:48
Post #1





Group: Members
Posts: 7
Joined: 14-May 07
Member No.: 43444



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
Go to the top of the page
+Quote Post
Spirit_of_the_oc...
post May 16 2007, 15:26
Post #2





Group: Members
Posts: 583
Joined: 12-September 06
Member No.: 35092



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.

This post has been edited by Spirit_of_the_ocean: May 16 2007, 15:31
Go to the top of the page
+Quote Post
DoubleD
post May 16 2007, 15:45
Post #3





Group: Members
Posts: 7
Joined: 14-May 07
Member No.: 43444



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.

This post has been edited by DoubleD: May 16 2007, 15:50
Go to the top of the page
+Quote Post
Spirit_of_the_oc...
post May 16 2007, 16:09
Post #4





Group: Members
Posts: 583
Joined: 12-September 06
Member No.: 35092



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
Go to the top of the page
+Quote Post
DoubleD
post May 16 2007, 16:29
Post #5





Group: Members
Posts: 7
Joined: 14-May 07
Member No.: 43444



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

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

as wells as

$eval(30 / 100)
Go to the top of the page
+Quote Post
shakey_snake
post May 16 2007, 16:32
Post #6





Group: FB2K Moderator
Posts: 4322
Joined: 1-November 06
From: Cincinnati
Member No.: 37036



remove the spaces.


--------------------
elevatorladylevitateme
Go to the top of the page
+Quote Post
DoubleD
post May 16 2007, 16:37
Post #7





Group: Members
Posts: 7
Joined: 14-May 07
Member No.: 43444



Still returns 0

CODE
$eval(30/100)
Go to the top of the page
+Quote Post
Spirit_of_the_oc...
post May 16 2007, 16:43
Post #8





Group: Members
Posts: 583
Joined: 12-September 06
Member No.: 35092



CODE
$eval(30/100)


Yes because 30:100 is 0,3 cool.gif

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
Go to the top of the page
+Quote Post
shakey_snake
post May 16 2007, 16:58
Post #9





Group: FB2K Moderator
Posts: 4322
Joined: 1-November 06
From: Cincinnati
Member No.: 37036



QUOTE (DoubleD @ May 16 2007, 11:37) *
Still returns 0

CODE
$eval(30/100)

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


--------------------
elevatorladylevitateme
Go to the top of the page
+Quote Post
DoubleD
post May 16 2007, 18:05
Post #10





Group: Members
Posts: 7
Joined: 14-May 07
Member No.: 43444



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?

This post has been edited by DoubleD: May 16 2007, 18:07
Go to the top of the page
+Quote Post
Spirit_of_the_oc...
post May 16 2007, 18:37
Post #11





Group: Members
Posts: 583
Joined: 12-September 06
Member No.: 35092



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
Go to the top of the page
+Quote Post
DoubleD
post May 16 2007, 18:41
Post #12





Group: Members
Posts: 7
Joined: 14-May 07
Member No.: 43444



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

This post has been edited by DoubleD: May 16 2007, 18:45
Go to the top of the page
+Quote Post
Spirit_of_the_oc...
post May 16 2007, 23:49
Post #13





Group: Members
Posts: 583
Joined: 12-September 06
Member No.: 35092



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,)
Go to the top of the page
+Quote Post
Kiteroa
post May 17 2007, 03:07
Post #14





Group: Members
Posts: 255
Joined: 17-January 07
From: New Zealand
Member No.: 39740



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!
Go to the top of the page
+Quote Post
rama kandra
post May 17 2007, 03:52
Post #15





Group: Members
Posts: 69
Joined: 17-May 07
Member No.: 43538



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.


--------------------
that is our karma...
Go to the top of the page
+Quote Post
DoubleD
post May 20 2007, 23:44
Post #16





Group: Members
Posts: 7
Joined: 14-May 07
Member No.: 43444



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 tongue.gif
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
Go to the top of the page
+Quote Post

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



RSS Lo-Fi Version Time is now: 31st July 2014 - 09:58