MediaPortal 1

Seitenhierarchie

  Wiki Navigation

    Loading...

 Recently Updated

Mehr anzeigen Bitte warten

 Latest Releases

 MediaPortal 1.32
            Releasenews | Download
 MediaPortal 2.5
            Releasenews | Download

 NGINX monitoring
Table of Contents

Overview

How to add movie thumbs to MyFilms skin files in v 6.1.0

Introduction

Note: This feature is available as a preview in v 6.0.3

As of v 6.1.0 My Films offers support for skins to display thumbs created from the the movie files.

If the controls are present in the skin, My Films will automatically try to create movie thumbs from the media files using MediaPortal's built-in MTN tool. The thumbs (16 will be created to support 4 x 4 display) will be stored in the MediaPortal data folder:

...\Thumbs\MyFilms\MovieThumbs\<movie name>. 

Skin Controls

Movie thumb controls

Two new controls are offered to skinners to display movie thumbs in the Details window:

  1. Multiimage - ID 1002 - will display all available movie thumbs 'cycling' in one multiimage control
  2. Thumbnailpanel: - ID 51 - will load all available (16) movie thumbs in big (large) icon layout

If the controls are used as in the example below, they will only display IF and WHEN the thumbs have been created. Thumb creation starts when entering My Films Details window. It usually takes a few seconds to complete, similar to the creation of thumb in Pictures window in MediaPortal.

Note: Thumbs are only available for media files supported by MediaPortal's built-in MTN thumbnailer tool..

Playback control

A play button control - ID 10100 should be added, so the thumbs view could be implemented e.g. by "onright" of existing 10099 (FullFanartView)

Visibility

To allow the main cover to zoom smaller when thumbs are available skinners may use the new visibility control:

<control>
      <description>Dummy Label for Movie Thumbs available</description>
      <type>label</type>
      <id>45</id>
      <posX>-50</posX>
      <posY>-50</posY>3
      <visible>false</visible>
      <focusable>no</focusable>
      <!-- to make a control visible only when movie thumbs are available do this: <visible>control.isvisible(45)</visible> -->
      <!-- to make a control invisible when movie thumbs are available do this: <visible>!control.isvisible(45)</visible> -->
    </control>

Examples

Multiimage

Note: In the Black Glass sample displayed, the movie poster/cover is big as long as there are no thumbs available. However once the thumbs are created and available the movie cover will zoom smaller and allow the movie thumbs to be displayed  Display in this example is only available in description view:

To allow the main cover to zoom smaller when thumbs are available skinners may use the new visibility control (see above):

Multiimage control:

<control>
      <description>MultiImage Movie Thumbs</description>
      <type>multiimage</type>
      <id>1002</id>
      <posX>30</posX>
      <posY>81</posY>
      <width>265</width>
      <height>170</height>
      <imagepath></imagepath>
      <timeperimage>2000</timeperimage>
      <fadetime>1000</fadetime>
      <loop>yes</loop>
      <align>center</align>
      <valign>center</valign>
      <randomize>true</randomize>
      <visible>Control.isvisible(45)+Control.HasFocus(10001)</visible>
      <animation effect="fade" time="250">visiblechange</animation>
      <animation effect="fade" time="250">WindowOpen</animation>
      <animation effect="fade" time="250">WindowClose</animation>
      <animation effect="zoom" time="250" tween="cubic" easing="inout" start="1,1" end="100,100" reversible="true" condition="Control.HasFocus(10001)+Control.IsVisible(45)">conditional</animation>
    </control>
    <control>
      <description>Movie Thumbs Glass Overlay</description>
      <type>image</type>
      <id>1</id>
      <posX>29</posX>
      <posY>80</posY>
      <width>267</width>
      <height>172</height>
      <texture flipY="true" diffuse="Thumb_Mask.png">DVDCase_coverflow.png</texture>
      <visible>Control.isvisible(45)+Control.HasFocus(10001)</visible>
      <animation effect="fade" time="250">visiblechange</animation>
      <animation effect="fade" time="250">WindowClose</animation>
      <animation effect="fade" time="250">WindowOpen</animation>
      <animation effect="zoom" time="250" tween="cubic" easing="inout" start="1,1" end="100,100" reversible="true" condition="Control.HasFocus(10001)+Control.IsVisible(45)">conditional</animation>
    </control>

 

If main cover should "make space available", condition also has to be added:

<control>
      <type>image</type>
      <description>Thumbnail with no video playing</description>
      <id>2024</id>
      <posX>64</posX>
      <posY>81</posY>
      <width>380</width>
      <height>538</height>
      <texture flipY="true" diffuse="Thumb_Mask.png">#myfilms.picture</texture>
      <keepaspectratio>yes</keepaspectratio>
      <centered>yes</centered>
      <zoom>yes</zoom>
      <visible>!Control.HasFocus(10099)+!Control.HasFocus(10100)+!player.hasmedia</visible>
      <animation effect="fade" time="500">visiblechange</animation>
      <animation effect="fade" time="250">WindowClose</animation>
      <animation effect="fade" time="250">WindowOpen</animation>
      <animation effect="zoom" time="250" tween="cubic" easing="inout" start="100,100" end="65,65" center="15,628" reversible="true" condition="Control.isvisible(45)+Control.hasfocus(10001)">conditional</animation>
    </control>

 Result:  

(Cover animated smaller, thumbs multiimage animate in final place and changes between movie thumbs)

Sample for thumb panel:

Those thumbs are displayed as "virtual view" like the full fanart view - It is basically a thumbnail panel with ID 51

It can be integrated by adding that virtual view to the right of full fanart view ("onright"):

<!-- Movie Thumbnails -->
    <control>
      <description>Movie Thumbs - composite control consisting of a list control and a thumbnail panel</description>
      <type>facadeview</type>
      <id>51</id>
      <control>
        <type>listcontrol</type>
        <description>listcontrol</description>
        <onleft>10099</onleft>
        <posX>847</posX>
        <width>433</width>
        <height>590</height>
        <visible>Control.HasFocus(10100)</visible>
      </control>
      <control>
        <description>Thumbnail Panel</description>
        <type>thumbnailpanel</type>
        <onleft>10099</onleft>
        <posX>30</posX>
        <posY>70</posY>
        <width>1280</width>
        <height>680</height>
        <scrollOffset>1</scrollOffset>
        <itemWidth>98</itemWidth>
        <itemHeight>86</itemHeight>
        <textureWidth>83</textureWidth>
        <textureHeight>63</textureHeight>
        <thumbWidth>77</thumbWidth>
        <thumbHeight>56</thumbHeight>
        <thumbPosX>3</thumbPosX>
        <thumbPosY>3</thumbPosY>

        <itemWidthBig>250</itemWidthBig>
        <itemHeightBig>195</itemHeightBig>

        <textureWidthBig>230</textureWidthBig>
        <textureHeightBig>170</textureHeightBig>

        <thumbWidthBig>218</thumbWidthBig>
        <thumbHeightBig>160</thumbHeightBig>

        <thumbPosXBig>6</thumbPosXBig>
        <thumbPosYBig>5</thumbPosYBig>

        <unfocusedAlpha>120</unfocusedAlpha>
        <hideUnfocusTexture>no</hideUnfocusTexture>
        <renderFocusText>no</renderFocusText>
        <renderUnfocusText>no</renderUnfocusText>
        <imageFolder>-</imageFolder>
        <imageFolderFocus>-</imageFolderFocus>
        <thumbZoom>no</thumbZoom>
        <keepaspectratio>yes</keepaspectratio>
        <enableFocusZoom>no</enableFocusZoom>
        <spinCanFocus>no</spinCanFocus>
        <spinPosX>2815</spinPosX>

        <showFrame>true</showFrame>
        <frameNoFocus>PictureCase.png</frameNoFocus>
        <frameFocus>PictureCase.png</frameFocus>
        <thumbs mask="DVDCase_coverflow.png" flipY="true" />
        <visible>Control.HasFocus(10100)</visible>
        <animation effect="fade" time="250">visiblechange</animation>
        <animation effect="fade" time="250">WindowClose</animation>
        <animation effect="fade" time="200">WindowOpen</animation>
      </control>
    </control>

It can be added by just adding another virtual view:

<control>
      <type>button</type>
      <description>Full Colour Fanart View</description>
      <posX>2000</posX>
      <posY>1</posY>
      <id>10099</id>
      <onup>10000</onup>
      <ondown>10000</ondown>
      <onleft>10000</onleft>
      <onright>10100</onright>
      <label>-</label>
      <font>font10</font>
      <align>left</align>
      <textureFocus>-</textureFocus>
      <textureNoFocus>-</textureNoFocus>
    </control>

    <control>
      <type>button</type>
      <description>Movie Thumbs Fanart View</description>
      <posX>2000</posX>
      <posY>1</posY>
      <id>10100</id>
      <onleft>10099</onleft>
      <onup>10000</onup>
      <ondown>10000</ondown>
      <onleft>10099</onleft>
      <onright>10100</onright>
      <label>-</label>
      <font>font10</font>
      <align>left</align>
      <textureFocus>-</textureFocus>
      <textureNoFocus>-</textureNoFocus>
     </control>

Related

   

 

This page has no comments.

    •     About The Project

      The vision of the MediaPortal project is to create a free open source media centre application, which supports all advanced media centre functions, and is accessible to all Windows users.

      In reaching this goal we are working every day to make sure our software is one of the best.

                 

    •     Quick Navigation

    •     Support MediaPortal!

      The team works very hard to make sure the community is running the best HTPC-software. We give away MediaPortal for free but hosting and software is not for us.

      Care to support our work with a few bucks? We'd really appreciate it!

       

Powered by Atlassian Confluence