Page tree


Search

  Wiki Navigation

    Loading...


 Recently Updated


 Latest Releases

 MediaPortal 1.23 
            Releasenews | Download
 MediaPortal 2.2.2
            Releasenews | Download

Table of Contents

Changelog

Change

Date

Version

CoverFlow Control Created

2010/10/21

1.1.0 to 1.2.0

Camera Support

2011/12/17

1.2.0 to 1.3.0

New color skin tag for DVD/BluRay folders

2012/06/14

1.2.0 to 1.3.0

 

 

Description

Cover flow is designed to present a number of "cards" in series.  Each card is defined to have a front and an optional back.

 

The front of a card is created using up to two layered images, (1.) the associated item image, and (2.)  a frame image.  The frame image is rendered in front of the item image.  It is not required to have a frame image.  The control can select between one of two frame images to render, one for the currently selected card and one for the other (not selected) cards.  Typical use for the frame image includes creating the illusion of a glossy cover or image border.  

The back of the card is rendered from a set of controls defined in the controls <subitems> property (see example).  The cover flow control only recognizes one <subitem> and the content of the <subitem> must be presented within a <controls> property.  You may use any of the available selected item properties with label controls (#genre, #year, etc.) in the <subitem> controls for the back of the card.  If no <subitems> property is defined then the card will not respond to the events that rotate the card.

The overall presentation of the card is described using the <cards> property.  This property only conveys its attributes to the cover flow control.  It's value (content between <cards> and </cards>) is not used.  Available attributes are:

  • flipY - set to true if you would like a mirrored reflection of the card below the rendered card
  • diffuse - the name of an image to use to create the reflection (typically a transparency gradient that fades the image into the background)
  • mask - the name of an image that should mask the whole card (including the item image, frame image, and diffuse image); black mask pixels allow the underlying presentation of the card to be displayed, white pixels clip the underlying presentation of the card.  Typical use for the mask is to create cards with rounded corners.

You can control the size of the card, the size of the frame, and how the mask works.  Usually the size of the mask, card, and frame are all exactly the same size though they may differ depending upon the desired affect.

The overall presentation of cover flow is described using the <angle>, <sideShift>, <sideGap>, and <sideDepth> properties.  See the properties table for a description of these elements.  The properties <offsetY> and <selectedOffsetY> allow for the entire set of cards to be positioned vertically in the window as desired. The <speed> property adjusts the rate at which cards transition; higher numbers cause the cards to move more quickly.  The <spinSpeed> property defines the rate at which a card rotates when selecting the Show Info button on the remote control (often the yellow button on MCE Remotes) or F3 key on the keyboard; higher numbers cause the cards to rotate more quickly.  You can initialize the cover flow to the desired starting point by setting the <selectedCard> property as desired; selection of a non-existent card results in the first card in the flow being selected.

When navigating cover flow the user may move one card at a time (using left, right arrow buttons on the remote or keyboard) or one page at a time.  When cover flow moves one page it selects the next card to be <pageSize> cards away from the currently selected card (or the beginning or end of the card deck if less than one page is available).

The cover flow control has an integrated background and foreground capability.  The background defines an image to use as the backdrop for the coverflow control; the entire coverflow card deck is rendered in front off the background.  The foreground defines an image that should be rendered over the top of the coverflow control.  As an example, coordination of the foreground and background images allow for cards to fade into the background at the edges of the window.

The coverflow control provides a visual scrollbar to offer presentation of the position of the currently selected card with reference to the overall size of the card deck.  The scrollbar is only a visual device, it does not respond to mouse events to navigate cover flow.

There are two labels and some associated color definitions that allow you to display information about the currently selected card.  These labels typically incorporate selected item properties (e.g., #title, #genre).  The text may be shadowed.

Further Information

Tags

GUICoverFlow (coverflow)

Element Name

Data Type

Description

selectedCard

Integer

The currently selected list item.

cardWidth

Integer

Width of the items.

cardHeight

Integer

Height of the items.

angle

Float

Angle of the currently not selected cards (on the left and right side of the selected item).

sideShift

Float

Distance between the middle (selected) item and the cards on the left and right side.

sideGap

Float

Distance between the unselected cards (on the left and right side of the selected item).

sideDepth

Float

The depth of the unselected cards in relation to the selected item (how far "behind" the inactive cards are).

offsetY

Float

Y offset of the scrollview in relation to it's parent control.

selectedOffsetY

Float

Y offsite (in the upper direction) of the selected item.

speed

Float

Speed at which the list scrolls from one item to the next.

backgroundHeight

Integer

Height of the background image.

backgroundWidth

Integer

Width of the background image.

backgroundX

Integer

X position of the background image.

backgroundY

Integer

Y position of the background image.

background

String

Path of the background image file.

showBackground

Boolean

Show the background image.

foregroundHeight

Integer

The height of the foreground image.

foregroundWidth

Integer

The width of the foreground image.

foregroundX

Integer

X position of the foreground image.

foregroundY

Integer

Y position of the foreground image.

foregroundDiffuse

Integer

Alpha mask for the foreground image.

foreground

String

Path of the foreground image file.

showForeground

Boolean

Show the foreground image.

showFrame

Boolean

Show the card frame image.

frame

String

A frame that is drawn over the card image.

frameFocus

String

A frame that is drawn over the selected card.

frameWidth

Integer

Width of the frame.

frameHeight

Integer

Height of the frame.

spinSpeed

Float

Speed at which the cards rotate to reveal the back of the card.

unfocusedAlpha

Integer

Alpha mask for unselected cards.

folderPrefix

String

Prefix to title when selected item is a folder.

folderSuffix

String

Fuffix to title when selected item is a folder.

font1

String

Font used to render label1.

font2

String

Font used to render label2.

label1

String

Main description of the currently selected item.

label2

String

Additional info on the currently selected item.

textColor

Long

Color of text (label1, label2).

playedColor

Long

Color of text (label1, label2) when the item is currently played.

downloadColor

Long

Color of text (label1, label2) if the selected item is a "remote item" and is currently downloaded.

selectedColor

Long

Color of text (label1, label2) if the item is selected.

bdDvdDirectoryColor

Long

[Since 1.3] Color of the 1st label for DVD/BluRay items/folders. Default is 0xFFFFFFFF

bdDvdDirectoryColor2

Long

[Since 1.3] Color of the 2nd label for DVD/BluRay items/folders. Default is 0xFFFFFFFF

shadowAngle

Integer

Angle between text (label1, label2) and shadow.

shadowDistance

Integer

Distance between text (label1, label2) and shadow.

shadowColor

Long

Color of shadow.

label1YOff

Integer

Y offset of label1in relation to the parent control (coverflow).

label2YOff

Integer

Y offset of label2 in relation to the parent control (coverflow).

pageSize

Integer

How many items are skipped on page up/page down.

scrollbarBackground

String

Background image of the scrollbar.

scrollbarLeft

String

Left half of the scrollbars' position indicator.

scrollbarRight

String

Right half of the scrollbars' position indicator.

scrollbarYOff

Integer

Y position of the scrollbar in relation to the parent control (coverflow).

scrollbarWidth

Integer

Width of the scrollbar.

scrollbarHeight

Integer

Height of the scrollbar.

showScrollbar

Boolean

Show the scrollbar.

keepaspectratio

Boolean

Set if the aspectratio of the texture needs to be preserved during rendering. Default is false

thumbZoom

Boolean

Set if the texture should be zoomed instead of streched. Default is false.

cardAlign

Alignment

Align the image Left, Right or Center. Default is Center.

cardVAlign

VAlignment

Align the image Top, Middle or Bottom. Default is Bottom

cards [flipY]

Boolean

Conveys attribute value only, the value of this property is not used.  Defines whether or not a card reflection is rendered.

cards [diffuse]

String

Conveys attribute value only, the value of this property is not used.  Path to the image used to create the reflection.

cards [mask]

String

Conveys attribute value only, the value of this property is not used.  Path to the image used to mask the entire card including reflection.

camera [xpos, ypos]

Boolean

[Since 1.3] If true then the camera position is enabled, otherwise it is disabled.  See Camera Position for more information.

      xpos

Integer

[Since 1.3] The x position of the camera.

      ypos

Integer

[Since 1.3] The y position of the camera.

Inherited by GUIControl

See GUIControl for the full documentation of this control.

Element Name

Data Type

Description

id

Integer

The id of the control. The id will couple the skin file to the code, so if we later on want to check that a user pressed a button, the id will be required and must be unique. For controls that will never be referenced in the code it is safe to set it to "1"

description

String

An optional description of the control for your reference

type

String

The type of the control, for instance "button", "label", "textbox" and all other controls.

posX

Integer

The X-position on the window for this control

posY

Integer

The Y-position on the window for this control

width

Integer

The width of this control

height

Integer

The height of this control

onleft

Integer

The control id to move the focus to when the user moves left. If not specified (or zero) MediaPortal will find the closest control in that direction to move to. As of v1.7.0 Skin Settings and Skin Expressions are also supported. 

onright

Integer

The control id to move the focus to when the user moves right. If not specified (or zero) MediaPortal will find the closest control in that direction to move to. As of v1.7.0 Skin Settings and Skin Expressions are also supported. 

onup

Integer

The control id to move the focus to when the user moves up. If not specified (or zero) MediaPortal will find the closest control in that direction to move to. As of v1.7.0 Skin Settings and Skin Expressions are also supported. 

ondown

Integer

The control id to move the focus to when the user moves down. If not specified (or zero) MediaPortal will find the closest control in that direction to move to. As of v1.7.0 Skin Settings and Skin Expressions are also supported. 

colordiffuse

Long

Allows you to mix a color & a graphics texture. E.g. If you have a graphics texture like a blue button you can mix it with a yellow color diffuse and the end result will be green. Defaults to 0xFFFFFFFF

dimColor

Integer

Color for a control when it is not focussed. Defaults to half transparent (0x60ffffff)

onfocus

String

[Since 1.3] Executes a MediaPortal skin function when the control gains focus.  See Skin Settings for more information.

Properties exposed

GUICoverFlow (coverflow)

 

XML/Code examples

The following code example shows the coverflow control as used in the Blue3Wide skin (common.facade.video.xml)

<control>
          <description>Cover Flow view</description>
          <type>coverflow</type>
          <colordiffuse>90ffffff</colordiffuse>
          <dimColor>90ffffff</dimColor>
          <id>50</id>
          <posX>0</posX>
          <posY>200</posY>
          <width>1280</width>
          <height>720</height>
          <onup>2</onup>
          <onleft>2</onleft>
          <selectedCard>0</selectedCard>
          <cardWidth>250</cardWidth>
          <cardHeight>360</cardHeight>
          <angle>45</angle>
          <sideShift>220</sideShift>
          <sideGap>150</sideGap>
          <sideDepth>250</sideDepth>
          <offsetY>20</offsetY>
          <selectedOffsetY>0</selectedOffsetY>
          <speed>5</speed>
          <backgroundHeight>250</backgroundHeight>
          <backgroundWidth>1280</backgroundWidth>
          <backgroundX>0</backgroundX>
          <backgroundY>470</backgroundY>
          <backgroundDiffuse>FF000000</backgroundDiffuse>
          <background>background2.png</background>
          <showBackground>yes</showBackground>
          <foregroundHeight>720</foregroundHeight>
          <foregroundWidth>1280</foregroundWidth>
          <foregroundX>0</foregroundX>
          <foregroundY>0</foregroundY>
          <foregroundDiffuse>FF000000</foregroundDiffuse>
          <foreground>coverflow_foreground.png</foreground>
          <showForeground>no</showForeground>
          <showFrame>yes</showFrame>
          <frame>Picture_cover2.png</frame>
          <frameFocus>Picture_cover2.png</frameFocus>
          <frameWidth>250</frameWidth>
          <frameHeight>360</frameHeight>
          <spinSpeed>8</spinSpeed>
          <unfocusedAlpha>FF</unfocusedAlpha>
          <folderPrefix>[</folderPrefix>
          <folderSuffix>]</folderSuffix>
          <font1>font13</font1>
          <font2>font10</font2>
          <label1>#title</label1>
          <label2>#genre</label2>
          <textColor>FFFFFFFF</textColor>
          <remoteColor>FFFF0000</remoteColor>
          <playedColor>FFA0D0FF</playedColor>
          <downloadColor>FF00FF00</downloadColor>
          <selectedColor>FFFFFFFF</selectedColor>
          <shadowAngle>45</shadowAngle>
          <shadowDistance>0</shadowDistance>
          <shadowColor>FF000000</shadowColor>
          <label1YOff>405</label1YOff>
          <label2YOff>430</label2YOff>
          <pageSize>5</pageSize>
          <scrollbarBackground>bar_hor.png</scrollbarBackground>
          <scrollbarLeft>mouse_left_horizontal.png</scrollbarLeft>
          <scrollbarRight>mouse_right_horizontal.png</scrollbarRight>
          <scrollbarYOff>455</scrollbarYOff>
          <showScrollbar>yes</showScrollbar>
          <keepaspectratio>yes</keepaspectratio>
          <thumbZoom>no</thumbZoom>
          <cardAlign>Center</cardAlign>
          <cardVAlign>Bottom</cardVAlign>
          <cards flipY="yes" diffuse="Thumb_Mask.png" mask="video_poster_mask.png"></cards>
          <subitems>
            <subitem>
              <![CDATA[
                <controls>
                  <control>
                    <description>background</description>
                    <type>image</type>
                    <posX>0</posX>
                    <posY>0</posY>
                    <width>250</width>
                    <height>360</height>
                    <texture flipY="yes" diffuse="Thumb_Mask.png" mask="video_poster_mask.png">background2.png</texture>
                  </control>

                  <control>
                    <description>Movie Details</description>
                    <type>label</type>
                    <posX>20</posX>
                    <posY>10</posY>
                    <width>210</width>
                    <label>Movie Details</label>
                    <font>font10</font>
                    <textcolor>FFFFFFFF</textcolor>
                  </control>
                </controls>
              ]]>
            </subitem>
          </subitems>
        </control>

   

 

This page has no comments.