Designing Skins for OggPlay

Introduction

1. Create a background bitmap for each canvas (flip-open: 208x254 pixels; flip-closed: 208x144 pixels) 
2. Create bitmaps for each control you are going to use (see below for a list of supported controls and their bitmaps)
3. Combine all bitmaps in a multiple bitmap file and name it MySkin.mbm, where MySkin is the name of your new skin.
4. Write a skin definition file. This is a simple ascii text file (use an arbitrary text editor to create it) with extension .skn. This file contains all the information that is needed to dynamically create controls and place them on the canvas. As an example look at the file OggPlay.skn (the default skin). Name the file MySkin.skn, where MySkin is the name of your new skin.
5. Copy the skin definition file and the multiple bitmap file to your device (to the application directory, usually c:\system\apps\OggPlay). If you are a M$ Windows user you may need to copy the files elsewhere and then move them with the P800 file manager to their final destination.
6. Start OggPlay and select the new skin using the menu item <Skins>.

• http://www.pison.de/mbm2bmp/1.html
• http://www.pscience5.net/freeware/BMCONV.zip
• http://aikon.webplaza.ch/bmconv.exe
• http://www.prosoft.force9.co.uk/oplzone/bmconv.zip
• http://homepages.nildram.co.uk/~nicko/zips/bmconv.exe
• http://www.millican.info/files/bmconv.zip
• http://www.opl32.com/Trucs/PRG/BWar/Download/Bmconv.exe

The multiple bitmap file

  BMCONV.EXE MySkin.mbm /c12title.bmp /1titlem.bmp /c12cdicon.bmp /1cdiconm.bmp

The skin definition file

OggPlay 1 {
  FlipOpen {
    Clock {
      Position 73 3 59 14
    }
    Alarm {
      Position 134 3 59 14
    }
    ...
  }
  FlipClosed {
    ...
  }
}

• Common to all objects is the attribute Position followed by four numbers, representing the x,y pixel position and the width and height.  The position (x=0,y=0) corresponds to the top left of the screen.
  

• Icon
  Uses two bitmaps of the same size. The size is arbitrary. The 1st one is the actual icon bitmap and the 2nd one is a monochrom mask which defines the transparent pixels of the icon: All white parts will be transparent (the background bitmap shines through). One can use one and the same bitmap for the image and its mask. The attribute name is Icon followed by the index of the image and the mask bitmap. An icon can blink with a given frequency. Use the attribute BlinkFrequency followed by a number (I think it's in units of 1/10th second or so).
  

• Slider
  This currently takes just one bitmap plus a mask: For the knob of the slider. The slider "background" is assumed to be visible in the background image of the canvas. The size of the knob icon can be choosen arbitrarily. The attribute name is KnobIcon followed by the index of the image bitmap and the mask bitmap. There are severl slider styles (use the attribute Style): 0= part of bitmap is drawn, opened from left to right; 1= like 0 but opening from bottom to top; 2= a knob bitmap is moved from left to right; 3= same as 2, but moving from bottom to top. Styles 0 and 2 work, the others are not really tested.
  

• Button
  This one takes several bitmaps and masks. All of them are optional though (one could draw the button as part of the background canvas image, and therefore does not need to supply any additional images). These images are for the several states of the button: Normal/Pressed/Dimmed. The latter three bitmaps also require a mask bitmap each. In addition one can assign a monochrom bitmap which defines the active areas of the button, i.e. the areas where a stylus tip will trigger the button (the attribute name is ActiveMask, followed by the index of the mask bitmap). Black areas are active, white areas are inactive. The attribute names are NormalIcon,PressedIcon, DimmedIcon, each followed by the index of the image and the mask bitmaps.
  

• Analyzer
  Takes one bitmap which represents one bar in the analyzer. It should be something like 3 pixels wide to be usable and the height can be choosen arbitrarily. The atrribute name is BarIcon, followed by the indices of the image and the mask bitmaps.
  

• ScrollBar
  This currently takes only one bitmap (plus mask): The knob. The attribute name is KnobIcon, followed by the indices of the image and the mask bitmaps. The style attribute defines if the scrollbar is vertical (0) or horizintal (1). The step attribute defines the number of lines that are scrolled if the scrollbar arrows are pressed. The page attribute defines the number of lines that are scrolled when the scrollbar shaft is klicked. The ScrollerSize attribute defined the sizte in pixels of the scroll bar arrows (i.e. the height in case of a vertical scrollbar and the width in case of a horizontal scroll bar).
  

• ListBox:
  The listbox takes the images from the multiple bitmap file as described earlier. The font color is set by the FontColor attribute, followed by three numbers ranging from 0 to 255 for the red, green, and blue part. The color of the selected song is set by the attribute FontColorSelected in the same way. The attribute Font is followed by the font name, the font size in twips, and the font style (0= normal; 1= bold). See the table below for available font names and sizes.

• Text:
  The font color is set by the FontColor attribute, followed by three numbers ranging from 0 to 255 for the red, green, and blue part. The attribute Font is followed by the font name, the font size in twips, and the font style (0= normal; 1= bold). The following fonts are available: 

  SwissA	4 sizes in the range 10-19
  Courier	only size 8
  Symbol	2 sizes in the range 11-16
  Eikon	only size 15

• Animation:
  The attributes FirstBitmap and NumBitmaps define the bitmap indices used for the animation. The attribute Frequency defines the animation speed (default is 2), and Pause defines the amount of time inbetween two animation cycles. Style defines how the animation is played (0= pause, then from beginning to end; 1= pause, from beginning to end and reverse to beginning).

• Digits:
  This control takes bitmaps and mask bitamps for the numbers 0,1,2, ..., 9 and for the characters : - / . in this order. The attribute Bitmaps is followed by the index of the "0" bitmap. The attribute Masks is followed by the index of the "0" mask bitmap. The masks are optional.