Well heres the contents....
-Background Information About Homescreens
-Compiling an XML File
-Resource of Standard Plugins
Background Information
A homescreen is basically made up of background image/s and an XML file.
The XML file basically tells the phone where to display things on the homescreen (such as Time and Date/Message Count etc) and how (location, colour etc)
Creating an XML is pretty easy when you get the just of it and it doesn't require any expensive software. I personally use Notepad (Start - All programs - Accessories - Notepad) which is included with all PCs but you can use any text editing software of your choice.
A homescreen is made up of a layer of plugins. Ill illustrate this using images. If we look at my icon screen...
Number of downloads: 1461
We can see the layers of plugins that make up this screen.
Number of downloads: 1279
Plugins, as previously said, are basically layers of the screen. Each plugin is specific in what it displays (So the 'Message Count plugin' will display any new SMS/MMS/Email)
Heres a list of plugins that are included as standard with your phones....
-Iconbar - displays battery life, signal strength, gprs availability etc
-Profile - displays profile currently in use
-Message Count - displats any new messages
-Calendar - displays an upcoming appointments
-Allday - displays an allday event
-MRU - displays icons of Most Recently Used applications
Resources of these plugins can be found towards then end of this guide
-Missed Calls - displays how many missed calls you currently have
Theres also 3rd party apps which you can purchase and some are even free;
-SBSH Facade - love this plugin, displays tasks, calendar appointments and a launcher tab of programmes which is customisable. Sweet
-Smart Monitor - Can display battery % left using icons or text labels. Also shows signal strength, memory remaining, SD memory remaining, all in all this plugin is sweet too. DrBlow incorporates this well
- RJTime and SLiClock - both show the time in an animated analogue clock and also other things such as date time and carrier etc. Nice
- Fizz Traveller - Not a personal favourite but shows the weather on the homescreen. Looks nice on skins including ones by Encece
-MadBeetle AnimPlugin - Displays animations on the homescreen. A lot of nice stuff made by GPCarreon
I create the background image before the XML. This way I can fit the words into the place of the image I want. The image must be 240pixels wide and 293pixels in height to fit perfect. I personally use Adobe Photoshop. Others may use Paint Shop Pro. If you dont have either of these then this link may be worth looking into...
http://www.eecs.wsu.edu/paint.net/
Compiling the XML
From here I will split up the XML of my Icons screen and explain what each part of it does and also how it can differ. Anything you see in a code box is part of the XML and is what you type into Notepad (or your chosen text editor). Also note, the order in which the plugins are listed on the homescreen are the order they are written in on the XML. You'll get it as we go along
Each homescreen starts off like this ....
<?xml version="1.0"?> <home>
The version will show when the XML has been updated. So the first time you make the homescreen it will be 1.0. Updating it will then be 1.1 for example or 2.0 .Its not vital you do this but it can be useful.
Things between < and > are known as tags. Tags open and then close. So the 'home' tag opens like this
We then include the following information...
<author>w411y</author> <contacturl>http://www.w411y.com</contacturl> <title>w411y - Icons</title> <version>1.0</version>
Notice more tags. Between the author tag you put your name or your online status... whatever.
Between the contact URL tag can go your email address or your website or any means of contacting you about the screen for problems or praise.
What you type between the title tag will be displayed on your phones 'Start - Settings - Home Screen'
Version tag (explained previously)
Now the defaults....
<!-- Defaults --> <default target-width="240" target-height="320" font-face="Segoe Condensed" font-size="19" font-weight="normal" padding-left="0" padding-right="0" bgcolor="transparent" fgcolor="COLOR_HOMETEXT" padding-top="0" b-border-color="COLOR_HOMERULE" b-border-width="0"> <format state="selected" fgcolor="COLOR_HOMEHIGHLIGHTTEXT"/> </default>
Before I continue ... anything between <!-- and --> is not read by the phone so nothing is displayed on the actual homescreen. The <!-- and --> is just a way of keeping the XML organized so if you ever need to edit something you can find it quicker.
The default width is set to 240x320 (screen size of QVGA devices such as C550, C550 Qtek 8310 SP5 etc)
The default font for WM5 is 'Segoe Condensed' and for WM2003 it's 'Nina'
Font size is set to '19'. This means that if you do not include the font size in the plugin it will be size 19. Font weight can either be 'normal' or 'bold'
Padding is how many pixels on the designated side are left blank. Its best to leave them all set to 0... it makes things easier later on.
Things in the default section are not much important as the font size and colour etc are usually included in the code for the plugin.
Now we continue with the background image...
<!-- Background --> <background bgimage="Icon Background.jpg" valign="top" bgcolor="#000000" />
The background image "Icon Background.jpg" is this image ...
Number of downloads: 789
'valign' stands for vertical align and can be either top or bottom. As long as your background image is 240x293 you shouldn't have to worry about this. Same applies for the background colour as your image will cover the screen at 240x293.
Now for the colour scheme...
<!-- Colour Scheme --> <scheme> <color name="COLOR_WINDOW" value="#FFFFFF"/> <color name="COLOR_WINDOWTEXT" value="#000000"/> <color name="COLOR_STATIC" value="#FFFFFF"/> <color name="COLOR_STATICTEXT" value="#000000"/> <color name="COLOR_GRAYTEXT" value="#CCCCCC"/> <color name="COLOR_WINDOWFRAME" value="#64C84C"/> <color name="COLOR_HIGHLIGHT" value="#A3A2A5"/> <color name="COLOR_HIGHLIGHTTEXT" value="#FFFFFF"/> <color name="COLOR_MENU" value="#FFFFFF"/> <color name="COLOR_MENUTEXT" value="#000000"/> <color name="COLOR_GRADLEFT" value="#AEC6DE"/> <color name="COLOR_GRADRIGHT" value="#AEC6DE"/> <color name="COLOR_INTGRADLEFT" value="#AEC6DE"/> <color name="COLOR_INTGRADRIGHT" value="#AEC6DE"/> <color name="COLOR_HIGHGRADLEFT" value="#A3A2A5"/> <color name="COLOR_HIGHGRADRIGHT" value="#A3A2A5"/> <color name="COLOR_TRAYGRADLEFT" value="#AEC6DE"/> <color name="COLOR_TRAYGRADRIGHT" value="#AEC6DE"/> <color name="COLOR_TRAYTEXT" value="#000000"/> <color name="COLOR_BTNFACE" value="#64C84C"/> <color name="COLOR_BTNTEXT" value="#FFFFFF"/> <color name="COLOR_SCROLLBAR" value="#A3A2A5"/> <color name="COLOR_alertWINDOW" value="#FFFFFF"/> <color name="COLOR_alertTITLE" value="#444444"/> <color name="COLOR_alertRULE" value="#000000"/> <color name="COLOR_HOMETEXT" value="#000000"/> <color name="COLOR_HOMEHIGHLIGHTTEXT" value="#000000"/> <color name="COLOR_HOMERULE" value="#A3A2A5"/> <color name="COLOR_HOMEHIGHLIGHT" value="#A3A2A5"/> <color name="COLOR_STARTMENUTEXT" value="#000000"/> <color name="COLOR_TEXTSELECT" value="#FFFFFF"/> </scheme>
Heres what each part stands for ....
COLOR_WINDOW
Background color for all application windows and controls, including the transparent portions of the scroll bar stripes.
COLOR_WINDOWTEXT
Text color for list views, controls, and labels. Does not set menu text color, soft key text color, or button text color.
COLOR_STATIC
Background color for static controls, such as labels. Also sets the background color for message boxes.
COLOR_STATICTEXT
Text color for static controls such as labels.
COLOR_HIGHLIGHT
Color of selection for list views, controls, menus, and soft key buttons.
COLOR_HIGHLIGHTTEXT
Color of text when an item has selection, such as a list view element or a control, and highlighted soft keys.
COLOR_MENU
Background color for menus.
COLOR_MENUTEXT
Text color for menu items.
COLOR_GRAYTEXT
Color for disabled text, such as disabled menu items and soft key buttons.
COLOR_GRADLEFT
Starting color value for the background gradient.
COLOR_GRADRIGHT
Ending color value for the background gradient.
COLOR_INTGRADLEFT
Starting color value for the secondary background gradient.
COLOR_INTGRADRIGHT
Ending color value for the secondary background gradient.
COLOR_HIGHGRADLEFT
Gradient highlights are not supported. COLOR_HIGHGRADLEFT and COLOR_HIGHGRADRIGHT must be set to the same value.
COLOR_HIGHGRADRIGHT
Gradient highlights are not supported. COLOR_HIGHGRADLEFT and COLOR_HIGHGRADRIGHT must be set to the same value.
COLOR_TRAYGRADLEFT
Starting color value for the title bar gradient.
COLOR_TRAYGRADRIGHT
Ending color value for the title bar gradient.
COLOR_TRAYTEXT
Color for the title bar text.
COLOR_WINDOWFRAME
Color of the dividing line between the main window and the soft key region, and the bounding rectangle around the scroll bar thumb.
COLOR_BTNFACE
Unselected background color for the soft key region.
COLOR_BTNTEXT
Unselected text color for the soft key region, navigation glyph and scroll bar thumb.
COLOR_SCROLLBAR
Color of the stripes on the scroll bar.
COLOR_alertTITLE
Color of the title text in an alert.
COLOR_alertWINDOW
Background color for alerts.
COLOR_alertRULE
Color of the dividing lines on the Home screen.
COLOR_HOMERULE
Color of unselected text on the Home screen.
COLOR_HOMEHIGHLIGHTTEXT
Color of selected text on the Home screen.
COLOR_HOMEHIGHLIGHT
Background color of a selected plug-in on the Home screen.
This image may also help you ....
Number of downloads: 4101
By the way.. the way the colours are wrote #F456DA is known as a HEX colour code. If you have photshop you will notice the code on the bottom right of the pop up windows when selecting a new colour. However there are also websites which wil give you the codes such as ....
http://hotwired.lyco...ce/color_codes/
Now we start including the plugins...
First up is the Iconbar Plugin
<!-- IconBar Plugin -->
<plugin clsid="{837FC251-FE69-43ad-84E0-EBCEDEBA0884}" name="iconbar" height="0"><iconbar fgcolor="#FFFFFF"/><background bgcolor="transparent" b-border-color="COLOR_WINDOWFRAME" b-border-width="0"/></plugin>Each plugin has its own unique clsid which is how the homescreen identifies the plugin. Its then followed by the plugins name.
This is not the best plugin to explain how height works. But for the iconbar its 27 pixels in height by default. So even though height is set to 0...its taking up 27 pixels in height. So if the height was set to 20, then the plugin would take up 47pixels on the homescreen.
The fgcolor is the colour of the things displayed... in this case white (#FFFFFF)
The background is transparent. I prefer this as you can draw your own background to the iconbar on the image rather than have a flat colour (such as black #000000)
Borders I feel look a bit scrappy so I tend to leave it as 0 but its down to you if you want one or not.
Heres an image to help illustrate this...
Number of downloads: 716
Next up we have the Date/Time/Carrier Plugin...
<!-- Date/Time/Carrier Plugin -->
<plugin clsid="{E09043DF-510E-4841-B652-388316977A7A}" name="carrier" height="78">
<clock>
�<time font-weight="bold" fgcolor="#000000" font-size="30" valign="top" halign="left" mode="24" y="53" x="57" />
�<date font-weight="normal" fgcolor="#000000" font-size="19" valign="top" halign="left" mode="short" y="60" x="125" />
</clock>
</plugin>This plugin can display the current Date,Time and your Carrier (ie Orange, Vodafone etc)
Again you see the clsid and the plugin name.
The height being 54 pixels. So there is an area of 240pixels wide by 54pixels high where the date time and carrier can be displayed.
The font weight can either be "bold" or "normal"
fgcolor is the colour the time will be displayed so in this case its black (#000000)
The font size is 30.
valign stands for vertical align(either top or bottom) and halign stands for horizontal align(either left or right)
mode="24" means the time will be displayed as 24 hour clock. You can set it to 12 and this will show as 3:45PM.
To decide where to place the time you use x and y co-ordinates.
x = the number of pixels from the left of the screen
y = the number of pixels down from the top of the plugin
Being as our valign is top and halign is left then the top left of the time is at 57,53 as shown in the picture below.
Everything is the same for date except you'll see mode is equal to short. short is 27/11/1989 for example and long would be 27th November 1989.
This picture may also help visualize how it all works.....
Number of downloads: 735
Now we type out the Message Count Plugin....
<!-- SMS Count Plugin -->
<plugin clsid="{2F930BF0-6FE9-4a53-9E17-88E9247BAB48}" name="SMScount" height="54">
<background>
�<format state="selected" bgcolor="transparent"/>
</background>
<label y="38" x="159">
�<format state="selected" halign="left" bgcolor="transparent" fgcolor="#000000" font-weight="bold" font-size="16" />
�<format state="unselected" halign="left" bgcolor="transparent" fgcolor="#000000" font-weight="normal" font-size="16" />
�<text>Email:<unreadEmail/></text>
</label>
<label y="38" x="59">
�<format state="selected" halign="left" bgcolor="transparent" fgcolor="#000000" font-weight="bold" font-size="16" />
�<format state="unselected" halign="left" bgcolor="transparent" fgcolor="#000000" font-weight="normal" font-size="16" />
�<text>SMS:<unreadSMS/></text>
</label>
<label y="38" x="105">
�<format state="selected" halign="left" bgcolor="transparent" fgcolor="#000000" font-weight="bold" font-size="16" />
�<format state="unselected" halign="left" bgcolor="transparent" fgcolor="#000000" font-weight="normal" font-size="16" />
�<text>M@il:<unreadMMS/></text>
</label>
</plugin>All pretty much straight forward, pretty much the same as the Date Time and Carrier plugin.
You get the clsid, name and height. No border and then all the details for the labels (labels being what is displayed)
Everything between
Another thing to note is this plugin is a selectable plugin (aswell as Profile, Calendar, Allday, MRU) This means that when you are scrolling through the layers using the joystick you can select this layer and press the joystick taking you to Messages. Unlike Date/Time/Carrier and Iconbar which is not selectable.
As it is a selectable plugin then you will notice
This is a way of identifying which layer of the plugin you have just scrolled on to.
There are many ways of going about this.
When scrolling onto the plugin you can do one of the following...
-Make the text go bold or go from bold to normal
-Change the color of the text
-Change the background image
-Change the size of the font
Its pretty straight forward, anything in the selected part is what the label will look like when scrolled on to, and anything in the unselected part is what the label will look like when the plugin is not in selection.
In the above example you can see that when the plugin is in selection the font goes bold.
Note/ the code for adding a background image is bgimage="path to image file" and put that in the background selected part somewhere.
Heres the profile plugin.....
<!-- Profile Plugin -->
<plugin clsid="{95976968-45D5-40c9-9779-2B859B1C2FEC}" name="Profile" height="46">
<background>
�<format state="selected" bgcolor="transparent"/>
</background>
<label h="16">
�<format state="selected" x="59" y="30" font-weight="bold" fgcolor="#000000" font-size="16"/>
�<format state="unselected" x="59" y="30" font-weight="normal" fgcolor="#000000" font-size="16"/>
<text>Profile:<profile/></text>
</label>
</plugin>Everything here is the same as the message plugin. Exactly the same layout and tags. Same applies for the next plugin, the calendar plugin.....
<!-- Profile Plugin -->
<plugin clsid="{95976968-45D5-40c9-9779-2B859B1C2FEC}" name="Profile" height="46">
<background>
�<format state="selected" bgcolor="transparent"/>
</background>
<label h="16">
�<format state="selected" x="59" y="30" font-weight="bold" fgcolor="#000000" font-size="16"/>
�<format state="unselected" x="59" y="30" font-weight="normal" fgcolor="#000000" font-size="16"/>
<text>Profile:<profile/></text>
</label>
</plugin>
<!-- Calendar Plugin -->
<plugin clsid="{865A354A-4A96-4687-B001-C155DC0DBE76}" name="calendar" height="54">
<background>
�<format state="selected" bgcolor="transparent"/>
</background>
<label w="177" h="16" x="59" y="34">
�<format state="selected" font-weight="bold" fgcolor="#000000" font-size="16"/>
�<format state="unselected" font-weight="normal" fgcolor="#000000" font-size="16"/>
�<text><subject/></text>
</label>
</plugin>The only thing different thing with this plugin is what goes between the text tags.
In this example the subject of an upcoming appointment is shown. You can alos include time and location etc as I will explain in the plugin resource later on.
Now that all the plugins are listed we close the XML with this.....wait for it.....
Tuh Duh
</home>
Yes ladies and gentlemen thats it
Scroll down for a resource of plugins to use in your very own homescreens and Ill also highlight what is edittable in all of the plugins.
Plugin Resource
Here you will find a resource of code for all the standard plugins and what you can edit with them. Feel free to use these in your own homescreens... after all, thats what its here for
Iconbar Plugin
<!-- IconBar Plugin -->
<plugin clsid="{837FC251-FE69-43ad-84E0-EBCEDEBA0884}" name="iconbar" height="?">
<iconbar fgcolor="#??????"/><background bgcolor="transparent" b-border-color="COLOR_WINDOWFRAME" b-border-width="?"/>
</plugin>Choose designated height in pixels (Total height of screen is 293)
fgcolor is the colour the labels are displayed as so put a HEX Colour here (eg// white #ffffff)
bgcolor is the background colour of the plugin so put a HEX Colour. If set to transparent you can see background image behind plugin (which in my opinion looks best)
b-border width adds a border. If 0 then no border (which in my opinion looks best)
MRU Plugin
<!-- MRU Plugin -->
<plugin clsid="{79EFB752-CB70-446d-B317-499723482B3D}" name="startmru" height="??">
<background b-border-width="?" />
<mru icon-size="?" x="?" y="?" halign="left" valign="top" max-buttons="?" />
</plugin>Icon Size can be set to 16 or 32
Max Buttons is the ammount of icons display (bearing in mind it must fit on the screen)
Date/Time/Carrier
<!-- Carrier Plugin -->
<plugin clsid="{E09043DF-510E-4841-B652-388316977A7A}" name="carrier" height="??">
<label bgcolor="transparent" halign="left" font-weight="normal" y="?" x="?" w="?" font-size="?" fgcolor="#??????">
<text><carrier/></text>
</label>
<clock>
<time font-weight="normal" fgcolor="#??????" font-size="??" valign="?" halign="?" mode="?" y="?" x="?" w="?"/>
<date font-weight="normal" fgcolor="#??????" font-size="??" valign="?" halign="?" mode="?" y="?" x="?" w="?"/>
</clock>
</plugin>Mode in or
Allday
<!-- All Day Calls Plugin -->
<plugin clsid="{2FFD93B3-0FF0-4228-A6D6-D2DF177D7D92}" name="alldayevent" height="?">
<background>
<format state="selected" bgcolor="transparent"/>
</background>
<format state="noevent" visible="?"/>
<label h="19">
<format state="selected" x="?" y="?" font-weight="?" fgcolor="#??????" font-size="?"/>
<format state="unselected" x="?" y="?" font-weight="?" fgcolor="#??????" font-size="?"/>
<text>Allday:<subject/></text>
</label>
</plugin>In the format state="noevent" you can set visible to true or false. Basically, if there is no event, you can chose whether it is visible on the homescreen or not
Missed Calls
<!-- Missed Calls Plugin -->
<plugin clsid="{0BA8ABB8-1F1D-417f-88C6-DA8530E2E7A6}" name="missedcalls" height="?">
<background>
<format state="selected" bgcolor="transparent"/>
</background>
<format state="nocall" visible="?"/>
<label h="?">
<format state="selected" x="?" y="?" font-weight="?" fgcolor="#??????" font-size="?"/>
<format state="unselected" x="?" y="?" font-weight="?" fgcolor="#??????" font-size="?"/>
<text>Missed Calls :<calls/></text>
</label>
</plugin>Missed calls: is the prefix
Again we se the format state"noevent" visible="true or false" .. Many people use this so that when there is a missed call it takes up the whole screen
Call Progress
<plugin file="sysplug.dll" clsid="{37391041-C324-4725-BEE1-3232ED3539CA}" height="?">
<background>
<format state="selected" bgcolor="#??????"/>
</background>
<format state="nocall" visible="?"/>
<label>
<text>Call in progress: <progress/></text>
</plugin>Nothing new here.
Text Plugin (Displays a static piece of text)
<plugin file="sysplug.dll" clsid="{5419F376-6520-4407-B8B8-740F5B353EDA}">
<label bgtext="#??????">
<text>Hello</text>
</label>
</plugin>Owner Info
<plugin file="sysplug.dll" clsid="{4824B576-EFFE-45cf-BAE9-649B930CD244}" height="?">
<background>
<format state="selected" bgcolor="#??????"/>
</background>
<label>
<text>?</text>
</label>
</plugin>Between text the following are supported ...
Spacer
<!-- Spacer Plugin -->
<plugin file="sysplug.dll" clsid="{5419F376-6520-4407-B8B8-740F5B353EDA}" height="?"></plugin>Ideal if you want to move the Iconbar down the screen a bit
..And thats it folks. You should be set to go now so no excuses
Wally | w411y










