4chan /w/ Foobar2000 FAQs and Info

	      This information is an expansion of the 4chan /w/ Desktop Customization Info page
					http://pastebin.com/W0SsUtEH

I feel that the first bunch info should be aimed directly at twnsnds popular foo_ncmpcpp_mod (http://twnsnd.deviantart.com/art/foobar-ncmpcpp-mod-289083149). So many people use it, its silly not to. I've used the updated .fcl from his deviant page for testing. I've explained each element in as much detail as possible, with links to images if I find necessary so there is no confusion. Each question may have several "sub questions" and answers as a result. These questions and answers will be tagged as "SQ" and "SA"

Most of the other information (in regards to GENERAL foobar knowledge) is already heavily documented at Hydrogen Audio's Wikipedia page, and I see no reason to relay any information that may be posted there unless questions arise. Their forums are also a fantastic resource for beginners, and home to the official Foobar2000 forums.

Any questions not answered here or on 4chan may be answered already on the forums. Register and search!
!*!*! https://gist.github.com/twnsnd/2000446 <<< READ ME FOR foo_ncmpcpp_mod !*!*!
!*!*! http://www.hydrogenaudio.org/forums/index.php?showforum=28 !*!*!
!*!*! http://wiki.hydrogenaudio.org !*!*!

/!\ CTRL+F To quick search text /!\

Catalog:
@01 - foo_ncmpcpp_mod color changing
@01a - foo_ncmpcpp_mod customization, continued
@02 - Channel Spectrum Panel in detail
@03 - Title Formatting
@04 - An Introduction to ColumnsUI
@04a - Changing Layouts: A How To.

@01***foo_ncmpcpp_mod color changing***
Q: So, how do I change the colors?
A: There are several elements to this skin, and as a result of that there are several different places you need to visit in order to completely edit the colors. Before I explain, lets gather an understanding of colors and their codes.

SQ: What are the color codes, and how do I identify them?
SA: The colors are coded in RGB Decimals(http://en.wikipedia.org/wiki/RGB_color_model) for the majority of this script. The best way to search for these codes is to use colorhexa.com. Click the box on the left of the search bar, and look for a color you like. When you are finished, find the RGB Decimal value on the page and replace the entry for the element you want to change. The entries on the skin will be shown as "219-149-229" etc. Instead of entering the value with commas as listed on the website, replace the numbers between the dashes. The number values range from 0 to 255, Black being 0,0,0 and White being 255,255,255.

-For the top info pane (http://www.gbgl-hq.com/demoness/foo_info_1.png)-
A: Right click the track information all the way at the top (or in that area) and go to Splitter Settings. Click the "Script" tab. You should see the colors listed/commented with their variables below them. Change as desired. Click apply when finished.

-For the ELPlaylist- (http://www.gbgl-hq.com/demoness/foo_info_2.png)
SQ: What is the ELPlaylist?
SA: http://tinyurl.com/caxpmuw

THIS INCLUDES THE FOLLOWING ELEMENTS:
Album
Album Artist
Year
Track Number
Track
Length
Track Selected/Now Playing highlight
Border/Divider line between sorting.
Backgrounds

A: Right click the playlist and select Settings. You should see ELPlaylist Settings on the title bar. Ignore the scripts for now, and visit the Field Definition Tab. Here is where all the values %LIGHT COLOR%, %DARK COLOR%, etc, that you see in the scripts are defined. They are listed as LIGHT.COLOR.1, LIGHT.COLOR.2, etc. Double click on the field name you want to edit. DO NOT CHANGE THE FIELD NAME. Replace the Definition with the RGB color value you want. You can find out which color changes what by viewing the Tracklist Tab, and Group Header tabs. It will take some searching, and if you aren't sure what you are looking for its easier to just apply changes and find the results that way.

-For the Seekbar/Progress Bar-
A: Right click the seekbar/progress bar. Select Configure (Here the scripting is done using the WSH_Panel_Mod plugin, which allows you to code with java or visual basic scripts). If you haven't already figured it out, the values you're looking to edit are "progress" and "proghead". Change the RGB color value as desired. Here you can also change the background and frame colors for the seek bar if you want too. I advise against editing any other values in this area, as you can crash the script and stop if from functioning.

-For the Volume (green numbers as seen in http://www.gbgl-hq.com/demoness/foo_info_1.png)-
A: Same as Seekbar/Progress bar pretty much. Right click it, configure, and find the color/frame color. Edit RGB as you please.

-For the Backgrounds-
A: If you want to create one solid background color, you have to visit three separate areas. The first will be in splitter settings. Right click the top portion of the skin and go to the Behavior Tab. Custom Background color should be checked, click the "change colour" button to pick what color you want. Navigate to the Script Tab. Under //-- BACKGROUND there is an RGB value you can edit to change the lines / background under the time remaining and border around the other play settings on the top right. Then right click where your volume is displayed in the top right corner again, and click configure. Edit the "framecolor" rgb variable. Do the same for the seekbar. The "frame" variable applies to the lines/squares hashed throughout the bar. Edit the "background" variable for the main color.

-Borders and Border color-
A: Borders are dependent on your current visual style. You can disable borders using the ui_hacks plugin that comes packaged with the skin. Under the Main Window menu option in preferences, check "disable window sizing" in the right pane and click apply. (Fun fact: you can still resize the fb2k window with any AHK tiling script even if window sizing is disabled)

-Channel Spectrum Panel-
A: Right click > Config like the rest. Self explanatory.
For more details and a breakdown of the Channel Spectrum Panel, visit section @02

***Other Elements***
The rest of the colors are determined directly through ColumnsUI. This includes the Playlist switcher, Artwork view, Biography, etc. You can find a drop down menu and color boxes with descriptions under ColumnsUI>Colours and Fonts>Colours. Some font colors may still be determined by global variables defined in ELPlaylist or other parts of the script depending on the area.

@01a***foo_ncmpcpp_mod customization, continued***
Q: How do I remove the album art on the left side? How do I edit its size(etc)?
A: To completely remove your album art on the left margin, go to your ELPlaylist settings(right click>settings on your playlist). Go to the field definitions tab. Double click the ALBUM.ART entry, and change 1 (true) to 0 (false). If you want to change the art size, double click the ART.SIZE entry and edit the value (pixels) there. Changing the ART.KEEPASPECTRATIO entry from 1 to 0 will size the art to its original aspect ratio instead of keeping it perfectly square. The ART.MARGIN value represents how many pixels from the left the art is positioned.

Q: How do I get the Channel Spectrum Panel (Visualization) to show under/above my ELPlaylist?
A: Go to Preferences (CTRL+P) > Select Columns UI > Select Layout Tab. Find the Panel Stack Splitter that is over the ELPlaylist, and right click > insert panel > channel spectrum panel. Make sure it shows up directly under ELPlaylist. Click apply, and it should show up on the right side initially. Left click the same Panel Stack splitter you inserted the visualization to so its selected, then click configure button on the bottom right. Select Channel Spectrum Panel, and find where it says Panel Placement Mode near the bottom. Change it from Horizontal to Vertical. I also recommend changing the size value from 100 to around 25 to start (You can go back and change this later). Click apply in that window, then apply again in the preferences window for it to show properly in the main window. If you want the spectrum to be on the top or the left, change the order it's in in the layout tab. Right click the Channel Spectrum Panel under your ELPlaylist and click "move up" then apply. It should bump it to the top if the panel is set to Vertical, or the left if the panel is set to Horizontal. Exit preferences. You can then configure the colors/edges/rotation/etc of the panel to your liking by right clicking the spectrum and selecting configure. For more details/information see section @02.

Q: How do I remove/add a scrollbar? (On ELPlaylist)
A: In your ELPlaylist settings, visit the Style tab. Near the bottom you'll see Scrollbar: with a drop down menu. Select hide to remove it, show or "default" to have it visible again.

@02/SA: Configuring Your Channel Spectrum Panel - Detailed.
-Foreground 1-
The main color shown in Simple color mode. The center color shown in Horizontal color mode. The top color shown in Vertical color mode.
-Foreground 2-
Not displayed in Simple color mode. The color the blends from the left and right edges in Horizontal color mode. The color that blends from the bottom, upwards in Vertical color mode.
-Background-
The background color.
-Peak-
The dot/dashes that hop at the top of the visualization. You can disable this by unchecking "show peak".
-Fall Speed-
The rate at which the peaks fall, 1 being the slowest and 100 being faster/fastest. Recommended to be kept at the default of 10.
-Refresh Interval-
The refresh interval is the number of seconds at which the visualization will try to synchronize with the sound/music. Recommended to be kept at the default of 14.
-Logarithmic Scale-
Changes how the visualization is formulated. Usually when this mode is enabled, you get a much "bolder" or "fuller" visualization.
http://en.wikipedia.org/wiki/Logarithmic_scale
-Transparent Background-
Makes the background transparent.
-Fast pseudo-transparent mode-
 In this mode, the visualization will use part of root background or background color as it's own background, emulating see-through effect; resource transparent. No real difference on solid colors from what I can tell.
-Bar Width-
How wide each "bar" or "line" in the visualization is. 1 being skinniest, 16 being fattest.
-Edge Style-
How the border or edges appear around the visualization panel.
-Color Modes-
Simple: Takes Foreground color 1 and creates one single, flat color.
Horizontal: Takes Foreground Colors 1 & 2, and creates a gradient effect from left to right. The "center" or Foreground color 1 shows more as the peaks rise, the "edge" or Foreground color 2 shows more as the peaks fall.
Vertical: Creates a simple, flat gradient with Foreground Colors 1 & 2, stretching from the bottom to the top.
-Channel Mode-
From what I can tell, this changes how the visualization is displayed based on the range of sound.
Feel free to tamper with it, though I recommend you leave this option alone.
-FFT Size-
A simple explanation from: http://www.spectraplus.com/DT_help/fft_size.htm
The selected FFT size directly affects the resolution of the resulting spectra. The number of spectral lines is always 1/2 of the selected FFT size. Thus a 1024 point FFT produces 512 output spectral lines. The frequency resolution of each spectral line is equal to the Sampling Rate divided by the FFT size. For instance, if the FFT size is 1024 and the Sampling Rate is 8192, the resolution of each spectral line will be: 8192 / 1024 = 8 Hz. Larger FFT sizes provide higher spectral resolution but take longer to compute. The current FFT size is always displayed in the status bar along the bottom of the application for the active channel.  The active channel corresponds to the plot which has the "focus" (its title bar is highlighted).
Feel free to experiment.
-Rotate-
Changes the direction at which the Spectrums base starts at is at.
90 = west, 180 = north, 270 = east, 0 = south.
-Bar Mode-
Adds hash marks through each line/bar, and spaces in between them.
-Reverse Frequency Axis-
Does what it says, flips the X and Y axis of the spectrum. For example: if you're on "separate" channel mode, it will flip the view so that it the highest peak does not start from the center, but from the left and right sides. Experiment.
-Reverse Channel POS/Position?-
Pretty much the same as above from what I can tell, just that it isn't based on the spectrum's axis so much as the sounds position you have selected I'm guessing. Experiment.

@03***Title Formatting***
Foobar2000 uses title formatting scripts in several places.
http://wiki.hydrogenaudio.org/index.php?title=Foobar2000:Titleformat_Introduction
http://wiki.hydrogenaudio.org/index.php?title=Foobar2000:Title_Formatting_Reference
http://wiki.hydrogenaudio.org/index.php?title=Foobar2000:Titleformat_Examples

@04***Introduction to Columns UI***
http://yuo.be/columns.php - Source for the original ColumnsUI
http://wiki.hydrogenaudio.org/index.php?title=Columns_UI - Options and features, detailed.
http://www.hydrogenaudio.org/forums/index.php?showtopic=28647 - Official thread (Includes old threads with several configurations to help you get started. Use the search function.)

Jon Cairns wrote some great explanations of the coding behind columns UI, with detailed examples and images. This guide will answer questions like: "How do I change what shows in my Title bar?", "How do I set/define Global Variables?" as well as introducing you to the code syntax of Foobar with "If" statements. The code syntax guide also touches on string functions, mathematical/boolean functions, and color blending.

http://joncairns.com/2010/10/foobar2000-5-3-tweaking-columnsui/
http://joncairns.com/2010/10/foobar2000-6-code-syntax/

@04a***Changing Layouts: A How To***
"What do you mean by Layout?"
The layout refers to how the panels and elements in your foobar skin are aligned. This is key when customizing your own skin. The format/formula they follow is similar to "threading" or a "tree bar" branching style. In this guide, I'm going to detail on how I built and achieved the following layout: http://www.gbgl-hq.com/demoness/Classic%20Horizontal%20FooSkin.png (.fcl: http://www.mediafire.com/?8j8oo35mx5mus1u) [NOTE: I have UI Hacks enabled throughout this guide, which is why no menu bars or captions are visible]

Start by going to preferences on your current skin (ctrl+P) and navigating to Columns UI, then click on the Layout tab. Here you will see the default preset of whatever skin you are using. Create a new one by pressing "new". Name it whatever you want. Then click apply on the bottom right. Just your playlist (NGplaylist or ELPlaylist) will be shown. What I have done in my skin is use the basic Vertical and Horizontal splitters, but if you are planning on relying on scripts and global variables, or designing a skin with specific padding and margins, you would use the Panel Stack splitter. For now, we are going to stick with just the horizontal and vertical splitters.

Right click your playlist (EL or NG) and change the base. If you wanted your skin to be stacked vertically (top to bottom) you would select vertical. If you want it to stack horizontal (left to right), select horizontal. Once you've selected your base, decide on what elements you want to display and how you want to display them. Since we're recreating my own skin here, you should have changed your base to a Horizontal Splitter. Right click on the Horizontal splitter, and insert 3 vertical splitters. (Right click>Insert Panel>Splitters>Vertical Splitter) This will add another base or branch for your panels inside the main layout window, but instead of displaying horizontally it will stack the elements in that base vertically. Since I've probably already lost some of you, here is a crude drawing to explain visually what we're actually doing within the UI, as well as the current progress: http://www.gbgl-hq.com/demoness/Crude%20Foobar%20Drawing.png

Now lets focus on putting elements into the splitters. Before we do that, I'm going to go ahead and disable the captions on the vertical splitters by left clicking them to highlight/select them, and unchecking the "show caption" box. Do this for each one until the skin is empty. Lets insert the Channel Spectrum Panels first. For my skin, I'm using two channel spectrums, one is mirrored under the other in a slightly lighter color to give it a different appearance. Right click the first Vertical splitter>Insert Panel>Visualizations>Channel Spectrum Panel. Do this twice so you have two. Click apply. The default channel spectrums will load in with captions on them on the left side of the skin. Select them and remove the captions. You can configure them and rotate them to your liking by viewing section @02 for details (right click the visualization in the skin and would select configure). I also have a quick search toolbar above them, which you can optionally insert if you want. Now I want my playlist to be in the center, but I also want to add playlist tabs (and for the sake of this guide we will insert a seekbar.) Right click the middle vertical splitter and Insert Panel>Splitters>Playlist Tabs , then PlayListViews>NG (OR EL) Playlist, then toolbars>Seekbar. Click apply. They should appear stacked in the middle, and the seekbar is probably really large. You can resize that by right clicking and dragging it in the main window itself. In the final vertical splitter, I just have the artwork view. Right click, Insert Panel>panels>Artwork view. Click apply, and you are finished! Now you can go back and customize the colors and sizes of your panels. When you are done, its advised you lock your panels in place. You can right click the captions and select lock, or go back in the layout tab, left click to select/highlight each element and check the "locked" box on the right. You can also hide or set elements to autohide this way as well.

Additional Tips/Notes: Lets say you're currently using another skin, and you want to change it up a bit more. Oh I don't know, lets say you're using foobar ncmpcpp mod. You've JUST loaded in/imported the .fcl so its brand new install. When you go to create a new layout, you can copy and paste panels from one layout to the other by navigating from one preset to the other using the drop down menu. Then just right click the base you want to paste it in, and paste panel. Its really that easy. This is also how you change the panels order of appearance on the skin, depending on the orientation. Keep in mind: When copying panels, they may rely on scripts or other panels to be with them or in a certain order. Panel Stack splitters can be set either vertically or horizontally, and can be modified by highlighting them with a left click and click the "configure" button. The good news is, when you do copy a panel, the script and configurations are copied with it! So if you are modifying or setting up a new layout with ncmpcpp mod, make sure you copy the BASE as well to keep all the scripting intact. WSH Panels are all coded in Java. If you highlight it and click "configure" (in the layout tab in preferences) you should be able to read through the script and determine which element it defines... using the copy and paste panel method you should still be able to keep everything intact as long as you are working from a new layout within the same loaded skin/.fcl. If you are still unsure, copy and paste JUST the WSH panel mod into a new layout preset and apply it to see what it does.

About Colors: Not all colors in your foobar skin are controlled by a script. Remember to check ColumnsUI>Colours and Fonts for additional elements color settings, like biography, artwork view, and playlist switchers. If you are using the NGPlaylist like me, colors and formatting are defined under ColumnsUI>PlaylistView>Columns. This is where you set global variables, and use title formatting for grouping (organizing your music). Read the guide by John Cairns linked earlier in the guide for more details, and don't forget to check the hydrogen audio forums!

Good luck.

-Shiro