HOW-TO:Enable weather info display for the home screen via skinning

XBMC has support for displaying some of the more commonly used pieces of information wherever the skinner likes in the skin. This allows skinners to place commonly used information where they think it best belongs.

This tutorial will show you how to setup an image and a couple of text labels to show the current weather details on the Home Screen of the Project Mayhem 3 skin.

We start by opening up PAL/Home.xml, which is the xml file for the Home window for all 4x3 resolutions. You can find a list of the windows and their xml files here.
If you want to change the home.xml for a 16x9 resolution, you would change PAL16x9/Home.xml.

We find the <controls> section in the xml file, and insert the following xml code after the rest of the <control> blocks. This effectively places it on top of everything else, as controls are rendered in the order that they appear in the xml file.

<control>
  <description>Weather conditions</description>
  <type>image</type>
  <id>1</id>
  <posx>70</posx>
  <posy>503</posy>
  <width>45</width>
  <height>49</height>
  <info>Weather.Conditions</info>
  <colordiffuse>98FFFFFFF</colordiffuse>
  <visible effect="fade" time="250">system.hasnetwork</visible>
</control>
      
<control>
  <description>Weather Temperature</description>
  <type>label</type>
  <id>1</id>
  <posx>120</posx>
  <posy>503</posy>
  <info>Weather.Temperature</info>
  <font>special12</font>
  <align>left</align>
  <visible effect="fade" time="250">system.hasnetwork</visible>
</control>
       
<control>
  <description>Weather Location</description>
  <type>label</type>
  <id>1</id>
  <posx>120</posx>
  <posy>525</posy>
  <info>Weather.Location</info>
  <font>special12</font>
  <align>left</align>
  <visible effect="fade" time="250">system.hasnetwork</visible>
</control>

Note that the above code is making use of the <info> tag in the image control and in the label controls. A list of the various information available through the <info> tag can be found here. XBMC fills in the information at runtime for both the labels and the images. The <id> parameters are therefore unimportant and we set them to 1 as this doesn't clash with any of the important id's in the Home window. Note that the weather icon is displayed in the lower right of the screen, the temperature to the left, and the location that this weather information is for below the temperature. The only other tags of interest here is the <colordiffuse> tag which specifies that the weather icon should be semi-transparent, as the alpha portion of the color is not FF.