Shop Mobile More Submit  Join Login
About Varied / Hobbyist Rangga Katili26/Male/Indonesia Recent Activity
Deviant for 6 Years
Needs Core Membership
Statistics 22 Deviations 475 Comments 31,533 Pageviews
×

Newest Deviations

FooSpot v1.2 by FlipOut69 FooSpot v1.2 :iconflipout69:FlipOut69 9 10 JAM 4K v1.5.1 by FlipOut69 JAM 4K v1.5.1 :iconflipout69:FlipOut69 9 30 JIVE 4K v1.1 by FlipOut69 JIVE 4K v1.1 :iconflipout69:FlipOut69 3 7 JIVE v1.1 by FlipOut69 JIVE v1.1 :iconflipout69:FlipOut69 18 21 Jive [WIP] by FlipOut69 Jive [WIP] :iconflipout69:FlipOut69 13 14 JAMv2 by FlipOut69 JAMv2 :iconflipout69:FlipOut69 60 60 JAM v2.0 Concept by FlipOut69 JAM v2.0 Concept :iconflipout69:FlipOut69 6 10 MiniJAM by FlipOut69 MiniJAM :iconflipout69:FlipOut69 3 6 JAM v1.5.1 by FlipOut69 JAM v1.5.1 :iconflipout69:FlipOut69 555 840 Kotak [foobar2000 icon pack] by FlipOut69 Kotak [foobar2000 icon pack] :iconflipout69:FlipOut69 34 8 JAM for foobar2000 [Additional Screenshots] by FlipOut69 JAM for foobar2000 [Additional Screenshots] :iconflipout69:FlipOut69 53 57 Metal Shelf Wallpaper by FlipOut69 Metal Shelf Wallpaper :iconflipout69:FlipOut69 4 0 My Android Homescreen [Aug 2013] by FlipOut69 My Android Homescreen [Aug 2013] :iconflipout69:FlipOut69 0 0 FooDeck v1.3 by FlipOut69 FooDeck v1.3 :iconflipout69:FlipOut69 36 92 FooFlip v0.1.1 by FlipOut69 FooFlip v0.1.1 :iconflipout69:FlipOut69 11 11

Random Favourites

Ora Mulih v2.5 AIMP4 Skin by putra05 Ora Mulih v2.5 AIMP4 Skin :iconputra05:putra05 92 44 Mendoan by ataze Mendoan :iconataze:ataze 18 3 DUiTunes beta3 by Br3tt DUiTunes beta3 :iconbr3tt:Br3tt 215 409 MetroSidebar Beta by amine5a5 MetroSidebar Beta :iconamine5a5:amine5a5 210 126 Circle of No by TsaoShin Circle of No :icontsaoshin:TsaoShin 43,348 6,632 VLC - MinimalX by Maverick07x VLC - MinimalX :iconmaverick07x:Maverick07x 1,124 428 Nature's Array by erezmarom Nature's Array :iconerezmarom:erezmarom 355 19 Modern UI File Explorer Concept by andrei19190 Modern UI File Explorer Concept :iconandrei19190:andrei19190 61 31 Masurian Skies by WojciechGorski Masurian Skies :iconwojciechgorski:WojciechGorski 72 29 Della Nott by MustBeResult Della Nott :iconmustberesult:MustBeResult 137 16 Almora by MustBeResult Almora :iconmustberesult:MustBeResult 340 36 Mood by MustBeResult Mood :iconmustberesult:MustBeResult 192 19 Circle Icons Pack by Martz90 Circle Icons Pack :iconmartz90:Martz90 1,555 236 Hide by purethoughts Hide :iconpurethoughts:purethoughts 214 11 Prime by neiio Prime :iconneiio:neiio 764 134 Sydney Sunrise by FireflyPhotosAust Sydney Sunrise :iconfireflyphotosaust:FireflyPhotosAust 681 91

Groups

deviantID

FlipOut69's Profile Picture
FlipOut69
Rangga Katili
Artist | Hobbyist | Varied
Indonesia
Location : Jakarta, Indonesia
Interests : General Art, UI Customization
Design Preferences : Minimalist, Modern-themed, Fantasy
Graphics Editor : Adobe Photoshop CS6
PC OS : Windows 10 x64
Phone : Oneplus One w/ LineageOS 14.1 (Android 7.1.1.)
Favorite Players : foobar2000 (Windows); Poweramp (Android)

Meet Me on :
FB : www.facebook.com/cliffflip
G+ : plus.google.com/u/0/+RanggaKat…
Twitter : twitter.com/RanggaKatili
Instagram : www.instagram.com/cliffflip/
Empowr : empowr.com/RanggaKatili

Activity



F2ktuto by slowboyfast



This is the re-uploaded version of "How to Skin foobar2000 Part 2" projects. All credits belongs to slowboyfast (the original poster).



Read other parts:

  • :iconmarkkoenig: Part 1 - Basics
  • :iconslowboyfast: Part 2 - Composition & Graphics
  • :iconflipout69: Part 3 - Panel Switchers
  • :iconflipout69: Part 4 - Avoiding truncated Panels
  • :iconflipout69: Part 5Elements Relative Position and Size


Composition & Graphics


   In this part, you'll learn the basics of foobar graphic coding. You may think "graphic coding" sounds like something serious and hard, but once you've learned it, it'll be as easy as writing a DA Journal.
This part will focus mainly on using CUI (ColumnsUI), PSS (Panel Stack Splitter) and ELP (ELPlaylist).


Requirements:

  • Maths - most drawing functions use coordinates, lengths, widths and other scary stuff. It's mandatory to have at least basic knowledge of maths (adding, substracting, dividing).
  • Full set of components - your theme is what you want it to be. Make sure you have all addons you want to use.
  • Graphic editing software - it's completely optional but handy when there's no other possibility to draw an element.
  • Large amount of free time - draw it, test it, correct it, repeat!


Ready, set, theme!


1. Compose


   Your project should start like any other big thing. You may want to hop right in into skinning but what if all of your work will go into something that won't work. It's always good to start drawing your idea on paper. Try to make a mockup in Photoshop or Gimp. Experiment with colors and layouts. Make something that is good looking and easy to use.

I'm always starting with a messy sketch:Brainstorm by slowboyfast

And it helps me with achieving results like this:
Wip by slowboyfast


2. Draw


   Ok, so you've got your plan clear in your head, sketched and prepared. I'm also assuming that you're familiar with Markkoenig's tutorial part 1. Now it's time to draw stuff. There are some basic functions you need to know:

  1. $drawrect - draws rectangles and lines
  2. $drawroundrect - draws rounded rectangles (my favorite for making buttons)
  3. $gradientrect - draws gradients
  4. $drawblurrect - draws blurry rectangles (useful for making shadows/glows)
  5. $drawellipse - draws ellipses
  6. $drawtriangle - draws triangles
//Notice
It's worth noting that each function consists of coordinates, height & width values, color values and special arguments. They work in both ELPlaylist and PSS.

1. $drawrect
As I stated earlier, it's used for drawing rectangles and lines. It's pretty much the most essential function.
String for $drawrect looks like this:
$drawrect(X,Y,WIDTH,HEIGHT,FILLING R-G-B-OPACITY,BORDER R-G-B-OPACITY,ARGUMENTS)
In example, if we want to draw horizontal line, we should write:

$drawrect(50,50,300,1,255-0-0-255,)

And it will draw a red line on coords 50(X), 50(Y), which will be 300px long and 1px wide.Redline by slowboyfast

If we want to draw a rectangle, we can just modify the width of our first line and move it a little to the bottom.
$drawrect(50,70,300,10,255-0-0-255,)

It will draw a rectangle on coords 50(X), 70(Y). It'll be 300px long and 10px wide.

Redrect by slowboyfast

Ok, let's draw vertical line this time. We should change the X coord to, let's say, 360(X). This way our new line will stay visible. We should also change the color for good measure.
$drawrect(360,50,1,30,0-0-255-255,)

And look, our blue line is here!
Blueline by slowboyfast

2. $drawroundrect
Well, it should be obvious, it's used for drawing rectangles with rounded corners :) (Smile)
String for this function looks like this:
$drawroundrect(X,Y,WIDTH,HEIGHT,R1,R2,FILLING R-G-B-OPACITY,BORDER R-G-B-OPACITY,ARGUMENTS)
Now, we need some math. Degree of roundness is defined by R1 and R2. To achieve nice looking rounded corners you should remember that WIDTH should always be greater than 4*R1 and HEIGHT should always be greater than 4*R2.

Okay, enough with maths, let's draw ourselves a nice roundrect.
$drawroundrect(50,90,100,20,3,3,0-0-0-255,255-0-0,)

And here it is, a small rounded rectangle. Notice that our width (100) is greater than R1 (3*4=12). Same thing goes for height (20) which is greater than R2 (3*4=12).
Roundrect by slowboyfast

3
. $gradientrect
Next thing is gradientrect. And it draws, guess what, gradients!
$gradientrect(X,Y,WIDTH,HEIGHT,COLOR1 R-G-B,COLOR2 R-G-B,ARGUMENTS)

Now lets draw two of them, just to show people how amazing gradients are.
First gradient will be a horizontal one. To achieve this, we gonna write our string like this (with "horizontal" argument):
$gradientrect(50,120,150,150,150-150-50,35-35-35,horizontal)
Second one should be vetical. Small modification of X and Y coords, maybe a slight change in the color. We should also add "vertical" as an argument.
$gradientrect(220,120,150,150,150-50-50,35-35-35,vertical)

Amazing gradients!
Gradients by slowboyfast

4. $drawblurrect
Nothing much to say about this one. Draws blurred rectangles. Ideal for glowing stuff or shadows.
$drawblurrect(X,Y,WIDTH,HEIGHT,COLOR R-G-B-OPACITY,BLUR STRENGTH)
We can control amount of blur by modifying BLUR STRENGTH argument (1 - weak blur, 7 - strong blur)

Let's draw some blurry things, shall we? First one will be level 1 blurred rectangle, second will get level 7 blur.
$drawblurrect(50,290,100,20,255-0-128-255,1)
$drawblurrect(180,290,100,20,255-0-128-255,7)


Few small changes in coords and color and here they are. Blurrects!
Blur by slowboyfast

5. $drawellpise
Another self explanatory function which draws ellipses :) (Smile) String looks like this:
$drawellipse(X,Y,WIDTH,HEIGHT,FILLING R-G-B-OPACITY,BORDER R-G-B-OPACITY,ARGUMENTS)

Let's play with this one. By modifying WIDTH and HEIGHT we can make perfect circles or stretched ellipses.
First one will be a perfect circle. Move it a little to the bottom and make sure WIDTH and HEIGHT are equal.
$drawellipse(50,320,40,40,255-0-0,255-255-0,)
Second one will be stretched vertically. Move it to the left and increase its height.
$drawellipse(100,320,40,50,255-0-0,255-255-0,)
Last one will be stretched horizontally. Move it again and increase its width.
$drawellipse(150,320,50,40,255-0-0,255-255-0,)

And we made it. Three little dots!
Ellipses by slowboyfast

6. $drawtriangle

It's a tricky one. Draws triangles. String looks like this:
$drawtriangle(X1,Y1,X2,Y2,X3,Y3,FILLING R-G-B-OPACITY,BORDER R-G-B-OPACITY,ARGUMENTS)

It has 3 coords for X and 3 for Y. Each one represents a corner of a triangle. Let's draw one.
$drawtriangle(450,250,500,250,475,200,0-0-0,255-0-0,)

Here it is, a triangle.
Triangle by slowboyfast


3. Write


    Yeah, that's right. Making text strings is another essential thing for f2k themer. They're found nearly everywhere. On playlists, panels and buttons.

There are four functions that are capable of drawing text:
  1. $drawtext - which is capable of alpha blending, glowing and other shiny stuff
  2. $drawtextex - which can't do transparency but is faster than $drawtext (it's better for spamming and creating crispy, strong shadows)
  3. $textbutton - which draws buttons made entirely of letters
  4. $drawstring - can do magics! (gonna describe it later)
1. $drawtext
String looks like this:
$drawtext(text,X,Y,WIDTH,HEIGHT,COLOR R-G-B-OPACITY,ARGUMENTS)
Arguments for $drawtext:
  • left - aligns text to the left
  • right - aligns text to the right
  • hcenter - centers text horizontally
  • vcenter - centers text vertically
  • top - aligns text to the top
  • bottom - aligns text to the bottom
2. $drawtextex
String looks like this:
$drawtextex(text,X,Y,WIDTH,HEIGHT,COLOR R-G-B,ARGUMENTS)
Arguments for $drawtextex:
  • left - aligns text to the left
  • right - aligns text to the right
  • hcenter - centers text horizontally
  • vcenter - centers text vertically
  • top - aligns text to the top
  • bottom - aligns text to the bottom
  • end_ellipsis - if your text is too long, this arg. resolves clipping issues by ending text with (...)
Right, now we should test our functions. Let's make two strings, one made in $drawtext and second made in $drawtextex
$drawtext(THIS TEXT WAS WRITTEN BY '$DRAWTEXT' FUNCTION,50,50,300,20,0-0-0,)
$drawtextex(THIS TEXT WAS WRITTEN BY '$DRAWTEXTEX' FUNCTION,50,70,300,20,0-0-0,)


Textstrings by slowboyfast

As you may noticed, both strings look similar, so here's my advice. If you can, go for $drawtextex. It's faster, can solve clipping errors and is good for making nice little effects on buttons and playlists.

3. $textbutton
One of the most versatile functions out there. It can show/hide panels, minimize, maximize, change layouts. It can do nearly everything we want it to do.
It's string consists of:
$textbutton(X,Y,WIDTH,HEIGHT,TEXT,MOUSEOVER TEXT,COMMAND,ARGUMENTS,MOUSEOVER ARGUMENTS)

In example, if we want to make a button that opens up preferences, we can write a string like this:
$textbutton(0,0,100,20,Preferences,Preferences,Command:File/Preferences,fontcolor:0-0-0,fontcolor:255-0-0) 

When we move our mouse over this button, it will change color to red. And of course clicking on it, will open up prefs.

//Notice
We can control font size, type and face with one simple string.
$font(FONT FACE,SIZE,TYPE)
FACE - is a name of our font e.g. Calibri Bold Caps
SIZE - controls size :) (Smile)
TYPE - controls if our font is normal, bold or italic.

And again, it's visible here:
Textstrings by slowboyfast



4. Combine


    To make some decent looking themes, we need to combine those drawing functions. It's similar to using layers in graphic apps, only instead of "WYSIWYG" interface we're on our own with lines of code. 
Combining, or as I like to call it - layering, occurs when we put a shape over other shape. In foobar, it may be a little awkward since topmost layer is always closer to the bottom. Everything we write last will be put on top of other things. Look at this two rectangles below.
L1 by slowboyfast

In this case, cyan rectangle (layer 2) is our top layer. Look what happens when we switch layer 2 (cyan) with layer 1 (magenta).

L2 by slowboyfast

Since magenta rectangle is now closer to the bottom, foobar will treat it as topmost layer. This technique can be used to achieve pretty nice effects. Let's say we want to make a simple looking art viewer for our skin. We should start with drawing a rectangle:

$drawrect(41,6,168,168,100-100-100-255,)

Albart1 by slowboyfast

Then, we wan't to put a smaller and a bit darker rectangle over it. It will create a thick border.:

$drawrect(43,8,164,164,60-60-60-255,)

Albart2 by slowboyfast

Next, we should use artreader function to display our artwork:

$imageabs(44,9,162,162,%path%,artreader nokeepaspect,)

Albart3 by slowboyfast

Looks ok, but it's a little bland. Let's make our cover a bit lighter on top:

$gradientrect(44,9,162,50,255-255-255-80,0-0-0-0,)

Albart4 by slowboyfast

Looks even better. We should add a little shiny effect in top left corner for good measure:

$gradientrect(44,9,1,162,255-255-255-150,0-0-0-0,)
$gradientrect(45,9,161,1,255-255-255-150,0-0-0-0,horizontal)


Albart5 by slowboyfast

There's still something missing here. We should add a shadow to make it complete. To do this, we have to move all our code a notch to the bottom and write a $drawblurrect function:

$drawblurrect(40,6,170,169,0-0-0-100,2)

Albart6 by slowboyfast



And that's it. That's how we draw stuff in foobar (or at least in PSS). 

This part is still incomplete (mostly because of my work, I don't have much time lately) but I'll add more. I just want to share this little starter guide. Hope it helps all those people who are new to f2k. Cheers! ;) (Wink)

To do:
  • describe $drawstring
  • control height and width with %_width% & %_height%
  • insert images with %imageabs
  • make some efficient global settings with $puts
  • $add, $sub and $div or simply add, substract and divide
  • floating panels (POP-UPS!)
  • retractable panels
 Foobar7 by Markkoenig 

    This is the re-uploaded version of "How to Skin foobar2000 Part 1" projects. All credits belongs to Markkoenig (the original poster).

    I've been asked to write a tutorial on skinning foobar2000, because many f2k users encounter difficulties modifying skins or simply using them. I'm not an expert on the subject, I've started by installing a few skins and trying to understand how that worked ; I still think it's the best way to get a good handle on it, though a long and sometimes frustrating way. I invite you to try and see by yourself, to keep in mind that errors come all along and to share any advice, question, difficulty or anything you want to say, may you be new or expert. I also recommend to read this good tutorial (though it's partly based on outdated PanelsUI), maybe this less developed one, some of the very useful HydrogenAudio's forums and the few links I'll drop here.

This first part intends to be an overview of the whole thing ; a second part made by slowboyfast will guide you through a step-by-step on how to create graphic elements only with foobar2000's drawing functions ; and a third part by FlipOut69 will propose detailed presentations of some customization functions. If you don't want to go too far into skinning and are okay with the standard interface, the first link hereabove might satisfy you, specially CUI's specific options. Now if you're ready, let's hop in! :) (Smile)



The tutorial

Part 1 by Markkoenig :iconmarkkoenig: : The Basics

 Part 2 by slowboyfast :iconslowboyfast: : Composition & Graphics

 Part 3 by FlipOut69 :iconflipout69: : Creating Panel Switchers

Part 4 by FlipOut69 :iconflipout69: Avoiding truncated Panels

Part 5 by FlipOut69 :iconflipout69: Elements Relative Position and Size



Recommendations


  • Always keep your components up-to-date, unless it may cause compatibility issues.
  • When installing a skin, check the version of foobar it's been designed for. Avoid installing old skins on current foobar versions and vice versa.
  • Backup your files if you're not sure of what you're doing ; export or copy your working scripts when you're about to take risks.
  • I personnally recommend to install skins in fresh foobar2000 installations to avoid compatibility issues between different versions of a component (WSH Panel Mod in particular). That being said, if you've checked the components and their version and there's no conflict, you sure can install several skins on a single foobar2000. Beware the updating of components, which can disable a part of or the entire skin ; however it doesn't happen a lot 'cause AFAIK no component is currently under development.
  • I mostly use portable installation instead of normal installation, for it's easier to install skins into and you can multiply your foobar2000s as much as you need, knowing that there will be no conflict of any sort (no need to update anything or to have two skins aside). Just copy the core files (database etc.) from an installation to the other to keep your library and media player settings.
  • If you're good at coding and you're not too ambitious, you can stick with foobar2000's code to create graphic elements. Otherwise, you can decide to use Photoshop or Gimp or any other program to create images that you'll assemble using Panel Stack Splitter.



Useful links




Installation


Installing a downloaded skin depends on :

  • Its complexity. The use of certain components might require new folders, system files, etc. Look out for instructions on skins' description.
  • The type of foobar2000 installation.
    • On a portable installation, just throw everything in the installation's folder.
    • On a standard installation, the typical process is to put the skin and the component in foobar2000's main directory, whereas the configuration files go to C:\Users\[you]\Documents\AppData [hiddenfolder]\Roaming\foobar2000\configuration. Some components manually installed may be situated in ...Roaming\foobar2000\user-components folder. Again, it's rarely that simple.

Wether you want to install or create a skin, remember that the common use is to create a "skins" folder in foobar2000's directory, where one puts the skin files.



Default UI


Foobar2000 comes with a default interface (DUI) that is easy to customize but very limited. It works perfectly and is very fast, but its features are quite limited to changing fonts, colors, stock elements, their position and their size. You access its parameters the first time you run foobar2000, and later either in Preferences/Display/Default UI or in [toolbar]/View/Layout/Enable Layout editing mode. In Prefs/Display/Default UI/Playlist View, you can add custom columns and grouping schemes using foobar2000's Title Formatting. Using the View/Layout/Enable layout editing mode command (under CUI, it's View/Layout/Live editing), you'll be able to choose and move the UI elements within the player's window. All the elements are on the same layer, placed side-by-side ; to put several elements at the same place, you have to add Tab Stacks (Enable layout editing mode, then right-click on the UI element and "Add splitter"/"Add panel").



Columns UI + Panel Stack Splitter


To really enhance your foobar2000 UI's experience, you have to use the Columns UI component, better combined with Panel Stack Splitter. All by itself, Columns UI won't offer many more possibilities. There used to be a few other components but they are outdated and no longer supported (Panels UI for example).

To edit in Prefs/Display/Columns UI, CUI allows you to organize the elements more freely using splitters to divide the window's space. There are six tabs in CUI's preferences page :

  • The Main tab is where you import and export .fcl files and edit the window title string.
  • The Layout tab is where you edit most of the graphic UI stuff, that's where we're gonna spend a load of time.
  • The Status bar tab allows you to edit the bottom status bar which displays technical information. It's rather often deactivated anyway.
  • The Notification area is also self-explanatory, it controls (optional) tooltip and tray icon options.
  • The Filter tab is only useful when you use the Filter tabs element.
  • And the Artwork tab is useless, for we use much more efficient artwork components or methods.

PSS allows the interface to be organized by panels rather than horizontal or vertical splitters as in DUI and CUI alone, and according to a hierarchical pattern : one or a group of elements can be assembled on one part, which can be displayed alongside or submitted to others. This way, you can have different parts in your skin behaving differently. And it is able to run scripts by itself. Instead of stand-alone elements separated by visible frames, PSS can combine multiple elements on one panel, with or without frame. The elements on a panel can thus behave differently than the panel itself, managed by Columns UI. Though it may seem a bit messy, it offers way more possibilities than the tabs system of DUI.

The Layout

So let's talk about this Layout tab. First thing is to erase whatever element is here by default (NG Playlist normally) and to insert an horizontal or vertical splitter as a base, or a PSS (right click/insert). Then all you have to do is adding elements and/or panels according to what you need and to the way you want to organize your skin. Let's look at this example below. The upper Splitter in the Layout tab is the main splitter, it's the general "background" of the skin, though it's displayed first in the list it's the lowest of all ; but every submitted element is listed from top to bottom, as it is on the actual skin. Remember that any element called in a PSS script is overpassed by the element(s) this PSS is running. The hierarchy is to be set in this same Layout tab, by right-clicking on the elements and selecting "Move up/Move down" ; the presets menu allows you to store several organizations in the same .fcl. Technically, one can create multiple and totally different skins and store them in a single .fcl file. The panels and elements can be edited by selecting the main Panel Stack Splitter and clicking "Configure" (you could also directly select the panel or element you want to edit, but I often observed that it causes the hierarchally upper element to reset).

Here on Monolite Flat, you can see that the elements are organized one above the other. The waveform seekbar is the lowest component above the first/main Panel Stack Splitter, which runs the prev/play/pause/next buttons (that's why you don't see them in the list, they're in its script) ; then there is another PSS above, running the Library Tree, then the ELPlaylist which is submitted to the main PSS, etc. until the toolbar buttons, the upper elements of the skin. See the second screenshot, it should be clearer.
3 by Markkoenig
The WSH elements are gathered on one panel (the black one) and though there are 3 of them, two other components just nearby and 3 buttons on the first PSS, it all seems united and consistent.

2 by Markkoenig
So the first important thing to think about when one is designing or modifying a skin is its organization. The overall structure is ruled by "layers" assembled in hierarchy, in which you add and dispose panels of various sizes, in which you place one or several UI elements. To add panels or UI elements, right-click on a splitter in the Layout tab and choose "Change splitter type" or "Insert panel".

The Coordinates

Once you click "Configure", the PanelList tab shows the current UI elements (PSS or components) that are submitted to (or managed by, if you want) the PSS you are currently editing. The elements are listed from top to bottom, meaning the first one is on the top layer, the last one on the bottom layer ; you have to take this into account if one panel or element is supposed to cover the other(s). Tick "forced layout" to allow panels and elements oversizing each others and other tricks. You can use TF to edit values, which would be much more practical. For example, coordinates set by numbers are okay to set an element's position (x,y), but it may be wiser to use a TF value like %_width% (returns the windows' width) if the window must be resizable. Choose one or the other, depending on the case. Ticking "ignore panel size limits" allows you to arrange elements out of their panel's limits. "Hide panel on startup" should be used when you have a button to make the element appear. Be careful when editing those, quite often you don't see the element you just placed, cause it's out of range or hidden under another element.

4 by Markkoenig

Everytime you are done with editing one of these dialog boxes, hit "Apply". You will notice that when you hit "OK", you can't edit hierarchally previous elements : the dialog box is empty. You have to validate the whole modification by hitting "OK" down to "Apply" on the Layout tab before you can go back editing PSS and elements.

Colours and Fonts

Just like in the DUI options page, you can edit the colours and fonts of both stock foobar2000 UI and some third-party elements ; assuming you haven't set them already (using scripts for example). Some third-party components allow you to access their UI preferences both by right-clicking in it and by using this menu.

5 by Markkoenig



Scripts


The other important aspect of f2k skinning is the use of scripts in order to customize how a UI element works and/or is displayed. Scripts rely on a syntax called Title Formatting (TF) that I recommend you learn to handle (see the links above). Multiple display options and stock components of foobar2000 use TF : the window title, the status bar, the notification area, the columns playlist, the metadata display, etc. ; as well as several components among which Panel Stack Splitter, ELPlaylist/NG Playlist, LibraryTree, etc. TF may be quite easy, on the other hand it is limited in its possibilities. If you are ambitious, you might prefer switching to JavaScript through WSH Panel Mod (see below).

NG Playlist

Its display options are to be found in Prefs/Columns UI (or DUI)/Playlist View or by right-clicking on one of its column titles/Preferences.

ELPlaylist

Its display options can be found in the Prefs/Columns UI/Layout tab or by right-clicking anywhere in it/Settings (if you do so, remember to save your skin in .fcl or any other modification applied will reset ELPlaylist to its last saved settings, due to some sort of priority conflict). ELPlaylist's modifications are divided into two sections :

  • what is true for the entire element : Style, Field definition, Behaviour and Misc tabs ;
  • what is true for one script at a time (ELPlaylist can host multiple scripts, i.e. multiple custom library displays, which you can switch between) : Script and Grouping tabs.

Now let's take the tabs one by one. Remember there's a manual that explains everything (but in a very poor english). And notice that the scripts are run from top to bottom : for example, if you want to display a text string in front of a background image, make sure the image is called before the string ($imageabs... and later $drawstring). Again, taking a look into other people's work is very useful.

  • The Script tab is where you... write scripts. Track list refers to the library track list of your music : this is where you display informations like title, length, track number, etc. Group header is also self-explanatory. As for the track list, you can display a hell lot of things in many ways using forms, colors, pictures, etc. Those two sections are updated everytime there is a track change or an action from the user (adding files, refreshing, etc.). Per Second is updated every second (+ go to Behaviour tab and tick "update every second") ; you can make a progress bar or display sliding informations, etc. Popup (Background) and Popup (Track) can be used to display info within a popup when the cursor stays over a track ; this option's settings are in the Misc tab.
6 by Markkoenig
  • The Style tab gathers the main display options for the entire UI element, as well as a few ones that can impact the track list. You can choose a custom default font, or directly edit it the scripts ; you can use multiple fonts and if you edit fonts in scripts, they will overpass this custom default font. You can edit odd and even items background to have an "iTunes look", but you can do it in the scripts as well. "Enable Visual Style" was designed for Vista and doesn't seem to be of any use. "Pseudo-Transparent" background however can be interesting, but we'll come back later on the topic of transparency.
7 by Markkoenig
  • The Grouping tab sets the way your playlist viewer is organized. Group by allows you to name and store several grouping formats (such as Artist/Album, Albums only, tracklist sorted by artist, title, length, year, etc.) that you can access in the context menu ("Group by"). These options use TF. Group format refers to the way tracks are gathered, Sort format to the way tracks and/or groups are listed. Row height is the height of a single track line. Playlist Filter allows you to filter the library when using this particular grouping format ; i.e. you can have a grouping format called "Genre" where the tracks are filtered by genras. Finally, Associated titleformat script name allows you to link one particular grouping format to one particular display script (assuming you have given your script a name in Script tab/"Titleformat Script Presets"), that will automatically be activated when you activate this grouping format.
8 by Markkoenig
  • The Field definition tab stores values that you don't want to repeat everytime it's needed in your scripts. Instead of writing a color value like 245-145-93-125 or a long path twenty times in your script, you can store them here and use the $get function.
9 by Markkoenig
  • The Behaviour tab allows you to edit what happens when you interact with ELPlaylist.
  • The Misc tab refers to the popup feature.

Panel Stack Splitter

It works just the same way with scripts. When you are in a Splitter Settings dialog box, there are four tabs (see above for PanelList tab).

  • The Script tab allows you to use TF, just like in ELPlaylist. "PerTrack" will react on track change, "PerSecond" will be updated every second. This is where you can create text strings, buttons, display info, display images (graphic UI elements, background, artist pic, covers�), etc. ; see TF links for the possibilities. There is no complexity limit to your design, but keep in mind that the more elements the stock UI engine of foobar2000 has to create, the slower it will start and run. If you plan on creating a heavy and very complex skin, it can be wiser to switch to JScript.
  • The Behaviour tab rules the behaviour of the panel.
  • Global Variables is the equivalent of "Field definition".

You can submit as many PSS as you want to each others. If you select a component in the PanelList and hit "Configure", it will open its Preferences window ; sometimes this feature isn't available.

WSH Panel Mod

It's an extremely powerful component that simply host scripts in JScript or VBScript language. Almost anything is possible with it, far beyond TF's possibilities : you probably have seen some of Br3tt's work already. What's hard here is that you have to know JScript, or, as I'm doing so far, you can copy other people's scripts and modify them as far as you understand. A few samples are included in the component's package though. WSH Panel Mod is quite the key to an impressive skin.



Syntax basics


You probably won't write the syntax fluently right from the start, specially if it's your first contact with coding. It takes some time and -let's be honest- some endeavour to memorize sentences/functions, to avoid forgetting stuff and to get a good handle on the syntax' possibilities. Basically, the syntax used here is divided into two categories : values/field references and functions. A value or field reference is an information (size, position, color, opacity, metadata, count, etc.), a function is an action that is processed whether once-and-for-all (for example when starting foobar2000), at a specified moment (on track change...) or when you call it (by clicking on a button...). So generally speaking, a script is no more than a "find information, then call the action" process developped and multiplied. Thus, when you want to write a function, always make sure you bring the required information, or you might confront a crash or a big nothing and want to bang your head till you find the error. So we're gonna see the basics of understanding and organizing a script. Let's take a few examples.

We are in the Script tab of the first PSS. On this very simple script, I called a few graphic elements, some drawn, the others based on pictures ; some static, others dynamic.
  • In yellow is a basic information provider, the directory of the images used in this script. The $puts function allows you to store an information/value under a name, so that it's easier to call all along the script. Here I named 'skin_path' the whole information that is the path, '%ps_foobar2000_path%\skin... etc.' ; so below, in the blue zone, I just need the $get function to call this value and then finish the path of the picture : $get(skin_path)\play.png.
  • In the pink zone I drew the background of the toolbar and the slight grey border beneath. As the script runs from top to bottom, I drew the light grey background first ; then I added a gradient, and then the border. As you can see, I use both numerical and dynamic values. The dynamic values, may they be numerical values like here or metadata (like track tags), are called with %...% (whereas functions are called by $...). Here I wanted to set a background that fits the window's width even after resizing, so I called the value %_width%, which is relative and constantly updated.
  • In the blue zone, I drew the playback buttons. You can see a very common use of the $if function (or $if statement) which allows you to set various actions depending on the state of a value or a component : it works like $if(thisvaluereturnstrue, dothisaction, otherwisedothat). This is where the syntax begins to be more complex. This function here rules the play/pause button, which won't react the same way whether there's an ongoing playback or not. To avoid drawing two simple buttons side-by-side, I have to use $if to call alternatively two different buttons at the same place : if playback is going, "pause" button is displayed, if not, "play" button is displayed.
11 by Markkoenig

Now let's have a look at the ELPlaylist scripts, on another skin. CUI, PSS and ELP (and some more) use the same syntax, but there are function that don't work on some panels and/or some components for obvious reasons of inconsistency. By the way, as you can see on the screenshots below, I often tidy my script up so it's more convenient to read.
  • So first, in yellow, are the stored values I already told you about. I could have put them in the Field definition tab, but I like to have them constantly under my eyes. Your call. As you can see, I'm using the $if function into the $puts function : that means that the stored value called 'text_color', for example, will change whether the track is playing or not, is selected or not. This way, if you just want the text color to change according to the track state, doing this will prevent you from typing "$if(%el_isplaying%, then all the $drawstring, and if not, use this other string", which is very much longer : instead, you type one string and only the stored value changes once. The important thing here is to keep in mind that most of the functions can be combined and articulated to obtain complex results (or simpler ones for the rest of the script). You can also notice the ')))' at the end of the 4th line : the more functions you combine, the more parenthesis you'll have to remember.
  • In the "BG" zone, I set the "iTunes look" (/!\ not talking about the overall dark background : that background comes in a more global canvas. Here the ELP's background is transparent). To obtain the odd/even background effect, I used the $ifequal and $mod functions to activate the odd background when the result of [index number of the item in the group] divided on base 2 = 1, i.e. every other track ; instead of using fixed values like $if(%el_item_index%,$or(1,3,5,7, etc.)).
  • Same trick in the blue zone to add rectangle layers when the item is selected or playing.
  • In the green zone are listed the metadata to display on the item row. The $font function lets you set the font, size and type you want (N.B. : the $drawstring function only works with TrueType fonts ; otherwise, use the GDI renderer with $drawtext/$drawtextex, that can use both OpenType and TrueType). Then I add one string per data, but you can display as many metadata as you want on a single string.
  • Same thing with the indicator, for which I used a special font.
  • For the rating indicator (invisible here), I used $pad and $repeat according to the rating metadata to display the right number of characters side-by-side.
  • Eventually, I told ELPlaylist to add a shadow effect (gradient) on the item which index number equals the total number of items in the group, i.e. the last item of the group.
12 by Markkoenig
13 by Markkoenig
So here are some examples on how to organize a script and combine functions on complex syntaxes. Now let's sum up the main and important rules.
  • '//' disables the line.
  • Be careful when combining functions, you need to have the correct number of '(' and ')', and generally speaking watch your typing, any missing coma will disable or mess up the whole rest of the script. When you write a sketch, use tabulations instead of straight lines to see clearly what you're doing.
  • It's better to plan what you want to do before doing it, in order to decrease the risk of errors and sterile wanderings.
  • Always prefer relative and dynamic values over fixed/numerical values when you can use both.
  • Think of every data you need before calling the function.
  • The script is run from top to bottom, so organize it wisely.
  • Create or modify one thing at a time so as to quickly find the bug.
  • When you combine several functions, remember that the deepest function will be called first, and the other(s) above in this processing order. If you write $if($add($div($get(..., f2k will first get the value, then divide, then add and finally check if it returns true or false. Sometimes it's not the case : a single $if is very simple, for the process will be 'if[value]=true, then apply this, otherwise apply this'. So you have to think in terms of priorities.
  • If you can't find a function to do straightly something you need, there's almost always a way to go round.
  • Write the script in its appropriate component/tab.
  • Simplier is always better.


Transparency


Transparency in skinning is a very nice feature, sometimes a pain to handle though. There are various options to get transparency :

  • In Columns UI "Main" tab, the box "Use transparency" applies to the whole window. I used to use it with DUI, black background and white font, I could have something... but that's pretty much all.
  • In the Splitter Settings/Behaviour tab, the box "Pseudo Transparency" allows a background set in the Script tab to appear through an element. It won't let you see a component placed under.
  • Some components have a transparency feature (ELPlaylist, Lyrics Show Panel 3, Biography View, Channel Spectrum...) which may work different ways.

To sum up with, the default transparency feature lets the panel background appear through the component ; I guess that's why they're often labeled "pseudo transparency". It may be a bit difficult to build complex transparency-based skins with the default feature, you may have to find tricks. Otherwise, there are two external means :

  • Again, JScript can apply transparency (almost) anywhere.
  • The other and easier means to obtain transparency is the UI_Hacks component, which hasn't been approved by foobar2000 creators and is often flagged as buggy and/or Trojan (because of its name). I personally never had any problem with it. It provides true transparency, so that you won't see any background but your Windows desk or any program running behind. You will find its option in the Prefs/Default UI/Main Window tab. From here you can :
    • Modify or disable the window frame.
    • Modify the window's behaviour, lock it, disable its resizing or edit a specified size.
10 by Markkoenig
  • And what's interesting here, add various transparency modes. "Disable" disables Windows' Aero effect (provided you're using it). "Glass Frame" replaces Windows' default frame with one that you can edit with the values below. I used this mode in Lux to have a selective blur. "Sheet of glass" seems to activate a selective and blurred alpha transparency based on the colors' weight : a dark or solid color won't be affected whereas a light color will be affected by the transparency. Apart from these modes, the box "Alpha transparency" allows you to apply transparency to the whole window : selecting "Disable" and ticking "Alpha transparency" will make the window totally transparent but will leave the frame solid, unticking it and choosing "Glass Frame" will leave the background solid, etc. Don't forget that these transparency features depend on Aero's availability. If you're using visual styles that disable Aero, you might obtain slightly different results. Moreover, some fonts and antialiasing/ClearType don't like alpha transparency, so you might sometimes experience ugly renderings.
Snap19 by Markkoenig



    Well I guess that's it for now. Hoping you'll have a better understanding of the core of foobar2000 skinning, before reading the next parts. Feel free to comment and share, and to ask any question ; I'm open to suggestions and corrections/addenda. Let's do some skins! :) (Smile)
FooSpot v1.2
Requirements :
1. foobar2000 v1.3.9 or newer
2. At least 1280x720 screen resolution, higher is recommended
3. Montserrat font (Included in the archive)

Buy from Sellfy ($1.5, You need paypal account): sellfy.com/p/EqUu/
The download button on DA only contains dummy files, download only from link above

Read first :
1. Window frame should look like the preview image, regardless what Windows version and custom VS you're using.
2. Installation and basic setup guide is included in the zip archive.

Feedback is always appreciated =D

And if you like it, don't forget to add your :+fav:

If you want to support this skin development, you can donate to my PayPal account www.paypal.com/cgi-bin/webscr?…

____________________________

Changelog :

*Check the user guide for complete logs

V1.2 [29 Mar 2017]
*Download update v1.2 - www.mediafire.com/?hh6k1ooh65f…
1. Added Library Tree panel. Download, extract and copy file "foo_uie_library_tree.dll" to 'components' folder and "foo_uie_library_tree.dll.cfg" to 'configuration' folder
2. Import FCL file from Preferences -> Display -> Column UI -> FCL Importing and Exporting -> Import

V1.1 [22 Mar 2017]
- Round masking for album art/artist pictures (Graphical Browser)
*Download update v1.1 - www.mediafire.com/?asf7pm7x5cg…
1. Copy "Skins" folder to your root foobar2000 folder
2. Import FCL file from Preferences -> Display -> Column UI -> FCL Importing and Exporting -> Import

V1.0 [7 Feb 2017]
- Initial release
Loading...
JAM 4K v1.5.1
Requirements :
1. foobar2000 v1.3.9
2. Resolution higher than 1920x1080. 4K monitor is recommended
3. Segoe UI font family

Buy from Sellfy ($3, You need paypal account): sellfy.com/p/w6g2
The download button on DA only contains dummy files, download only from link above

Read first :
1. Window frame should look like the preview image, regardless what Windows version and custom VS you're using.
2. Installation and basic setup guide is included in the zip archive.

Additional screenshots


Feedback is always appreciated =D

And if you like it, don't forget to add your :+fav:

If you want to support this skin development, you can donate to my PayPal account www.paypal.com/cgi-bin/webscr?…

____________________________

Changelog :

*Check the user guide for complete logs

V1.5.1 [28 May 2016]
- WSH panel mod for artist pictures and biography has been replaced by Jscript Panel, big thanks to marc2003

v1.5 [21 May 2016]
- 2 new color scheme (Grey-Pink & Grey-White-Orange) for 125% and 150% DPI
- New Library view (Genre, Rating, etc)

v1.3.1 [25 Jan 2016]
- New seekbar design
- Windows 10 min/max/close buttons

v1.3 [31 Aug 2014]
- Option to disable last.fm integration ('charts' view, love button, etc.)
- Change method to grab artist pictures :
-- Fetching up to 5 pictures
-- All pictures now will be saved in foobar2000 profile folder
- Artist pictures & album artwork on the main interface now will insist filling the space regardless of their aspect ratio
- 'Playlists' view functionality now integrated into 'Collection' view. In the form of collapsible bar.
- Add library tree panel in collection interface
- Minor fixes
- v1.2 171213 Hotfix (100% DPI only)

v1.2 [11 Dec 2013]
- Change the default scheme to dark grey w/ blue
- Redesign the collection layout
- Also redesign few other panels
- Full-length & dynamic seekbar
- Optimization for streaming contents (dynamic artist & title, station name)
- Better volume calculation
- Bunch of fixes

v1.1 [11 Nov 2013]
- 2 new color schemes 
- Resizable window (beta)
- Smart playlists
- Alternative 'Now Playing' list style
- Fix missing symbols / characters
____________________________

Credit to :
iosuiscloud for supporting this skin development
marc2k3 for lots of WSH scripts
Markkoenig for volume bar script (from Lux)
ainq for Gauss: Aqua wallpaper
dAKirby309 for foobar2000 icon (from Metro UI Icon Set)
Loading...
JIVE v1.1
Now changing primary and secondary colors is easy as ABC. Just go to Prefs -> Tools -> Extended Variables -> Change Primary Color and/or Secondary color in RGB value -> restart foobar2000
Show off your color combination in the comment!

Requirements :
1. foobar2000 v1.3.9 or newer
2. Resolution higher than 1200x755 (default window size)
3. Segoe UI font family

Buy from Sellfy ($1.5, You need paypal account):  sellfy.com/p/wTzT
The download button on DA only contains dummy files, download only from link above

Read first :
1. Window frame should look like the preview image, regardless what Windows version and custom VS you're using.
2. Installation and basic setup guide is included in the zip archive.

Feedback is always appreciated =D

And if you like it, don't forget to add your :+fav:

If you want to support this skin development, you can donate to my PayPal account www.paypal.com/cgi-bin/webscr?…
Loading...

F2ktuto by slowboyfast



This is the re-uploaded version of "How to Skin foobar2000 Part 2" projects. All credits belongs to slowboyfast (the original poster).



Read other parts:

  • :iconmarkkoenig: Part 1 - Basics
  • :iconslowboyfast: Part 2 - Composition & Graphics
  • :iconflipout69: Part 3 - Panel Switchers
  • :iconflipout69: Part 4 - Avoiding truncated Panels
  • :iconflipout69: Part 5Elements Relative Position and Size


Composition & Graphics


   In this part, you'll learn the basics of foobar graphic coding. You may think "graphic coding" sounds like something serious and hard, but once you've learned it, it'll be as easy as writing a DA Journal.
This part will focus mainly on using CUI (ColumnsUI), PSS (Panel Stack Splitter) and ELP (ELPlaylist).


Requirements:

  • Maths - most drawing functions use coordinates, lengths, widths and other scary stuff. It's mandatory to have at least basic knowledge of maths (adding, substracting, dividing).
  • Full set of components - your theme is what you want it to be. Make sure you have all addons you want to use.
  • Graphic editing software - it's completely optional but handy when there's no other possibility to draw an element.
  • Large amount of free time - draw it, test it, correct it, repeat!


Ready, set, theme!


1. Compose


   Your project should start like any other big thing. You may want to hop right in into skinning but what if all of your work will go into something that won't work. It's always good to start drawing your idea on paper. Try to make a mockup in Photoshop or Gimp. Experiment with colors and layouts. Make something that is good looking and easy to use.

I'm always starting with a messy sketch:Brainstorm by slowboyfast

And it helps me with achieving results like this:
Wip by slowboyfast


2. Draw


   Ok, so you've got your plan clear in your head, sketched and prepared. I'm also assuming that you're familiar with Markkoenig's tutorial part 1. Now it's time to draw stuff. There are some basic functions you need to know:

  1. $drawrect - draws rectangles and lines
  2. $drawroundrect - draws rounded rectangles (my favorite for making buttons)
  3. $gradientrect - draws gradients
  4. $drawblurrect - draws blurry rectangles (useful for making shadows/glows)
  5. $drawellipse - draws ellipses
  6. $drawtriangle - draws triangles
//Notice
It's worth noting that each function consists of coordinates, height & width values, color values and special arguments. They work in both ELPlaylist and PSS.

1. $drawrect
As I stated earlier, it's used for drawing rectangles and lines. It's pretty much the most essential function.
String for $drawrect looks like this:
$drawrect(X,Y,WIDTH,HEIGHT,FILLING R-G-B-OPACITY,BORDER R-G-B-OPACITY,ARGUMENTS)
In example, if we want to draw horizontal line, we should write:

$drawrect(50,50,300,1,255-0-0-255,)

And it will draw a red line on coords 50(X), 50(Y), which will be 300px long and 1px wide.Redline by slowboyfast

If we want to draw a rectangle, we can just modify the width of our first line and move it a little to the bottom.
$drawrect(50,70,300,10,255-0-0-255,)

It will draw a rectangle on coords 50(X), 70(Y). It'll be 300px long and 10px wide.

Redrect by slowboyfast

Ok, let's draw vertical line this time. We should change the X coord to, let's say, 360(X). This way our new line will stay visible. We should also change the color for good measure.
$drawrect(360,50,1,30,0-0-255-255,)

And look, our blue line is here!
Blueline by slowboyfast

2. $drawroundrect
Well, it should be obvious, it's used for drawing rectangles with rounded corners :) (Smile)
String for this function looks like this:
$drawroundrect(X,Y,WIDTH,HEIGHT,R1,R2,FILLING R-G-B-OPACITY,BORDER R-G-B-OPACITY,ARGUMENTS)
Now, we need some math. Degree of roundness is defined by R1 and R2. To achieve nice looking rounded corners you should remember that WIDTH should always be greater than 4*R1 and HEIGHT should always be greater than 4*R2.

Okay, enough with maths, let's draw ourselves a nice roundrect.
$drawroundrect(50,90,100,20,3,3,0-0-0-255,255-0-0,)

And here it is, a small rounded rectangle. Notice that our width (100) is greater than R1 (3*4=12). Same thing goes for height (20) which is greater than R2 (3*4=12).
Roundrect by slowboyfast

3
. $gradientrect
Next thing is gradientrect. And it draws, guess what, gradients!
$gradientrect(X,Y,WIDTH,HEIGHT,COLOR1 R-G-B,COLOR2 R-G-B,ARGUMENTS)

Now lets draw two of them, just to show people how amazing gradients are.
First gradient will be a horizontal one. To achieve this, we gonna write our string like this (with "horizontal" argument):
$gradientrect(50,120,150,150,150-150-50,35-35-35,horizontal)
Second one should be vetical. Small modification of X and Y coords, maybe a slight change in the color. We should also add "vertical" as an argument.
$gradientrect(220,120,150,150,150-50-50,35-35-35,vertical)

Amazing gradients!
Gradients by slowboyfast

4. $drawblurrect
Nothing much to say about this one. Draws blurred rectangles. Ideal for glowing stuff or shadows.
$drawblurrect(X,Y,WIDTH,HEIGHT,COLOR R-G-B-OPACITY,BLUR STRENGTH)
We can control amount of blur by modifying BLUR STRENGTH argument (1 - weak blur, 7 - strong blur)

Let's draw some blurry things, shall we? First one will be level 1 blurred rectangle, second will get level 7 blur.
$drawblurrect(50,290,100,20,255-0-128-255,1)
$drawblurrect(180,290,100,20,255-0-128-255,7)


Few small changes in coords and color and here they are. Blurrects!
Blur by slowboyfast

5. $drawellpise
Another self explanatory function which draws ellipses :) (Smile) String looks like this:
$drawellipse(X,Y,WIDTH,HEIGHT,FILLING R-G-B-OPACITY,BORDER R-G-B-OPACITY,ARGUMENTS)

Let's play with this one. By modifying WIDTH and HEIGHT we can make perfect circles or stretched ellipses.
First one will be a perfect circle. Move it a little to the bottom and make sure WIDTH and HEIGHT are equal.
$drawellipse(50,320,40,40,255-0-0,255-255-0,)
Second one will be stretched vertically. Move it to the left and increase its height.
$drawellipse(100,320,40,50,255-0-0,255-255-0,)
Last one will be stretched horizontally. Move it again and increase its width.
$drawellipse(150,320,50,40,255-0-0,255-255-0,)

And we made it. Three little dots!
Ellipses by slowboyfast

6. $drawtriangle

It's a tricky one. Draws triangles. String looks like this:
$drawtriangle(X1,Y1,X2,Y2,X3,Y3,FILLING R-G-B-OPACITY,BORDER R-G-B-OPACITY,ARGUMENTS)

It has 3 coords for X and 3 for Y. Each one represents a corner of a triangle. Let's draw one.
$drawtriangle(450,250,500,250,475,200,0-0-0,255-0-0,)

Here it is, a triangle.
Triangle by slowboyfast


3. Write


    Yeah, that's right. Making text strings is another essential thing for f2k themer. They're found nearly everywhere. On playlists, panels and buttons.

There are four functions that are capable of drawing text:
  1. $drawtext - which is capable of alpha blending, glowing and other shiny stuff
  2. $drawtextex - which can't do transparency but is faster than $drawtext (it's better for spamming and creating crispy, strong shadows)
  3. $textbutton - which draws buttons made entirely of letters
  4. $drawstring - can do magics! (gonna describe it later)
1. $drawtext
String looks like this:
$drawtext(text,X,Y,WIDTH,HEIGHT,COLOR R-G-B-OPACITY,ARGUMENTS)
Arguments for $drawtext:
  • left - aligns text to the left
  • right - aligns text to the right
  • hcenter - centers text horizontally
  • vcenter - centers text vertically
  • top - aligns text to the top
  • bottom - aligns text to the bottom
2. $drawtextex
String looks like this:
$drawtextex(text,X,Y,WIDTH,HEIGHT,COLOR R-G-B,ARGUMENTS)
Arguments for $drawtextex:
  • left - aligns text to the left
  • right - aligns text to the right
  • hcenter - centers text horizontally
  • vcenter - centers text vertically
  • top - aligns text to the top
  • bottom - aligns text to the bottom
  • end_ellipsis - if your text is too long, this arg. resolves clipping issues by ending text with (...)
Right, now we should test our functions. Let's make two strings, one made in $drawtext and second made in $drawtextex
$drawtext(THIS TEXT WAS WRITTEN BY '$DRAWTEXT' FUNCTION,50,50,300,20,0-0-0,)
$drawtextex(THIS TEXT WAS WRITTEN BY '$DRAWTEXTEX' FUNCTION,50,70,300,20,0-0-0,)


Textstrings by slowboyfast

As you may noticed, both strings look similar, so here's my advice. If you can, go for $drawtextex. It's faster, can solve clipping errors and is good for making nice little effects on buttons and playlists.

3. $textbutton
One of the most versatile functions out there. It can show/hide panels, minimize, maximize, change layouts. It can do nearly everything we want it to do.
It's string consists of:
$textbutton(X,Y,WIDTH,HEIGHT,TEXT,MOUSEOVER TEXT,COMMAND,ARGUMENTS,MOUSEOVER ARGUMENTS)

In example, if we want to make a button that opens up preferences, we can write a string like this:
$textbutton(0,0,100,20,Preferences,Preferences,Command:File/Preferences,fontcolor:0-0-0,fontcolor:255-0-0) 

When we move our mouse over this button, it will change color to red. And of course clicking on it, will open up prefs.

//Notice
We can control font size, type and face with one simple string.
$font(FONT FACE,SIZE,TYPE)
FACE - is a name of our font e.g. Calibri Bold Caps
SIZE - controls size :) (Smile)
TYPE - controls if our font is normal, bold or italic.

And again, it's visible here:
Textstrings by slowboyfast



4. Combine


    To make some decent looking themes, we need to combine those drawing functions. It's similar to using layers in graphic apps, only instead of "WYSIWYG" interface we're on our own with lines of code. 
Combining, or as I like to call it - layering, occurs when we put a shape over other shape. In foobar, it may be a little awkward since topmost layer is always closer to the bottom. Everything we write last will be put on top of other things. Look at this two rectangles below.
L1 by slowboyfast

In this case, cyan rectangle (layer 2) is our top layer. Look what happens when we switch layer 2 (cyan) with layer 1 (magenta).

L2 by slowboyfast

Since magenta rectangle is now closer to the bottom, foobar will treat it as topmost layer. This technique can be used to achieve pretty nice effects. Let's say we want to make a simple looking art viewer for our skin. We should start with drawing a rectangle:

$drawrect(41,6,168,168,100-100-100-255,)

Albart1 by slowboyfast

Then, we wan't to put a smaller and a bit darker rectangle over it. It will create a thick border.:

$drawrect(43,8,164,164,60-60-60-255,)

Albart2 by slowboyfast

Next, we should use artreader function to display our artwork:

$imageabs(44,9,162,162,%path%,artreader nokeepaspect,)

Albart3 by slowboyfast

Looks ok, but it's a little bland. Let's make our cover a bit lighter on top:

$gradientrect(44,9,162,50,255-255-255-80,0-0-0-0,)

Albart4 by slowboyfast

Looks even better. We should add a little shiny effect in top left corner for good measure:

$gradientrect(44,9,1,162,255-255-255-150,0-0-0-0,)
$gradientrect(45,9,161,1,255-255-255-150,0-0-0-0,horizontal)


Albart5 by slowboyfast

There's still something missing here. We should add a shadow to make it complete. To do this, we have to move all our code a notch to the bottom and write a $drawblurrect function:

$drawblurrect(40,6,170,169,0-0-0-100,2)

Albart6 by slowboyfast



And that's it. That's how we draw stuff in foobar (or at least in PSS). 

This part is still incomplete (mostly because of my work, I don't have much time lately) but I'll add more. I just want to share this little starter guide. Hope it helps all those people who are new to f2k. Cheers! ;) (Wink)

To do:
  • describe $drawstring
  • control height and width with %_width% & %_height%
  • insert images with %imageabs
  • make some efficient global settings with $puts
  • $add, $sub and $div or simply add, substract and divide
  • floating panels (POP-UPS!)
  • retractable panels
 Foobar7 by Markkoenig 

    This is the re-uploaded version of "How to Skin foobar2000 Part 1" projects. All credits belongs to Markkoenig (the original poster).

    I've been asked to write a tutorial on skinning foobar2000, because many f2k users encounter difficulties modifying skins or simply using them. I'm not an expert on the subject, I've started by installing a few skins and trying to understand how that worked ; I still think it's the best way to get a good handle on it, though a long and sometimes frustrating way. I invite you to try and see by yourself, to keep in mind that errors come all along and to share any advice, question, difficulty or anything you want to say, may you be new or expert. I also recommend to read this good tutorial (though it's partly based on outdated PanelsUI), maybe this less developed one, some of the very useful HydrogenAudio's forums and the few links I'll drop here.

This first part intends to be an overview of the whole thing ; a second part made by slowboyfast will guide you through a step-by-step on how to create graphic elements only with foobar2000's drawing functions ; and a third part by FlipOut69 will propose detailed presentations of some customization functions. If you don't want to go too far into skinning and are okay with the standard interface, the first link hereabove might satisfy you, specially CUI's specific options. Now if you're ready, let's hop in! :) (Smile)



The tutorial

Part 1 by Markkoenig :iconmarkkoenig: : The Basics

 Part 2 by slowboyfast :iconslowboyfast: : Composition & Graphics

 Part 3 by FlipOut69 :iconflipout69: : Creating Panel Switchers

Part 4 by FlipOut69 :iconflipout69: Avoiding truncated Panels

Part 5 by FlipOut69 :iconflipout69: Elements Relative Position and Size



Recommendations


  • Always keep your components up-to-date, unless it may cause compatibility issues.
  • When installing a skin, check the version of foobar it's been designed for. Avoid installing old skins on current foobar versions and vice versa.
  • Backup your files if you're not sure of what you're doing ; export or copy your working scripts when you're about to take risks.
  • I personnally recommend to install skins in fresh foobar2000 installations to avoid compatibility issues between different versions of a component (WSH Panel Mod in particular). That being said, if you've checked the components and their version and there's no conflict, you sure can install several skins on a single foobar2000. Beware the updating of components, which can disable a part of or the entire skin ; however it doesn't happen a lot 'cause AFAIK no component is currently under development.
  • I mostly use portable installation instead of normal installation, for it's easier to install skins into and you can multiply your foobar2000s as much as you need, knowing that there will be no conflict of any sort (no need to update anything or to have two skins aside). Just copy the core files (database etc.) from an installation to the other to keep your library and media player settings.
  • If you're good at coding and you're not too ambitious, you can stick with foobar2000's code to create graphic elements. Otherwise, you can decide to use Photoshop or Gimp or any other program to create images that you'll assemble using Panel Stack Splitter.



Useful links




Installation


Installing a downloaded skin depends on :

  • Its complexity. The use of certain components might require new folders, system files, etc. Look out for instructions on skins' description.
  • The type of foobar2000 installation.
    • On a portable installation, just throw everything in the installation's folder.
    • On a standard installation, the typical process is to put the skin and the component in foobar2000's main directory, whereas the configuration files go to C:\Users\[you]\Documents\AppData [hiddenfolder]\Roaming\foobar2000\configuration. Some components manually installed may be situated in ...Roaming\foobar2000\user-components folder. Again, it's rarely that simple.

Wether you want to install or create a skin, remember that the common use is to create a "skins" folder in foobar2000's directory, where one puts the skin files.



Default UI


Foobar2000 comes with a default interface (DUI) that is easy to customize but very limited. It works perfectly and is very fast, but its features are quite limited to changing fonts, colors, stock elements, their position and their size. You access its parameters the first time you run foobar2000, and later either in Preferences/Display/Default UI or in [toolbar]/View/Layout/Enable Layout editing mode. In Prefs/Display/Default UI/Playlist View, you can add custom columns and grouping schemes using foobar2000's Title Formatting. Using the View/Layout/Enable layout editing mode command (under CUI, it's View/Layout/Live editing), you'll be able to choose and move the UI elements within the player's window. All the elements are on the same layer, placed side-by-side ; to put several elements at the same place, you have to add Tab Stacks (Enable layout editing mode, then right-click on the UI element and "Add splitter"/"Add panel").



Columns UI + Panel Stack Splitter


To really enhance your foobar2000 UI's experience, you have to use the Columns UI component, better combined with Panel Stack Splitter. All by itself, Columns UI won't offer many more possibilities. There used to be a few other components but they are outdated and no longer supported (Panels UI for example).

To edit in Prefs/Display/Columns UI, CUI allows you to organize the elements more freely using splitters to divide the window's space. There are six tabs in CUI's preferences page :

  • The Main tab is where you import and export .fcl files and edit the window title string.
  • The Layout tab is where you edit most of the graphic UI stuff, that's where we're gonna spend a load of time.
  • The Status bar tab allows you to edit the bottom status bar which displays technical information. It's rather often deactivated anyway.
  • The Notification area is also self-explanatory, it controls (optional) tooltip and tray icon options.
  • The Filter tab is only useful when you use the Filter tabs element.
  • And the Artwork tab is useless, for we use much more efficient artwork components or methods.

PSS allows the interface to be organized by panels rather than horizontal or vertical splitters as in DUI and CUI alone, and according to a hierarchical pattern : one or a group of elements can be assembled on one part, which can be displayed alongside or submitted to others. This way, you can have different parts in your skin behaving differently. And it is able to run scripts by itself. Instead of stand-alone elements separated by visible frames, PSS can combine multiple elements on one panel, with or without frame. The elements on a panel can thus behave differently than the panel itself, managed by Columns UI. Though it may seem a bit messy, it offers way more possibilities than the tabs system of DUI.

The Layout

So let's talk about this Layout tab. First thing is to erase whatever element is here by default (NG Playlist normally) and to insert an horizontal or vertical splitter as a base, or a PSS (right click/insert). Then all you have to do is adding elements and/or panels according to what you need and to the way you want to organize your skin. Let's look at this example below. The upper Splitter in the Layout tab is the main splitter, it's the general "background" of the skin, though it's displayed first in the list it's the lowest of all ; but every submitted element is listed from top to bottom, as it is on the actual skin. Remember that any element called in a PSS script is overpassed by the element(s) this PSS is running. The hierarchy is to be set in this same Layout tab, by right-clicking on the elements and selecting "Move up/Move down" ; the presets menu allows you to store several organizations in the same .fcl. Technically, one can create multiple and totally different skins and store them in a single .fcl file. The panels and elements can be edited by selecting the main Panel Stack Splitter and clicking "Configure" (you could also directly select the panel or element you want to edit, but I often observed that it causes the hierarchally upper element to reset).

Here on Monolite Flat, you can see that the elements are organized one above the other. The waveform seekbar is the lowest component above the first/main Panel Stack Splitter, which runs the prev/play/pause/next buttons (that's why you don't see them in the list, they're in its script) ; then there is another PSS above, running the Library Tree, then the ELPlaylist which is submitted to the main PSS, etc. until the toolbar buttons, the upper elements of the skin. See the second screenshot, it should be clearer.
3 by Markkoenig
The WSH elements are gathered on one panel (the black one) and though there are 3 of them, two other components just nearby and 3 buttons on the first PSS, it all seems united and consistent.

2 by Markkoenig
So the first important thing to think about when one is designing or modifying a skin is its organization. The overall structure is ruled by "layers" assembled in hierarchy, in which you add and dispose panels of various sizes, in which you place one or several UI elements. To add panels or UI elements, right-click on a splitter in the Layout tab and choose "Change splitter type" or "Insert panel".

The Coordinates

Once you click "Configure", the PanelList tab shows the current UI elements (PSS or components) that are submitted to (or managed by, if you want) the PSS you are currently editing. The elements are listed from top to bottom, meaning the first one is on the top layer, the last one on the bottom layer ; you have to take this into account if one panel or element is supposed to cover the other(s). Tick "forced layout" to allow panels and elements oversizing each others and other tricks. You can use TF to edit values, which would be much more practical. For example, coordinates set by numbers are okay to set an element's position (x,y), but it may be wiser to use a TF value like %_width% (returns the windows' width) if the window must be resizable. Choose one or the other, depending on the case. Ticking "ignore panel size limits" allows you to arrange elements out of their panel's limits. "Hide panel on startup" should be used when you have a button to make the element appear. Be careful when editing those, quite often you don't see the element you just placed, cause it's out of range or hidden under another element.

4 by Markkoenig

Everytime you are done with editing one of these dialog boxes, hit "Apply". You will notice that when you hit "OK", you can't edit hierarchally previous elements : the dialog box is empty. You have to validate the whole modification by hitting "OK" down to "Apply" on the Layout tab before you can go back editing PSS and elements.

Colours and Fonts

Just like in the DUI options page, you can edit the colours and fonts of both stock foobar2000 UI and some third-party elements ; assuming you haven't set them already (using scripts for example). Some third-party components allow you to access their UI preferences both by right-clicking in it and by using this menu.

5 by Markkoenig



Scripts


The other important aspect of f2k skinning is the use of scripts in order to customize how a UI element works and/or is displayed. Scripts rely on a syntax called Title Formatting (TF) that I recommend you learn to handle (see the links above). Multiple display options and stock components of foobar2000 use TF : the window title, the status bar, the notification area, the columns playlist, the metadata display, etc. ; as well as several components among which Panel Stack Splitter, ELPlaylist/NG Playlist, LibraryTree, etc. TF may be quite easy, on the other hand it is limited in its possibilities. If you are ambitious, you might prefer switching to JavaScript through WSH Panel Mod (see below).

NG Playlist

Its display options are to be found in Prefs/Columns UI (or DUI)/Playlist View or by right-clicking on one of its column titles/Preferences.

ELPlaylist

Its display options can be found in the Prefs/Columns UI/Layout tab or by right-clicking anywhere in it/Settings (if you do so, remember to save your skin in .fcl or any other modification applied will reset ELPlaylist to its last saved settings, due to some sort of priority conflict). ELPlaylist's modifications are divided into two sections :

  • what is true for the entire element : Style, Field definition, Behaviour and Misc tabs ;
  • what is true for one script at a time (ELPlaylist can host multiple scripts, i.e. multiple custom library displays, which you can switch between) : Script and Grouping tabs.

Now let's take the tabs one by one. Remember there's a manual that explains everything (but in a very poor english). And notice that the scripts are run from top to bottom : for example, if you want to display a text string in front of a background image, make sure the image is called before the string ($imageabs... and later $drawstring). Again, taking a look into other people's work is very useful.

  • The Script tab is where you... write scripts. Track list refers to the library track list of your music : this is where you display informations like title, length, track number, etc. Group header is also self-explanatory. As for the track list, you can display a hell lot of things in many ways using forms, colors, pictures, etc. Those two sections are updated everytime there is a track change or an action from the user (adding files, refreshing, etc.). Per Second is updated every second (+ go to Behaviour tab and tick "update every second") ; you can make a progress bar or display sliding informations, etc. Popup (Background) and Popup (Track) can be used to display info within a popup when the cursor stays over a track ; this option's settings are in the Misc tab.
6 by Markkoenig
  • The Style tab gathers the main display options for the entire UI element, as well as a few ones that can impact the track list. You can choose a custom default font, or directly edit it the scripts ; you can use multiple fonts and if you edit fonts in scripts, they will overpass this custom default font. You can edit odd and even items background to have an "iTunes look", but you can do it in the scripts as well. "Enable Visual Style" was designed for Vista and doesn't seem to be of any use. "Pseudo-Transparent" background however can be interesting, but we'll come back later on the topic of transparency.
7 by Markkoenig
  • The Grouping tab sets the way your playlist viewer is organized. Group by allows you to name and store several grouping formats (such as Artist/Album, Albums only, tracklist sorted by artist, title, length, year, etc.) that you can access in the context menu ("Group by"). These options use TF. Group format refers to the way tracks are gathered, Sort format to the way tracks and/or groups are listed. Row height is the height of a single track line. Playlist Filter allows you to filter the library when using this particular grouping format ; i.e. you can have a grouping format called "Genre" where the tracks are filtered by genras. Finally, Associated titleformat script name allows you to link one particular grouping format to one particular display script (assuming you have given your script a name in Script tab/"Titleformat Script Presets"), that will automatically be activated when you activate this grouping format.
8 by Markkoenig
  • The Field definition tab stores values that you don't want to repeat everytime it's needed in your scripts. Instead of writing a color value like 245-145-93-125 or a long path twenty times in your script, you can store them here and use the $get function.
9 by Markkoenig
  • The Behaviour tab allows you to edit what happens when you interact with ELPlaylist.
  • The Misc tab refers to the popup feature.

Panel Stack Splitter

It works just the same way with scripts. When you are in a Splitter Settings dialog box, there are four tabs (see above for PanelList tab).

  • The Script tab allows you to use TF, just like in ELPlaylist. "PerTrack" will react on track change, "PerSecond" will be updated every second. This is where you can create text strings, buttons, display info, display images (graphic UI elements, background, artist pic, covers�), etc. ; see TF links for the possibilities. There is no complexity limit to your design, but keep in mind that the more elements the stock UI engine of foobar2000 has to create, the slower it will start and run. If you plan on creating a heavy and very complex skin, it can be wiser to switch to JScript.
  • The Behaviour tab rules the behaviour of the panel.
  • Global Variables is the equivalent of "Field definition".

You can submit as many PSS as you want to each others. If you select a component in the PanelList and hit "Configure", it will open its Preferences window ; sometimes this feature isn't available.

WSH Panel Mod

It's an extremely powerful component that simply host scripts in JScript or VBScript language. Almost anything is possible with it, far beyond TF's possibilities : you probably have seen some of Br3tt's work already. What's hard here is that you have to know JScript, or, as I'm doing so far, you can copy other people's scripts and modify them as far as you understand. A few samples are included in the component's package though. WSH Panel Mod is quite the key to an impressive skin.



Syntax basics


You probably won't write the syntax fluently right from the start, specially if it's your first contact with coding. It takes some time and -let's be honest- some endeavour to memorize sentences/functions, to avoid forgetting stuff and to get a good handle on the syntax' possibilities. Basically, the syntax used here is divided into two categories : values/field references and functions. A value or field reference is an information (size, position, color, opacity, metadata, count, etc.), a function is an action that is processed whether once-and-for-all (for example when starting foobar2000), at a specified moment (on track change...) or when you call it (by clicking on a button...). So generally speaking, a script is no more than a "find information, then call the action" process developped and multiplied. Thus, when you want to write a function, always make sure you bring the required information, or you might confront a crash or a big nothing and want to bang your head till you find the error. So we're gonna see the basics of understanding and organizing a script. Let's take a few examples.

We are in the Script tab of the first PSS. On this very simple script, I called a few graphic elements, some drawn, the others based on pictures ; some static, others dynamic.
  • In yellow is a basic information provider, the directory of the images used in this script. The $puts function allows you to store an information/value under a name, so that it's easier to call all along the script. Here I named 'skin_path' the whole information that is the path, '%ps_foobar2000_path%\skin... etc.' ; so below, in the blue zone, I just need the $get function to call this value and then finish the path of the picture : $get(skin_path)\play.png.
  • In the pink zone I drew the background of the toolbar and the slight grey border beneath. As the script runs from top to bottom, I drew the light grey background first ; then I added a gradient, and then the border. As you can see, I use both numerical and dynamic values. The dynamic values, may they be numerical values like here or metadata (like track tags), are called with %...% (whereas functions are called by $...). Here I wanted to set a background that fits the window's width even after resizing, so I called the value %_width%, which is relative and constantly updated.
  • In the blue zone, I drew the playback buttons. You can see a very common use of the $if function (or $if statement) which allows you to set various actions depending on the state of a value or a component : it works like $if(thisvaluereturnstrue, dothisaction, otherwisedothat). This is where the syntax begins to be more complex. This function here rules the play/pause button, which won't react the same way whether there's an ongoing playback or not. To avoid drawing two simple buttons side-by-side, I have to use $if to call alternatively two different buttons at the same place : if playback is going, "pause" button is displayed, if not, "play" button is displayed.
11 by Markkoenig

Now let's have a look at the ELPlaylist scripts, on another skin. CUI, PSS and ELP (and some more) use the same syntax, but there are function that don't work on some panels and/or some components for obvious reasons of inconsistency. By the way, as you can see on the screenshots below, I often tidy my script up so it's more convenient to read.
  • So first, in yellow, are the stored values I already told you about. I could have put them in the Field definition tab, but I like to have them constantly under my eyes. Your call. As you can see, I'm using the $if function into the $puts function : that means that the stored value called 'text_color', for example, will change whether the track is playing or not, is selected or not. This way, if you just want the text color to change according to the track state, doing this will prevent you from typing "$if(%el_isplaying%, then all the $drawstring, and if not, use this other string", which is very much longer : instead, you type one string and only the stored value changes once. The important thing here is to keep in mind that most of the functions can be combined and articulated to obtain complex results (or simpler ones for the rest of the script). You can also notice the ')))' at the end of the 4th line : the more functions you combine, the more parenthesis you'll have to remember.
  • In the "BG" zone, I set the "iTunes look" (/!\ not talking about the overall dark background : that background comes in a more global canvas. Here the ELP's background is transparent). To obtain the odd/even background effect, I used the $ifequal and $mod functions to activate the odd background when the result of [index number of the item in the group] divided on base 2 = 1, i.e. every other track ; instead of using fixed values like $if(%el_item_index%,$or(1,3,5,7, etc.)).
  • Same trick in the blue zone to add rectangle layers when the item is selected or playing.
  • In the green zone are listed the metadata to display on the item row. The $font function lets you set the font, size and type you want (N.B. : the $drawstring function only works with TrueType fonts ; otherwise, use the GDI renderer with $drawtext/$drawtextex, that can use both OpenType and TrueType). Then I add one string per data, but you can display as many metadata as you want on a single string.
  • Same thing with the indicator, for which I used a special font.
  • For the rating indicator (invisible here), I used $pad and $repeat according to the rating metadata to display the right number of characters side-by-side.
  • Eventually, I told ELPlaylist to add a shadow effect (gradient) on the item which index number equals the total number of items in the group, i.e. the last item of the group.
12 by Markkoenig
13 by Markkoenig
So here are some examples on how to organize a script and combine functions on complex syntaxes. Now let's sum up the main and important rules.
  • '//' disables the line.
  • Be careful when combining functions, you need to have the correct number of '(' and ')', and generally speaking watch your typing, any missing coma will disable or mess up the whole rest of the script. When you write a sketch, use tabulations instead of straight lines to see clearly what you're doing.
  • It's better to plan what you want to do before doing it, in order to decrease the risk of errors and sterile wanderings.
  • Always prefer relative and dynamic values over fixed/numerical values when you can use both.
  • Think of every data you need before calling the function.
  • The script is run from top to bottom, so organize it wisely.
  • Create or modify one thing at a time so as to quickly find the bug.
  • When you combine several functions, remember that the deepest function will be called first, and the other(s) above in this processing order. If you write $if($add($div($get(..., f2k will first get the value, then divide, then add and finally check if it returns true or false. Sometimes it's not the case : a single $if is very simple, for the process will be 'if[value]=true, then apply this, otherwise apply this'. So you have to think in terms of priorities.
  • If you can't find a function to do straightly something you need, there's almost always a way to go round.
  • Write the script in its appropriate component/tab.
  • Simplier is always better.


Transparency


Transparency in skinning is a very nice feature, sometimes a pain to handle though. There are various options to get transparency :

  • In Columns UI "Main" tab, the box "Use transparency" applies to the whole window. I used to use it with DUI, black background and white font, I could have something... but that's pretty much all.
  • In the Splitter Settings/Behaviour tab, the box "Pseudo Transparency" allows a background set in the Script tab to appear through an element. It won't let you see a component placed under.
  • Some components have a transparency feature (ELPlaylist, Lyrics Show Panel 3, Biography View, Channel Spectrum...) which may work different ways.

To sum up with, the default transparency feature lets the panel background appear through the component ; I guess that's why they're often labeled "pseudo transparency". It may be a bit difficult to build complex transparency-based skins with the default feature, you may have to find tricks. Otherwise, there are two external means :

  • Again, JScript can apply transparency (almost) anywhere.
  • The other and easier means to obtain transparency is the UI_Hacks component, which hasn't been approved by foobar2000 creators and is often flagged as buggy and/or Trojan (because of its name). I personally never had any problem with it. It provides true transparency, so that you won't see any background but your Windows desk or any program running behind. You will find its option in the Prefs/Default UI/Main Window tab. From here you can :
    • Modify or disable the window frame.
    • Modify the window's behaviour, lock it, disable its resizing or edit a specified size.
10 by Markkoenig
  • And what's interesting here, add various transparency modes. "Disable" disables Windows' Aero effect (provided you're using it). "Glass Frame" replaces Windows' default frame with one that you can edit with the values below. I used this mode in Lux to have a selective blur. "Sheet of glass" seems to activate a selective and blurred alpha transparency based on the colors' weight : a dark or solid color won't be affected whereas a light color will be affected by the transparency. Apart from these modes, the box "Alpha transparency" allows you to apply transparency to the whole window : selecting "Disable" and ticking "Alpha transparency" will make the window totally transparent but will leave the frame solid, unticking it and choosing "Glass Frame" will leave the background solid, etc. Don't forget that these transparency features depend on Aero's availability. If you're using visual styles that disable Aero, you might obtain slightly different results. Moreover, some fonts and antialiasing/ClearType don't like alpha transparency, so you might sometimes experience ugly renderings.
Snap19 by Markkoenig



    Well I guess that's it for now. Hoping you'll have a better understanding of the core of foobar2000 skinning, before reading the next parts. Feel free to comment and share, and to ask any question ; I'm open to suggestions and corrections/addenda. Let's do some skins! :) (Smile)

Read other parts:


Elements Relative Position and Size


A by FlipOut69


If you already using my Jam, you can easily see on Collection interface that album browser (center panel) starts from 3 columns on default size (1200px x 600px)
and goes up to 7 columns on 1920px x 1080px. Also the ELPlaylist (right panel) goes from 373px (1200px x 600x) to 493px (1920px x 1080px).
With this tutorial you can also use codes to distribute additional width and height of your current window size to your liking.

Components Required
Columns UI 
Panels Stack Splitter 
UI Hacks

1. First of all, install foobar on portable mode, select Columns UI when you open foobar2000.

1 by FlipOut69

Then go to preferences -> Display -> Main Window -> set minimum size to 500px x 500px (It's important to set the minimum size of the window) -> apply
Resize your current window size to 500px x 500px . You can also configure frame style from Main Window, I prefer to hide it (No Border).

B by FlipOut69


2. Go to Preferences -> Display -> Columns UI-> Layout tab -> remove Vertical Splitter and NG Playlist then add Panel Stack Splitter. Click Apply

C by FlipOut69


Remove all panels on top (Playback buttons, menu, etc) and bottom (status pane) so there's no panels left.

D by FlipOut69


3. Let's start with creating 4 rectangles, Right-click on any area -> Splitter Settings -> Script tab -> copy-paste these codes:
$drawrect(0,0,250,250,255-0-0,)
$drawrect(250,0,250,250,0-255-0,)
$drawrect(0,250,250,250,0-0-255,)
$drawrect(250,250,250,250,200-200-200,)
E by FlipOut69


With these codes, each rectangle has 250x width and 250px height, but if you stretch the window wider on higher, those rectangles didn't get additional width and height,
that's normal because they are on fixed size.

4. Delete codes in step 3 and replace it with these:
$drawrect(0,0,250,250,255-0-0,)
$drawrect(250,0,$sub(%_width%,250),250,0-255-0,)
$drawrect(0,250,250,$sub(%_height%,250),0-0-255,)
$drawrect(250,250,$sub(%_width%,250),$sub(%_height%,250),200-200-200,)

*%_width% and %_height% are variables to measure the width and height of foobar2000 window. Right now (on default size) it has value of 500.

F by FlipOut69


With these codes, the green and grey rectangles gets wider if you widening the window, also the blue and grey rectangles gets more height if you drag the window higher,
but the red rectangle size remains the same.

5. The idea of this tutorial is that, when you drag the window wider and/or higher, you can distribute the additional width and height to your elements (at least 2 elements and e.g. rectangles on this tutorial)
Let's create 2 variables to measure the additional width and height of your window size, then divided them by two :

$puts(RelPos_X,$div($sub(%_width%,500),2))
$puts(RelPos_Y,$div($sub(%_height%,500),2))
*RelPos stands for relative position

Delete codes in step 4 and replace it with these:
$drawrect(0,0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),255-0-0,)
$drawrect($add($get(RelPos_X),250),0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),0-255-0,)
$drawrect(0,$add($get(RelPos_Y),250),$add($get(RelPos_X),250),$add($get(RelPos_Y),250),0-0-255,)
$drawrect($add($get(RelPos_X),250),$add($get(RelPos_Y),250),$add($get(RelPos_X),250),$add($get(RelPos_Y),250),200-200-200,)
G by FlipOut69


With these codes, ALL rectangles gets more width and height if you resize the window to a wider or higher size. RelPos (X & Y) measures additional width and height and distribute it to our rectangles.
On default size (500px x 500px), '$add($get(RelPos_X),250)'and '$add($get(RelPos_Y),250)' equals 250px, but when you resize your window, say 1000px x 1000px, those 2 variables has value of 500px (250 + width/height - 250 then divided by 2)

6. Now that you already distributed addditional width & height by two, you can for example, distribute it by six (1 element gets 5/6 of additional width or height and the other element gets 1/6).
Just add another two RelPos:
$puts(RelPos_X2,$div($sub(%_width%,500),6))
$puts(RelPos_X3,$mul($get(RelPos_X2),5))

Then replace these codes:
$drawrect(0,0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),255-0-0,)
$drawrect($add($get(RelPos_X),250),0,$add($get(RelPos_X),250),$add($get(RelPos_Y),250),0-255-0,)

To:
$drawrect(0,0,$add($get(RelPos_X3),250),$add($get(RelPos_Y),250),255-0-0,)
$drawrect($add($get(RelPos_X3),250),0,$add($get(RelPos_X2),250),$add($get(RelPos_Y),250),0-255-0,)

*The red rectangle gets 5/6 of additional width, and the green rectangle gets 1/6 of additional width)
H by FlipOut69


You can change rectangles on this tutorial to any elements (i.e. panels) of your skin, the theory is same.
Hope this helps!

Comments


Add a Comment:
 
:iconslowboyfast:
slowboyfast Featured By Owner May 6, 2014  Professional Interface Designer
Hola Seņor Flip! Thanks for the :+fav: on rumianekk for f2k!
Reply
:iconflipout69:
FlipOut69 Featured By Owner May 11, 2014  Hobbyist General Artist
You deserved it bro :)
Reply
:iconmarkkoenig:
Markkoenig Featured By Owner Nov 29, 2013
Thanks for the :+fav: on Nightshift, mate! :)
Reply
:iconflipout69:
FlipOut69 Featured By Owner Nov 29, 2013  Hobbyist General Artist
Well deserved, bro :)

Hey check for my note in the next few minutes, there's something I want to talk about regarding this skin ;)
Reply
:iconmarkkoenig:
Markkoenig Featured By Owner Nov 29, 2013
Thanks ;) Waiting for the note.
Reply
:iconorphydian:
Orphydian Featured By Owner Nov 25, 2013  Hobbyist General Artist
flipout69.deviantart.com/art/J…


sent request for them in my metro group metrofoundry.deviantart.com/

you are also warmly invited to join !

keep our group in touch with other WIP

Reply
:iconeikichionizuka69:
eikichionizuka69 Featured By Owner Nov 24, 2013
om :3
Reply
:icontessieart333:
tessieart333 Featured By Owner Nov 20, 2013  Professional Digital Artist
Thank you for stopping by my page!  Really appreciate it:-)

_Tessie
<3
Reply
:iconslowboyfast:
slowboyfast Featured By Owner Oct 23, 2013  Professional Interface Designer
Thanks for the :+fav: bro ;)
Reply
:iconmarkkoenig:
Markkoenig Featured By Owner Oct 22, 2013
Thanks for the :+fav: on How to skin foobar2000 dude :D
Reply
Add a Comment: