Discussion in 'BlueVision' started by ge2301, April 5, 2016.

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

    ge2301 MP2 Design

    January 11, 2014
    Likes Received:
    Automotive Industry
    Stuttgart (But living abroad)
    +2,337 / 2
    Home Country:
    Germany Germany
    BlueVision is the new default skin of Media Portal 2 since Spring'16 Release. A lot of skins are full of information disturbing the visual appearance and overloading the user in the end. Target of BlueVision is to offer a clean and lean surface with the important information in focus, without missing anything.


    Following are the main elements of BlueVision:


    Group Menu
    The Group Menu is located in the top center of the main screen and consists of different symbols representing the selectable groups.

    Following are the default groups, that are visible:

    image2016-3-15 20-17-41.png

    A focused group is highlighted by a slightly larger symbol size. The focus can be changed by moving the mouse over the symbols or navigating with the arrows on oyur keyboard / remote controls over it.

    A selected group is highlighted by white color. A group can be selected by click with mouse, pressing ENTER on keyboard or pressing OK on remote control.

    By switching a group the shown Menu Tiles will change. But instead of switching the groups by Group Menu, there is also a possibility to scroll through all Menu Tiles directly. The selected group is also in this case highlighted automatically.

    Menu Tiles
    The Menu Tiles are positioned in the center of the main screen. The visible Menu Tiles depend on the selected group, which is highlighted in the Group Menu.
    The selected Menu Tile is highlighted with a white focus frame and is slightly larger in size. It can be selected by click with mouse, pressing ENTER on keyboard or pressing OK on remote control.

    As described in the Group Menu chapter, there is an alternative way to scroll through the groups without using the Group Menu.
    When for example navigating "left" with focus on a very left Menu Tile, the group is automatically changes and the focus is set to a right tile in the left neighbour group.
    By this you can seemless navigate "right" or "left" through all Menu Tiles of all groups without going to the Group Menu.
    image2016-3-14 12-33-41.png

    Most Menu Tiles have predefined postion and allocation into groups. Here an overview where to find the correspondig Menu Tiles:
    1. Home [d805f21b-0a1f-4323-beb5-b108778f89aa]
    2. Images [e1748a80-347c-4e1a-8a26-dabec246a540]
      • Image Library [55556593-9FE9-436c-A3B6-A971E10C9D44]
      • Photo Slideshow (optional plugin) [E00B8442-8230-4D7B-B871-6AC77755A0D5]
    3. Audio [1190a648-90f3-413d-88ac-da89684e9766]
      • Music Library [30715D73-4205-417f-80AA-E82F0834171F]
      • Partyplayer [E00B8442-8230-4D7B-B871-6AC77755A0D5]
      • WebRadio ( optional plugin) [2DED75C0-5EAE-4E69-9913-6B50A9AB2956]
    4. Video [d887c930-3cfb-4fc5-a559-fff6c8e30b25]
      • Movies Library [80D2E2CC-BAAA-4750-807B-F37714153751]
      • Series Library [30F57CBA-459C-4202-A587-09FFF5098251]
      • Videos Library [A4DF2DF6-8D66-479a-9930-D7106525EB07]
      • Online Videos [C33E39CC-910E-41C8-BFFD-9ECCD340B569]
      • Browse Media [93442DF7-186D-42e5-A0F5-CF1493E68F49Focus]
    5. Television [e32bbacf-56c6-406e-9576-ea68271f053c]
      • Watch TV [B4A9199F-6DD4-4bda-A077-DE9C081F7703]
      • EPG [A298DFBE-9DA8-4C16-A3EA-A9B354F3910C]
      • Schedules [87355E05-A15B-452A-85B8-98D4FC80034E]
      • Recordings [7F52D0A1-B7F8-46A1-A56B-1110BBFB7D51]
      • Search [D91738E9-3F85-443B-ABBD-EF01731734AD]
    6. News [d675d9ba-a27b-44b9-bc6b-8cf2dc7d220f]
      • News [BB49A591-7705-408F-8177-45D633FDFAD0]
      • Weather [E34FDB62-1F3E-4aa9-8A61-D143E0AF77B5]
      • Cinema (optional plugin) [BD93C5B3-402C-40A2-B323-DA891ED5F50E]
    7. Settings [9ad4076c-8f1f-4353-af60-4f6c4238dcb7]
      • Settings [F6255762-C52A-4231-9E67-14C28735216E]
    8. Others (all other items will be placed here automatically)
      • Emulators (optional plugin) [A24958E2-538A-455E-A1DB-A7BB241AF7EC]
      • Latest Media [7D68C459-EE9B-4EAA-AE2C-C2C365139AEE]
      • Utilities [02992BEC-1E6D-4C29-8D79-F95F59E3F625]
      • AppLauncher (optional plugin) [873EB147-C998-4632-8F86-D5E24062BE2E]
      • Playlists [09EAE702-D9EC-4325-82D9-4843502C966B]
      • Local Media [17D2390E-5B05-4fbd-89F6-24D60CEB427F]
    Menu Editor
    A Menu Editor integrated into the GUI of Media Portal 2 is in development, but not yet available. However for experienced user there is a way of manual modification of Group Menus and Menu Tiles.
    Please go to "...\ProgramData\Team MediaPortal\MP2-Client\Config\" (hidden folder!) and open "MediaPortal.UiComponents.BlueVision.Settings.MenuSettings.xml" with a text editor as "notepad". In case you want to reset the settings or applied wrong modifications, just delete this file. It will be automatically created after next start of Media Portal 2 with default settings.

    Modifications on Groups
    You can rename, delete and add groups. Please find the following part of the xml file. As example the Audio Group is shown in following.
    Code (XML):
    1. <Property Name="MainMenuGroupNames">
    2.   <ArrayOfGroupItemSetting xmlns:xsd="" xmlns:xsi="">
    3.     <GroupItemSetting>
    4.       <Name>[Menu.Audio]</Name>
    5.       <Id>1190a648-90f3-413d-88ac-da89684e9766</Id>
    6.    </GroupItemSetting>
    7.   </ArrayOfGroupItemSetting>
    8. </Property>
    • To rename a group change e.g. "[Menu.Audio]" to your preferred name. Please remove also the brackets, if you change the text.
    • To delete a group please remove the complete part <GroupItemSetting> ... </GroupItemSetting> of related section
    • To add a group please add the following. A new Guid-ID can not be defined randomly , but needs to be created with a Guid Creator Software:
    Code (XML):
    1.     <GroupItemSetting>
    2.       <Name> ... </Name>
    3.       <Id> ... </Id>
    4.    </GroupItemSetting>

    Modifications on Menu Tiles
    Menu Tiles can be placed into groups according to their Key. Furthermore the position and size within a Group can be defined.
    Each Group consists of a Grid of 16 Columns and 6 Rows.

    You can position and size the Menu Tiles by spanning a grid for each one starting from the upper left Row/Column and setting the RowSpan/ColumnSpan.
    Following would be the code for the beflow sketched Menu Tiles:
    • Menu Tile 1: <Row>0</Row> <RowSpan>6</RowSpan> <Column>0</Column> <ColumnSpan>9</ColumnSpan>
    • Menu Tile 2: <Row>0</Row> <RowSpan>3</RowSpan> <Column>9</Column> <ColumnSpan>3</ColumnSpan>
    • Menu Tile 3: <Row>3</Row> <RowSpan>3</RowSpan> <Column>9</Column> <ColumnSpan>3</ColumnSpan>

    Rules for placing MenuTiles:
    • The maximum ColumnSpan for a single MenuTile is 10
    • You can not place MenuTiles with different ColumnSpan below another MenuTile. They need to have the same ColumnSpan.
    • To allocate the Menu Tiles into the right Group <Key> .... </Key> must be filled the the correct Group Name

    Here the code for Menu Tile 1 as example:
    Code (XML):
    2. <Property Name="MenuItems">
    3.   <SerializableDictionaryOfStringSerializableDictionaryOfGuidGridPosition>
    4.     <ArrayOfPairOfStringSerializableDictionaryOfGuidGridPosition xmlns:xsd="" xmlns:xsi=">
    5.        <PairOfStringSerializableDictionaryOfGuidGridPosition>
    6.           <Key>NameOfMenuTile</Key>
    7.           <Value>
    8.              <ArrayOfPairOfGuidGridPosition>
    9.                 <PairOfGuidGridPosition>
    10.                    <Key>30715d73-4205-417f-80aa-e82f0834171f</Key>
    11.                    <Value>
    12.                       <Row>0</Row>
    13.                       <RowSpan>6</RowSpan>
    14.                       <Column>0</Column>
    15.                       <ColumnSpan>9</ColumnSpan>
    16.                    </Value>
    17.                 </PairOfGuidGridPosition>
    18.              </ArrayOfPairOfGuidGridPosition>
    19.           </Value>
    20.        </PairOfStringSerializableDictionaryOfGuidGridPosition>
    21.     </ArrayOfPairOfStringSerializableDictionaryOfGuidGridPosition>
    22.   </SerializableDictionaryOfStringSerializableDictionaryOfGuidGridPosition>
    23. </Property>
    Menu Tiles Images:
    The Menu Tile images can be changed easily by placing a corresponding image into the image folder of the skin. In case of Blue Viseion you can find the images in "...\Program Files (x86)\Team MediaPortal\MP2-Client\Plugins\BlueVision\Skin\BlueVision\images".
    The filename of the Menu Tile image is in the format:
    • "Key.png" (E.g.: 30715d73-4205-417f-80aa-e82f0834171f.png)
    The image doesn't need to have the exact size of the Menu Tile, it will be scaled and cropped automatically.
    Please be aware, that Menu Tile images can not be recovered, when overwritten. Please make a back-up of the original images or you need to reinstall MP2 to restore them.

    The same procedure also applies to other BlueVision themes. There is only one exception for Titanium Extended theme. Here the structure is as follows:
    • Menu Tile Image: "Key_tile.png" (E.g.: 30715d73-4205-417f-80aa-e82f0834171f_tile.png)
    • Screen Background Image: "Key.png" (E.g.: 30715d73-4205-417f-80aa-e82f0834171f.png)
    You can find a list of existing Guid-ID's for Groups and MenuTiles under "Menu Tiles" within this manual.

    Help Texts
    Help Texts are available for all Menu Tiles that are included in Media Portal 2 and most available Plugins. Help Texts offer a short description for the selectable menu item.

    Power Button
    The Power Button opens a power menu with several options.
    It is visible in all screens, so Media Portal can be closed any time. On focus the button is ligher with a surrounding white blur.

    Menu Button
    The Menu Button opens a menu with several options depending on the current screen. On focus the button is ligher with a surrounding white blur.
    Though it is always visible, it can be only selected, if the actual screen offers any menu options.

    Crumb Bar
    The Crump Bar is only visible with mouse usage and when the mouse is moved. It is showing the navigation workflow
    • It helps to keep an good overview and shows where you will reach by pressing ESC on keyboard or BACK on remote control
    • With mouse you can click into any position within the workflow and so qickly reach your desired screen that you have seen beforehand
    image2016-3-14 13-1-35.png

    Special Groups
    There are 2 screens, that are handled in the group menu as a group, but do not have Menu Tiles.

    image2016-3-15 13-25-35.png

    The Home screen is optional and can be switched off in the settings.

    In home the 5 latest media sorted by added date are shown by category. The latest 3 are directly visible. To see the last 2 media please scroll down. In the footer further information of the media item are shown, if available. It is possible to directly play the media items. Additionally a news ticker and a weather summary is visible on the right side. If you can not see weather infromation, you need to configure the weather plugin at first under settings.

    In future it will be possible to configure the home screen, currently the categories and position are fixed.

    Currently Playing
    image2016-3-15 13-25-52.png

    The Currently Playing symbol is only visible in Group Menu, if a media item (audio, video, TV, game, ...) is playing.
    The screen is existing due to following:
    • Showing additional information about the media item. The layout and information depend on the type of media.
      • Actors, director, plot, genre, album ...
      • Audio languages and format, video format, subtitle languages
    • Player Controls
      • Player Controls are only visible in this screen to avoid overlapping of other information

    In this chapter the BlueVision specific, but not general skin independent settings are explained.
    At first please navigate to settings › apperance › skin › BlueVision configuration and open the dialogue window.

    There are 4 different settings, that can be de-/activated.
    image2016-3-15 14-21-30.png


    Attached Files:

    Last edited: April 15, 2016
    • Like Like x 8
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!