Difference between revisions of "HOW-TO:Enable weather info display for the home screen via skinning"

From Official Kodi Wiki
Jump to: navigation, search
 
(22 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{GoToParent|Parent=Popular Mods to XBMC}}
+
{{mininav|[[Development]]|[[Skinning]]|[[Skinning Tutorials]]}}
__TOC__
 
 
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.
 
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 [[General Navigation#Home Screen|Home Screen]] of the Project Mayhem 3 skin.
+
This tutorial will show you how to setup an image and a couple of text labels to show the current weather details on the [[General Navigation#Home Screen|Home Screen]] of the Confluence skin.
  
We start by opening up [http://cvs.sourceforge.net/viewcvs.py/xbmc/XBMC/skin/Project%20Mayhem%20III/PAL/Home.xml?view=markup PAL/Home.xml], which is the xml file for the Home window for all 4x3 resolutions. [[Window IDs|You can find a list of the windows and their xml files here.]]<br>
+
We start by opening up [https://github.com/xbmc/xbmc/blob/master/addons/skin.confluence/720p/Home.xml 720p/Home.xml], which is the XML file for the Home window for all resolutions. [[Window IDs|You can find a list of the windows and their XML files here.]]<br />
If you want to change the home.xml for a 16x9 resolution, you would change [http://cvs.sourceforge.net/viewcvs.py/xbmc/XBMC/skin/Project%20Mayhem%20III/PAL16x9/Home.xml?view=markup 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.
+
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.
  
 
<source lang="xml">
 
<source lang="xml">
<control type="image" id="1">
+
<control type="image">
 
   <description>Weather conditions</description>
 
   <description>Weather conditions</description>
   <posx>70</posx>
+
   <left>1200</left>
   <posy>503</posy>
+
   <top>600</top>
   <width>45</width>
+
   <width>48</width>
   <height>49</height>
+
   <height>48</height>
 
   <texture>$INFO[Weather.Conditions]</texture>
 
   <texture>$INFO[Weather.Conditions]</texture>
 
   <colordiffuse>98FFFFFFF</colordiffuse>
 
   <colordiffuse>98FFFFFFF</colordiffuse>
   <visible effect="fade" time="250">system.hasnetwork</visible>
+
   <visible effect="fade" time="250">Weather.IsFetched</visible>
 
</control>
 
</control>
 
        
 
        
<control type="label" id="1">
+
<control type="label">
 
   <description>Weather Temperature</description>
 
   <description>Weather Temperature</description>
   <posx>120</posx>
+
   <left>1000</left>
   <posy>503</posy>
+
   <top>600</top>
 +
  <width>200</width>
 +
  <height>20</height>
 
   <label>$INFO[Weather.Temperature]</label>
 
   <label>$INFO[Weather.Temperature]</label>
   <font>special12</font>
+
   <font>font13</font>
 
   <align>left</align>
 
   <align>left</align>
   <visible effect="fade" time="250">system.hasnetwork</visible>
+
   <visible effect="fade" time="250">Weather.IsFetched</visible>
 
</control>
 
</control>
 
        
 
        
<control type="label" id="1">
+
<control type="label">
 
   <description>Weather Location</description>
 
   <description>Weather Location</description>
   <posx>120</posx>
+
   <left>1000</left>
   <posy>525</posy>
+
   <top>620</top>
 +
  <width>200</width>
 +
  <height>20</height>
 
   <label>$INFO[Weather.Location]</label>
 
   <label>$INFO[Weather.Location]</label>
   <font>special12</font>
+
   <font>font13</font>
 
   <align>left</align>
 
   <align>left</align>
   <visible effect="fade" time="250">system.hasnetwork</visible>
+
   <visible effect="fade" time="250">Weather.IsFetched</visible>
 
</control>
 
</control>
 
</source>
 
</source>
  
Note that the above code is making use of the <info> tag in the [[Image Control|image control]] and in the [[Label Control|label controls]]. A list of the various information available through the <info> tag [[InfoLabels|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.
+
Note that the above code is making use of $INFO[] label in the [[Image Control|image control]] and in the [[Label Control|label controls]]. A list of the various information available through the $INFO[] label [[InfoLabels|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.
  
===References===
+
=== References ===
  
 
[[Window IDs|More information on the different skin files, window names, and id's can be found here]]
 
[[Window IDs|More information on the different skin files, window names, and id's can be found here]]
  
[[InfoLabels|More information on the <info> tag can be found here]]
+
[[InfoLabels|More information on the $INFO[] labels can be found here]]
  
 
[[Image Control|Information on Image controls]]
 
[[Image Control|Information on Image controls]]
  
[[Label Control|Information on Label controls]]<br>
+
[[Label Control|Information on Label controls]]<br />
  
'''See also:'''<br>
+
'''See also:'''<br />
 +
 
 +
 
 +
==See also==
 
* [[HOW-TO: Edit the Main Menu (Home Screen)]]
 
* [[HOW-TO: Edit the Main Menu (Home Screen)]]
  
  
 +
'''Development:'''
 +
* [[Add-on development]]
 +
* [[Skinning]]
  
[[category:How To|Weather on the home page]]
+
[[Category:How-to|Weather on the home page]]
[[category:Customization]]
+
[[Category:Development]]
[[category:Mods]]
+
[[Category:Skin development]]

Latest revision as of 12:43, 9 April 2016

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: