Guide: Create a theme
This is a theme creation guide - written to teach the community how to create new themes for neonode phones.
This Theme-Maker is only suitable for the operating system versions 2.1.552.4 and 2.1.552.5. If a theme created hereby will be used with an older N2 operating system, it may result in malfunctions and crashes.
Introduction
Download and extract ThemeMaker.
The folder My Theme contains all the standard icons and background images and a ThemeInfo.xml file. Rename this folder and give it the name of the new theme you will create.
In this folder you will see many folders for the applications, and in them the specific icons and background images. Some folders are empty and some icons and images are not used, disregard that.
The icons and the background images for the status screen are in the folder NeoExplorer.
The icons and background images may be photoshopped or just equal exchanged. The file format PNG and the size (in pixels) of the background images should be retained. JPG is often possible, but not recommended.
Icons can also be made smaller or slightly larger, but keep in mind that an image's defined location on the screen is relative to it's top left pixel. So smaller icons move to the top and the left - a transparent frame in original size can avoid this.
The transparency (or alpha channel) of some icons, especially the sweep indicator images, should be heeded.
Edit ThemeInfo.xml
Let's start by editing the file ThemeInfo.xml using an XML editor or an text editor - such as notepad. Using e.g. OpenOffice is also possible, but remember to save the file as "plain text" in that case.
Change only the characters between the quotation marks. Do not change names, semicolons, slashes or angle brackets, as otherwise the neonode program may crash.
The version (Theme version="..."), the name of the theme (name="..."), your own name or pseudonym (creator="..."), a brief description (description="...") and, if available, an Internet address (url="...") must be registered in the ThemeInfo.xml file.
Example:
version="1.0.0.0"
name="My theme name"
creator="My name"
description="My Theme for Neonode N2"
url="http://example.com"
Colors
For modifications of a font (transparency, colour, location, layer (z-plane), alignment, size, weight) you have to edit the ThemeInfo.xml as well. The position of the keys, icons or e.g. dialog boxes can, with the exception of the status screen, not be changed by a theme.
To change the colour of a font and/or the appendant background, search in the ThemeInfo.xml for a matching name (of the screen or the application) and modify the respective colour code (rgb="eight-digit colour code").
Most things are accurately described by their names, otherwise you have to try with for instance lurid colours.
The eight-digit colour code consists of 4 byte hexadecimal numbers (ex. FF000000). The bytes represent the opacity (transparency), the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation. This represents the least (00) to the most (FF) opacity and the intensity of each of the color components.
Examples:
FF660000 (no transparency, dark red)
FF009900 (no transparency, green)
770000FF (half transparent, light blue)
FF000000 (no transparency, black)
Read more about webcolors at Wikipedia.
Do not change the first byte to "00" (or less than "55"), because invisible text is nonsense.
Also remember that the status screen (i.e. background color) can be changed by the user. Because black characters with dark outlines are difficult to see on a dark background, black chars should have bright outlining and vice versa.
Location
For a new arrangement of the items on the status screen you can modify the position (location="X;Y") of many items. "X;Y" marks the position of the top left pixel of an icon or text area from left (X-axis, 0 to 175 pixel) and the top (Y-axis, 0 to 219 pixel) of the screen.
The size of an area (size="X;Y", in pixels) should be sufficient for the whole text, which depends on the chosen font height and weight. Pay attention: The font height (in pixel) relates to the height of capital letters and numerals. Outlining and anything underneath the body line (_, g, p, q ...) is not considered. The font height is at least 7 pixels.
Alignment
You can align text in a text area with alignment="HorizontalVertical", where valid Horizontal values are Top, Middle, Bottom, and valid Vertical values are Left, Center, Right.
Example: alignment="TopLeft"
zorder
If an icon or text should overlap or superpose another item, you must define which one that should be on top by increasing its level (zorder="Z", Z-axis, from 0 to 255). Items will be displayed in that order, and the one with the highest zorder value will be on top.
Example
"RedArea" location="0;40" size="176;45" zorder="0" rgb="FFFF0000" "GreenArea" location="120;50" size="50;50" zorder="1" rgb="FF00FF00" "BlueArea" location="37;60" size="100;50" zorder="2" rgb="7F0000FF" "YellowArea" location="30;7" size="115;18" zorder="0" rgb="FFFFFF00"
Generate the theme
When you are done, it's time to generate the theme. Make sure the file ThemeMaker.exe is placed in the folder Theme Maker for 2.1.552.4 and that all other folders are still there. Execute it. A message will appear that asks you for the theme folder; select the folder you created for your theme and click Make Theme File.
If the selected folder contains a ThemeInfo.xml file, a file with the name of the theme folder and the suffix "nth" will be created.
Screenshots
When you have tested your theme (please do extensively) you should create some screenshots before spreading it to others. Screenshots can be obtained with e.g. Pelles Screen Capture for Windows CE (Google link).
Copy the screenshots listed in ThemeInfo.xml into the folder ScreenShots and recreate the theme once again. These screenshots will be shown at the bottom of the screen when selecting the theme for your N2.
To use your theme, copy the nth file to the theme folder on your N2. Finally if you're happy with it, upload your theme and distribute it to others.