The Return of the Green Button

[chef 3749]

... and he nails the box shine. So good.

It is a beautiful use of pseudo elements. 

So incredibly impressed! 

Well done!

 

[chef 3749]

38 minutes ago, softworkz said:

QUIZ

What's special about this kind of start menu - why did they do it like that?

10 ft interface.

All the docs at the time really enforced that WMC had to be viewable at 10 feet away from the TV. 

 

Is that correct?

 

@Cheesegeezer come and look at this. It'll bring a tear to your eye. Especially since you and  mcml are like a  jar of honey... A sticky relationship.... I didn't write that chatGPT did... Sorry dude. Dad jokes.

Edited January 6, 2023 by chef

[softworkz 3341]

1 minute ago, chef said:

10 ft interface.

All the docs at the time really enforced that WMC had to be viewable at 10 feet away from the TV. 

Is that correct?

Okay that's surely correct. It's a hybrid design intended to be suitable for both 10-foot and 2-foot experience.

But it's not exactly what I meant, which is more about the structure than the sizing of elements...

[seanbuff 842]

32 minutes ago, softworkz said:

What's special about this kind of start menu - why did they do it like that?

Uniformity, consistency and ease of use?

[softworkz 3341]

8 minutes ago, chef said:

It is a beautiful use of pseudo elements. 

So incredibly impressed! 

The funny thing is that the settings menu is actually the normal Emby settings menu, with the only changes being 4 empty 'spans' added to each menu item and surrounding the 'div' each menu item group with a scroller. Everything else is CSS.  

[chef 3749]

5 minutes ago, softworkz said:

The funny thing is that the settings menu is actually the normal Emby settings menu, with the only changes being 4 empty 'spans' added to each menu item and surrounding the 'div' each menu item group with a scroller. Everything else is CSS.  

Wow. Very cool.

[chef 3749]

Oh, but you are changing the sound effects. There's gotta be some JavaScript in there?

[softworkz 3341]

7 minutes ago, chef said:

Oh, but you are changing the sound effects. There's gotta be some JavaScript in there?

The settings menu has been a starting point two years ago where I had no idea how far it will go, but for the complete story, there are quite a number of customizations needed which go beyond CSS abilities, so yes of course, there's also JS meanwhile and the start/settings-menu handling is owned by the theme, but what I said is till valid, it's still the settings menu which generates the html for the wmc start/settings menu.

[softworkz 3341]

27 minutes ago, seanbuff said:

Uniformity, consistency and ease of use?

Also valid, but what's different from most other menus you are seeing?

[arrbee99 1561]

You don't move to the selection, the selection moves to you ?

[Cheesegeezer 3089]

4 hours ago, softworkz said:

Today I have a much bigger piece for you (it's "with audio")  

 

That is bloody impressive, the only thing that is missing is the ever so subtle animation of the background white swirl. But i am super excited. 
 

congrats! 

[softworkz 3341]

10 minutes ago, Cheesegeezer said:

the only thing that is missing is the ever so subtle animation of the background white swirl.

How can you dare to think I would have forgotten about this?  

Can't you see it? The video compression has lost a bit of it, but it's visible.

You can watch it in the browser here: https://softworkz.github.io/hlstestfiles/wmcbg/background_animation.html
(make sure to size your browser to 16:9)

[Junglejim 354]

5 minutes ago, softworkz said:

How can you dare to think I would have forgotten about this?  

Can't you see it? The video compression has lost a bit of it, but it's visible.

You can watch it in the browser here: https://softworkz.github.io/hlstestfiles/wmcbg/background_animation.html
(make sure to size your browser to 16:9)

Yep I see it. Great work, truly amazing! You have totally nailed it even down to the fonts.

Takes me back... I really liked WMC back in the day. Great to see such a faithful recreation for Emby.

[softworkz 3341]

37 minutes ago, Junglejim said:

You have totally nailed it even down to the fonts

Well - almost. WMC came with its own set of fonts "Segoe Media Center" which is a variation of "Segoe UI" (used in the video) but not identical. It has different relations of x-height and descender-height to the cap-height. It's slight but noticeable. Now, neither of the two fonts is allowed to be used on the web, which is a problem. Using a few resources from an abandoned product without branding and trademarks is not a big deal (MS even allows using icons from current Office and current Windows versions in custom applications). But using unlicensed fonts on the web or in apps is another story and companies have gotten more strict about this in the recent past.

What comes to the rescue in that situation is that MS have released an open-source version of "Segoe UI" named "Selawik". It's mostly the same, they just changed a few letters to make it visible in some way (similar like Arial is the same as Helvetica except for the 'e'). Just yesterday I have created the required fonts variations (Regular, Light, Semibold) derived from Selawik, which I called "Selawik MC". That's what the theme will be using eventually.

Edited January 6, 2023 by softworkz

[Cheesegeezer 3089]

1 hour ago, softworkz said:

How can you dare to think I would have forgotten about this?  
 

haha, i really tried to ser it but on a phone and small screen it was probably lost! Truely great work mate

1 hour ago, softworkz said:

Can't you see it? The video compression has lost a bit of it, but it's visible.

You can watch it in the browser here: https://softworkz.github.io/hlstestfiles/wmcbg/background_animation.html
(make sure to size your browser to 16:9)

 

[Junglejim 354]

30 minutes ago, softworkz said:

Well - almost. WMC came with its own set of fonts "Segoe Media Center" which is a variation of "Segoe UI" (used in the video) but not identical. It has different relations of x-height and descender-height to the cap-height. It's slight but noticeable. Now, neither of the two fonts is allowed to be used on the web, which is a problem. Using a few resources from an abandoned product without branding and trademarks is not a big deal (MS even allows using icons from current Office and current Windows versions in custom applications). But using unlicensed fonts on the web or in apps is another story and companies have gotten more strict about this in the recent past.

What comes to the rescue in that situation is that MS have released an open-source version of "Segoe UI" named "Selawik". It's mostly the same, they just changed a few letters to make it visible in some way (similar like Arial is the same as Helvetica except for the 'e'). Just yesterday I have created the required fonts variations (Regular, Light, Semibold) derived from Selawik, which I called "Selawik MC". That's what the theme will be using eventually.

Thanks mate for the clarification. To my ageing eyes (and memory) they looked the same.

Now your tweaking open-source versions of a similar font.. Your all in!   This will look sublime!

Edited January 6, 2023 by Junglejim

[unisoft 287]

7 hours ago, softworkz said:

Today I have a much bigger piece for you (it's "with audio")  

 

Oh yes!

 

I imagine those tiles change to your own library names and with you own library tile image for the main library (like now in Vertical theme where you can use your own image)?

This needs to make it to other Emby apps.

I could just see a tile under each library for "Suggestions", "Latest"

[softworkz 3341]

4 hours ago, unisoft said:

I imagine those tiles change to your own library names and with you own library tile image for the main library

Those tiles are already tiles from the libraries I have configured and the images are already those which Emby generates (except one or two).

[Cheesegeezer 3089]

16 hours ago, softworkz said:

Today I have a much bigger piece for you (it's "with audio")  

 

Yup i see it now, it looks sooo good  

[lightsout 144]

Whoa, I felt teased though was waiting for you to open a library. Will this be web only or can it work on Android?

[softworkz 3341]

16 hours ago, softworkz said:

QUIZ

What's special about this kind of start menu - why did they do it like that?

There have been valid answers from a general perspective, but the specific difference to most other menus is that it's a  2D Menu

• It minimizes the amount of remote button presses to get at what you want
  Which is made possible by the layout: You can go up, down, left and right. Assuming you have 24 items (like in the video) and they would be arranged in 6 rows with 4 items per row, the average number of key presses required to get at a specific item is exactly 4.
  In case of a single 1D menu with all a list of all 24 items coming one after another, the average is 12.5
  If you would have a nested menu, e.g. 6 top items each with 4 sub-items (=24), then the average would be 5
  .
• But It eliminates the need for submenus: You see everything at once
  It's not just the difference of 4 vs. 5 average clicks. When you are looking for something or do not find it with the first try, you always need to navigate into the submenu and back ( n x 2 click vs. 0 clicks )
  .
• Avoids unnecessary Navigation
  Navigation is disruptive with regards to perception. The 2D start menu is just one thing and easy to memorize as such - like a map where you learn your routes quickly and intuitively - which eventually makes you find your way even without looking at the screen. 
  What plays an essential role for that is "The Green Button" (or generic equivalents like 'Home'): No matter where you are and what you are doing: At any time, you can press the Green Button and "drive your route" with the start menu to get where you want as quickly and easy as possible.

[arrbee99 1561]

Sounds to me like you do not worship at the altar of unnecessary complication...

[Cheesegeezer 3089]

21 minutes ago, softworkz said:

There have been valid answers from a general perspective, but the specific difference to most other menus is that it's a  2D Menu

• It minimizes the amount of remote button presses to get at what you want
  Which is made possible by the layout: You can go up, down, left and right. Assuming you have 24 items (like in the video) and they would be arranged in 6 rows with 4 items per row, the average number of key presses required to get at a specific item is exactly 4.
  In case of a single 1D menu with all a list of all 24 items coming one after another, the average is 12.5
  If you would have a nested menu, e.g. 6 top items each with 4 sub-items (=24), then the average would be 5
  .
• But It eliminates the need for submenus: You see everything at once
  It's not just the difference of 4 vs. 5 average clicks. When you are looking for something or do not find it with the first try, you always need to navigate into the submenu and back ( n x 2 click vs. 0 clicks )
  .
• Avoids unnecessary Navigation
  Navigation is disruptive with regards to perception. The 2D start menu is just one thing and easy to memorize as such - like a map where you learn your routes quickly and intuitively - which eventually makes you find your way even without looking at the screen. 
  What plays an essential role for that is "The Green Button" (or generic equivalents like 'Home'): No matter where you are and what you are doing: At any time, you can press the Green Button and "drive your route" with the start menu to get where you want as quickly and easy as possible.

Yes and it's easy to see all the headings for the rest of menu options, so you can quickly navigate or know exactly where to get to(like you say), but they were also clever with the MCE Remote where as they incorporated shortcut buttons which took you straight to where you needed to go.

are you coding this in using nodeJS, just curious as this could make it to Theatre and possibly some other Clients, if you are using some of the emby web components. 

Or is this a challenge to yourself hehe, if you include keyboard and remote navigation i will use this forever more lol 

[softworkz 3341]

6 minutes ago, Cheesegeezer said:

but they were also clever with the MCE Remote where as they incorporated shortcut buttons which took you straight to where you needed to go.

Yes exactly. Because they thought an average of 4 button presses is already too much. And they were right. That kind of thinking made WMC as good as it was. I often used those buttons and that was just perfect. When I look at the remotes that come with some (luckily just a few) recent TV models and which have a handful of buttons only, I'm just thinking: "hey, each button you are removing is adding up to the sum of button presses I'll need to perform to operate that thing".  

14 minutes ago, Cheesegeezer said:

are you coding this in using nodeJS, just curious as this could make it to Theatre and possibly some other Clients, if you are using some of the emby web components. 

I'm not "coding" (much). This is Emby.

[Cheesegeezer 3089]

7 minutes ago, softworkz said:

Yes exactly. Because they thought an average of 4 button presses is already too much. And they were right. That kind of thinking made WMC as good as it was. I often used those buttons and that was just perfect. When I look at the remotes that come with some (luckily just a few) recent TV models and which have a handful of buttons only, I'm just thinking: "hey, each button you are removing is adding up to the sum of button presses I'll need to perform to operate that thing".  

it was an ugly-ish looking remote (colour wise) but it boy did it work, it was really comfortable to use as well.  i really miss WMC and MB for it too.  It was the best client by far and i tried to keep using it on windows 10 using that zip file that was available, but it just got too clunky and i had to move to ET.  for the Cinema room.

Maybe you might be interested in giving me some pointers with my UI client when it gets to an alpha testing phase.  I'm not a fan of nesting menus in menus and extra button clicks either, but i am fan of giving users options to make their media look how they want (within reason of course) Thats why i love Emby for WMC, because there were lots of themes to choose from and also each page could save a view type (coverflow, poster, details, thumb, thumbstrip), so when you went into TV shows and were met by the TV Series in your library you could say, show that in poster view, then when you went into the Seasons Page you could show them as Coverflow, then on the episodes page you could use the details layout, it was brilliant.

Anyways, i'm getting all nostalgic and reminiscing.  Will be great to see how you get on... keep us updated on your progress bud 

Cheers

 

7 minutes ago, softworkz said:

I'm not "coding" (much). This is Emby.

That's cool!!