PDA

View Full Version : Skinning



spoon
August 15th, 2015, 07:36 AM
A foobar mobile skin (.fbskin) is created using the foobar mobile skin compiler (windows only), which compiles multiple skins and images into a single file.


A single skin will contain 8 skins, skins are resolution independent, the 8 skins are needed to accurately cater to the various aspect ratios needed for the various devices, each skin contains:



landscape-3-2-4000x2666
landscape-4-3-4000x3000
landscape-16-9-4000x2250
landscape-16-10-4000x2500
portrait-2-3-2666x4000
portrait-3-4-3000x4000
portrait-9-16-2250x4000
portrait-10-16-2500x4000



All files when creating a skin should be in a single folder, edit the skindef.skindef file (drop existing onto notepad). Then edit the .txt skin files. Finally double click the skindef.skindef file to run SkinDesigner.exe to compile the skin.

Example skindef.skindef file:


name: Test Skin
author: Spoon
version: 1.0
defaultart: noart.png
iconplay: iconplay.png
iconpause: iconpause.png
iconfolder: iconfolder.png
backgroundcol: 255,255,255
genericfont: 0,0,0
artistfont: 128,128,128
titlefont: 0,0,0;bold
albumfont: 0,0,0


skin: 4000x2250 landscape-16-9-4000x2250.txt
skin: 4000x2500 landscape-16-10-4000x2500.txt
skin: 4000x2666 landscape-3-2-4000x2666.txt
skin: 4000x3000 landscape-4-3-4000x3000.txt


skin: 2250x4000 portrait-9-16-2250x4000.txt
skin: 2500x4000 portrait-10-16-2500x4000.txt
skin: 2666x4000 portrait-2-3-2666x4000.txt
skin: 3000x4000 portrait-3-4-3000x4000.txt




Running SkinDesigner, compiles the skin to a single .fbskin file and then renders the skin in an example program which allows the various devices to be tested against your skin.

The Now Playing page can be 100% skinned, the browse and playlist pages (and settings) offer minimal skinning beyond colour setting.

In the .skindef file are the following elements:

defaultart - a place holder image for when the player is stopped, or a file has no art.
iconplay, iconpause, iconfolder are icons to be used in track listing, they should be at least 400x400 pixels and contain an alpha layer.
backgroundcol - the background colour for Browsing and Playlist, in r,g,b
genericfont - the font used, specifies colour in r,g,b and optional ;bold;itallic values, example 0,0,0;itallic
artistfont - font used for artist
titlefont - font used for title
albumfont - font used for album

spoon
August 15th, 2015, 07:46 AM
Each of the 8 skin files are made up from components, these components draw the skin they are:


A filled rectangle




[rectangle]
red,green,blue
x1,y1,w,h


example (of a dark red rectangle which fills the whole page):


[rectangle]
128,0,0
0,0,4000,2250

spoon
August 15th, 2015, 07:48 AM
A frame rectangle (1 pixel wide frame), that is unfilled:




[frame]
red,green,blue
x,y,w,h


example (of a bright green framee):


[frame]
0,255,0
100,100,3800,2050

spoon
August 15th, 2015, 07:49 AM
A line which is 1 pixel wide:



[line]
red,green,blue
x1,y1,x2,y2

example blue line running right across top part of screen:

[line]
0,0,255
0,200,4000,200

spoon
August 15th, 2015, 07:56 AM
An image, images should be png and can contain a transparency. The image should be designed with a total screen size of 4000x3000 in mind (or 3000x4000), in that if your image is to take up 1/4 of the screen, it should have a resolution of 4000/4 = 1000 pixels. For devices with much lower resolutions (such as a nokia Lumia 520, which is 480x800) the image will be scaled down, in this instance the image would be 1/10th its designed size!, images should be designed with this in mind.






[image]
<imagefilename>
x,y,w,h


example of an image placed in lower right corner, the actual image is drawn to be 200x200 pixels at 4000x3000 resolution:


[image]
testimage.png
3775,2025,200,200

spoon
August 15th, 2015, 07:57 AM
A Label

The label can be of a fixed text value, or a recognized values which are replaced when playing back, elements can be:

[length]
[currentposition]
[remaining]
[volumelbl]
[artist]
[title]
[album]
[genre]
[year]
[composer]
[conductor]
[album artist]
[artistmulti]
[album artist multi]
[nextartist]
[nextalbum]
[nexttitle]

artistmulti: would list contributing artists as well as artist1; artist2; artist 3

In addition it is possible to set colour, bold and italic in the label with [b] [-b] [i] [-i] [rgb-255-0-0]. The [-b] and [-i] items remove the bold or italic. Colour changes are [rgb-red-green-blue].

For example it is possible to have a label as:

[b][artist][-b] - [rgb-128-128-128][title]

The default colour for a label is black.



[label]
x,y,w,h
flags
<label text>


Flags can be (combine multiple with , for example centered,noreducesize):

left
centered
right
noreducesize

The font size is determined by the height of the allocated label, normally if the label is too large to fit the width the size of the font is reduced, this only happens to 50% of the default font size. If the label is still too large, it is shortened with .. on the end.

spoon
August 15th, 2015, 07:57 AM
Buttons

Buttons are controls which have 2 states - up and down, a button is named either:

play
pause
stop
playnpause
skipback
skipnext
mute
menu



[button]
x,y,w,h
<name>
<image up/off>
<image up/off highlighted>
<image down/on>
<image down/on highlighted>


The highlighted buttons are shown whilst the user is actively clicking the button. The mute button has 3 special states which can be supplied with <image up/off>;<image2bar>;<image1bar> which effectively reduces the volume image when the volume is changed.

spoon
August 15th, 2015, 07:58 AM
Volume Control

Shows a volume control (on a bar), to change the volume a user must first pickup the marker and then move the marker. The bar is made up of 3 components, a selector mark, back image for the progress bar and an optional set bar image which shows how much volume is set, for example volume is set to 75% then 75% of the set bar is shown.

The bar height should be the same height as the bar marker, it is possible to make the bar appear thin by using a transparent png (above and below the bar image). The bar should be of a height which can be selected by a finger, even if most of the bar is transparent.



[volume]
x,y,w,h
< Volume Marker Image>
< Volume Back Image>
< Optional Set Image>

spoon
August 15th, 2015, 07:58 AM
Playback position

Shows the current track position (on a bar) and allows skipping to any point on the bar. The bar is made up of 3 components, a selector mark, back image for the progress bar and an optional progress bar image which shows progress made (to the left of the marker, it can be a different color to main back image). The bar height should be the same height as the bar marker, it is possible to make the bar appear thin by using a transparent png (above and below the bar image). The bar should be of a height which can be selected by a finger, even if most of the bar is transparent.



[position]
x,y,w,h
<Position Marker Image>
<Position Back Image>
<Optional Position Highlight>

spoon
August 15th, 2015, 07:58 AM
Album Art


The main feature of the Now Playing page is the display of album art




[albumart]
x,y,w,h
<type>


Where type can be: main, next, mainback, mainmirrored


main: copies 1:1 the art to the screen
next: copies 1:1 the art of the next track to play to screen
mainback: takes the art and zooms in, desaturates and dims the art so it can be used as a backdrop
mainmirrored: art drawn in reflective way, the reflection fades out. A normal 'main' should be drawn, then a mainmirrored drawn below main, with the height set to 1/3rd of main.

spoon
August 15th, 2015, 08:05 AM
Dynamic Skins


It is possible for a skin to be dynamic, that is change depending on certain circumstances, when designing a skin it can be segmented into conditional blocks, for example (important * should be replaced by the hash symbol):




*if playing

< this skin code executed when playing>

*else


< this skin code executed when not playing>


*end








*if classical

<this skin code executed when playing classical tracks>

*else


<this skin code executed for all other tracks>


*end







*if next

< when there is a track queued next>

*else

< when nothing will play next >


*end

spoon
September 28th, 2015, 06:31 AM
A word about transparencies, take the following zoomed images (1 and 2), image 1 is a simple red line with an alpha layer, the line is perfectly masked:

44

Now image 2 is image 1 resized down (as the program might do to put the image on a display), it has been reduced to 21%. The alpha issue arises now with the edge pixels, in image 2 they are lightened red (because the background color under the alpha layer is white), this is called color bleeding. If the background was black the edge red would be darkened. Depending upon onto which the final image will be drawn to, the lighter or darker image might look totally wrong. With this in mind internally foobar will set the edge pixel to blend against the shown neighbour, but even this is not perfect. To create perfectly sizing images, it is best to design images with either a hard edge, or no alpha transparency (depending upon skin).

spoon
October 18th, 2015, 05:57 AM
The Actual Skin Designer

Install Skin Designer:

http://mobile.foobar2000.com/install/Foobar2000MobileSkinDesigner.exe

(Windows only)

Then download first the example Skin:

http://mobile.foobar2000.com/install/SpoonTestSkin.zip

Unzip, then double click the skindef file, it will show the skin on the screen.

To create your own skin, start with a blank skin:

http://mobile.foobar2000.com/install/BlankSkin.zip

Rename the folder, open notepad and drop the skindef file onto it for editing, change the name, author, etc. Save then change each of the landscape or portrait files, to test double click your skindef file. The skin will be compiled and shown in the designer.

Peter
May 6th, 2016, 07:23 AM
The designer and sample skins have been updated for the latest version of foobar2000 mobile, now including folder pictures.

Peter
May 10th, 2016, 05:03 AM
iOS
Upload fbskin files to your device using iTunes file sharing. Uploaded fbskin files will show up on the "choose skin" page.

Android
At the bottom of the "choose skin" page, there's an "open" command that lets you add skin files from any location on internal/external storage. Skin files will be copied to foobar2000's configuration data so you no longer need the files once they've been imported. To remove imported skin files, tap+hold the individual entry and choose "delete".

Windows
At the bottom of the "choose skin" page, there's an "open" command that lets you add skin files from any location, including any local folder as well as MS OneDrive. Skin files will be copied to foobar2000's configuration so you can safely delete them once they've been imported. To remove imported skin files, tap+hold the individual entry and choose "delete".

spoon
May 11th, 2016, 03:38 AM
Please note as skinning is in it's infancy there is no provision for uploading skins to our server, this will change in the coming months. For now please post skins with download links to dropbox or similar.