chef 3763 Posted January 6, 2023 Share Posted January 6, 2023 ... and he nails the box shine. So good. It is a beautiful use of pseudo elements. So incredibly impressed! Well done! Link to comment Share on other sites More sharing options...
chef 3763 Posted January 6, 2023 Share Posted January 6, 2023 (edited) 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 1 Link to comment Share on other sites More sharing options...
softworkz 3728 Posted January 6, 2023 Author Share Posted January 6, 2023 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... Link to comment Share on other sites More sharing options...
seanbuff 956 Posted January 6, 2023 Share Posted January 6, 2023 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? Link to comment Share on other sites More sharing options...
softworkz 3728 Posted January 6, 2023 Author Share Posted January 6, 2023 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. 1 Link to comment Share on other sites More sharing options...
chef 3763 Posted January 6, 2023 Share Posted January 6, 2023 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. Link to comment Share on other sites More sharing options...
chef 3763 Posted January 6, 2023 Share Posted January 6, 2023 Oh, but you are changing the sound effects. There's gotta be some JavaScript in there? Link to comment Share on other sites More sharing options...
softworkz 3728 Posted January 6, 2023 Author Share Posted January 6, 2023 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. 1 Link to comment Share on other sites More sharing options...
softworkz 3728 Posted January 6, 2023 Author Share Posted January 6, 2023 27 minutes ago, seanbuff said: Uniformity, consistency and ease of use? Also valid, but what's different from most other menus you are seeing? Link to comment Share on other sites More sharing options...
arrbee99 1622 Posted January 6, 2023 Share Posted January 6, 2023 You don't move to the selection, the selection moves to you ? 1 Link to comment Share on other sites More sharing options...
Cheesegeezer 3094 Posted January 6, 2023 Share Posted January 6, 2023 4 hours ago, softworkz said: Today I have a much bigger piece for you (it's "with audio") RWMC_StartMenu2.mp4 16.08 MB · 0 downloads 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! 1 1 Link to comment Share on other sites More sharing options...
softworkz 3728 Posted January 6, 2023 Author Share Posted January 6, 2023 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) 2 1 Link to comment Share on other sites More sharing options...
Junglejim 368 Posted January 6, 2023 Share Posted January 6, 2023 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. 1 Link to comment Share on other sites More sharing options...
softworkz 3728 Posted January 6, 2023 Author Share Posted January 6, 2023 (edited) 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 Link to comment Share on other sites More sharing options...
Cheesegeezer 3094 Posted January 6, 2023 Share Posted January 6, 2023 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) 1 Link to comment Share on other sites More sharing options...
Junglejim 368 Posted January 6, 2023 Share Posted January 6, 2023 (edited) 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 1 Link to comment Share on other sites More sharing options...
unisoft 307 Posted January 6, 2023 Share Posted January 6, 2023 7 hours ago, softworkz said: Today I have a much bigger piece for you (it's "with audio") RWMC_StartMenu2.mp4 16.08 MB · 0 downloads 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" Link to comment Share on other sites More sharing options...
softworkz 3728 Posted January 6, 2023 Author Share Posted January 6, 2023 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). Link to comment Share on other sites More sharing options...
Cheesegeezer 3094 Posted January 6, 2023 Share Posted January 6, 2023 16 hours ago, softworkz said: Today I have a much bigger piece for you (it's "with audio") RWMC_StartMenu2.mp4 16.08 MB · 0 downloads Yup i see it now, it looks sooo good 1 Link to comment Share on other sites More sharing options...
lightsout 151 Posted January 6, 2023 Share Posted January 6, 2023 Whoa, I felt teased though was waiting for you to open a library. Will this be web only or can it work on Android? Link to comment Share on other sites More sharing options...
softworkz 3728 Posted January 6, 2023 Author Share Posted January 6, 2023 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. 1 1 Link to comment Share on other sites More sharing options...
arrbee99 1622 Posted January 6, 2023 Share Posted January 6, 2023 Sounds to me like you do not worship at the altar of unnecessary complication... 1 Link to comment Share on other sites More sharing options...
Cheesegeezer 3094 Posted January 7, 2023 Share Posted January 7, 2023 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 Link to comment Share on other sites More sharing options...
softworkz 3728 Posted January 7, 2023 Author Share Posted January 7, 2023 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. 1 Link to comment Share on other sites More sharing options...
Cheesegeezer 3094 Posted January 7, 2023 Share Posted January 7, 2023 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!! 1 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now