INFO: Skins for EXMMS

[blackhawk]

@khrissc
You can use the default skin (Winamp 2.x default skin look like) as a template.

@MANUP456
If you have open source version of eXMMS, tap on top left button will open eXMMS popup menu. You will see About, Configure, Skin Browser, and Quit items. Maybe 'another eXMMS' author have to rename his application to XMMSfC to stop confusing the end user

[blackhawk]

Or maybe I will rename eXMMS to XMMSfI Ha..ha..ha...

[MANUP456]

This is eXmms 0.2 Beta (Donga). I'm not sure if this is the last version, hope someone could tell us which is the latest version and upload or post a link. I read about a 0.21 but the post was confusing.

Thanks this works great.Is the 0.21 version work with headphones?

[khrissc]

First i want to apologize for the long absence, but i got a lot of work.
I send the first part, it's just the main window, but it's the most annoying part.

---------------------------------------------------------------------
The main window is probably the most complex window, graphics wise, of all its windows. There are many things going on in that one window at all times. Each part of the main window is divided up into various png images. Here is a list of the images below that actually create the main window, you may unzip the ones i upload so you can check while read, i recommend to check the winamp classic skin images to get a better idea.

» Main.png
» Titlebar.png
» CButtons.png
» ShufRep.png
» Volume.png
» Balance.png
» MonoSter.png
» Posbar.png
» Playpaus.png
» Nums_ex.png
» Text.png

Main.png (240x116 pixels)

This file provides the background image, sections of the other png’s are cropped and layered over this background image to create the various states of "on" and "off", buttons, sliders, etc. Many skin artists (skinners) create their own main.png image as well as the other components to make their skin as unique as possible. Although the regions in which the buttons can actually be clicked, the artists have a certain amount of pixels to play with for each element. This will enable the skinner to give the illusion of making smaller more precise controls, transparent controls, or even just big silly dumb ones if they wish. The possibilities are simply endless. The skin components are all png’s and therefore *cannot support animation or transparencies* The only way to achieve transparency is to use the overlapping area of main.png as the background in the various components.

As you can see on the main.png i draw some squares, the gray ones are just to show some areas where the other components will be, the red ones you can draw the things that must be there, just if your skin deserves it.

a) This square marks the possition of the two dots between the minutes and seconds of the counter
b) In this one you can put the text “Kbps”
c) In this you may putt he text “Khz”

Titlebar.png (267x56 pixels)

Titlebar.png provides the title bars for the all the various skinned windows. The first of the bars (240x15 pixels) are the graphics main window when that window has focus (the current window on your desktop is said to have the 'focus', and on that window the currently selected control also has the 'focus'). The second bar is the main window's title bar when it does not have the focus, in eXMMS i think it’s not necessary because there’s no focus, i didn’t draw it and no problem. The third (240x15 pixels) and fourth (neither necessary) bars provide the graphics for Window Shade mode (minimized) on this bar i draw blue squares, from left to right the first marks the position of the two dots between the minutes and seconds and in order the other ones are: rewind, play, pause, stop, forward and open, this ones are not loaded from other png, if you want to show them, you must draw them.

To the left of the title bars are a selection of graphics for the windows buttons in their various states. Each button size is 9x9 pixels.

The top row consists of the images for system menu (Main Menu), the minimize button, as well as the close button in it's normal state (the way the buttons would look if they weren't clicked). The second row consists of the same set of buttons, however in the pressed state (the way the buttons would look if they were clicked). The third row is the graphics for the WindowShade button where the left image is the image of the button not pressed, and the left is the image of the button pressed. The fourth row contains the images for the button that restores Winamp or its various windows from WindowShade mode to its expanded form, the images being in the same order, the left being not pressed, and the right being the pressed state.

When modifying the title bar it's important to remember that if you change the appearance of your buttons in the main title bar images, you should also change all the graphics that are relevant to the title bar to match so that they don't look out of place when you press them and remove the focus from the button you had just pressed.

Cbuttons.png (136x36 pixels)

The cbuttons.png image provides the images for playback control buttons (rewind [23x18], play[23x18], pause[23x18], stop[23x18], forward[22x18] and open[22x16]). The top row displays the buttons un-pressed or in their normal state, the second row of graphics are the same buttons except in the pressed state. Remember when skinning this set of components that transparency does not exist, if the button is incorporated into the background, you will have to place the background into the cbuttons.png.

ShufRep.png (92x85 pixels)

Shufrep.png provides the graphics for both states of the Shuffle-Play button (47x15), Play/Loop button (Repeat)(28x15), Equalizer button as well as the Playlist button.

The top row is the (repeat) loop and shuffle in the off state, the second row, are the loop and shuffle button in the off, clicked state(the button being pressed while the shuffle/loop buttons were in the off state). The third row is loop and shuffle button in the on state, and the fourth row are the buttons being clicked in the on state.

The bottom four images make up the graphics for the Equalizer(23x12) and Playlist(23x12) editor buttons in both two states. The first is the Equalizer button in the off state. The second button is the Playlist button in the off state. The third is the Equalizer off state and pressed at the same time. The fourth being the Playlist button in the same state. The next row is the exact same thing, however, instead of the buttons being in the off state, they are on.

The same conditions in regards to transparency that apply for the Cbuttons.png image apply for this image as well.

Volume.png (68x433 pixels)

The volume.png file contains a set of bars (68x14 each bar) and two slider graphics (14x11 each slider). Depending on how high or low the level of the volume is, eXMMS selects one of the bars to demonstrate the level at which the volume is currently at. If the volume is all the way down, it displays the more green bars, if all the way up, it displays the more red bars. The first bar is the volume at its lowest level, the last bar is the volume at its maximum level. Fiddle with these graphics yourselves to find out which bar is which level. The bottom contains the sliders control images. The first image being the slider, which is in the clicked, the second being in the un-clicked state.

Balance.png (68x433 pixels)

Balance.png works virtually identitical to volume.png, however, the images in balance need to illustrate the volume coming from either the left, right, or both speakers. This is done by swaying from green to red when moving the slider (14x11 each slider) from one of the sides towards center. Simply color all the bars (38x14 each bar) the way you would do for the volume.png and the outcome should be the same.

MonoSter.png (58x24 pixels)

Monoster.png provides the indication that the audio source is running in Stereo (30x12) or Mono (28x12) mode. The top row shows the "in stereo" indicator as well as the "in mono", indicator. The second row shows the "stereo off" and "mono off" indicators. When Winamp is playing in stereo sound, the "stereo on" with the "mono off" indicators are displayed. When the audio is in mono, the opposite is displayed.

Posbar.png (272x10 pixels)

The posbar.png, provides the track (213x10) for the song position slider. At the right side of the image, the song seek slider (29x10 each slider) is shown in both states, pressed and not pressed.

Playpaus.png (42x9 pixels)

The playpaus.png file provides indicators that the file being played is playing, paused or stopped. The final item shows whether the file is synchronized or buffered or a break in transmission has been found.

Nums_ex.png (108x13 pixels)

The numbers.png file provides the images for displaying the numbers used in the time display, located directly above the visualizations area, its’ formed by 12 rectangles (9x13 each) in the first 10 you should draw the numbers “0, 1, 2, 3, 4, 5, 6, 7, 8, 9” next square blank and the last one a hyphen, which is shown when the counter is in countdown mode.

Text.png (155x18 pixels)

Text.png is performs the same job that numbers.png, however, this image isn't as limited in use as numbers.png. Text.png provides all the text that is used for the counter of the Playlist editor, and for the Kbps/khz information. This one i recomend just to change the color, due to the small size.


NOTE: when you export the png's be sure the smooth option is not activated (it's one of the options in the export window, i think is in every editor), or you will get color lines around the buttons.
-------------------------------END----------------------------------

Not sure if this is going to help you, i hope it does. Any doubt i’ll try to solve it.

Greetings

[Konig]

Why do you want this info to be limited to only the A1200 guys, there are E6 users too

moving this to the skins section

[erichs_tan]

thx konig,u moved this thread to the moto skin session.so all of user of E680i,A780,A1200,and Rokr E6 can read and know this thread.

About the skin of exmms,I had upload the skin of exmms twice and twice the forum is lose.and my computer now have a problem.if my computer get repaired,i will share again the skin which i collected from this forum.

thx krichss for ur guide,but i stilll confused about pledit.png. how u edit that???.i'm still confused.can u give tutorial with picture one by one? thx.

[erichs_tan]

Its my third time i upload this skin.hope this forum not have broken again.but thx very much for moderator bcause this forum more better and better,this forum more interesting and good.here the screenshoot and the skin.hope u like it,and if someone have new skin,please upload it and share for us.thx.

[erichs_tan]

And this....

[erichs_tan]

And others skin again..oh,i almost forget it.all of skin isnt my created skin.i download from other thread.(i forget where the thread)i just share it again for easy find,easy download for all of u.if moderator can make the new session for download skin of exmms and rockbox,ohhh,i'm very thx u.bcause its can be more usefull and easy link for us to find and get file.thx u.

[Konig]

Eakrin is the moderator here, so you'll have to ask him. In the meantime, i CAN suggest that you continuously edit one of your posts with the new files and screenshots you come up with. CHEERS