MediaPortal Windows Media Center
MediaPortal Wiki > MediaPortal 1 > Contribute > Skins > Skin Architecture > Media Overlays

Media Overlays

Was this page helpful?

    Overview

    Media overlays, sometimes called 'previews', are the small windows that overlay the currently playing video, TV or music on any window or xml where overlays are allowed or imported.

    Enabling/Disabling

    The default overlays (videoOverlay.xml, musicOverlay.xml) can be turned on or off in any xml using the allowoverlay window element: allowoverlay (yes/no)

    Note: The Default media overlays do not display when accessing hidden or sliding menus (i.e. when a facade is not in focus). To enable display of media overlays even when a user accesses a hidden/sliding menu, you may create and import your own media overlays (see Imported Media Overlays below).

    • Example (Default MyHome.xml):

    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <window>
      <id>0</id>
      <defaultcontrol>50</defaultcontrol>
      <allowoverlay>yes</allowoverlay>
      <controls>

    Allow Overlay Conditions

    it is possible to use conditional expressions in the <allowoverlay> window element to control which facadevew or layout displays media overalys.

    Example

    The following is an example of the use of conditional expressions in allowoverlay (excerpt from MyVideo.xml):

    <window>
      <id>6</id>
      <defaultcontrol>2</defaultcontrol>
      <allowoverlay>[facadeview.list|facadeview.filmstrip]</allowoverlay>
      ...
      <controls>
        ...
        <import>common.facade.video.xml</import>
        ...
      </controls>
    </window>

    Default XML Files

    • musicOverlay.xml (ID 2004)
    • videoOverlay.xml (ID 3000)
    • videoOverlayTop.xml (ID 3008)

    Music Overlay

    The music overlay displays in any window whenever music is playing and overlays are turned on.

    The primary control in a music overlay is the music logo/image which displays #Play.Current.Thumb, normally the album cover. Usually a frame/background is included as a separate control.

    • Example Blue3:
    <control>
          <description>music rectangle</description>
          <type>image</type>
          <id>0</id>
          <posX>49</posX>
          <posY>419</posY>
          <width>121</width>
          <height>124</height>
          <texture>Picture_cover.png</texture>
          <centered>yes</centered>
          <animation effect="fade" time="250">WindowClose</animation>
          <animation effect="fade" time="250">WindowOpen</animation>
        </control>
        <control>
          <description>music logo</description>
          <type>image</type>
          <id>1</id>
          <posX>54</posX>
          <posY>423</posY>
          <width>110</width>
          <height>111</height>
          <keepaspectratio>yes</keepaspectratio>
          <centered>yes</centered>
          <texture>#Play.Current.Thumb</texture>
          <animation effect="fade" time="250">WindowClose</animation>
          <animation effect="fade" time="250">WindowOpen</animation>
        </control>

    Visualizations

    Visualizations can be displayed in music overlays if visualizations are enabled in MediaPortal Configuration.

    To enable the display of visualizations in music overlays, a VideoWindow control must be included in the music overlay.

    • Example Blue3 (musicOverlay.xml):
    <control>
          <description>video preview window</description>
          <type>videowindow</type>
          <id>9</id>
          <posX>54</posX>
          <posY>423</posY>
          <width>110</width>
          <height>111</height>
          <keepaspectratio>yes</keepaspectratio>
          <centered>yes</centered>
          <action>18</action>
          <textureFocus>tv_green_border.png</textureFocus>
          <animation effect="fade" time="250">WindowClose</animation>
          <animation effect="fade" time="250">WindowOpen</animation>
        </control>

    Video Overlay

    The primary control in a video overlay is the VideoWindow. Usually a frame is included as a separate control.

    • Example Blue3:
    <control>
          <description>video rectangle</description>
          <type>image</type>
          <id>0</id>
          <posX>49</posX>
          <posY>419</posY>
          <width>161</width>
          <height>124</height>
          <texture>Picture_cover.png</texture>
          <animation effect="fade" time="250">WindowClose</animation>
          <animation effect="fade" time="250">WindowOpen</animation>
        </control>
        <control>
          <description>video preview window</description>
          <type>videowindow</type>
          <id>1</id>
          <posX>56</posX>
          <posY>425</posY>
          <width>145</width>
          <height>111</height>
          <action>18</action>
          <textureFocus>tv_green_border.png</textureFocus>
          <animation effect="fade" time="250">WindowClose</animation>
          <animation effect="fade" time="250">WindowOpen</animation>
        </control>

    Current Playing File Tags

    Controls can be added to the overlay xmls to display Currently Playing File Tags i.e. the current play time, title, genre, year, etc.

    • Example Blue3:
    <control>
          <description>play time label</description>
          <type>label</type>
          <id>2</id>
          <posX>220</posX>
          <posY>490</posY>
          <label>#currentplaytime</label>
          <align>left</align>
          <font>font60</font>
          <textcolor>20ffffff</textcolor>
          <animation effect="fade" time="250">WindowClose</animation>
          <animation effect="fade" time="250">WindowOpen</animation>
        </control>
        <control>
          <description>scrolling info label</description>
          <type>fadelabel</type>
          <width>140</width>
          <height>30</height>
          <posX>55</posX>
          <posY>547</posY>
          <font>font12</font>
          <label>
          #Play.Current.Title\r#Play.Current.Genre\r#Play.Current.Year\r#Play.Current.Director</label>
          <textcolor>EFFFFFFF</textcolor>
          <animation effect="fade" time="250">WindowClose</animation>
          <animation effect="fade" time="250">WindowOpen</animation>
          <id>5</id>
        </control>

    Note: The /r parameter added in the <label> tag in the above example enables each file tag (e.g. #Play.Current.Genre) to 'scroll' one element at a time. The fadelabel control type enables the scroll effect.

    Play Indicators

    Image files such as logo_play.png can be used to display images when the currently playing file is playing, paused, fast forwarding or reversing.

    In music overlays, these controls can display on top of the music logo (album cover). However to display controls on top of the Videowindow, they must be entered in videooverlaytop.xml

    If play indicators are entered in the default media overlay xmls and the correct IDs are used, they do not need visibility conditions. However, if they are entered in an imported media overlay, then visibility conditions are required i.e. player.paused etc.

    • Example Blue3:
    <control>
          <description>play logo</description>
          <type>image</type>
          <id>3</id>
          <posX>175</posX>
          <posY>460</posY>
          <width>36</width>
          <height>42</height>
          <texture>logo_play.png</texture>
          <animation effect="fade" time="250">WindowClose</animation>
          <animation effect="fade" time="250">WindowOpen</animation>
        </control>

    Sample:

    videooverlay.jpg

    Imported Media Overlays

    Imported media Overlays can display even when a user accesses a hidden menu. Also, different media overlays can be use in different windows using different layouts, positions and controls.

    To create imported media overlays:

    1. Create an xml file or copy and modify one from a skin that uses imported media overlays (e.g. streamedMP). You must define the visibility conditions to determine when the music overlay will display and when the video overlay will display (see below).
    2. Disable the default media overlay in any window/xml where you wish to use your new media overlays (<allowoverlay>no</allowoverlay>)
    3. Import your new media overlays into each window/xml where you wish them to display.

    See also

    To control when a music overlay will display and when the video overlay will display, you must use a 'dummy' control in your media overlay xml. Usually this dummy control defines a music overlay as visible when the #Play.Current.Album file tag has text and the video overlay is then visible when it does not have text.

    Example:

    <!-- Dummy Controls -->
        <control>
          <description>dummy (Music - Album)</description>
          <type>label</type>
          <id>3337</id>
          <posX>280</posX>
          <posY>1510</posY>
          <label>#Play.Current.Album</label>
          <visible>Player.hasmedia+control.hastext(3337)</visible>
        </control>

    Note: The dummy control is displayed off screen.

    Then the music overlay is defined with a visibility control based on the dummy control: (Control.isvisible(3337)

    <control>
          <description>music logo</description>
          <type>image</type>
          <id>3336</id>
          <posX>568</posX>
          <posY>397</posY>
          <width>126</width>
          <height>110</height>
          <keepaspectratio>no</keepaspectratio>
          <centered>yes</centered>
          <texture>#Play.Current.Thumb</texture>
          <visible>Player.hasmedia+Control.isvisible(3337)</visible>
        </control>

    The video overlay is then defined with visibility based on the dummy control: (!Control.isvisible(3337)

    <control>
          <description>video preview window</description>
          <type>videowindow</type>
          <id>99</id>
          <posX>540</posX>
          <posY>394</posY>
          <width>152</width>
          <height>114</height>
          <action>18</action>
          <textureFocus>tv_green_border.png</textureFocus>
          <keepaspectratio>yes</keepaspectratio>
          <centered>yes</centered>
          <visible>Player.hasmedia+!Control.isvisible(3337)</visible>
        </control>

    Known Issues

    There a are a number of issues and problems with the display of media overlays in MediaPortal. The developers are currently working on a solution for these.

    Visibility Conditions

    The visibility conditions player.hasaudio and player.hasvideo are not working. Thus there is no easy way to specify which controls display when music is playing vs when video is playing. The only visibility condition currently working for media overlays is player.hasmedia.

    Radio Overlays

    When Radio is playing often a video overlay or videowindow will display. Thus Radio station logos do not always display in the music overlay. In addition, current file tags and play indicators may display twice - once from the musicoverlay.xml and once from the videooverlaytop.xml

    Changelog

    ChangeDateVersion
    AllowOverlay Conditions2010/10/101.0.1 to 1.1.0



    Tag page (Edit tags)
    • No tags
    Running the latest version?

    V1.7.0 - released April 2014
    Releasenews | Download
    Changelog
     | Requirements
    HTPC
    Team-MediaPortal
     
    About
    Contact |  Press
    Partners