Making inbuilt plugins Skin resolution aware (1 Viewer)

[morpheus_xx]

The "Default" skin of MP2 is the base for all other skins. It's developed as a basic, fast and extensible skin. It's designed as 1280x720 resolution.

All (or the majority) of the other Skins (Reflexion, Titanium, ApolloOne, BlueVision) are full HD (1920x1080).

Because of the MP2 skin resource lookup chain, a fallback for missing screens and resources happens, selection the "Default" versions in the end.

Where is the problem?
Inbuilt plugins come with Skin support for Default, some of them also for Reflexion and Titanium. The most differences come from defined constants, like image sizes, grid widths, margins etc.
So to add support for greater sizes requires some changes to support all new 1080 Skins.

How can we solve this?
My idea is to define constants inside Skins for both common sizes: 720 and 1080.

I've created a custom MultiValueConverter which decides internally if it should use the first or second argument (720 or 1080 resolution).

The XAML attributes then should use the new converter and bind both 720/1080 resources to it. It's not much more work then using single resources, but save all other designers most of the work.

Examples
Weather icon:

            <Image x:Name="BigIcon" Source="{Binding CurrentLocation.Condition.BigIconProperty}" Stretch="Uniform">
              <Image.Width>
                <MultiBinding Converter="{StaticResource SkinResolutionMultiValueConverter}">
                  <Binding Source="{StaticResource WeatherIconBigWidth720}"/>
                  <Binding Source="{StaticResource WeatherIconBigWidth1080}"/>
                </MultiBinding>
              </Image.Width>
              <Image.Height>
                <MultiBinding Converter="{StaticResource SkinResolutionMultiValueConverter}">
                  <Binding Source="{StaticResource WeatherIconBigHeight720}"/>
                  <Binding Source="{StaticResource WeatherIconBigHeight1080}"/>
                </MultiBinding>
              </Image.Height>
            </Image>

Where the constants are defined as:

  <ResourceWrapper x:Key="WeatherIconBigWidth720">128</ResourceWrapper>
  <ResourceWrapper x:Key="WeatherIconBigHeight720">128</ResourceWrapper>

  <ResourceWrapper x:Key="WeatherIconBigWidth1080">192</ResourceWrapper>
  <ResourceWrapper x:Key="WeatherIconBigHeight1080">192</ResourceWrapper>

So it's now no longer required to define the same constants for each 1080 skin over and over again, but only once inside the plugin.

Full changes for "Weather": https://github.com/MediaPortal/MediaPortal-2/commit/6b13c779e604a601d32be539cf9d08933d579510

Same for "News": https://github.com/MediaPortal/MediaPortal-2/commit/3e13557b0ad3a43baa09ebb317f4e251f1003983

This change is especially thought for all new Skins which are under development (ApolloOne + BlueVision).

@Designers and @Developers

 

[osre]

I think it might go even more simple in usage, if you create an custom Extension instead of an ValueConverter.

<Image x:Name="BigIcon" Source="{Binding CurrentLocation.Condition.BigIconProperty}" Stretch="Uniform"
       Width="{ResolutionResource WeatherIconBigWidth}" Height="{ResolutionResource WeatherIconBigHeight}"/>

Internally the ResolutionResourceExtension would work exactly like the StaticResourceExtension, except that it appends the Resolution to the key Name.
The Resources would be defined exactly like in your sample.
Iknow that this might be a bit confusing at first, but finally the Skin XAML code would be way shorter and more easy to read.

 

[ge2301]

How about 4k resolution? I don't have such TV (And I won't buy), but the trend will be in this direction by time.
Or is it not of interest, because 4k = 4 times 1080, so same aspect ratio?

EDIT: With post of Osre it's clear now

 

[osre]

The Extension could look for more than 720 and 1080, and take the one which fits best.
By this only the resources Needs to be updated to Support other resolutions.
The Extension could always take the next smaler resource.
Lets say you have 1920x1200, then it would take 1080.
If you have 4k, and no exta value is defined for 4k, then it would take 1080 too.
If aou add the 4k resource, it would be taken instead.
By this any resoulution can be supported with a specific value.

 

[Lehmden]

Hi.
Any chance to get any 4:3 resolution available too? I'm asking as in bedroom I still have a 4:3 CRT TV running and my extra VGA monitor also is 4:3. Most of the Time I'm watching on my FullHD 1080P 16:9 TV but sometimes I need to use MP2 with 4:3 aspect... And I'm sure I'm not the only one in the whole world who still uses some 4:3 screens.

 

[osre]

You also could add an Parameter to the Extension which scales the actual value (if it's an numeric one) according to the actual Resolution.
Lets say you have a resource value of 100 for 1080.
Your actual Resolution is 1200.
When you turn on the Auto scaling, then the following would happen.

1. Look for 1200 value
2. if 1200 value not found -> look for next smaler one
3. 1080 value found: 100
4. if AutoScale == true: value = value * actualResolution / resourceResoulution
   -> 111.11 = 100 * 1200 / 1080

 

[osre]

Hi.
Any chance to get any 4:3 resolution available too? I'm asking as in bedroom I still have a 4:3 CRT TV running and my extra VGA monitor also is 4:3. Most of the Time I'm watching on my FullHD 1080P 16:9 TV but sometimes I need to use MP2 with 4:3 aspect... And I'm sure I'm not the only one in the whole world who still uses some 4:3 screens.

May be the Extension could Support not only specifying height, but also width in the resource name?
Resouce names like "MyWidth640_480".
The Extension would then prefere resources with same aspect Ratio, if the height is not off too much (some Kind of weighting)
If the resource Name is only height, then an aspect Ratio of 16:9 is used automatically.

 

[Lehmden]

Hi.
Would be a "killer feature" if MP2 could support different aspect ratios as today there are much more than 16:9 or 4:3. My Tablet as example has 1920x1200 px (something like 16:10 ratio), there are TV available with 2.35:1, and so on...

 

[morpheus_xx]

Hi.
Any chance to get any 4:3 resolution available too? I'm asking as in bedroom I still have a 4:3 CRT TV running and my extra VGA monitor also is 4:3. Most of the Time I'm watching on my FullHD 1080P 16:9 TV but sometimes I need to use MP2 with 4:3 aspect... And I'm sure I'm not the only one in the whole world who still uses some 4:3 screens.

This is not so easy: the Skins are designed at a specific dimension (1280x720, 1920x1080) (see skin.xml). Now there are 2 dimensions: skin vs. screen, where scaling happens. This scaling also happens for windowed mode (with completely free aspect ratio) as well. I think the resolution specific resources can only work with the Skin dimension, not the screen ones.

The proposed Extensions is a great idea, I will implement it! (thanks osre). It will work as suggested: try skin's resolution first, then fallback to lower versions.

 

[Lehmden]

This is not so easy

Yea, I can imagine that. But maybe there is a way somehow