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

From Official Kodi Wiki
Jump to: navigation, search
Home icon grey.png   ▶ Development ▶ Skinning ▶ Skinning Tutorials ▶ 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 Confluence skin.

We start by opening up 720p/Home.xml, which is the XML file for the Home window for all resolutions. You can find a list of the windows and their XML files here.

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 type="image">
  <description>Weather conditions</description>
  <left>1200</left>
  <top>600</top>
  <width>48</width>
  <height>48</height>
  <texture>$INFO[Weather.Conditions]</texture>
  <colordiffuse>98FFFFFFF</colordiffuse>
  <visible effect="fade" time="250">Weather.IsFetched</visible>
</control>
 
<control type="label">
  <description>Weather Temperature</description>
  <left>1000</left>
  <top>600</top>
  <width>200</width>
  <height>20</height>
  <label>$INFO[Weather.Temperature]</label>
  <font>font13</font>
  <align>left</align>
  <visible effect="fade" time="250">Weather.IsFetched</visible>
</control>
 
<control type="label">
  <description>Weather Location</description>
  <left>1000</left>
  <top>620</top>
  <width>200</width>
  <height>20</height>
  <label>$INFO[Weather.Location]</label>
  <font>font13</font>
  <align>left</align>
  <visible effect="fade" time="250">Weather.IsFetched</visible>
</control>

Note that the above code is making use of $INFO[] label in the image control and in the label controls. A list of the various information available through the $INFO[] label can be found here. XBMC fills in the information at runtime for both the labels and the images. 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.

1 References

More information on the different skin files, window names, and id's can be found here

More information on the $INFO[] labels can be found here

Information on Image controls

Information on Label controls

See also:


2 See also


Development:

Personal tools
Namespaces

Variants
Actions
Navigation
Wiki help
Toolbox