Blue Vision (9 Viewers)

[ge2301]

I had introduced a new popup dialog style by applying a blur to a blurred picture The result is visually attractive, just one problem is remaining and I try to solve it currently.
In case the dialog window is very long, the blur effect is not stretched well (See screenshots).


Current code for the blur:

      <Rectangle Fill="{ThemeResource DialogBorderBrush}" RadiusY="{ThemeResource DialogBorderCornerRadius}" RadiusX="{ThemeResource DialogBorderCornerRadius}"
               Margin="-120,-85,-120,-80" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Opacity="0.9">
         <Rectangle.Fill>
            <ImageBrush ImageSource="blur.png" Stretch="Fill"/>
         </Rectangle.Fill>
        <Rectangle.Effect>
          <ZoomBlurEffect BlurAmount="0.1" />
        </Rectangle.Effect>
      </Rectangle>

I tried to devide the blur picture into 3 pieces, while only the middle piece is stretched vertically and all pieces are stretched horizontally.
The blur effect is applied to the grid in the end. This would make the rounding of the blur aspect indedendent and it should look better.

However the result is always following:

The pictures are not stretched correctly

Here the code:

      <Grid Margin="-180,-85,-180,-80" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="*"/>
          <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
       
        <Image Grid.Row="0" Source="blur_top.png"  HorizontalAlignment="Stretch" Opacity="0.9"/>
        <Image Grid.Row="1" Source="blur_mid.png" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Opacity="0.9" />
        <Image Grid.Row="2" Source="blur_bot.png"  HorizontalAlignment="Stretch" Opacity="0.9"/>
        <Grid.Effect>
          <ZoomBlurEffect BlurAmount="0.1" />
        </Grid.Effect> 
      </Grid>

Does anyone have an idea?

 

[ge2301]

I could solve another issue, that annoyed me long time So far depending on the aspect ratio and size differnt png-files are used as masks to create rounded corners for covers and fanarts.
This is necessary to avoid distorted corners.
Be creating a border as mask and applying it with a visualbrush on the grid's opacity, this can by done simply and aspect and size independent! I'll update the complete code of BV accordingly.

Example of current code

<ControlTemplate x:Key="GridViewMovieItemTemplate">
    <Grid Margin="3,2,3,2">
      <Grid Width="{StaticResource MEDIA_POSTER_WIDTH}" Height="{StaticResource MEDIA_POSTER_HEIGHT}" OpacityMask="{ThemeResource MediaItemsOpacityBrush}">
        <Image  HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" FallbackSource="VideoLarge.png" >
          <Image.Source>
            <fanart:FanArtImageSource fanart:FanArtMediaType="Movie" fanart:FanArtType="Poster" fanart:FanArtName="{Binding MediaItem.MediaItemId}"
               fanart:MaxWidth="{StaticResource FANART_POSTER_WIDTH}" fanart:MaxHeight="{StaticResource FANART_POSTER_HEIGHT}"/>
          </Image.Source>
        </Image>
        <Image HorizontalAlignment="Left" VerticalAlignment="Top">
          <Image.Source>
            <MultiBinding Converter="{StaticResource ExpressionMultiValueConverter}" ConverterParameter="{}{0} == 0 ? {1} : {2}">
              <Binding Path="PlayCount"/>
              <Binding Source="UnwatchedTab_small.png"/>
              <Binding Source=""/>
            </MultiBinding>
          </Image.Source>
        </Image>
      </Grid>
    </Grid>
  </ControlTemplate>

Example of new code:

 <ControlTemplate x:Key="GridViewMovieItemTemplate">
    <Border Name="mask" Background="White" CornerRadius="15" BorderThickness="0" BorderBrush="Black" />
    <Grid Width="{StaticResource MEDIA_POSTER_WIDTH}" Height="{StaticResource MEDIA_POSTER_HEIGHT}" Margin="3,2,3,2" HorizontalAlignment="Center" VerticalAlignment="Center">
      <Grid.OpacityMask>
         <VisualBrush Visual="{Binding ElementName=mask}"/>
      </Grid.OpacityMask>
        <Image  HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" FallbackSource="VideoLarge.png" >
          <Image.Source>
            <fanart:FanArtImageSource fanart:FanArtMediaType="Movie" fanart:FanArtType="Poster" fanart:FanArtName="{Binding MediaItem.MediaItemId}"
               fanart:MaxWidth="{StaticResource FANART_POSTER_WIDTH}" fanart:MaxHeight="{StaticResource FANART_POSTER_HEIGHT}"/>
          </Image.Source>
        </Image>
        <Image HorizontalAlignment="Left" VerticalAlignment="Top">
          <Image.Source>
            <MultiBinding Converter="{StaticResource ExpressionMultiValueConverter}" ConverterParameter="{}{0} == 0 ? {1} : {2}">
              <Binding Path="PlayCount"/>
              <Binding Source="UnwatchedTab_small.png"/>
              <Binding Source=""/>
            </MultiBinding>
          </Image.Source>
        </Image>
    </Grid>
  </ControlTemplate>

 

[morpheus_xx]

@ge2301 those are the example screenshots taken from last Weekly
Recordings: right image overlaps "List" view

Improve OSD of PiP player control

Create a style for "skip step" overlay in video fullscreen (key left/right). (own screen of type "superlayer": https://github.com/MediaPortal/Medi...um/Skin/Titanium/superlayers/SkipStepOSD.xaml)


Find a solution for player control overlapping of footer are info (animated slide out? problem: define a condition when to show and when to hide)


Styles of "currently playing" screens for all media (less important, one screen per media type)

 

[ge2301]

Recordings: right image overlaps "List" view

Could you upload a dummy recording (10 seconds) or somthing I can put into my database. I'm without TVcard and would like to test the changes I made If possible, where would I have to place the recording? thanks

 

[Lehmden]

here you go...
Don't wonder about the naming, it's a recurring recording without any episodes title...

 

[ge2301]

here you go...
Don't wonder about the naming, it's a recurring recording without any episodes title...

Where do I have to place it? Should I create a new folder "recordings" ?

 

[Lehmden]

Hi.
Normally those files belongs into the Recordings folder defined in the TVE Setup. As you don't have any Tuner you need to fool the TV engine. Install TVE3.0 native (in MP2-Server\Plugins\ and SlimTV in MP2-Client\Plugins) and then set the TV Engine to only use Webradio and IPTV. This is possible without any real tuner. Now you can define recording and timeshift folder. And don't forget to add the Recordings folder as a media source in MP2 after you've set this "fake" TV Engine...

 

[morpheus_xx]

In fact recordings work even without (configured) server plugin. Only place them into a folder and create a media source for it.
Recordings detection only uses the .xml next to the .ts file

 

[ge2301]

Listview style for recordings looks like following now:


I added also gridview style for recordings:


Would be great if somebody can test it and feedback. I just multiplied the recording from Lehmden and it looks fine for me
You need to extract the zip file to \MP2-Client\Plugins\SlimTv.Client\Skin

I'll commit the changes later and also will update the download links in second post.

 

[Lehmden]

Seems OK to me too: