Site navigation


Last Edit

Page last modified 19:11, 6 Jan 2012 by Dadeo
MediaPortal Wiki > MediaPortal 1 > Contribute > Skins > Skin Related Changes > 1.1.0 to 1.2.0 > CoverFlow Control Created

CoverFlow Control Created

    Purpose

    • Required:  No
    • Type of Change:  Feature

    A new facade layout for displaying a list of items that resembles the iphone style coverflow as shown in the following video:

    Get Adobe Flash player

    Coverflow can be selected like any other layout (list, icons, filmstrip etc.)

    Description of Change

    A new control has been added GuiCoverFlow (coverflow).  It not only provides a unique layout display, but it also enables the cover to be 'flipped' so that additonal information displays on the reverse of the cover by using F3 on the keyboard or the Show Info key on the remote (usually the yellow button on MCE Remotes)

    See also:  Using MediaPortal > Basics > Layouts > CoverFlow

    Additional Information and References

    • Mantis Issue:
    • Related xml(s):  all xmls where coverflow control is used
    • Window ID:  all windows where GUICoverFlow class is used
    • Related GUI property/control:  GUICoverFlow (coverflow)

    XML/Code Samples

    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>
              <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>

    Screenshots

    coverflow3.png




    Running the latest version?

    V1.12.0 - released July 2015
    Releasenews | Download
    Changelog
    | Requirements

    MediaPortal RSS Feeds

    windows media centerNews & Blogs
    htpcP&S: New
    htpcDocumentation

    Team-MediaPortal

    HTPCAbout
    Contact | Press
    Partners