Skinning guide: how to port a skin to MP2, or how "Titan" gets transformed (1 Viewer)

Status
Not open for further replies.

morpheus_xx

Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    • Thread starter
    • Moderator
    • #11
    The OSD and dialog styles are getting better.

    For the OSD I introduced a OSD.xaml theme file (in the Reflexion skin), that allows the definition of the major OSD shape in one single place. It has placeholders included for the progress bar, player controls and title/information fields.

    https://github.com/MediaPortal/MediaPortal-2/commit/5854f2070e53876dfe87fac4a9cbefe794d41da9#L5L11

    To make the former Reflexion OSD look like Titan, it was a chance of around 10 lines of code: https://github.com/MediaPortal/MediaPortal-2/commit/5854f2070e53876dfe87fac4a9cbefe794d41da9#L5L11

    13_OSD_style.jpg


    Things to note:
    Again I defined the OSD colors by resources in colors.xaml. This allows global changing the colors for new color themes.

    The menu style got adopted as base for all dialogs now. The result is shown in next screen:
    14_menu_style.jpg


    This is again a difference to the orginal MP1 version: Titan has one single image shape as background for dialogs. MP2 does define the style once, but it is freely scalable. You can see here two open dialogs using a flexible width (based on content).

    Sometimes it might not be wanted to use flexible sizes, but this can simply be solved by putting in a fixed "Width=xxx". I do prefer the flexible way for now.
     

    morpheus_xx

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    • Thread starter
    • Moderator
    • #12
    you are making great progress ;)
    One question: Wouldn't it look much cleaner without the cross for closing the dialog? Normally you use a media center with a remote and not with a mouse, so it would give it a much more cleaner look :)
    I could show it only if mouse is used, so we can have both ways :) Btw, this is one major usability issue in MP1: if you really try to use it with a mouse only, you are lost quickly :)
    Good suggestions are always welcome, so I implemented the changes right now:
    Check the screenshots for the same OSD, showing normal view, details view with and witout mouse controls active. And see the OSD background smoothly scales with its contents. Yes, I really love skinning MP2 :D

    15_osd_normal_mouse.jpg16_osd_normal_no_mouse.jpg17_osd_details_no_mouse.jpg18_osd_details_mouse.jpg
     

    morpheus_xx

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    • Thread starter
    • Moderator
    • #13
    I wrote it already above: creating color themes for MP2 skin is easier then ever before! Because we have defined colors by constants in our colors.xaml, a theme can simply override the default values.

    I made a quick example, which was done in 10 minutes (because I had to take screenshots :D) https://github.com/MediaPortal/MediaPortal-2/commit/5a1973dc5dded1ebc4546c855b73cce21cda75a5#L2R0

    If you check the changes, you will mainly see a new theme "blue" created, a theme.xml added and inside the "colors.xaml" of this new theme I only defined two colors of the OSD. That's it, blue theme is done. Of course you can adjust all colors as you want, i.e. change background color of menus/dialogs to blueish or whatever you like.

    For understanding the theming philosophy such a "2 line of code change" is more clear: only the 2 color definitions are used from "blue theme", all others fall back to the "default theme" of Titanium skin. If there is the color not defined, the fallback goes further to the Default skin, starting by probing for a "blue theme" (which not exists there), then last chance is the "default theme" of "Default skin".

    This way is also taken for screen loading. That's why even this state of the Titanium skin is fully usable, and there are no longer "Skin file missing" errors!
    20_change_theme.jpg
    21_blue_home.jpg
    22_blue_OSD.jpg
     

    morpheus_xx

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    • Thread starter
    • Moderator
    • #15
    Christmas is over, so time for more work on porting the Titan to MP2 :)

    The next part is a quite big one: the MediaLibrary views. They are in fact one of the most important parts, they let you browse all your liked media items (Audio, Video, Images, Movies, Series, Recordings).

    The concept is still the same: code/design once, reuse it multiple times:

    I copied the basic SimpleShowItems.xaml from the Default screens of the "Media Plugin", because I need to bring in more content:
    https://github.com/MediaPortal/MediaPortal-2/commit/36d7999c29feb4bcb63f01625322907440902d77#L11R19

    In contrast to the original layout, that filled the whole screen with the media items list, I wanted to have a "split" layout which has the list on right and details to the selected item on left. To keep this screen flexible, I've added a control placeholder, that is later filled by the "calling" pages (that included this screen).

    <Control Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
    Template="{Binding Source={DynamicResource Media_Details_Template}}" />

    Now the "MoviesShowItems.xaml" includes first the SimpleShowItems.xaml and defines the templates for Media_Details_Template:
    <!-- Control template for the MediaItem details (cover, thumbs, duration, genres...)-->
    <ControlTemplate x:Key="Media_Details_Template">
    <Include Source="screens\MediaItemMovieDetails.inc"/>
    </ControlTemplate>

    And finally there are the contents of the details panel:
    https://github.com/MediaPortal/MediaPortal-2/commit/36d7999c29feb4bcb63f01625322907440902d77#L2R92

    For now I've started with the "small list view", later I'll add the grid view and maybe also cover list. Cover flow is not yet implemented in MP2, but I think it will be done sooner or later ;)

    So these are the first screenshots of movies, movie collections and audio items.
    23_video_list_genres.jpg24_video_list_genres.jpg25_video_list_collection.jpg26_video_list_collection.jpg27_video_list_detail.jpg28_audio_list_detail.jpg
     

    morpheus_xx

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    • Thread starter
    • Moderator
    • #16
    Next step for the media items lists:

    Until now we had only following view modes available:
    • ListView (small, medium, large)
    • GridView (large)
    Now I've added another view mode definition:
    • Cover (large)
    This was added in following commts: https://github.com/MediaPortal/MediaPortal-2/compare/fdbca9af6aa7...a02fa92632be

    The previously introduced details panel left to the list should now be hidden for the new Cover view, so we can have the full screen width available. This done by introducing a conditional visibility:
    https://github.com/MediaPortal/MediaPortal-2/commit/e4856d538ea710ba6f1de124e3867b0ef26bb5d2

    <Control Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch" Width="950"
    Template="{Binding Source={DynamicResource Media_Details_Template}}">
    <Control.IsVisible>
    <Binding Source="{StaticResource ViewModeModel}" Path="LayoutType" Converter="{StaticResource ExpressionValueConverter}" ConverterParameter="{}{0} != {LayoutType}.{CoverLayout}"/>
    </Control.IsVisible>
    </Control>
    If you read only the bold text it can be understood as: "IsVisible = LayoutType is not CoverLayout".

    For the new Cover layout I wanted to have not the normal button style, but a simple cover/image in combination with a reflexion. So we need to set the matching item style for each type (list, grid, cover):

    <DataTemplate DataType="{x:Type navitems:confused:eriesFilterItem}">
    <Control>
    <Control.Template>
    <MultiBinding Converter="{StaticResource ExpressionMultiValueConverter}" ConverterParameter="{}{0} == {LayoutType}.{ListLayout} ? {1} : ({0} == {LayoutType}.{GridLayout} ? {2} : {3})">
    <Binding Source="{StaticResource ViewModeModel}" Path="LayoutType"/>
    <Binding Source="{StaticResource ListViewSeriesFilterItemTemplate}"/>
    <Binding Source="{StaticResource GridViewSeriesFilterItemTemplate}"/>
    <Binding Source="{StaticResource CoverViewSeriesFilterItemTemplate}"/>
    </MultiBinding>
    </Control.Template>
    </Control>
    </DataTemplate>
    Things to note:
    • The ConverterParameter construct got extended, so it now compares 3 types (read as: "if ListLayout then ListViewTemplate" else "if GridLayout then GridViewTemplate" else "CoverViewTemplate"). Important are the red braces ( ), otherwise a correct interpretation is not possible.
    https://github.com/MediaPortal/MediaPortal-2/commit/a02fa92632be688b11644221aa828d9877fbd7b4#L0R1235




    29_series_list.jpg30_series_covers.jpg31_audio_list_small.jpg32_audio_list_medium.jpg33_audio_list_large.jpg34_audio_grid.jpg35_audio_cover.jpg
     

    morpheus_xx

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    • Thread starter
    • Moderator
    • #17
    Some more work on different places has been done.

    I started to work on the TV guide screen to develop a similar view as Titan provides. As you might have noticed already, I can't (and also don't want to) copy each detail currently.

    Some screenshots of normal guide, with one playing TV stream and last with PiP in background:
    36_tv_guide.jpg



    37_tv_guide_playing.jpg




    38_tv_guide_playing_pip.jpg


    Main changes related to default screens are:
    Besides the TV guide also the main styles for OnlineVideos have been created. Titanium is already very usable.

    Next stuff will be more detailed work in media lists and cover view, or to add opacity mask to home menu buttons.
     
    Last edited:

    morpheus_xx

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    • Thread starter
    • Moderator
    • #18
    More tweaks have been done on the media items sizes and styles. The main layout will stay this way. I'm not sure yet if I should change the ListItems style to the "simple" layout of original Titan. The differnece is currently, that Titanium uses its regular button style as base for each MediaItem (including zoom animation on hover), while Titan has special list background images: a default one and a hover image.

    I also could solve a navigation issue: the "Menu" button on left side was not always focusable when navigating by keys (remote). See http://mantis.team-mediaportal.com/view.php?id=4095 for background info.

    The change was small, with big effect: https://github.com/MediaPortal/MediaPortal-2/commit/ba365a2ac3e4ee5cde2f4939fe16c42fb1177416. It's working fine now.

    Before the change I had the LeftPanel "on screen", but moved it outside via RenderTransformation (it is done after the Layouting happened). When the focus should be switched, the focus prediction calculated that the button is in original place (without RenderTransform). So moving "left" could not reach the menu button.

    Now I move the panel outside the screen while layouting (margin left -550) and slide it in on opening. Simple. If the old behaviour is a bug should @Albert decide :)

    Finally there is a huge update of screenshots showing all media sections: Audio, Video, Movie, Series and Images.

    39_audio_filter.jpg 40_audio_list_small.jpg 41_audio_list_medium.jpg 42_audio_list_large.jpg 43_audio_grid.jpg 44_audio_cover.jpg 45_video_filter.jpg 46_video_list_small.jpg 47_video_list_medium.jpg 48_video_list_large.jpg 49_video_grid.jpg 50_video_cover.jpg 51_movie_list_large.jpg 52_movie_grid.jpg 53_movie_cover.jpg 54_series_filter_list.jpg 55_series_filter_grid.jpg 56_series_filter_cover.jpg 57_series_episodes_list_small.jpg 58_series_episodes_list_medium.jpg 59_series_episodes_list_large.jpg 60_series_episodes_grid.jpg 61_series_episodes_cover.jpg 62_images_list_small.jpg 63_images_list_medium.jpg 64_images_list_large.jpg 65_images_list_grid.jpg 66_images_list_cover.jpg
     

    morpheus_xx

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    • Thread starter
    • Moderator
    • #19
    Now that we have a nice "NewsPlugin" available (thanks to @offbyone! https://forum.team-mediaportal.com/threads/news-plugin-rss-atom.113147/) I adopted the home screen to show a new ticker:

    The left part is the short summary, on the left there is the news content. Right side starts to scroll after 2 seconds. News toggle in 10 second interval:
    67_news_homescreen.jpg


    Main News screen:
    68_news_overview.jpg



    Also OnlineVideos got some screens for Titanium:
    69_OnlineVideos_Sites.jpg
    70_OnlineVideos_Categories.jpg
    71_OnlineVideos_Videos.jpg


    And a short note about the Skin name inside MP2:

    When I started to port "Titan" to MP2, I first thought to name it the same way in MP2 as well. But in fact it won't be the "same" skin as in MP1, it uses its designs, but does have some other ways in using it and also other content in many parts.

    So my working title is "Titanium", as a derivation of MP1-"Titan" :) (there where some examples before Avalon -> Avallonis)

    Stay tuned :D
     
    Last edited:

    morpheus_xx

    Retired Team Member
  • Team MediaPortal
  • March 24, 2007
    12,073
    7,459
    Home Country
    Germany Germany
    • Thread starter
    • Moderator
    • #20
    Time for a small update :)

    While playing around with our great MediaLibrary I missed an indicator for watched/unwatched items. We already have a property "PlayCount" in the MediaAspect defined, where each "start play" is counted. But we did not yet expose this property to the UI.

    So this was the first change, which is very small: https://github.com/MediaPortal/MediaPortal-2/commit/dc9e0bbe2ee9a5d28d3cff2ea4fd50485ff131e4

    Next change is minor as well: we need to modify the MediaItem templates from mediastyles.xaml file: https://github.com/MediaPortal/MediaPortal-2/commit/1c30e2cf1756792b703d678610fc9048e8a221e3#L8R972
    Code:
    	  <!-- Unwatched indicator -->
    	  <Image Source="unwatched_flag.png" HorizontalAlignment="Left" VerticalAlignment="Top">
    		<Image.IsVisible>
    		  <Binding Path="PlayCount" Converter="{StaticResource ExpressionValueConverter}" ConverterParameter="{}{0} == 0"/>
    		</Image.IsVisible>
    	  </Image>
    The important logic is inside the Image.IsVisible: the binding uses "PlayCount" and evaluates "isVisible : PlayCount == 0". Now we have our "unwatched" indicator.

    For font color of the label we do similar thing: choosing a different color for (un-)watched items: https://github.com/MediaPortal/MediaPortal-2/commit/1c30e2cf1756792b703d678610fc9048e8a221e3#L8R980.

    Which finally leads to following results:
    72_unwatched_audio.jpg 73_unwatched_movie.jpg 74_unwatched_movie_cover.jpg 75_unwatched_images.jpg 76_unwatched_episodes.jpg
     
    Status
    Not open for further replies.

    Users who are viewing this thread

    Top Bottom