Generic mobile device Skinning

Generic Skinning

Disclaimer:

• All the software applications that appear below represent trademarks and they are the property of their respective owners.
• Software piracy is not encouraged in this article.
  
• Use and implement my notes in this article at your own risk.

The next steps will show how to do the the skinning by writing your own UI which will replace the existent UI from your mobile device.
By mobile device I refer here those GPS devices used for navigation: Pocket PC (PDA), PND (PNA) and Smartphones.
This article refers to any of the GPS devices above that runs on Microsoft Windows CE 5.

This skinning may be realized by using the SystemInformation application, at this time at version 1.6.1, written by Schumann.

1. Prerequisites

1.1. Microsoft ActiveSync. This is a Microsoft free application (at this time at version 4.5) that allows your Personal Computer (PC) to interconnect with the mobile device by using a USB connection. Of course, being a Microsoft application, you will need to have a Windows OS preinstalled. ActiveSync connection is helped by a browser capabilitywhich allows you to show the contents of your mobile device; this ActiveSync browser is integrated with Windows Explorer PC app.

Image: ActiveSync Guest connected

Download it from here:
Download ActiveSync

1.2. CeRegEditor version 0.0.4.3. This application will allow you to edit the registry of your WinCE based device.

Image. CERegEditor expanded

Download it from here:
Download CERegEditor

1.3 System Information v. 1.6.1. This is a PC application that provides a UI application for your mobile; you can edit the configuration files and customize your own UI.

Image. SystemInformation v. 1.6.1

Download it from here:
Download SystemInformation

Optionally, you may download icons which will help you to design your own UI from here:
IconArchive
Iconspedia
Download and install the files above.

2. Start ActiveSync
Connect your device to PC via USB.
Start ActiveSync application from the PC. A gray refresh icon will appear on the windows taskbar in the notification area.
Checkout the USB mobile device type connection. Your mobile device USB connection should provide these 2 operation types: Mass Storage and ActiveSync. Check ActiveSync; the device will restart and re-enter in the main menu.
If the coonection was successful then the grey icon in the notification area will become green and your device is connected to PC. You may click on ActiveSync's "explore" and see the content of your device.

3. Find out which UI application is installed.
This step is mandatory in order to change the location of the application that will be started by WinCE when the device starts.
Open CeRegEditor, expand HKEY_LOCAL_MACHINE (HKLM), click on "Item" and look for the value of "Launch50". "Launch50" tells WinCE which is the start shell that it will launch when the device starts.
Change the existent "Launch50" value to "\[SD Card]\SystemInformation\SystemInformation.exe", where "[SD Card]" is the mapped drive of your SD card (ie. "SDMMC", or even "SD Card").
Now you shortcut-ed your existent UI application and WinCE will run the "\[SD Card]\SystemInformation.exe" UI application instead.

Note: CeRegEdit will work only if device is connected to PC via ActiveSync.

4. Establish the SystemInformation files you will work with.
Unzip the downloaded "SystemInformation1.6.1_Desktop.zip" file to "c:\SystemInformation" folder on your PC.
Look inside "c:\SystemInformation\SysInfoSettings.ini". You will see the line "Main/main.ini". This means that when mobile device started, the SystemInformation will firstly load the "main.ini" configuration file and will output the "main" UI panel.
There are many "INI" files in this structure and each of "INI" file coresponds to an UI Panel.
Look inside "c:\SystemInformation\Icons" folder. You will see some 16x16, 32x32, 128x128 resolution icons. These icons are used in the panels we define as UI pages of SystemInformation.exe application.
Run the SystemInformation32.exe application from your PC. You will see these UI pages consisting and the icons from "c:\SystemInformation\Icons" placed on UI buttons.
You can also create bitmaps instead of icons, but you will loose some UI benefits (transparency, alpha filtering, scaling, etc) which we'll discuss later.
Use external image editors (Photoshop, Fireworks) to create/edit your own icons and bitmaps.
The above files you will work with.
Note: the SystemInformation32.exe was written by Schumann to preview the UI application changes on PC.
SystemInformation32.exe will run only on your PC (assuming a Windows OS on 32 bits) and SystemInformation.exe will run only on your mobile device.
Practically, both EXEs behaves the same but on different OS architectures.

5. Work with the INI configuration files.
Open Notepad.
Go to "File -> Open". Browse for: "c:\SystemInformation\Main\main.ini" file and open it.
You will see more sections like:
a. GLOBALSETTINGS section
b. BATTERY section
c. TIME section
d. DATE section
e. ICONXPBUTTON section
f. TEXT section
g. BUTTON section
h. WINDOWSBUTTON section
i. BITMAPBUTTON section
j. other sections

We'll explain each of them below:

a. GLOBALSETTINGS section
As we said before, any "INI" file coresponds to an UI Panel, so the GLOBALSETTINGS will refer to the global settings for that panel.
Having the next section:

GLOBALSETTINGS
ShowMessage = 0
QuitOnDoubleClick = no
X = 0
Y = 0
Width = 320
Height = 240
Arrange = No
BackgroundBitmap = ..\background.bmp
StartUpAnimation = RollDown
ShutDownAnimation = RollDown
Accelerated = yes
TopMost = no

Then, the panel will show no message, will not quit at double click, will start from the point (0, 0) and will end to the point (320, 240). The point (0, 0) coresponds to the upper-left corner.
The panel will have a background image given by "BackgroundBitmap", will have accelerated "RollDown" animation when it starts and accelerated "RollDown" animation when it quits.
The "TopMost" attribute says that this panel will run as the top most panel in the UI graphics layer.
Note: I haven't seen "TopMost" working well.

b. BATTERY section
Having the next section:

BATTERY
x = -6
y = 6
Width = 32
Height = 12
ColorBattery = A0A0A0
ColorHigh = 00A000
ColorLow = A0A000
ColorCritical = A00000
Segments = 3


The attribute names say all.

c. TIME section
Having the next section:

TIME
x = 114
y = -38
Color = A0A0A0
Format = HH':'mm' Uhr'
Size = 24
Weight = 700
CreateFont
Interval = 60000

This will output the current time.
The attribute names say all.
"Interval" is set to miliseconds, thus the interval defining a minute. In the "Format", "HH" is 2-digit hour, aso.

d. DATE section
Having the next section:

DATE
x = 119
y = -18
Color = A0A0A0
Size = 20
Weight = 700
CreateFont

This will output the current date.
The attribute names say all.

e. ICONXPBUTTON section
Having the next section:

ICONXPBUTTON
x = 24
y = 22
Command = \sdmmc\navigator\mnavdce.exe
SizeNormal = 96
SizePushed = 128
ScaleAlpha = 70
IconNormal = ..\Icons\MN5.ico
ScaleAlpha = 100
IconPushed = ..\Icons\MN5.ico
QuitOnExecute = yes

When shown, the ICONXPBUTTON will have the image given by "IconNormal", will start at (24, 22) and will end at (24+96, 22+96), "96" being given by "SizeNormal" and will have an Alpha transparency filter of 70% given by "ScaleAlpha = 70".
When pushed, the ICONXPBUTTON will have the image given by "IconPushed", will start at (24, 22) and will end at (24+128, 22+128), "128" being given by "SizePushed" and will have an Alpha transparency filter of 100% given by "ScaleAlpha = 100".

Note: Try to follow the attribute order given in this section. Do not change the order for example for "ScaleAlpha" atribute as the SystemInformation may not correctly render the UI panel.

"QuitOnExecute = yes" will quit the main panel and also the SystemInformation, but after it will launch "\sdmmc\navigator\mnavdce.exe" given by "Command".
You may enter any WinCE executable file (*.exe) on the "Command" attribute by using the physical or relative path.
The physical path should start with "\" followed by the drive you want to access.
Examples: "\[WinCEDir]\explorer.exe", "\[SDCard]\Games\sudoku.exe", where "[WinCEDir]" is the Windows CE instalation folder seen as a drive.
The relative path refers to the current folder. Thus, if you want to access the parent of the current folder your path should start with "..\".
Example: "..\Games\sudoku.exe".
In a relative path if you want to access a subfolder of the current folder, your path should start with the name of that subfolder.
Example: "Main\main.ini".


f. TEXT section
Having the next section:

TEXT
x = 40
y = 120
Text = Navigation
Color = FFFFFF
FrameColor = 000000
Size = 24
Weight = 700
CreateFont

This section will create a text UI object with the size of 24. The text outputed is "Navigation".

g. BUTTON section
Having the next section:

BUTTON
x = 0
y = 228
Height = 12
Width = 320
Command = "\Program Files\ShowTaskbar.exe"

This is a particular type of ICONXPBUTTON which will output a button having no associated image.

h. WINDOWSBUTTON section
Having the next section:

WINDOWSBUTTON
x = 120
y = 52
Width = 80
Height = 50
Text = Apps
ColorPushed = AAAAAA
NewIni = ..\Apps\apps.ini
ShutDownAnimation = FlyDiagRightDown

This will define a button having the Windows aspect (kind of "OK" or "Cancel" Windows XP buttons), having the text "Apps".
The "NewIni" attribute defines the next panel that is shown when pushing this button.
Note: The "NewIni" applies also to ICONXPBUTTON and BUTTON sections.

i. BITMAPBUTTON section
Having the next section:

BITMAPBUTTON
x = 167
y = 185
NewIni = ..\Games\games.ini
Command = "\Games\msgames.exe"
BitmapNormal = ..\Icons\games.bmp
BitmapPushed = ..\Icons\games1.bmp

This will define a bitmap button, ie. you may associate an image of type "bmp" to it.
Note: the transparency, Alpha transparency filter and scaling will not work for the BITMAPBUTTON.

j. other sections
There exists other type of sections like: DISKMEM (occupied space on disk), MEMORY, aso. We just described the most important ones.

4. Saving all your work to mobile device.
After you have created and edited the INI and bitmap files, you put them in subfolders under "c:\SystemInformation" on your PC. Make sure the "Command" attribute from the INI files match the respective executable files.
Also, make sure the "SystemInformation.exe" is located under "c:\SystemInformation" folder. If the PC executable "SystemInformation32.exe" is still located under "c:\SystemInformation" folder, then you may delete it.
After you formed the SystemInformation structure, reconnect your device to USB in the "storage card" mode and not in the ActiveSync mode. Thus, you will have access to the "SD Card" drive which will appear onto your PC as a "Removable device".
Copy the "c:\SystemInformation" folder and all of its contents to this "Removable device".

Now you're done.

Finally note:
after all the above operations, a device restart is required.
Do not close the device from the main "ON-OFF" button. Firstly "suspend" it by pushing the Stand-by top button and then push the main "ON-OFF" button.
Otherwise your changes will not have any effect.