Video OSD

[bartolomesoriano]

From @mistervee on May 19, 2017 2:40

Need some thoughts and ideas on the Video OSD. The one that shows up when you move your mouse or hit select or enter.

Here are some screen shots http://imgur.com/a/yk3w6

1. What we have now
2. Original (its a bit buggy on leia some text shouldn't be there)
3. The videofullscreen.xml when you pause
4. The orginal aeon by djh

Copied from original issue: mistervee/skin.madnox.backup#15

[bartolomesoriano]

From @mistervee on May 19, 2017 2:49

@bartolomesoriano @meowmoo @MadMikeDoc

My thoughts on the images;

1. I like it, but i prefer the controls at the bottom. I like the buttons they are from the original aeon.
2. Similar to the 1st but the buttons are different. Its nice to have some text when hovering over things like audio settings.
3. This is not the same as the progress bar for the VideoOSD. I like the look but not the consistency between views.
4. I just like the buttons at the bottom of the screen. It does not look as good as having them at the top but they just feel more functional at the bottom.

[bartolomesoriano]

@mistervee, @MadMikeDoc, @meowmoo, I prefer a look similar to the fourth image, with the buttons at the bottom. I like having distinct groupings of buttons, like the second image, and I like having a label that appears when a button is focused, but I am not sure how to work it into something like the fourth image. The creative part is not really my forte.

[bartolomesoriano]

From @meowmoo on May 19, 2017 8:58

I also like the distinct grouping of buttons, I like the look of the 1 and 4 image. if we go for buttons on bottom , it should be Progess bar and on top of it the buttons, not like in the 4 pic

also what i read often is user complaining that they cant set up the subtitle if the buttons are on the bottom because they are hidden behind the OSD

[bartolomesoriano]

From @MadMikeDoc on May 19, 2017 9:10

Hi,

I though 32 is what we have now, it is what I have always had unless it's down to my Video OSD settings then I've never had image #1 display for me?

And image #3 looks wrong, my small progress bar the edges are rounded, one of the many things shcimi did, I'll get a screenshot later and post it up to show what mine looks like, sure the edges are different unless I'm seeing things?

So it seems moving to bottom is the new direction, then I guess do we just move the OSD to bottom and keep existing buttons or re-work completely to something like image #4 but with progress bar below not above images or perhaps a switch to change the position ha ha?

With regards to image 4 it is would be a drastic change as we currently have bookmarks, video, audio etc. etc. as separate buttons on the OSD, whereas it seems #4 just has perhaps an options button which probably brings up a dialog with the various options?

[bartolomesoriano]

From @mistervee on May 19, 2017 9:59

This is a rough mock-up from your suggestions. http://imgur.com/uerIAID

Image 1 is what is in the leia repo now. If there are slight differences in image 2 and 3 from what you expect its probably due to me running an old kypton version on leia.

The dialog hiding the subtitle's would be an issue with a visibility condition.

Sounds like moving the buttons to the bottom, keep the original groupings and labels with the progress bar below is the way then. I am not so keen on adding toggle buttons and like the idea of 1 view we all like.

Sounds like we have a direction then.

For the buttons themselves (and textures in general)? Will definitely need more ideas on this.

My thoughts; I asked permission months ago from djh the original author of aeon to use his work and he had no issues (i have a half finished re-write of the original aeon) . Not so sure about phill65 or bignoid. Something to think about with what texture's we are using as in having permission from the author of the skin and also making sure any web image are free for commercial use.

The buttons in screen shot 2, i am not 100% certain but they seem to have been made by phil65 or bignoid. In screen shot 1 and 4 they are the same buttons made by djh. There are plenty of web sites to get premade buttons from and google also have a great pack that would look similar to the buttons in pic 2. (here https://material.io/icons/) This would also apply to the media menu and icon main menu. Panel and dialog backgrounds are from nox 4 but edited. I could also make modified version's from the original aeon (which is all that the nox 4 ones are).

[bartolomesoriano]

All,

I like the mock up, and would prefer the djh buttons. I think the subtitles search dialog could very well appear above the osd, so it would not interfere. It is true that with the osd on the bottom, you can't see well the subtitles that are showing while the osd is shown. From someone who watches almost every single movie with subtitles, for me it's not a big deal.

I also like the progress bar with the textures we are trying out in Leia, and love the idea of combining duration and start and end times on the same progress bar.

Where would the labels appear? To the right of the first group for the left three buttons, as you move between each one? Underneath each button in the center group as you move between each one? To the left of the third group as you move between each one? Is what I am saying possible and would it look good?

For the icons on the media menu and icon main menu, and the icons for the system info widget, and the media, audio and subtitle language flags, my preference is to keep all that we can of schimi's work, even if it is as resource image add-ons. For my part, I am very fond of colored icons and flags.

I admit that I also like the Google material icons, but that would be a radical departure from current MadNox.

So, I guess I will wait on modifying anything else osd related until we agree? @mistervee, will you submit a modified version that looks like your mockup as a starting point?

@mistervee, @MadMikeDoc, @meowmoo

[bartolomesoriano]

From @MadMikeDoc on May 19, 2017 11:29

hmm, those material icons actually look interesting? perhaps use them? I would like to keep our colored media flags and I think that is the plan?

Looks good but will bart's comment on covering subtitles be an issue for users in general? I very rarely use OSD when watching something, If I need to do something it's right at the start otherwise nothing while watching.

@mistervee @bartolomesoriano @meowmoo

[bartolomesoriano]

From @meowmoo on May 19, 2017 14:9

I like the Material Icons, but DHJ's are also nice, hard to choose.... for media flags i would use the reloaded ones.

[bartolomesoriano]

From @mistervee on May 19, 2017 14:24

The icons in question are the ones in 'extras\BigIcons' folder. So the colored flags are planned to stay.

Duration and start and end times sounds like a great idea. Cant say for sure on the label positioning, possibly similar to before, but really what ever looks the best. Most of the code is already there so ill try to shuffle some things around to get the basic layout. So like @bartolomesoriano said a starting point.

The subtitles i believe is only an issue for users only when they change the audio and subtitle settings. Add this '!Window.IsVisible(osdaudiosettings)' to the VideoOSD and all should be ok.

I was trying to figure out how where nox 4 got all its icons from. They seem to be just symbols from a font set converted to png and modified.

Then i found this amazing program http://iconion.com/index.html. Thinking this might be the way.

[bartolomesoriano]

@mistervee that program looks awesome! We could decide on a look we all like and generate MadNox's own set of icons! I really like that idea. Looking forward to @MadMikeDoc and @meowmoo's thoughts on this option.

[bartolomesoriano]

From @meowmoo on May 19, 2017 14:51

pretty cool program, now we have to decide on a look :P

@mistervee there was a picture from a dialog with all the proper distance for label and stuff, but i cant find it anymore can you pls point me to it again.

I guess I need a "noob" issue where we can ask "stupid" questions, and put in all the Instruction Pics :P

[bartolomesoriano]

@meowmoo , you and me both! :)

I think you are referring to this http://imgur.com/a/z3Tyv, it's in the wiki in the article "Adding a dialog".

[bartolomesoriano]

From @MadMikeDoc on May 19, 2017 16:4

That program does look interesting, I see no problem with creating new icons for Madnox in some areas, we can look at updating the look as well as the code if people want?

@mistervee @bartolomesoriano @meowmoo

[bartolomesoriano]

Let's go for it! Now for the hard part: what is the look we want from the possibilities shown in the program? Should we pick each our top 3 looks and then compare and contrast?

@mistervee , @MadMikeDoc , @meowmoo

[bartolomesoriano]

From @meowmoo on May 20, 2017 0:8

Thanks bart After playing around with the icon app a bit, I say go for djh or materia :)

The only thing I can think of is a white circle with the black symbol, so we can use some varcolor to match it to the progress bar for example.

[bartolomesoriano]

From @mistervee on May 20, 2017 2:12

Been trying to get the home screen and skin shortcuts updated for the past week. Just basic functionality. Will get to the OSD after.

@meowmoo that can be done, have a look at the dialognumeric.xml, it is similar to aeon djh. There is a separate grouplist for the focus texture.

[bartolomesoriano]

From @meowmoo on May 23, 2017 12:21

I used Barts first Cut and moved things around a bit, thats what i come up with http://imgur.com/a/KIh4q

[bartolomesoriano]

Cool @meowmoo! Push it to Git, please 😊

[bartolomesoriano]

From @meowmoo on May 23, 2017 18:42

anyone got an idea where to put the label? https://drive.google.com/open?id=0B9bSf6HADVkFaTZqODlRaEdQcWM @mistervee can i somehow add a Visible condition to the label param? something like <param name="label" condition="container(650).HasFocus" value="$LOCALIZE[31355]" /> so the label only shows in focus still messing around with the icons....

[bartolomesoriano]

From @mistervee on May 23, 2017 20:3

Conditions like that will only be evaluated on the loading of the window.

If you add a label control without the param includes. <label>$VAR[OSDLabelVar]</label>

then in the variable <value condition="Control.HasFocus(650)">MyLabel</value>

Regarding the icons i am in the process of redoing a new set. There almost the same. But taken from aeon djh. There are some small differences. Shouldn't effect the code to much.

[bartolomesoriano]

@meowmoo , I was thinking that perhaps we can make the OSD bar a little taller, to account better for the labels, and also to account for the info people are usually asking (start/end times, time remaining, duration, etc.) I found what I consider the best implementation of that info in the skin Omni by Braz, take a look at the seek bar in this screenshot, it has all of it at once, so there's no need to have options:

https://1drv.ms/i/s!AlII29kkG6TFh-tSc00yIcEeIWS4Gw

Thoughts?

@mistervee , @MadMikeDoc

[bartolomesoriano]

From @mistervee on May 23, 2017 21:3

@bartolomesoriano I like it. I dont think it needs both labels on the left and right. Just player time and duration, but the center start and finish time is nice. Seems like too much information.

@meowmoo I have uploaded the new icons to git 'media/buttons/player'. I am thinking the texturefocus/nofocus should be the same without the color diffuse for the focus. Then have an extra group list for the 'osd-focus.png' with the color diffuse.

[bartolomesoriano]

@mistervee , the reason I was looking at having the multiple labels is that some people want to know how much is left in the movie, instead of the total time of the movie. Today, we have an option in MadNox that switches between both. With both labels, there is no need for an extra setting. I am fine either way.

@mistervee, so I can understand a little better, what is accomplished by an extra group list? Is it not enough with texturenofocus without color diffuse and texturefocus with the color diffuse?

Sorry for the dumb question :)

[bartolomesoriano]

From @mistervee on May 23, 2017 21:25

@bartolomesoriano The idea is keep the button itself the same color when focused. And use the highlight color for a glow effect around the button. Just like this http://imgur.com/u1Yt5Wg

[bartolomesoriano]

@mistervee Thanks, I see the result looks good. Is there an example where you have done something similar so I can see how it looks in the code? Again, sorry for too many noob questions.

[bartolomesoriano]

From @mistervee on May 23, 2017 21:37

DialogNumeric.xml

[bartolomesoriano]

@mistervee , perfect, now I get it! :) Thanks!

[bartolomesoriano]

From @meowmoo on May 23, 2017 23:38

Im missing the "stop" and "3d switch" buttons :P Found a solution for the labels, try to figure out the onfocus @mistervee suggested

[bartolomesoriano]

From @mistervee on May 23, 2017 23:42

Ok give me 10.

[bartolomesoriano]

From @mistervee on May 24, 2017 0:18

done. Only 1 3d button for now. Maybe use the focus texture for the toggle?

[bartolomesoriano]

From @meowmoo on May 24, 2017 0:40

just pushed it, take a look at it @all suggestion welcome :)

the 3d button opens the 3d option dialog, no need for a toggel, the focus on this dialog is off btw, just noticed it

[bartolomesoriano]

All right @meowmoo! I like it, thanks!!

My observations:

• I would separate more from the progress bar the left and right labels, they seem too close to the edges of the progress bar.
• I would make the whole thing a little taller, to have some extra room for the labels which appear below the options in the left group of buttons and the right group of buttons. They seem almost squished between the buttons and the progress bar below
• I don't know if it's possible to center underneath the group the label that appears below the left group of buttons; same thing for the label that appears below the right group of buttons
• The glow effect for the buttons seems too subdued. Perhaps the buttons can be made brighter by default?

These I know are minor cosmetic nitpicks, sorry! :)

[bartolomesoriano]

From @mistervee on May 24, 2017 1:8

Looks good.

The textures i have done needs some improvement. I agree with bart's suggestions

[bartolomesoriano]

From @mistervee on May 24, 2017 1:18

Ok just pushed a commit with some texture updates. When i get some time i will improve the look of the buttons.

[bartolomesoriano]

From @meowmoo on May 24, 2017 1:19

i agree on the second one, also center would work, if we move things around a bit feel free to mess around with it @bartolomesoriano its 3.am here in germany, time to sleep, dont know what time it is at your place ;)