title
  
Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Skinning

  1. #1
    Administrator
    Join Date
    Feb 2014
    Posts
    169

    Skinning

    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:

    Code:
    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:

    Code:
    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

  2. #2
    Administrator
    Join Date
    Feb 2014
    Posts
    169

    Re: Skinning

    Each of the 8 skin files are made up from components, these components draw the skin they are:


    A filled rectangle
    Code:
    
    [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

  3. #3
    Administrator
    Join Date
    Feb 2014
    Posts
    169

    Re: Skinning

    A frame rectangle (1 pixel wide frame), that is unfilled:
    Code:
    
    [frame]
    red,green,blue
    x,y,w,h
    
    
    example (of a bright green framee):
    
    
    [frame]
    0,255,0
    100,100,3800,2050

  4. #4
    Administrator
    Join Date
    Feb 2014
    Posts
    169

    Re: Skinning

    A line which is 1 pixel wide:

    Code:
    [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

  5. #5
    Administrator
    Join Date
    Feb 2014
    Posts
    169

    Re: Skinning

    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.


    Code:
    
    [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

  6. #6
    Administrator
    Join Date
    Feb 2014
    Posts
    169

    Re: Skinning

    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.

    Code:
    [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.

  7. #7
    Administrator
    Join Date
    Feb 2014
    Posts
    169

    Re: Skinning

    Buttons

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

    play
    pause
    stop
    playnpause
    skipback
    skipnext
    mute
    menu

    Code:
    [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.

  8. #8
    Administrator
    Join Date
    Feb 2014
    Posts
    169

    Re: Skinning

    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.

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

  9. #9
    Administrator
    Join Date
    Feb 2014
    Posts
    169

    Re: Skinning

    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.

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

  10. #10
    Administrator
    Join Date
    Feb 2014
    Posts
    169

    Re: Skinning

    Album Art


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


    Code:
    [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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Copyright 2017 Resolute. All Rights Reserved.