Skinning guide: how to port a skin to MP2, or how "Titan" gets transformed

Discussion in 'Skins and Design' started by morpheus_xx, December 20, 2012.

Thread Status:
Not open for further replies.
  1. morpheus_xx
    • Team MediaPortal

    morpheus_xx Lead Dev MP2

    Joined:
    March 24, 2007
    Messages:
    10,635
    Likes Received:
    4,652
    Ratings:
    +6,654 / 11
    Home Country:
    Germany Germany
    Show System Specs
    Porting existing skins to MediaPortal 2

    Some first notes
    MediaPortal 1 already has a big number of good skins, and now with 1.3 beta there is the really great "Titan" skin. The idea of porting this skin to MP2 was born few days ago.

    I've talked with @joostzilla, he works with PhotoShop, drawing the controls and screens using vector graphics. This is already a very good starting point, as MP2 uses mainly vector graphics.

    But vector graphics are not the only thing which is done differently in MP2:

    For the ones who likt to follow the development on github, look here https://github.com/MediaPortal/MediaPortal-2/commits/FEAT_TitaniumSkin

    For all who like to discuss the contents of this guide and ask questions, please visit https://forum.team-mediaportal.com/threads/skinning-guide-discussion.114861/

     
    Last edited: December 20, 2012
    • Like Like x 14
  2. Google AdSense Guest Advertisement



    to hide all adverts.
  3. morpheus_xx
    • Team MediaPortal

    morpheus_xx Lead Dev MP2

    Joined:
    March 24, 2007
    Messages:
    10,635
    Likes Received:
    4,652
    Ratings:
    +6,654 / 11
    Home Country:
    Germany Germany
    Show System Specs
    Last edited: December 23, 2012
    • Like Like x 2
  4. morpheus_xx
    • Team MediaPortal

    morpheus_xx Lead Dev MP2

    Joined:
    March 24, 2007
    Messages:
    10,635
    Likes Received:
    4,652
    Ratings:
    +6,654 / 11
    Home Country:
    Germany Germany
    Show System Specs
    Let's start
    I started first experiments to import joost's psd files into Blend.

    • "In principle" it works to import the file, but the result is not the same as the source (not that I expected it...) See screen below, I think the main issue is different font rendering (width)
    • When I tried to import the "home" file with all layers, Blend crashed with a "OutOfMemoryException"
    • I think I get a first impression how you use the files: they contain all possible controls for different states, layers are temporary hidden and can be enabled to see how it will look when the control is shown
    View attachment 117300
    How will I continue?
    • First thing will be to find the most important components that build the layout: main panels, title, menu section, button styles...
     
    • Like Like x 2
  5. morpheus_xx
    • Team MediaPortal

    morpheus_xx Lead Dev MP2

    Joined:
    March 24, 2007
    Messages:
    10,635
    Likes Received:
    4,652
    Ratings:
    +6,654 / 11
    Home Country:
    Germany Germany
    Show System Specs
    Started with some first changes:

    I do not start with the "Default" skin, but with a copy of "Reflexion" (https://github.com/MediaPortal/MediaPortal-2/commit/23d47cf84803aaff6fa9055360968ebea7284083). The main reason for this is, that the screens will be scaled to the resolution of the Skin that defines the <Screen> element. The good thing in MP2: you have only 2..3 Screens as master pages: change them once, results apply to all screens :) Even the Reflexion skin does only include the differences to the Default skin.

    So let's start:
    First I wanted to have the blue buttons on homescreen. I defined a new ButtonStyle, containing only a semi transparent rectangle with a border radius of "30".

    Then I'd like to have the bottom bar visible. I copied directly from the converted xaml into the "master_bare.xaml", which is the master of all screens. Place them once, use it everywhere.

    First 2 screens:
    View attachment 117309 View attachment 117310

    I feel quite happy after few hours :)
     
    Last edited: December 20, 2012
    • Like Like x 1
  6. morpheus_xx
    • Team MediaPortal

    morpheus_xx Lead Dev MP2

    Joined:
    March 24, 2007
    Messages:
    10,635
    Likes Received:
    4,652
    Ratings:
    +6,654 / 11
    Home Country:
    Germany Germany
    Show System Specs
    Next step:
    Adding a basic "glow" around the focused button in homescreen: Currently I simply put another Rectangle into the ControlStyle, which has an Opacity of "0" (full transparent). I've enabled the trigger that starts an animation when the button gets the focus. This animation increases the Opacity from 0 to 0.75.

    View attachment 117313

    The header label of the screen was shown in top right place. Now let's move it to bottom bar (here "choose series")
    View attachment 117314
     
    • Like Like x 1
  7. morpheus_xx
    • Team MediaPortal

    morpheus_xx Lead Dev MP2

    Joined:
    March 24, 2007
    Messages:
    10,635
    Likes Received:
    4,652
    Ratings:
    +6,654 / 11
    Home Country:
    Germany Germany
    Show System Specs
    As next I wanted to have a background in the content screens, but not on home screen.

    For understanding the MP2 skin files, check the three main ones:
    • master_bare.xaml : this is the "overall master page" for everything
    • master_menu.xaml : this one includes the master_bare and defines styles for all "menu" based screens (in fact all execpt home)
    • master_homemenu.xaml: this one I use only for homescreen, it includes master_bare as well
    We work declarative manner here:
    In master_bare I added a

    Which does draw a rounded rectangle. Main part here is the IsVisible binding.

    Now, inside master_menu I add a resource:


    And for master_homemenu I hide the rectangle using:
    https://github.com/MediaPortal/MediaPortal-2/commit/f6d00d5d0eac39645c949e9afc2766a1350525df

    Homescreen still looks as in previous post, but now all other screens have a background:
    View attachment 117345
     
    Last edited: December 21, 2012
    • Like Like x 1
  8. morpheus_xx
    • Team MediaPortal

    morpheus_xx Lead Dev MP2

    Joined:
    March 24, 2007
    Messages:
    10,635
    Likes Received:
    4,652
    Ratings:
    +6,654 / 11
    Home Country:
    Germany Germany
    Show System Specs
    To fill the home screen with images now? The current background manager does the following to get a matching background images:

    All workflow actions that appear in the menu are of type "ListItem". Such a ListItem for menus have a dictionary "AdditionalProperties", where the key "MenuModel: Item-Action" contains the WorkflowAction, which ActionId I use for image names. Sounds complicated, but isn't ;)

    Currently only one single image is exposed by BackgroundManagerModel. For our homescreen we need n images concurrently.

    This a good task for a so called ValueConverter:
    Code (Text):
    1. namespace MediaPortal.UiComponents.BackgroundManager.Converter
    2. {
    3.   public class ListItemActionIdConverter : IValueConverter
    4.   {
    5.     public bool Convert(object val, Type targetType, object parameter, CultureInfo culture, out object result)
    6.     {
    7.       result = null;
    8.       ListItem listItem = val as ListItem;
    9.       if (listItem == null)
    10.         return false;
    11.  
    12.       object actionObject;
    13.       if (listItem.AdditionalProperties.TryGetValue(BackgroundManagerModel.ITEM_ACTION_KEY, out actionObject))
    14.       {
    15.         WorkflowAction action = (WorkflowAction) actionObject;
    16.         result = action.ActionId + (parameter != null ? parameter.ToString() : null);
    17.         return true;
    18.       }
    19.       return false;
    20.     }
    21.  
    22.     public bool ConvertBack(object val, Type targetType, object parameter, CultureInfo culture, out object result)
    23.     {
    24.       result = null;
    25.       return false;
    26.     }
    27.   }
    28. }
    https://github.com/MediaPortal/MediaPortal-2/commit/83a023ec018469434261ac2b2520418367c79f31

    In my template for the "MainMenuItemDataTemplateHover", I now can use the ListItem (== menu action) and use my new ListItemActionIdConverter:
    It extracts the ActionId from the item and appends my given ".jpg" to build a valid image filename.
    https://github.com/MediaPortal/MediaPortal-2/commit/ea5ae8978aa9e1381dbe7f316cb3256076911bac#L2R93

    The converter is added to the background manager plugin. Nothing needed to be modified in the SkinEngine.
    View attachment 117346

    What you see here are still the Reflexion images, and I left the rounded corners away. This is a new topic...
     
    Last edited: December 21, 2012
    • Like Like x 4
  9. morpheus_xx
    • Team MediaPortal

    morpheus_xx Lead Dev MP2

    Joined:
    March 24, 2007
    Messages:
    10,635
    Likes Received:
    4,652
    Ratings:
    +6,654 / 11
    Home Country:
    Germany Germany
    Show System Specs
    Some smaller tweaks are done on the homescreen part. While in the image above there were some minor glitches: i.e. the semi-transparent overlay in the buttons where not exactly fitting the whole button dimension.

    I've tweaked this a bit by moving button background (semi-transparent blue) to the ListItem style: https://github.com/MediaPortal/MediaPortal-2/commit/87f8ae7ce5f49a5df3da2a1cd8f23c882cd00fd0

    Also the default font got changed to "Titan":
    https://github.com/MediaPortal/MediaPortal-2/commit/8d42140335bc478560add74201513ca38ed0c8eb

    Next I wanted to replace the Reflexion based hover images by the Titan ones:
    https://github.com/MediaPortal/MediaPortal-2/commit/424b5b41896b1b2bd832ab7945583b03377aeab4

    And as you can see I also added the player controls to homescreen.

    At this time you can already see some differences to MP1: for MP1 there is only one player that can be active. In contrast, MP2 can handle 2 players concurrently (hint: soon it can handle unlimited players :whistle:). For now this means, we need to reserve space for 2 player controls.

    Also in MP2, this control is not only a "progress indicator" but the way to control players (start/stop, pause, skip...). Good, we can save all the controls from the MP1 topbar...

    If you try yourself, you will also find that the home menu screen in current MP2 state is working differently: while MP1 shows 6 items on screen and allows "paging" to right for more screens, MP2 does show all menu items in a WrapPanel, which allows scrolling vertically.

    It does not mean that it can't be changed, but for this phase of development I'll keep it simple.

    07_homescreen_new_hovers.jpg
     
    Last edited: December 21, 2012
    • Like Like x 3
  10. morpheus_xx
    • Team MediaPortal

    morpheus_xx Lead Dev MP2

    Joined:
    March 24, 2007
    Messages:
    10,635
    Likes Received:
    4,652
    Ratings:
    +6,654 / 11
    Home Country:
    Germany Germany
    Show System Specs
    Now I'll take care for the player control style.As template I only had the final raster image available, so I thought to draw them in vectors again.

    In princple the style I've redone is simple:
    • One rounded rectangle as background
    • One rounded rectangle using a transparency gradient as overlay
    08_drawing_template.jpg

    Blend creates those xaml code for me:
    Code (Text):
    1.         <Rectangle Fill="#FFD2D2D2" Height="140" Margin="449,292,851,0" Stroke="Black" VerticalAlignment="Top" RadiusX="30" RadiusY="30" StrokeThickness="0"/>
    2.         <Rectangle Height="140" Margin="449,292,851,0" Stroke="Black" VerticalAlignment="Top" RadiusX="30" RadiusY="30" StrokeThickness="0">
    3.             <Rectangle.Fill>
    4.                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    5.                     <GradientStop Color="#46FFFFFF"/>
    6.                     <GradientStop Color="#945E546A" Offset="0.874"/>
    7.                 </LinearGradientBrush>
    8.             </Rectangle.Fill>
    9.         </Rectangle>
    10.  
    I placed this into the "OtherControlsOverrides.xaml":
    Code (Text):
    1.             <!-- Background of player control panel-->
    2.             <Rectangle x:Name="PCBackground" Grid.ColumnSpan="2" Fill="{ThemeResource PlayerControlBackgroundColor}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RadiusX="30" RadiusY="30" />
    3.             <Rectangle Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RadiusX="30" RadiusY="30" >
    4.               <Rectangle.Fill>
    5.                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    6.                   <GradientStop Color="{ThemeResource CurrentPlayerControlBackgroundColor2}" Offset="0"/>
    7.                   <GradientStop Color="{ThemeResource CurrentPlayerControlBackgroundColor3}" Offset="0.874"/>
    8.                 </LinearGradientBrush>
    9.               </Rectangle.Fill>
    10.             </Rectangle>
    11.  
    Things to note:
    • I removed the margin from Blend (it positioned the item on the screen, here it's placed relative)
    • I replaced the fixed Width and Height by HorizontalAlignment="Stretch" VerticalAlignment="Stretch", this way my template is as big as the content requires.
    • I gave the rectangles a name, like x:Name="PCBackground"
    • The color constants are now replaced by "{ThemeResource PlayerControlBackgroundColor}". This way there is a color constant taken from our "colors.xaml" resource file. This has a simple reason: when you want to create a new color theme, you simply copy the "colors.xaml" and change few color constants. So creating blue, yellow or pink controls is just a matter of one color code.
    Extract from colors.xaml:
    Code (Text):
    1.   <ResourceWrapper x:Key="PlayerControlBackgroundColor" Resource="#FF3F4149"/>
    2.   <ResourceWrapper x:Key="CurrentPlayerControlBackgroundColor1" Resource="#FFD2D2D2"/> <!-- Used as background fill for current player -->
    3.   <ResourceWrapper x:Key="CurrentPlayerControlBackgroundColor2" Resource="#46FFFFFF"/> <!-- Used as gradient color overlay for all cases -->
    4.   <ResourceWrapper x:Key="CurrentPlayerControlBackgroundColor3" Resource="#945E546A"/> <!-- Used as gradient color overlay for all cases -->
    5.  
    Now again a bit of MP2 player theory: because you can have multiple active players, you need to separate their states. For this part the important state is the "CurrentPlayer": only one player is the "Current" one and handles the input (Pause, Play, Skip,...).

    To make them appear in a different style, we use a DataTrigger, that changes the "Fill" property of the "PCBackground" rectangle. That what's the names are for...
    Code (Text):
    1.           <ControlTemplate.Triggers>
    2.             <Trigger Property="IsCurrentPlayer" Value="True">
    3.               <Setter TargetName="PCBackground" Property="Fill" Value="{ThemeResource CurrentPlayerControlBackgroundColor1}"/>
    4.             </Trigger>
    5.           </ControlTemplate.Triggers>
    6.  
    As result you can see following examples:
    1) Only one video player active
    08_playercontrol_single.jpg
    2) Primary Video Player + Secondary Video Player in PiP mode. The "Current Player" is the first one
    08_playercontrol_PiP.png
    3) Primary Video Player + Secondary Audio Player. The "Current Player" is the second one
    08_playercontrol_video_audio.jpg

    Changes done in https://github.com/MediaPortal/MediaPortal-2/commit/eb578cee3d73ac01846a8bc0deacae01854ff2ee
     
    Last edited: December 21, 2012
    • Like Like x 1
  11. morpheus_xx
    • Team MediaPortal

    morpheus_xx Lead Dev MP2

    Joined:
    March 24, 2007
    Messages:
    10,635
    Likes Received:
    4,652
    Ratings:
    +6,654 / 11
    Home Country:
    Germany Germany
    Show System Specs
    The homescreen looks quite nice already. There are mainly few things missing:
    • rounded buttons (currently postponed because of an issue with opacity masks)
    • shadows (currently not possible, but will be implemented by shader effects later)
    • power menu (or normal buttons)
    09_homescreen.jpg

    I changed all menu screens to use a hidden menu now:
    https://github.com/MediaPortal/MediaPortal-2/commit/2d21b2d781dacc3c597f0b44ff4e9e8dd1f25739
    Besides of moving some controls around, I mainly created a new style for the menu. It slides in from left side, triggererd by "Info" key, or button click ("menu")
    10_audio_list.jpg


    Usually we have only one (or few) general button style defined. I decided to add a new one, especially for the "hidden menu". 11_audio_list_hiddenmenu.jpg

    Next part will be the styling of the main listviews.
     
    • Like Like x 6
Loading...
Thread Status:
Not open for further replies.

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!