[Windows Mobile Themes] MichelDiamond:
How-To Changing / Basics Creating Skins for JMLToday 5.5

(Skinning and adapting resolutions for JMLToday-Skins for beginners)

I will start with this to explain - it's really easy - you will see.

Please use CHome-Editor from Showaco to have a look about the current settings in Registry of JMLToday -> *Info&Download CHome Editor* Thanx to showaco for this great tool!

A Plugin always has Registry-Keys in HKLM/Software/Microssoft/CHome/<PluginName> - so: HKLM/Software/Microsoft/CHome/JMLToday

But the CHome-Editor gives you the faster possibility to have a look at them - and also to change.

Direct in HKLM/Software/Microssoft/CHome/JMLToday you can find the common string, which are used for settings e.g. your chosen town-Code

In Page1 you will find everything, which is displayed on the Page, when you scroll to JMLToday in Titanium. e.g. the current Time, Weather, Appointment, Wifi/Bluetooth,...

In Page2/3/4 you will find the other stuff, wich is displayed - if you scroll right or left on the Panel to the second/third/fourth page (with the weather forecast, Calendar and SMS) .

In CondensedPage you will find the stuff, which is displayed, when JMLToday is NOT active, but you see it on your screen (SMS and Phone-Counter, Date, mostly Battery)

JMLToday uses "Skins" (Files with suffix .plg)

to show this Values on the screen. Text is displayed as text. Graphics are in Registry the path to the Graphic, which should be displayed.

Example for "Date" - Registry in CHome-Editor on the left - corresponding JMLToday-Display on the right:

JMHL has made a description of the Items in the JMLToday-Thread at Post #3 -> *Items overview and description*

The most things are self-explaining - "Date" is the current date, "Alarm" the AlarmTime,...

Each Item in Name with PNG, e.g. "AlarmPNG" describes a Graphic and is therefore in Registry a path to the Graphic.

Some special things to understand in short view:

"ville" = Town (it's French :) )

"rdv" = next Appointment in calendar

"H1", "H2", "M1", M2" = HH:MM.. the digital Clock - Graphics

With this knowledge we can take a look to the .plg-File = the Skins.

All .plg's (the skin-Filess) have following structure - and so you will always see, for which resolution(s) and portrait/landscape they are made:

[SIZE="2"]<?xml version="1.0" encoding="utf-8"?>
<plugin>
<name>JMLToday</name>
<position>0</position>
<layouts>
<layout screenWidth="480" screenHeight="640">
<Layer ID="JMLTodayExpanded" nil="False" Width="480" Height="164" Clip="False">
<Layer ID="Page" Clip="False">
[COLOR="Red"]... Here: Description of Items in Page1 and Page2 for VGA [B]portrait [/B](480x640)[/COLOR]
</Layer>
</Layer>
<Layer ID="JMLTodayCondensed" Visible="False" Width="480" Height="68">
<Layer ID="Page">
[COLOR="Red"]... Here: Description of Items when Panel is not active (minimized) for VGA [B]portrait [/B](480x640)[/COLOR]
</Layer>
</Layer>
</layout>
<layout screenWidth="640" screenHeight="480">
<Layer ID="JMLTodayExpanded" nil="False" Width="480" Height="164" Clip="False">
<Layer ID="Page" Clip="False">
[COLOR="Red"]... Here: Description of Items in Page1 and Page2 for VGA [B]landscape [/B](640x480)[/COLOR]
</Layer>
</Layer>
<Layer ID="JMLTodayCondensed" Visible="False" Width="480" Height="68">
<Layer ID="Page">
[COLOR="Red"]... Here: Description of Items when Panel is not active (minimized) for VGA [B]landscape[/B](480x640)[/COLOR]
</Layer>
</Layer>
</layout>
<layout screenWidth="240" screenHeight="320">
<Layer ID="JMLTodayExpanded" nil="False" Width="320" Height="68" Clip="False">
<Layer ID="Page" Clip="False">
[COLOR="Red"]... Here: Description of Items in Page1 and Page2 for QVGA [B]portrait [/B](240x320)[/COLOR]
</Layer>
</Layer>
<Layer ID="JMLTodayCondensed" Visible="False" Width="480" Height="68">
<Layer ID="Page">
[COLOR="Red"]... Here: Description of Items when Panel is not active (minimized) for QVGA [B]portrait [/B](240x320)[/COLOR]
</Layer>
</Layer>
</layout>

[COLOR="Red"]...and so on for the other resolutions and portrait and landscape[/COLOR]

</layouts>
</plugin>[/SIZE]

The Items know to which Page (1 or 2) they belong - because of the definition in the Registry. There we have the difference between Page1 and 2 - it's not made in the .plg

But don't make chaos, if you create your own style... begin with everything from Page1, then make a comment, e.g.

<!-- JMLToday : meteo Page2 -->

and go on with Page2

----

There are two kind of items in the layer - Images and Text.

The Appearance depends are the left/top (Position) and width/height (size) entries represented in pixels. Left and Top values are counted from the left top edge of the layer - not the complete screen!

Example for the Battery Image,which has a Text-Value and a Image:

The code in the .plg-File:

<Image ID="BattPNG" Left="266" Top="10" Width="40" Height="40" BlurFactor="3"
ScaleStyle="Fit" Opacity="1.0"
/>

<Text ID="BattVAL" Left="261" Top="50" Width="56" Height="32" FontFamily="Tahoma"
FontSize="6" FontStyle="Regular" Wrap="False" HorizontalAlignment="Center"
VerticalAlignment="Top">
<TextStage TextOffsetType="TextOffsetDropBottomRight"
Color="#00000000" TextOffset="1" BlurFactor="3" Alpha="1.0"/>
<TextStage TextOffsetType="TextOffsetNone" Color="#FFFFFFFF"/>
</Text>

Please compare the picture with the code-especially the position and the size then you will see,how it's counted from the left top corner of your active panel.

I have VGA-Resolution - so Ialso know that in portrait my screen width is 480.

The Battery's Icon (also Top left corner of the Image) is over the half of the Picture (Left=266) and it's only a little bit below the Top of the Panel (Top=10)

Look at the clock next to the Battery.. it's over the top of the Panel... and so: yes - you can show everything outside the panel - and so are also negative values allow. Is used in some skins of JMLToday to show the clock or the Weather far above the active Panel.

Back to our Battery - the width/height-values describe the size of the Battery.

The other values are optional, but very nice for skinners - opacity, blurfactor are self-explaining. An Item will get more and more transparent, if youset the opacity from 1.0 -> 0.0 (try 0.5 and you will see the difference).

ScaleStyle is something special. Without this Value the Image must correspond to the heig and width-settings. This can be a problem, if youhave no fix Icon-Sizes for each possible Image.

Therefore there are two possible Values to make Titanium the Work:

ScaleStyle="Fit" --> Icon is resized proportional until one of the width or height limit is reached

ScaleStyle="Strech" --> Icon is resized - but NOT proportional - so that has the exat size of width AND height.

The Text (BattVal) is direct shown below the image - and in the .plg the Text is somewhere below the Image. In case of Battery not ierresting, but very interesting, if some items would overlap themself. The last defined Item is the foreground item.

Some nice Values for Text:

FontSize is self-explaining

Also HorizontalAlignment="Center" or "Right" or "Left", VerticalAlignment="Top"

But keep in mind - if you set a Text as left=xxx and the alignment is "right" - then the Text doesn't start at xxx - only if it would suit exact in the defined height/width.

Wrap="True" (or "False") - with this youcan define multiline Text (True). But only withing your defined borders of width and height as Maximum. If your image or text gets clipped off, try adding Clip=”False”

------

I think the Rest is learning by doing, but ith this informations, you can have a look at each .plg-File (skin) in JMLToday and adapt it, how YOU want it.

Also Adaptig from VGA to QVGA is now easy - only add the Layer like the Code I showed, copy all inside - and take from each top/left/height/width-value the half (480x 640 / 2 = 240x320) - but with some few special cases - especially the Text Alignment, so perhaps you should have a look at the result and move some Items some pixels to the right or left. Or reduce the FontSize a little bit.

But now - there's a program to do this!!! From Ondra Star:

Derived from the *CPR converter*

he made the *PLG converter*

Take a skin in whatever resolution - and use this easy program to get it inyour resolution - please also share it than to all.

Please: Please mark each Titanium7-Skin th "WM7" in filename and perhaps add the Resolutions, too.

Happy skinning - and please share your results to the other users - so we all have a growing amount of Skins for all Resolutions.

.