Skin developer guide

This page provides some useful informations for skin developers.


Skin file (InfoService)

Display background image for feed/twitter selection screen. It's not needed, but to have a nicer skin looking on click on the InfoService home menu button, please add that skin file to your skin.

Filename Window ID
infoservice.xml 16000

 

Controls

No Controls. Needs only a background image.
Important: The skin file needs at least the "defaultcontrol" otherwise you will get a "Missing or invalid skin file" message.

Skin settings

In this file (infoservice.xml) skinner can also choose weather to include and define skin settings for the plugin. There are many of them available, if and which of the settings are needed is for skinner to decide.
Skin settings are not persistent, they will override user settings for the plugin while MediaPortal is running but are not saved in configuration XML on MediaPortal exit.
Skin settings are defined in <define></define> tags of the XML file, and in MediaPortal skin XML files they are in the main <window> section of the file:

<window>
    <id>16000</id>
    <defaultcontrol>0</defaultcontrol>
    <allowoverlay>yes</allowoveray>
    <define>...</define>
    <define>...</define>
    ...
</window>


The property names are self-explained. Available skin settings are:

<define>#InfoService.SkinSettings.Feeds.Enabled:yes</define>
<define>#InfoService.SkinSettings.Feeds.General.RefreshFeedEvery:15</define>
<define>#InfoService.SkinSettings.Feeds.Layout.ShowFeedItemPublishTime:no</define>
<define>#InfoService.SkinSettings.Feeds.Layout.ItemPublishTimeAllFeeds:PublishTime OR FeedName OR Both</define>
<define>#InfoService.SkinSettings.Feeds.Layout.MaxItemsPerFeedForAllFeeds:6</define>
<define>#InfoService.SkinSettings.Feeds.Layout.MaxItemsForFeedTicker:10</define>
<define>#InfoService.SkinSettings.Feeds.TickerLayout.TickerMask:%itemtitle%</define>
<define>#InfoService.SkinSettings.Feeds.TickerLayout.Separator:::</define>

<define>#InfoService.SkinSettings.Weather.Enabled:yes</define>
<define>#InfoService.SkinSettings.Weather.General.RefreshWeatherEvery:45</define>

<define>#InfoService.SkinSettings.Twitter.Enabled:no</define>
<define>#InfoService.SkinSettings.Twitter.General.RefreshTwitterEvery:25</define>
<define>#InfoService.SkinSettings.Twitter.Layout.MaxItemsForTwitterTicker:5</define>
<define>#InfoService.SkinSettings.Twitter.TickerLayout.TickerMask:%message%</define>
<define>#InfoService.SkinSettings.Twitter.TickerLayout.Separator:::</define>

Skin file (Feeds)

Display feed items and change feed on home screen.

Filename Window ID
infoservice.feeds.xml 16001

 

Controls

Control Control ID Description
Button 2 Refresh all feeds
Button 4 Change feed on home screen and on window
Button 5 Set all feeds on home screen
Listcontrol 50 Shows all feed items in a list



Skin file (Twitter)

Display twitter timelines and change timeline on home screen.

Filename Window ID
infoservice.twitter.xml 16003

 

Controls

Control Control ID Description
Button 2 Refresh twitter timelines
Button 4 Change timeline on home screen and on window
Button 5 Update twitter status
Listcontrol 50 Shows all twitter messages in a list



Property items

To show informations from InfoService on the home screen.

Twitter

Property name Description
#infoservice.twitter.enabled Indicates wether the TwitterService is enabled or disabled. e.x. False
#infoservice.twitter.messages A line of your twitter friends timelime separated by a separator thats set in the options
#infoservice.twitter.selected.username The selected username in the twitter listcontrol
#infoservice.twitter.selected.userpicture The path to the picture of the selected user in the twitter listcontrol
#infoservice.twitter.selected.timeline The selected timeline
#infoservice.twitter.itemtype Translated label for "Feed items" header
#infoservice.twitter.itemcount Twitter items count in a timeline
#infoservice.twitter.selected.index Current selected index in the listcontrol
#infoservice.twitter.separator Separator string e.x. ::
#infoservice.twitter.lastupdated.message Last updated time of twitter as a message. Ex. "Last update of feeds on 20.02.2010 17:39"
#infoservice.twitter.lastupdated.datetime Last updated time of twitter as date/time. Ex. "20.02.2010 17:39"


RDF/RSS/ATOM feeds

Property name Description
#infoservice.feed.enabled Indicates wether the FeedService is enabled or disabled. e.x. False
#infoservice.feed.titles A line of your feed messages separated by a separator thats set in the options
#infoservice.feed.alltitles A line of all feed messages separated by a separator thats set in the options
#infoservice.feed.isalltitles Indicates if the all feeds ticker is shown on basichome or not. Ex. False or True
#infoservice.feed.img A image link for the rssfeed. e.x. C:\Temp\microsoft.jpg
#infoservice.feed.selected.itemimg A image link for an item of a feed (only RSS2.0)
#infoservice.feed.selected.index Current selected index in the listcontrol
#infoservice.feed.selected.feed Current viewed feed name
#infoservice.feed.selected.title Current selected tilte in the listcontrol
#infoservice.feed.selected.type Current viewed feedtype ex. RSS / RDF / Atom
#infoservice.feed.selected.itemage Time from feed publish date till now
#infoservice.feed.selected.description Description of a feed item
#infoservice.feed.selected.sourcefeed Current viewed feedname (when in all feeds view this holds source feed view, otherwise it's the same as #infoservice.feed.selected.feed property)
#infoservice.feed.itemtype Translated label for "Feed items" header
#infoservice.feed.itemcount Feed items in the listcontrol
#infoservice.feed.separator Separator string e.x. ::
#infoservice.feed.lastupdated.message Last updated time of feeds as a message. Ex. "Last update of feeds on 20.02.2010 17:39"
#infoservice.feed.lastupdated.datetime Last updated time of feeds as date/time. Ex. "20.02.2010 17:39"


Recently Added - feature was removed in InfoService v1.66

Example: #infoservice.recentlyAdded.movie1.title - Gives the recently added movie back
Another example #infoservice.recentlyAdded.movie2.title - Gives the last recently added movie back
Possible values: 1 - 3

Property name Description
#infoservice.recentlyAdded.movieX.title The movie title
#infoservice.recentlyAdded.movieX.thumb The movie cover
#infoservice.recentlyAdded.movieX.fanart The movie fanart
#infoservice.recentlyAdded.seriesX.title The series title
#infoservice.recentlyAdded.seriesX.thumb The series cover
#infoservice.recentlyAdded.seriesX.fanart The series fanart
#infoservice.recentlyAdded.seriesX.episodenumber The episode number
#infoservice.recentlyAdded.seriesX.episodetitle The episode title
#infoservice.recentlyAdded.seriesX.season The season of the series


Weather

Property name Description
#infoservice.weather.enabled Indicates wether the WeatherService is enabled or disabled. e.x. False
#infoservice.weather.location Weather location
#infoservice.weather.lastupdated.message Last updated time of weather as a message. Ex. "Last update of feeds on 20.02.2010 17:39"
#infoservice.weather.lastupdated.datetime Last updated time of weather as date/time. Ex. "20.02.2010 17:39"

Today weather data

Property name Description
#infoservice.weather.today.temp Todays temparature from location
#infoservice.weather.today.condition Todays condition. e.x. Mostly cloudy
#infoservice.weather.today.feelsliketemp Todays feels like temperature
#infoservice.weather.today.humidity Todays humidity e.x. 49%
#infoservice.weather.today.uvindex Todays uv index e.x. "4 Low"
#infoservice.weather.today.sunrise Todays sunrise time
#infoservice.weather.today.sunset Todays sunset time
#infoservice.weather.today.wind Wind data from today
#infoservice.weather.today.img.small.fullpath Todays weather condition image fullpath in the size 64x64
#infoservice.weather.today.img.small.filenamewithext Todays weather condition image filename in the size of 64x64
#infoservice.weather.today.img.small.filenamewithoutext Todays weather condition image filename without extension in the size of 64x64
#infoservice.weather.today.img.big.fullpath Todays weather condition image fullpath in the size 128x128
#infoservice.weather.today.img.big.filenamewithext Todays weather condition image filename in the size of 128x128
#infoservice.weather.today.img.big.filenamewithoutext Todays weather condition image filename without extension in the size of 128x128
#infoservice.weather.today.weekday Todays weekname. e.x. Monday

Forecast X (Next day) weather data

Attention: The weather provider weather.com returns sometimes for the first forecast, the weather data of today. That behavior cannot be changed.
Where X stands for a following day.
Example: #infoservice.weather.forecast1.mintemp - Gives the min temperature of tomorrow or today (For some cities)
Another example #infoservice.weather.forecast2.mintemp - Gives the min temperature of the day after tomorrow or tomorrow (For some cities)
Possible values: 1 - 5

Property name Description
#infoservice.weather.forecastX.mintemp Day X minimal temperature
#infoservice.weather.forecastX.maxtemp Day X maximal temperature
#infoservice.weather.forecastX.sunrise Day X sunrise time
#infoservice.weather.forecastX.sunset Day X sunset time
#infoservice.weather.forecastX.day.condition Day X day condition. e.x. Mostly cloudy
#infoservice.weather.forecastX.day.wind Wind data from day X
#infoservice.weather.forecastX.day.humidity Humidity data from day X
#infoservice.weather.forecastX.day.img.small.fullpath Day X weather condition image fullpath in the size 64x64
#infoservice.weather.forecastX.day.img.small.filenamewithext Day X weather condition image filename in the size of 64x64
#infoservice.weather.forecastX.day.img.small.filenamewithoutext Day X weather condition image filename without extension in the size of 64x64
#infoservice.weather.forecastX.day.img.big.fullpath Day X weather condition image fullpath in the size 128x128
#infoservice.weather.forecastX.day.img.big.filenamewithext Day X weather condition image filename in the size of 128x128
#infoservice.weather.forecastX.day.img.big.filenamewithoutext Day X weather condition image filename without extension in the size of 128x128
#infoservice.weather.forecastX.night.condition Day X night condition. e.x. Mostly cloudy
#infoservice.weather.forecastX.night.wind Wind data from day X
#infoservice.weather.forecastX.night.humidity Humidity data from day X
#infoservice.weather.forecastX.night.img.small.fullpath Day X weather condition image fullpath in the size 64x64
#infoservice.weather.forecastX.night.img.small.filenamewithext Day X weather condition image filename in the size of 64x64
#infoservice.weather.forecastX.night.img.small.filenamewithoutext Day X weather condition image filename without extension in the size of 64x64
#infoservice.weather.forecastX.night.img.big.fullpath Day X weather condition image fullpath in the size 128x128
#infoservice.weather.forecastX.night.img.big.filenamewithext Day X weather condition image filename in the size of 128x128
#infoservice.weather.forecastX.night.img.big.filenamewithoutext Day X weather condition image filename without extension in the size of 128x128
#infoservice.weather.forecastX.weekday Day X weekname. e.x. Tuesday



Images

Please provide some default images for your skin to InfoService. InfoService will load them from {SKINNAME}\Media\InfoService.

Image filenamename Property Description
defaultFeedALL.png #infoservice.feed.img Will be set when the users selected the all feeds ticker.
defaultFeedAtom.png #infoservice.feed.img Will be used if the selected feed has no default image and no user image is in the configuration set. Will be set when the users selected a ATOM feed.
defaultFeedRDF.png #infoservice.feed.img Will be used if the selected feed has no default image and no user image is in the configuration set. Will be set when the users selected a RDF feed.
defaultFeedRSS.png #infoservice.feed.img Will be used if the selected feed has no default image and no user image is in the configuration set. Will be set when the users selected a RSS feed.
defaultFeedItemAtomBig.png #infoservice.feed.selected.itemimg Will be used if the selected feed item has no own image. Will be set if the selected feed item changes.
defaultFeedItemRDFBig.png #infoservice.feed.selected.itemimg Will be used if the selected feed item has no own image. Will be set if the selected feed item changes.
defaultFeedItemRSSBig.png #infoservice.feed.selected.itemimg Will be used if the selected feed item has no own image. Will be set if the selected feed item changes.
defaultFeedItemAtom.png - Will be used as a thumbnail in the feed list control if the feed item has no own image.
defaultFeedItemRDF.png - Will be used as a thumbnail in the feed list control if the feed item has no own image.
defaultFeedItemRSS.png - Will be used as a thumbnail in the feed list control if the feed item has no own image.
defaultTwitter.png - No Property is used. Should be used on the basichome if the twitter timeline is shown.



Example

Just add an item on your basichome. For exampe a Fadelabel and set it up as shown below:

<control><description>Feed Items</description>
    <type>fadelabel</type>
    <id>1</id>
    <width>1160</width>
    <height>50</height>
    <posX>130</posX>
    <posY>505</posY>
    <font>mediastream12</font>
        <textcolor>ff000000</textcolor>
    <label>#infoservice.feed.titles</label>
    <visible>plugin.isenabled(InfoService)</visible>
</control>


If you want to give the users of your skin the possibility to change the feed, add the hyperlink tag with 16001 to your button. Example:

<control><description>feed image</description>
    <type>button</type>
    <id>1111</id>
    <width>70</width>
    <height>28</height>
    <posY>505</posY>
    <posX>60</posX>
    <onup>1702</onup>
    <hyperlink>16001</hyperlink>
    <textureFocus>#infoservice.feed.img</textureFocus>
    <textureNoFocus>#infoservice.feed.img</textureNoFocus>
    <visible>plugin.isenabled(InfoService)</visible>
</control>

If you want to give the user the possibility to show his twitter timelines, use the same example shown above, but use in the hyperlink tag 16003.

Here are some example skin files, based on Monochrome v3.2 skin.
Here are some example skin files, based on Blue3Wide skin.

Last edited Sep 27, 2011 at 12:16 AM by SilentException, version 29

Comments

No comments yet.