Creating podzilla2 schemes
From wikiPodLinux
| Table of contents |
What Are Podzilla 2 Schemes?
Podzilla 2 Schemes are text files that located in the usr/share/schemes/ directory that allow you to modify the appearance of Podzilla 2. These files have a .cs extension, which stands for color scheme. To see examples download some user contributed schemes from the Scheme Repository.
What You Need For This Tutorial
In order to create Podzilla 2 schemes, you will need a "plain text" word processor. This is basically non-encoded text and contains no formatting or structural information, such as font size, font type, or other layout information.
Mac OS X
I would suggest TextEdit, which should have come with Mac OS X. To make it plain text, go to the "Format" menu and select "Make Plain Text".
Windows
I would suggest Notepad, which should have come with Windows. Notepad is plain text by default, so no configuration is required.
Optional
To make things easier, you can edit a scheme that is included in Podzilla 2. Just open one of the .cs files in the usr/share/schemes/ directory in a plain text word processor and edit that scheme to your preference. When doing this, be sure not to overwrite the original scheme, so you can access it in the future. You may also create a scheme from scratch. Whichever option you choose, this tutorial will guide you through the editing process.
Writing a Color Scheme
First you need to open your text editor. Then set up your file.
Defining the File
At the top of the file, you always need the name of the color scheme. Use the folowing syntax(fancy word for the format):
/name your_color_scheme's_name
After that line, you need to define the colors that you use. You cant just use a name without defining it. To define a color, use the syntax:
/def your_color's_name (hexadecimal color)
Whats a Hexadecimal color? A hexadecimal is a color where the red, green, and blue componets are specified. A color is a mix of red, green(not yellow!), and blue. The syntax : RrGgBb . Hexadecimal means that the color is in base 16. What? Well the color componets are in number. Base 10 is what we use. It means what number that the numbers are in swiched to 10 digits. In English this means that in a base like base 5, if you were to count to 6(base 10), you would count like 1,2,3,4,10,11. This means that there are extra charechtors for 10-15. a-f are used as 10-15. Here is how to change a color from hexadecimal to normal. Lets say that you find ffffff: Step 1: Break the color to Rr, Gg and Bb. This would be Rr=ff, Gg=ff, and Bb=ff. Step 2: Translate the colors indiviualy. We would translate Rr using this formula : Redcomponent = R*16+r*1 (note: this formula aplies to all R, G ,and B.). Using ff as Rr we would do f(15)*16+f(15)*1 =240+15=255. Step 3: Regroup the components. We would have (255,255,255). Whoa! Thats white. Experiment or use colors from other color schemes to get your pefered colors.
Now for the body of the scheme. Use the botom of this page for refrence and also use this for more info on structure: Color Scheme Structure. If you feel to lazy do type it all up, use an already existing color sheme for a base.
Installing and Testing the CS file
To install a color scheme onto the iPod, put the file in the file in mnt/iPod/usr/share/schemes/ and any pictures that you used. All you have to do to get the scheme running is go into settings then to appearence to schemes and select your scheme. The best way to test a color scheme is by putting it on iPod. Dont worry, it wont mess your iPod up if you mess up.
Detailed Reference
There are a few types of lines that can be in a .cs file, they will be expanded upon here.
For a completely detailed account for the .cs file, please read through the TTK API document, which explains this in much finer detail. This is just an overview to get you started on it.
Comments
All lines of text, starting with a 'number sign'/'crosshatch'/'hash'/'octothorpe'/whatever it's called in your region of the planet, are ignored by the .cs reader. This can (and should) be used to document your .cs file. This helps you come back to it later and know what you were thinking when you made it... it's also good practice.
# this is a comment
Metadata
The name of the cs, to be displayed by the podzilla GUI needs to be defined on the first line of the file like so:
\name My Awesome Color Scheme
Defines
Defines are used to help you use the same colors throughout your color scheme. These are defined as such:
\def black #00000
This defines the color 'black' to be #000000. This is equivalent to:
\def black #000
You can use either way to define the color, like so:
\def colorname #RRGGBB \def colorname #RGB
That is to say that you can use either 6 digit or 3 digit hex values, in standard format to define your colors. This holds true for colors in context, rather than using defines, as will be discussed later on.
For each of these 00 (or 0) is the lowest level, and FF (or F) is the highest value. These are hexadecimal values. Here are a few examples; (for more examples, explore your schemes directory)
\def white #FFF \def red #FF0000 \def blue #0000FF \def orange #8F0 # and so on.
The current scheme system allows for 16 user defined colors. When you try your scheme on your desktop build of podzilla, you will be warned if you have too many defines.
Sections
When you look at one of the schemes files, you will see various sections, defined as a word followed by a colon. These sections define the colors and behaviours of various elements in the podzilla/ttk GUI.
Within each of these sections are a list of key-value pairs that define the various color items in that element of the gui.
- header - this is the top bar of the GUI. This would have the text: 'podzilla' and contain the various header widgets on it.
- music - this is for the 'now playing' screen of your favorite music player
- window - this is used for various displays that start up a new window to display their content (?)
- dialog - when the system wants to tell you some information (with an 'ok' button) this will be referenced
- error - similarly, this is for when the system has important info for you
- scroll - this is for the vertical scroll gadget, seen on the right side of the screen when there are lists of things, or text documents, and so on
- input - this is used by all of the text input mechanisms
- menu - this is used for the body of the main system. When there is a list of selectable items, these colors are applied
- slider - this is used for horizontal value input mechanisms, like setting the contrast, wheel sensitivity, etc.
- textarea - displaying blocks of text
- battery - this is for the battery/charging header widget
- lock - this is for the 'hold switch is activated' header widget
- loadavg - this is for the load average display header widget
- box - this is a generic section, used by various podzilla applications, such as the calendar
- button - again, this is a generic section
Key-Value pairs
In each of the above sections, there is a bunch of key-value that can be set. Each of those are done as such:
key => value
a 'value' can either be an above-defined color; "black", "red", etc, an explicitly defined color "#000", "#fb0034", etc, a gradient, or an image file. Image files must be in your 'schemes' directory, right next to the .cs file. Some of these also allow for modifiers, in the form "+2" and such.
key => red, defined color key2 => #553200, undefined color key3 => <black to red>, a kind of 3d effect key4 => @filename.png, picture key5 => red +2
Gradients can be defined like so
<color1 to color2> <vert color1 to color2> <horiz color1 to color2>
If 'horiz' or 'vert' is not defined, then 'vert' is assumed. Vertical gradients go from color1 at the top to color2 at the bottom. Horizontal gradients go from color1 at the left to color2 at the right.
Images have various settings for adjusting alignment and other settings such as repeating the pattern for tiling your image and such.
Some elements can have boxes of solid colors defined over the gradient/solid color background.
NOTE: all of these elements MUST be defined in your cs file.
Structure
- header
- bg - the background color, gradient, or image
- fg - the text that appears on the header bar
- line - the line at the bottom, separating the header from the menu. +values adjust position vertically
- accent - this is a color used as an accent for various decoration styles
- shine / shadow - used for 3D-like elements. Used in the Amiga, BeOS, MacOS decorations
- gradient.top/middle/bottom/bar - used for the old gradient decorations, may be deprecated soon
- music
- bar - tbd
- bar.bg - tbd
- battery
- border - the outline of the battery
- bg - the 'fill' of the battery icon container
- bg.low - the container, under low-power conditions
- bg.charging - the container, while being charged
- fill.normal - the fill level indicator, under usual conditions
- fill.low - the fill level indicator, under low-power conditions
- fill.charge - the fill level indicator, while being charged
- chargingbolt - the 'i am charging now' lightning bolt icon color
- lock
- border - the outline of the lock icon
- fill - the center fill of the icon (may be deprecated soon)
- loadavg
- bg - the background fill of the container
- fg - the level indicator
- spike - the line that separates the two
- window
- bg - the background
- fg - the foreground (text) for the window
- border - a line border around the window
- dialog / error
- bg - the background
- fg - the text on the background
- line - a line that separates the title text from the body text
- title.fg - the title text for the dialog window
- button.bg - background fill of the buttons (OK/Cancel)
- button.fg - text for the buttons
- button.border - an border rectangle on the button
- button.sel.bg - background fill for the selected button
- button.sel.fg - text for the selected button
- button.sel.border - the border rectangle on the selected button
- button.sel.inner - an extra rectangle to emphasize the selected button
- scroll
- box - the container for the scroll bar
- bg - the background fill for the scroll bar
- bar - the current position indicator/handle in the container
- input
- border - the outline around various text input elements
- bg - the background fill for the text input widget
- fg - the text/indicators in the text input widget
- selbg - background for selected text
- selfg - foreground for selected text
- cursor - the cursor, showing text input position
- menu
- bg - the background, onto which everything is drawn
- fg - foreground text
- choice - the currently highlighted choice, for setting lists, and such
- icon - in the menu items, this is the X, >, etc icon that appears in the list
- selbg - background of the selected item
- selfg - foreground text of the selected item
- icon0, icon1, icon2, icon3 - the colors used for the icon of the selected item, these are cycled through to provide an animated appearance
- slider
- border - the container for the slider
- bg - the background fill
- full - the filled porition of the slider
- textarea
- bg - background window fill
- fg - text color
- box:
- default.bg - the background for an unselected box
- default.fg - the text for the unselexted box
- default.border - the border around the unselected box
- selected.bg - the background for a selected box
- selected.fg - the text for the selected box
- selected.border - the border around the selected box
- special.bg - the background for a special/of-interest box
- special.fg - the text for a special/of-interest box
- special.border - the border around the special/of-interest box
- button
- default.bg - the background for an unselected button
- default.fg - the text for the unselexted button
- default.border - the border around the unselected button
- selected.bg - the background for a selected button
- selected.fg - the text for the selected button
- selected.border - the border around the selected button
