[solved] - FanArt transition | Page 2

Discussion in 'Skins and Design' started by ge2301, December 8, 2015.

  1. ge2301
    • Team MediaPortal

    ge2301 MP2 Design

    Joined:
    January 11, 2014
    Messages:
    6,424
    Likes Received:
    1,588
    Gender:
    Male
    Occupation:
    Automotive Industry
    Location:
    Stuttgart
    Ratings:
    +2,388 / 2
    Home Country:
    Germany Germany
    Sounds really cool and this is exactly what I'd like to see (y)(y)


     
    • Like Like x 1
  2. Google AdSense Guest Advertisement



    to hide all adverts.
  3. Brownard
    • Team MediaPortal

    Brownard Development Group

    Joined:
    March 21, 2007
    Messages:
    1,919
    Likes Received:
    789
    Gender:
    Male
    Ratings:
    +1,327 / 1
    Home Country:
    United Kingdom United Kingdom
    Show System Specs
    • Like Like x 1
  4. ge2301
    • Team MediaPortal

    ge2301 MP2 Design

    Joined:
    January 11, 2014
    Messages:
    6,424
    Likes Received:
    1,588
    Gender:
    Male
    Occupation:
    Automotive Industry
    Location:
    Stuttgart
    Ratings:
    +2,388 / 2
    Home Country:
    Germany Germany
    @Brownard
    I've modified the FanArt screen a bit in order to show more from images and audio poster.
    Currently those FanArts are too small, because they are uniformed into space, that is intended for movie posters.

    Everything looks basically ok, just then switching between FanArts with different aspect there is a sudden jump.
    It seems that the FanArt is changing the position after the ImageSourceWrapper finished it's transition effect.

    Attached a small movie showing this.

    Do you have an idea, why this happens or how we can prevent it?

    Here the code in MediaItemFanArt.inc:
    Code (XML):
    1. <Grid
    2.  xmlns="www.team-mediaportal.com/2008/mpf/directx"
    3.  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.  xmlns:fanart="clr-namespace:MediaPortal.Extensions.UserServices.FanArtService.Client;assembly=FanArtService.Client"
    5.  xmlns:media="clr-namespace:MediaPortal.UiComponents.Media.Models.AspectWrappers;assembly=Media"
    6.  x:Name="MediaItemDetails" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{DynamicResource Cover_Width}"
    7.  Margin="-25,-20,-80,30">
    8.  
    9.   <Grid.RowDefinitions>
    10.     <RowDefinition Height="*"/>
    11.   </Grid.RowDefinitions>
    12.   <Grid.ColumnDefinitions>
    13.     <ColumnDefinition Width="*"/>
    14.   </Grid.ColumnDefinitions>
    15.   <Grid.Resources>
    16.     <fanart:FanArtImageSourceConverter x:Key="FanArtImageSourceConverter"/>
    17.   </Grid.Resources>
    18.  
    19.   <Image Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" Stretch="Uniform" Margin="0,0,5,0" Height="560">
    20.     <Image.Source>
    21.       <ImageSourceWrapper Delay="0.5" DelayInOut="true" Transition="transitions\dissolve" TransitionDuration="0.5"
    22.                     Source="{Binding Source={StaticResource FanArtBackgroundModel}, Path=ImageSource, Converter={StaticResource FanArtImageSourceConverter}, ConverterParameter=Poster;0;0;False}"
    23.                     FallbackSource="{Binding Source={StaticResource FanArtBackgroundModel},Path=MediaItem}" />
    24.     </Image.Source>
    25.   </Image>
    26. </Grid>
     

    Attached Files:

    • Like Like x 1
  5. Brownard
    • Team MediaPortal

    Brownard Development Group

    Joined:
    March 21, 2007
    Messages:
    1,919
    Likes Received:
    789
    Gender:
    Male
    Ratings:
    +1,327 / 1
    Home Country:
    United Kingdom United Kingdom
    Show System Specs
    I think the underlying reason is that you haven't given the Image control a width and the skin engine is calculating the size and position of the control during the transition from the size of the first image, then it updates the control's size and position based on the second image's size after the transition.

    A workaround is to give the Image control a width e.g.
    Code (XML):
    1. <Image Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" Stretch="Uniform" Margin="0,0,5,0" Height="560" Width="{DynamicResource Cover_Width}">
    2.     <Image.Source>
    3.       <ImageSourceWrapper Delay="0.5" DelayInOut="true" Transition="transitions\dissolve" TransitionDuration="0.5"
    4.                    Source="{Binding Source={StaticResource FanArtBackgroundModel}, Path=ImageSource, Converter={StaticResource FanArtImageSourceConverter}, ConverterParameter=Poster;0;0;False}"
    5.                    FallbackSource="{Binding Source={StaticResource FanArtBackgroundModel},Path=MediaItem}" />
    6.     </Image.Source>
    7. </Image>
    This does impact the alignment though, the image control is aligned to the right but the actual images are centred within the image control's 'rectangle' so the distance to the right hand side varies depending on the image's aspect ratio. It looks acceptable to me though.
     
    • Thank You! Thank You! x 1
  6. ge2301
    • Team MediaPortal

    ge2301 MP2 Design

    Joined:
    January 11, 2014
    Messages:
    6,424
    Likes Received:
    1,588
    Gender:
    Male
    Occupation:
    Automotive Industry
    Location:
    Stuttgart
    Ratings:
    +2,388 / 2
    Home Country:
    Germany Germany
    Thanks, this is a good step. But the same code is used for movie poster etc. To keep visually a symetry and in order to not cover the FanArt background in the middle, it needs to be aligned on the right side. I'm sure there is a solution, I'll play around with it further :) Google didn't help so far though ...
     
  7. Brownard
    • Team MediaPortal

    Brownard Development Group

    Joined:
    March 21, 2007
    Messages:
    1,919
    Likes Received:
    789
    Gender:
    Male
    Ratings:
    +1,327 / 1
    Home Country:
    United Kingdom United Kingdom
    Show System Specs
    I don't think it will be easy (maybe impossible).
    You could either define a different Cover_Width for each view based on expected values for that media type or disable transitions.

    The ultimate fix would be to implement ContentAlignment for the image control so that images aren't always drawn in the centre, I don't think WPF even implements this though.
     
  8. mrj

    mrj Portal Pro

    Joined:
    January 27, 2012
    Messages:
    251
    Likes Received:
    45
    Ratings:
    +101 / 1
    Show System Specs
    Hi
    Is not this one of the reasons that MP2 uses MPF and not WPF?
    /mrj
     
  9. ge2301
    • Team MediaPortal

    ge2301 MP2 Design

    Joined:
    January 11, 2014
    Messages:
    6,424
    Likes Received:
    1,588
    Gender:
    Male
    Occupation:
    Automotive Industry
    Location:
    Stuttgart
    Ratings:
    +2,388 / 2
    Home Country:
    Germany Germany
    I think MPF is a "light version" of WPF. Means most parts are taken over, but some parts are missing in MPF.
    Howeer there might be also other reasons, as I'm not part of MP2 from the beginning :)
     
  10. Lehmden
    • Premium Supporter

    Lehmden Retired Team Member

    Joined:
    December 17, 2010
    Messages:
    11,939
    Likes Received:
    2,152
    Gender:
    Male
    Location:
    Lehmden
    Ratings:
    +3,635 / 28
    Home Country:
    Germany Germany
    Show System Specs
    MPF is meant as an modified WPF to fit MP2 needs perfect. Some features of WPF are not supported but some features used in MP2 are not supported in WPF but in MPF. To say it is a "light" version is not exactly correct...
    Al least it this how I have understood the existance of MPF
     
  11. Brownard
    • Team MediaPortal

    Brownard Development Group

    Joined:
    March 21, 2007
    Messages:
    1,919
    Likes Received:
    789
    Gender:
    Male
    Ratings:
    +1,327 / 1
    Home Country:
    United Kingdom United Kingdom
    Show System Specs
    I've managed to hack together a working solution to this where you can specify the alignment of the texture within the image control.

    @morpheus_xx is this something we want to support? The current problem is that when an Image control's width/height is dynamic based on the texture size, there is a 'jump' when a transition finishes (it's also there without a transition but much less noticeable) when the layout updates based on the new texture size. But without a dynamic size it isn't possible to get a consistent alignment because the texture is always drawn centred.

    The relevant changes would need to be made here so that textures aren't always drawn centred.
     
    • Thank You! Thank You! x 1
Loading...

Users Viewing Thread (Users: 0, Guests: 0)

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice
  • 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.

             

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