gmb skinning

A few parts of gmb can be skinned, though I never completely finished this, some nice things can be done with the current system.

A skin is defined by adding some properties to some of the widgets in a layout definition. (note that I wrote this system long ago, so I may have made some mistakes in the documentation)

Only 3 type of widgets have a skin option :

• the main window background (the window will be shaped if some parts are fully transparent)
• the buttons : Play, Stop …
• the time bar / volume bar

Note that I tried to make a system that allow the skin to be resized. But it is not an obligation, you can use FB boxes to put widgets at a fixed position (relative to the FB box), for example :

FBButtons =     30,20 Prev \
                30,40 Play \
                30,60 Next

The skin options are strings separated by “:” of the format : filename:crop:resize

• crop: by using this option, is possible to put all the pictures used by a skin in a single file. the format is x_y_width_height, for example : 10_10_80_40
• the resize option is a bit complicated, it indicated how should the skin be scale if needed.
  • It begins by e or s, e is for repeat (don't remember why I used “e”), and s for scale/stretch.
  • the e/s can be preceded by v or h to mean only vertically or horizontally.
  • It may be followed by border definitions of the format t or b or l or r (for top/bottom/left/right) followed by e or s (repeat or stretch as before), followed by the number of pixels the border use in the picture. if the resize option is empty, it will just be centered (if I remember correctly) in the available space rather than resized.

skin=paper_PosBack.png::hs

means the picture in paper_PosBack.png is to scaled by stretching it horizontally, it won't be resized vertically (i think it will be centered if needed)

skin=other_back.png::ete18be20le8re20

defines a skin with a top border of 18px, a bottom of 20px, left of 8px and right of 20px, all parts will be repeated if needed

For buttons, there can be 2 other options:

• the first is the list of states that have their own picture, for example : normal_prelight_active
• the second is the list of modes the button can be in, used by the play/pause button : Play_Paused

Note: after v1.1.6, the modes of the play button have been renamed to play and pause

for example, this play button

skin=paper_PlayPause.png:::normal_prelight_active:Play_Paused

need 6 versions, so the picture will be divided in 6 parts horizontally.

The Scale widget (or the TimeBar widget in 1.0.x) uses the 'skin' option for its background, and the 'handle_skin' option for its handle. As the buttons, the 'handle_skin' option may specify different states :

handle_skin=paper_PosHand.png:::normal_prelight_active

specify a skin for the handle with 3 states : normal, prelight and active

paper_skin_example.tar.gz

[paperskin]
Type=G
Default	= Window ontop=1,sticky=1,nodecoration=1
SkinPath = testskin
Skin = paper4.png::s
HBTime		= LabelTime Length _Scale(skin=paper_PosBack.png::hs,handle_skin=paper_PosHand.png:::normal_prelight_active)
HBTitle		= Filler0 _Title
HBArtist	= LockArtist _Artist
HBAlbum		= LockAlbum _Album -Date
VBText		= HBTitle HBArtist HBAlbum
DefaultFont	= Babelfish 14
HBButtons = 	50Filler1 \
		5Playlist(skin=paper_Eject.png:::normal_prelight_active) \
		5Prev(skin=paper_Prev.png:::normal_prelight_active) \
		5Stop(skin=paper_Stop.png:::normal_prelight_active) \
		5Play(skin=paper_PlayPause.png:::normal_prelight_active:Play_Paused) \
		5Next(skin=paper_Next.png:::normal_prelight_active)
VBmain		= _VBText _HBButtons _HBTime
FBmain		= .18,.25,.61,.49 VBmain
HSize0		= Filler0 LockArtist LockAlbum
VolumeScroll	= VBmain

This is a not-very-good attempt at a skin I've made at the time.

It is meant to more or less reproduce the paper skin of gqmpeg : http://gqmpeg.sourceforge.net/mpeg-skin2.html#SEC5 (some of the pictures come from it)

To use it, you have to put the layout file in :

~/.config/gmusicbrowser/layouts/

and put the .png files in

~/.config/gmusicbrowser/layouts/testskin/

(or you can change the SkinPath= in the layout file)

If you use the v1.1.x branch, you should replace Scale by TimeBar in the layout file, else the time bar won't be skinned.

Also, unless you remove the nodecoration=1 in the layout file, it won't have any window decoration, so you'll have to use alt-leftclick to move the window, and alt-middleclick to resize it (unless your window manager use different shortcuts for that). (moving the window by just clicking on an empty part of the background is currently only implemented in the current git version by using the dragtomove=1 window option)

You can change the default font that will be used by Title/Artist/… by changing the DefaultFont= option