Making inbuilt plugins Skin resolution aware

Discussion in 'Skins and Design' started by morpheus_xx, March 29, 2015.

  1. morpheus_xx
    • Team MediaPortal

    morpheus_xx Lead Dev MP2

    Joined:
    March 24, 2007
    Messages:
    11,017
    Likes Received:
    4,749
    Ratings:
    +6,795 / 11
    Home Country:
    Germany Germany
    Show System Specs
    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:
    Code (XML):
    1.             <Image x:Name="BigIcon" Source="{Binding CurrentLocation.Condition.BigIconProperty}" Stretch="Uniform">
    2.               <Image.Width>
    3.                 <MultiBinding Converter="{StaticResource SkinResolutionMultiValueConverter}">
    4.                   <Binding Source="{StaticResource WeatherIconBigWidth720}"/>
    5.                   <Binding Source="{StaticResource WeatherIconBigWidth1080}"/>
    6.                 </MultiBinding>
    7.               </Image.Width>
    8.               <Image.Height>
    9.                 <MultiBinding Converter="{StaticResource SkinResolutionMultiValueConverter}">
    10.                   <Binding Source="{StaticResource WeatherIconBigHeight720}"/>
    11.                   <Binding Source="{StaticResource WeatherIconBigHeight1080}"/>
    12.                 </MultiBinding>
    13.               </Image.Height>
    14.             </Image>
    Where the constants are defined as:
    Code (XML):
    1.   <ResourceWrapper x:Key="WeatherIconBigWidth720">128</ResourceWrapper>
    2.   <ResourceWrapper x:Key="WeatherIconBigHeight720">128</ResourceWrapper>
    3.  
    4.   <ResourceWrapper x:Key="WeatherIconBigWidth1080">192</ResourceWrapper>
    5.   <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
     
    • Like Like x 2
  2. Google AdSense Guest Advertisement



    to hide all adverts.
  3. osre
    • Premium Supporter

    osre Retired Team Member

    Joined:
    December 14, 2014
    Messages:
    766
    Likes Received:
    229
    Gender:
    Male
    Occupation:
    Software developer (senior)
    Ratings:
    +388 / 2
    Home Country:
    Germany Germany
    I think it might go even more simple in usage, if you create an custom Extension instead of an ValueConverter.
    Code (XML):
    1. <Image x:Name="BigIcon" Source="{Binding CurrentLocation.Condition.BigIconProperty}" Stretch="Uniform"
    2.       Width="{ResolutionResource WeatherIconBigWidth}" Height="{ResolutionResource WeatherIconBigHeight}"/>
    3.  
    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.
     
    • Like Like x 1
    • Great Idea! Great Idea! x 1
  4. ge2301
    • Team MediaPortal

    ge2301 MP2 Design

    Joined:
    January 11, 2014
    Messages:
    6,155
    Likes Received:
    1,554
    Gender:
    Male
    Occupation:
    Automotive Industry
    Location:
    Stuttgart (But living abroad)
    Ratings:
    +2,338 / 2
    Home Country:
    Germany Germany
    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
     
  5. osre
    • Premium Supporter

    osre Retired Team Member

    Joined:
    December 14, 2014
    Messages:
    766
    Likes Received:
    229
    Gender:
    Male
    Occupation:
    Software developer (senior)
    Ratings:
    +388 / 2
    Home Country:
    Germany Germany
    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.
     
  6. Lehmden
    • Premium Supporter

    Lehmden Retired Team Member

    Joined:
    December 17, 2010
    Messages:
    11,847
    Likes Received:
    2,146
    Gender:
    Male
    Location:
    Lehmden
    Ratings:
    +3,618 / 28
    Home Country:
    Germany Germany
    Show System Specs
    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.
     
  7. osre
    • Premium Supporter

    osre Retired Team Member

    Joined:
    December 14, 2014
    Messages:
    766
    Likes Received:
    229
    Gender:
    Male
    Occupation:
    Software developer (senior)
    Ratings:
    +388 / 2
    Home Country:
    Germany Germany
    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
     
  8. osre
    • Premium Supporter

    osre Retired Team Member

    Joined:
    December 14, 2014
    Messages:
    766
    Likes Received:
    229
    Gender:
    Male
    Occupation:
    Software developer (senior)
    Ratings:
    +388 / 2
    Home Country:
    Germany Germany
    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.
     
  9. Lehmden
    • Premium Supporter

    Lehmden Retired Team Member

    Joined:
    December 17, 2010
    Messages:
    11,847
    Likes Received:
    2,146
    Gender:
    Male
    Location:
    Lehmden
    Ratings:
    +3,618 / 28
    Home Country:
    Germany Germany
    Show System Specs
    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...
     
  10. morpheus_xx
    • Team MediaPortal

    morpheus_xx Lead Dev MP2

    Joined:
    March 24, 2007
    Messages:
    11,017
    Likes Received:
    4,749
    Ratings:
    +6,795 / 11
    Home Country:
    Germany Germany
    Show System Specs
    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(y)). It will work as suggested: try skin's resolution first, then fallback to lower versions.
     
  11. Lehmden
    • Premium Supporter

    Lehmden Retired Team Member

    Joined:
    December 17, 2010
    Messages:
    11,847
    Likes Received:
    2,146
    Gender:
    Male
    Location:
    Lehmden
    Ratings:
    +3,618 / 28
    Home Country:
    Germany Germany
    Show System Specs
    Yea, I can imagine that. But maybe there is a way somehow
     
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!