[solved] FanArt transition (1 Viewer)

ge2301

Lead Design MP2
  • Team MediaPortal
  • January 11, 2014
    8,667
    3,473
    Stuttgart
    Home Country
    Germany Germany
    Sounds really cool and this is exactly what I'd like to see (y)(y)
     

    ge2301

    Lead Design MP2
  • Team MediaPortal
  • January 11, 2014
    8,667
    3,473
    Stuttgart
    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:
    XML:
    <Grid
      xmlns="www.team-mediaportal.com/2008/mpf/directx"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:fanart="clr-namespace:MediaPortal.Extensions.UserServices.FanArtService.Client;assembly=FanArtService.Client"
      xmlns:media="clr-namespace:MediaPortal.UiComponents.Media.Models.AspectWrappers;assembly=Media"
      x:Name="MediaItemDetails" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{DynamicResource Cover_Width}"
      Margin="-25,-20,-80,30">
    
      <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <Grid.Resources>
        <fanart:FanArtImageSourceConverter x:Key="FanArtImageSourceConverter"/>
      </Grid.Resources>
    
      <Image Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" Stretch="Uniform" Margin="0,0,5,0" Height="560">
        <Image.Source>
          <ImageSourceWrapper Delay="0.5" DelayInOut="true" Transition="transitions\dissolve" TransitionDuration="0.5"
                         Source="{Binding Source={StaticResource FanArtBackgroundModel}, Path=ImageSource, Converter={StaticResource FanArtImageSourceConverter}, ConverterParameter=Poster;0;0;False}"
                         FallbackSource="{Binding Source={StaticResource FanArtBackgroundModel},Path=MediaItem}" />
        </Image.Source>
      </Image>
    </Grid>
     

    Attachments

    • 2016-01-24 15h14_20.7z
      4.3 MB

    Brownard

    Development Group
  • Team MediaPortal
  • March 21, 2007
    2,284
    1,864
    Home Country
    United Kingdom United Kingdom
    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.
    XML:
    <Image Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" Stretch="Uniform" Margin="0,0,5,0" Height="560" Width="{DynamicResource Cover_Width}">
        <Image.Source>
          <ImageSourceWrapper Delay="0.5" DelayInOut="true" Transition="transitions\dissolve" TransitionDuration="0.5"
                        Source="{Binding Source={StaticResource FanArtBackgroundModel}, Path=ImageSource, Converter={StaticResource FanArtImageSourceConverter}, ConverterParameter=Poster;0;0;False}"
                        FallbackSource="{Binding Source={StaticResource FanArtBackgroundModel},Path=MediaItem}" />
        </Image.Source>
    </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.
     

    ge2301

    Lead Design MP2
  • Team MediaPortal
  • January 11, 2014
    8,667
    3,473
    Stuttgart
    Home Country
    Germany Germany
    so the distance to the right hand side varies depending on the image's aspect ratio. It looks acceptable to me though.
    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 ...
     

    Brownard

    Development Group
  • Team MediaPortal
  • March 21, 2007
    2,284
    1,864
    Home Country
    United Kingdom United Kingdom
    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.
     

    ge2301

    Lead Design MP2
  • Team MediaPortal
  • January 11, 2014
    8,667
    3,473
    Stuttgart
    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 :)
     

    Lehmden

    Retired Team Member
  • Premium Supporter
  • December 17, 2010
    12,543
    3,932
    Lehmden
    Home Country
    Germany Germany
    I think MPF is a "light version" of WPF
    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
     

    Brownard

    Development Group
  • Team MediaPortal
  • March 21, 2007
    2,284
    1,864
    Home Country
    United Kingdom United Kingdom
    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.
     

    Users who are viewing this thread

    Top Bottom