:: skins

This document describes the components necessary to build a skin for the memiki box application. In addition to providing the images described below, skin developers should review some additional requirements. To get an idea of how these various components are laid out, we've included some screenshots. Also, if you want the current files we've zipped them up for easy download as box.imgs.tar.gz. All images should be provided in GIF format using the names indicated.

At present, we also need some help with other graphics work. Please see the bottom of this document for further detail.

Navigational Toolbar
These images appear together and concurrently in a rectangular space 240 pixels wide x 24 pixels high. The images are used for navigation and are single state.

nav.promo.gif Retrieves a page with promotional stuff (serves like a home page)

nav.artists.gif Indicates that a list of artists should be displayed.

nav.albums.gif Indicates that a list of albums should be displayed.

nav.playlists.gif Displays the playlist management page.

nav.search.gif Displays the search page.

nav.conf.gif Displays the application configuration page. This button is currently a little wrench... I like the icon but it needs some help. I would also welcome other ideas.

nav.ir.gif
ir.gif Displays the Internet Radio page. I'm open to suggestions but something like a little radio station tower antenna with little power rays... I don't know, something. A second version of this image should be furnished as a non-button to be used as a status icon indicating that a radio station is currently playing.

nav.x10.gif Show home automation page. the icon should be a power plug.

nav.home.gif Takes the use to the home page. The image should be a little house but I don't like the current one. needs help.

nav.hlp.gif The help button is used to retrieve information on the system. A question mark is probably ok.

Command toolbar
These buttons appear in a separate toolbar area (240px x 24px) and are used to perform commands. Some have toggle states and others collaborate as explained below.

vox.play.gif Used to play a track. This button toggles with pause.

vox.pause.gif Used to pause the player. This button toggles with play.

vox.prev.gif Plays the previous track. Don't like the current image as it looks like a Rewind button.

vox.next.gif Used to play the next track. Don't like the current image as it looks like a fast forward button.

vox.vp-u.gif
vox.vp-d.gif This image will be used to toggle the command frame between the volume and progress bars. It should look like a corner of a page folded, or something to indicate the turning of a page and should provide up and down states.
This currently serves as the volume control. It is composed of a series of high colour images (vox.vol-hi.gif), followed by darker images of the same shape (vox.vol-lo.gif), separated by something like (vox.vol-on.gif). Note: While I'm not overly unhappy with the current shapes, I'm tpen to suggestions.

vox.rew.gif a Rewind button.

vox.ff.gif a fast forward button.
The progress bar indicates the percentage completion for play and changes as a track plays. The user can use this bar to reposition the play to any point. The control is made up of a series of line segments (vox.pr-line.gif) and a marker (vox.pr-mark.gif).

Action buttons
These buttons appear mostly in the main window and throughout the application. There are no size requirements but should generally be proportionate with the toolbar icons.

new.gif The new button is used to create new things. It should be a generic icon since it will be used in various contexts

add.gif This button is used to add things to lists. Maybe it could be a plus sign...

del-u.gif
del-d.gif
del.gif The delete button will be used for destroying various kinds of things. The button needs an down state.

ren-u.gif
ren-d.gif
ren.gif Used to rename things. This button should have up and down states. I hate the current image. I've seen some applications that use a little text box with the letters "abc" inside, and that may work ok, but I'm open to suggestions! This button needs a down state.

down-u.gif
down-d.gif
down.gif This button is used for downloading files. This button needs a down state.

info-u.gif
info-d.gif
info.gif The info button will be used to retrieve information about various entities. It should be different from the help button. This button needs a down state.

go.gif This Go! button will typically be used next to text input boxes where the user could just hit the enter key.

prev.gif Displays the previous item on a list.

next.gif Used to indicate that the next item should be displayed (could be next artist, next page, whatever).
Used to display status info, the progress bar is composed of 4 images: a left (bar.l.gif) and right (bar.r.gif) brackets and an empty (bar.0.gif), and filled (bar.1.gif) cells, all of which combine to make the bar.

Header images
For appropriate sizes for these images see their contexts in the screenshots section of this document.

lyrics.gif Used to head lyrical content when available.

mp3.com.gif Header for the mp3.com site search page.

trash.gif Your typical trashcan image... just not the Evil Empire's!

Additional requirements

In addition to providing the above images, skin developers may further customise the look-and-feel through CSS. The application assigns an id to the BODY of each page, allowing re-definition of the page's elements. The id's used are as follows:

INFO - the information panel
VOX - the command toolbar panel
NAV - the navigational toolbar panel
LS - the listing pages
SEARCH - the search pages
X10 - the home automation pages
PLAYLIST - management of playlists
IRLS - Internet radio listings
IRST - Internet radio status
PROMO - the promotions page
CONF - the configuration pages
HLP - the help subsystem

While some elements are relevant to all classes:

BODY: background, bgcolor, text
LINKS - normal, visited, hover
<H1> - <H3> tags

...others become important only to some as listed below:

table elements (<TH>, <TD>, etc.) - LS, SEARCH, IRLS, IRST, X10, PLAYLIST

Developers may also furnish background images for the id's enumerated above. The files should be named in the format: bg.id.gif where id is the lower-case name of any of the id's above, e.g. for the help subsystem pages the filename should be: bg.hlp.gif.

Screenshots

Here are some snapshots of the application to give an idea of where things fit. We would love to explore other layouts so please suggest. The app lives on a 240 x 320 display, capable of 16-bit color. This space is divided into 4 frames described below top to bottom:

Info - 40 x 240, non-scrollable
Command toolbar - 24 x 240, non-scrollable
Main - * x 240, SCROLLABLE
Navigation toolbar - 24 x 240, non-scrollable

(1) The shot above shows 4 separate frames, the top contains information about the track currently playing while the narrow frame immediately below shows the command toolbar. The volume bar may be seen in this frame. The large area below is the main application space which is used to display various pages. The bottom-most frame features the navigational toolbar.
(2) This shot above shows the progress bar. It also shows a ribbon of buttons which have toggle states (not currently shown). Do also note the small dash to the left of the percentage counter on the command bar... this is the folded-page image referred to above.

(3) The Search page is displayed. (New logo needs to be put in place). Also note the absence of the X10 and Internet Radio buttons.
(4) The lyrics header is shown on the artist info page.

(5) Shows the playlist management page.
(6) Demonstrates the rename capablities. Please note that the rename button should be displayed in it's down position here (we just don't have the image). Also notice the "go" button.

Other graphics work needed

Our current logo was something that I cobbled together from a 5th century uncial font... We need something new. It should be a butterfly, preferrably with blues and yellows in it.

Used as a logo on the Gnutella search page. I'm currently use LimeWire's but should find something more particular to Gnutella itself.

Navigational Toolbar These images appear together and concurrently in a rectangular space 240 pixels wide x 24 pixels high. The images are used for navigation and are single state.
nav.promo.gif	Retrieves a page with promotional stuff (serves like a home page)
nav.artists.gif	Indicates that a list of artists should be displayed.
nav.albums.gif	Indicates that a list of albums should be displayed.
nav.playlists.gif	Displays the playlist management page.
nav.search.gif	Displays the search page.
nav.conf.gif	Displays the application configuration page. This button is currently a little wrench... I like the icon but it needs some help. I would also welcome other ideas.
nav.ir.gif ir.gif	Displays the Internet Radio page. I'm open to suggestions but something like a little radio station tower antenna with little power rays... I don't know, something. A second version of this image should be furnished as a non-button to be used as a status icon indicating that a radio station is currently playing.
nav.x10.gif	Show home automation page. the icon should be a power plug.
nav.home.gif	Takes the use to the home page. The image should be a little house but I don't like the current one. needs help.
nav.hlp.gif	The help button is used to retrieve information on the system. A question mark is probably ok.

Command toolbar These buttons appear in a separate toolbar area (240px x 24px) and are used to perform commands. Some have toggle states and others collaborate as explained below.
vox.play.gif	Used to play a track. This button toggles with pause.
vox.pause.gif	Used to pause the player. This button toggles with play.
vox.prev.gif	Plays the previous track. Don't like the current image as it looks like a Rewind button.
vox.next.gif	Used to play the next track. Don't like the current image as it looks like a fast forward button.
vox.vp-u.gif vox.vp-d.gif	This image will be used to toggle the command frame between the volume and progress bars. It should look like a corner of a page folded, or something to indicate the turning of a page and should provide up and down states.
	This currently serves as the volume control. It is composed of a series of high colour images (vox.vol-hi.gif), followed by darker images of the same shape (vox.vol-lo.gif), separated by something like (vox.vol-on.gif). Note: While I'm not overly unhappy with the current shapes, I'm tpen to suggestions.
vox.rew.gif	a Rewind button.
vox.ff.gif	a fast forward button.
	The progress bar indicates the percentage completion for play and changes as a track plays. The user can use this bar to reposition the play to any point. The control is made up of a series of line segments (vox.pr-line.gif) and a marker (vox.pr-mark.gif).

Action buttons These buttons appear mostly in the main window and throughout the application. There are no size requirements but should generally be proportionate with the toolbar icons.
new.gif	The new button is used to create new things. It should be a generic icon since it will be used in various contexts
add.gif	This button is used to add things to lists. Maybe it could be a plus sign...
del-u.gif del-d.gif del.gif	The delete button will be used for destroying various kinds of things. The button needs an down state.
ren-u.gif ren-d.gif ren.gif	Used to rename things. This button should have up and down states. I hate the current image. I've seen some applications that use a little text box with the letters "abc" inside, and that may work ok, but I'm open to suggestions! This button needs a down state.
down-u.gif down-d.gif down.gif	This button is used for downloading files. This button needs a down state.
info-u.gif info-d.gif info.gif	The info button will be used to retrieve information about various entities. It should be different from the help button. This button needs a down state.
go.gif	This Go! button will typically be used next to text input boxes where the user could just hit the enter key.
prev.gif	Displays the previous item on a list.
next.gif	Used to indicate that the next item should be displayed (could be next artist, next page, whatever).
	Used to display status info, the progress bar is composed of 4 images: a left (bar.l.gif) and right (bar.r.gif) brackets and an empty (bar.0.gif), and filled (bar.1.gif) cells, all of which combine to make the bar.

Header images For appropriate sizes for these images see their contexts in the screenshots section of this document.
lyrics.gif	Used to head lyrical content when available.
mp3.com.gif	Header for the mp3.com site search page.
trash.gif	Your typical trashcan image... just not the Evil Empire's!

(1) The shot above shows 4 separate frames, the top contains information about the track currently playing while the narrow frame immediately below shows the command toolbar. The volume bar may be seen in this frame. The large area below is the main application space which is used to display various pages. The bottom-most frame features the navigational toolbar.	(2) This shot above shows the progress bar. It also shows a ribbon of buttons which have toggle states (not currently shown). Do also note the small dash to the left of the percentage counter on the command bar... this is the folded-page image referred to above.
(3) The Search page is displayed. (New logo needs to be put in place). Also note the absence of the X10 and Internet Radio buttons.	(4) The lyrics header is shown on the artist info page.
(5) Shows the playlist management page.	(6) Demonstrates the rename capablities. Please note that the rename button should be displayed in it's down position here (we just don't have the image). Also notice the "go" button.