Wiki Navigation
- Loading...
Changelog
Change |
Date |
Version |
|---|---|---|
2010/10/21 |
1.1.0 to 1.2.0 |
|
2011/12/17 |
1.2.0 to 1.3.0 |
|
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.