Blue Vision (4 Viewers)

[ge2301]

@ge2301 1) those are the example screenshots taken from last Weekly
Recordings: right image overlaps "List" view
View attachment 163797
2) Improve OSD of PiP player control
View attachment 163798
3) Create a style for "skip step" overlay in video fullscreen (key left/right). (own screen of type "superlayer": https://github.com/MediaPortal/Medi...um/Skin/Titanium/superlayers/SkipStepOSD.xaml)
View attachment 163799
4) Find a solution for player control overlapping of footer are info (animated slide out? problem: define a condition when to show and when to hide)
View attachment 163800
5) Styles of "currently playing" screens for all media (less important, one screen per media type)
View attachment 163801

1. Done
2. I think current design fits to the "wide player OSD" from (4). In which direction where you thinking to improve it?
3. I have a concept mock-up at home. It would be much easier and visually attrative with the mentioned blur effect, so I'm waiting
4. This is really not easy. There are several ideas in my mind, but in the end every idea bears problems. The fanart area would be from content point of view the only area, that could be overlayed w/o impact. But in other screens this area is used for menu buttons a.s.o. Still thinking about the conditions to slide it out. The bottom area seems the only possible place
5. I'll at first update the regular styles after MIA rework. I plan to use the currently playing screen also when selectiong a mediaitem. I think there is no need to have 2 different screens: One for media infos and a play button and one screen with mediaitems, when it's playing. Both should be merged from my point of view.

 

[ge2301]

@morpheus_xx
I want to change the opacity of the image "Power_blur" when the button "PowerBotton" has focus.
I could not realize with an eventtrigger. Can you help? Thanls a lot

      <Image x:Name="Power_blur" Source="Power_blur.png" Grid.Row="0" Grid.Column="3" Width="79" Height="79" Opacity="0"
              Margin="0,0,80,0" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="Fill">

  <Button x:Name="PowerButton" Style="{ThemeResource PowerButtonStyle}" Grid.Row="0" Grid.Column="3" Margin="0,-2,80,0"
  OpacityMask="#A0000000" HorizontalAlignment="Center" VerticalAlignment="Center"
  IsEnabled="{Binding Source={StaticResource MenuModel},Path=!IsMenuOpen}"
  Command="{Command Source={Service WorkflowManager},Path=NavigatePush,Parameters=BBFA7DB7-5055-48D5-A904-0F0C79849369}">
  <Button.Triggers>
  <Trigger Property="HasFocus" Value="True">
  <Trigger.Setters>
  <Setter Property="OpacityMask" Value="#FF000000"/>
  </Trigger.Setters>
  </Trigger>
  </Button.Triggers>
  </Button>

Background: When the new power button is focused the blur will appear


EDIT: I could solve it with a trick. I created a grid in "PowerButtonStyle" and added before the button symbol the blur.png with a opacity of 0.05 (means not visible for a normal eye). The button symbol opacity I set to 0.5.
In above code for "PowerButton" with focus I modified the Setter Property to Opacity=8.
--> The power symbol is white (even value is 8, more than white is not possible), but the blur opacity becomes 0.4 (8 x 0.05) means visible

Anyway interested how to solve it in a better way

 

[ge2301]

BlueVision Version 0.6 is out
Download in beginning of thread

Changes in version 0.6:

• Container styles for filtering, browsing and grouping added in List- and Gridview
• New pictures for many buttons and dark band with label in botton position
  
• Overworked master bare
  • New power button with focus blur effect, position on right side
  • Item counting position below category description (before rotated next to fanart)
  • Date format changed to fit new style
• Improved button corner masks for all items (aspect ratio independent)
• Overworked style for TV recordings align with total design
• New PopUpMenu style
  
• Lot of minor bugfixes and improvements

Screenshots:

 

[ge2301]

@morpheus_xx
I also made a BlueVision skin for the weather plugin. It uses the available space better.
However I could not find a weather folder in "incubator" of my branch, though the folder apears in "plugins" after build.
Where should I push it?

 

[MrTechno]

Try in MediaPortal/Source/UI/UiComponents/Weather?

 

[ge2301]

@morpheus_xx @Lehmden
Coming back to the point "currently playing" and current player control overlap problem, I'd like to show my idea in more detail.

• New GroupMenu entry "Currently playing" with play symbol
  • Entry appears only, if at least one media item is playing OR a mediaitem is selected
• There is no additional screen "Current media", both screens are merged
• Besides general information others are shown in tabs to not overload the screen. Those infos are anyway not so necessary for most users and only looked up in case.
  
• All playing media (incl. selected media) are shown only in this screen in the footer. So there is not overlapping problem of the player control and user can easily access the screen via GroupMenu and no slide-out mechanisms need to be created

Attached a mock-up screen (example: movie), how it could look like. For audio one tab could also include a playing visualization


What do you think about the idea? Of course feedback from non-tagged people is also welcome!

 

[morpheus_xx]

I like the idea

Some notes from technical view though:

There is no additional screen "Current media", both screens are merged

The screens "fullscreen" (FS) and "currently playing" (CP) are defined by a Player and its so called "UIContributor". The latter is a class which exposes the names of screen for FS and CP. This allows plugins to provide a player, models and screens to provide their features and contents.

This means here that we need to support those screens (which are extensible!) and let it look like they are part of the "home" screen.

 

[morpheus_xx]

Entry appears only, if at least one media item is playing OR a mediaitem is selected

This I don't understand completely:

• you have a MI playing, PlayerControl gets visible in footer
  
• you browse further through the list of videos: here we currently show the focused item's details in the footer
• how we should now show details in the "CP" tab? how to continue navigation?

 

[Lehmden]

Hi.
I really would love to see such a screen. But I have some concerns about practical usage...

OR a mediaitem is selected

How do you think this will work? As soon as you enter the Group Menu the focus is on the menu and no longer on the media item. So no media item is selected at all. And you need to have a way to navigate to the Group Menu without using the normal "cursor up" as with this the selection goes up too. The average HTPC user is navigating with a remote and not with mouse/keyboard.

In case of a playing media I can clearly see how this is working but if you want to have more informations before you play the media, I think this will be hard to achieve...

I think a probably easier way to have this is to "extend" the "context menu", means if you press "info" on remote (or the right mouse button) this screen should appear. And for this it must have the previous options available there too (like setting the item unwatched and similar). This could be done by an extra tab, so I don't see much design flaws in this.

 

[ge2301]

This I don't understand completely:

• you have a MI playing, PlayerControl gets visible in footer
  
• you browse further through the list of videos: here we currently show the focused item's details in the footer
• how we should now show details in the "CP" tab? how to continue navigation?

There are 2 ways to enter to the CP screen.

1. Currently no MI is playing, so the "play" icon in the GroupMenu is not available. User navigates to MI and selects it (focusing and pressing Ok / Enter / mouse click). The CP screen appears with the media information. Pressing the play button will start the MI
2. One or Two MI are playing and user enters the CP screen by selecting the "play" symbol from GroupMenu

In all other screens than CP no player control is visible. Is it clear now?