The Return of the Green Button

[softworkz 3341]

Just for fun - here you can watch the Emby settings menu being re-styled to the WMC start/settings menu (the html page is never reloaded):

[chef 3749]

20 minutes ago, softworkz said:

Just for fun - here you can watch the Emby settings menu being re-styled to the WMC start/settings menu (the html page is never reloaded):

 

Masterfully executed. 

[softworkz 3341]

2 minutes ago, chef said:

Masterfully executed. 

LOL - the truth is that I had started with the WMC CSS applied and then removed one bit after another (removing is much easier than adding).

Finally I reversed the video...

[Junglejim 354]

8 hours ago, Cheesegeezer said:

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

 

That's cool!! 

I really loved that remote..  I've still got it, It still works. (libreelec + RasPi)

WMC was the starting point for me as far as media servers go and it would be great to get back some nostalgia from those days.

Even if it's just a theme (this does look cool ++). Maybe webapp only but I can live with that.

Edited January 7, 2023 by Junglejim

[softworkz 3341]

Dashboard and Settings UI

[Cheesegeezer 3089]

@softworkz  Dude... that is fricken awesome mate!! 

Can't wait to see the libraries.  Looks and feels just like WMC!

[ttgapers 94]

I cannot believe I am this excited about a theme/skin from the past coming back to an Emby deployment near you soon. This theme/skin imo is still the best layout of a HTPC/WMC ever. Even the sounds brings back the fuzzies! Cheers to you @softworkz

Best Emby New Year 2023 surprise!!

[softworkz 3341]

New WizardUI (for plugins) - The WMC Way

[softworkz 3341]

 

 

 

 

 

[Cheesegeezer 3089]

1 minute ago, softworkz said:

 

 

 

 

 

Top one for me hehehehe 

[Cheesegeezer 3089]

Your making pretty good progress with it. Wish i was with Maui

Edited January 11, 2023 by Cheesegeezer

[softworkz 3341]

1 minute ago, Cheesegeezer said:

Your making pretty good progress with it. 

It's not real-time progress. It's more about connecting all the dots that have dropped off over time and polishing all the rough edges. At the same time, trying to push some improvements to the client code. For example, it has never been possible to operate the file/folder picker with a remote control before (like shown in the video).

[Cheesegeezer 3089]

13 minutes ago, softworkz said:

It's not real-time progress. It's more about connecting all the dots that have dropped off over time and polishing all the rough edges. At the same time, trying to push some improvements to the client code. For example, it has never been possible to operate the file/folder picker with a remote control before (like shown in the video).

Oh i thought you were working on this RT.

is it an old project you’re resurrecting. Just curious. Either way it’s very impressive!

[softworkz 3341]

21 hours ago, Cheesegeezer said:

Oh i thought you were working on this RT.

is it an old project you’re resurrecting. Just curious. Either way it’s very impressive!

Almost two years ago I did an assessment of other TV/DVR software and I got pretty much upset seeing so many so-called "WMC Theme"s, which weren't even half-heartedly done but more kind of "zero-heartedly", where I thought: "How can you call this BS a WMC theme just because you have changed the background color to a blue-ish tone?". That's blasphemy!  

Why not take the real colors and gradients and borders and icons etc.? That can't be so hard..!

Then I looked into it - just to prove my own rant and I realized that the WMC UI definitions can be ported rather well to replicate with modern HTML rendering engines. From then on, I built some parts on occasion, the background first, then the animated start menu buttons. Some time ago this year, I had done the guide. 
A goal of the new Plugin UI (UI API for server plugins https://betadev.emby.media/doc/plugins/ui/index.html) has been to make it possible to operate it (and eventually all the server settings UI) in TV mode with a remote control. To make this work a bit more interesting, I combined that worked with the WMC theme appearance for settings.
Finally, I had seen the latest improvements that Luke had made to the OSD and those were just begging to be skinned in WMC style (due to the high similarity).

All those in sum, made me think that it's time to wrap it all up and get it ready.

[Cheesegeezer 3089]

26 minutes ago, softworkz said:

Almost two years ago I did an assessment of other TV/DVR software and I got pretty much upset seeing so many so-called "WMC Theme"s, which weren't even half-heartedly done but more kind of "zero-heartedly", where I thought: "How can you call this BS a WMC theme just because you have changed the background color to a blue-ish tone?". That's blasphemy!  

Why not take the real colors and gradients and borders and icons etc.? That can't be so hard..!

Then I looked into it - just to prove my own rant and I realized that the WMC UI definitions can be ported rather well to replicate with modern HTML rendering engines. From then on, I built some parts on occasion, the background first, then the animated start menu buttons. Some time ago this year, I had done the guide. 
A goal of the new Plugin UI (UI API for server plugins https://betadev.emby.media/doc/plugins/ui/index.html) has been to make it possible to operate it (and eventually all the server settings UI) in TV mode with a remote control. To make this work a bit more interesting, I combined that worked with the WMC theme appearance for settings.
Finally, I had seen the latest improvements that Luke had made to the OSD and those were just begging to be skinned in WMC style (due to the high similarity).

All those in sum, made me think that it's time to wrap it all up and get it ready.

Kudos mate!!

yeah I completely agree with “WMC” themes. The interaction with the server is most impressive! 
if you put a thousand dollar price tag on it my missus would make me pay lol!! She loved WMC and MB and was lost when it died and I upgraded to Win10. 
 

can’t wait to see it come to release and so glad you have done it.

cheers and happy coding bruv!

[softworkz 3341]

14 hours ago, Cheesegeezer said:

if you put a thousand dollar price tag on it my missus would make me pay lol!!

Sure, I'll send you my IBAN 

[grimevil 54]

This is looks great, I still love the WMC interface as it is clean and easy to use and still looks great even now. hope you get this finished and we can all have a play with it  

[softworkz 3341]

It's not far away that I'll need some help to identify glitches and issues, but there's a lot of other work for me to complete and I can only get to this at times when I'm stuck on other tasks or waiting for something.

So I haven't got any news to show today.......except one little thing:

 

Building a Skinned Toggle Control

Emby has those toggle controls in its set of UI components and those toggles are also an optional components for list items in the new Plugin UI framework:

The problem is: WMC does not have such toggle controls, not even something of similar functionality. The closest would be a checkbox. But checkboxes are not always a good replacement for toggle controls and especially not in those cases where toggles are used in Emby. So it was clear that I needed to build my own toggle control in WMC style. 
A toggle consists of two elements: a 'track' and a 'knob', and when thinking about these two individually, I came to the idea to try using a radio group item element as the 'knob':

 

..but I didn't expect it to fit well. And it seemed I was right:

 

Focused

 

Unfocused

 

The problem is that all the WMC elements are transparent and you can see through to the layers behind and after properly styling the 'track' element accordingly (transparent background, border and some inner shadow) it looked even worse:

 

With some special CSS it's possible to give a single element a background color and a bitmap above it at the same time (without pseudo elements, because the element itself is a pseudo-element already). But the problem is that whatever background color you choose, it will look right in one case (bottom) but not in other cases (topmost):

 

Only with transparency it's possible to always get the right shade for the knob so that it will look natural. What would be needed, is a way to have the knob "skip" the background of the layer below (= the 'track') and have only the lower levels shine through it.
Unfortunately, that's not possible (it contradicts the logic of layering at it's core). One way to simulate that would be to create a copy of the lower background (below the track) and use it as an intermediate background in a layer above the track and below the knob. There's no commonly supported way of doing that with CSS at this time. The other way would be to adjust the 'track' itself in a way that it doesn't get painted in the area where the knob is meant to be shown. In that case we're lucky. There exists a less commonly known CSS feature named "mask-image". This can be a bitmap, whose alpha channel determines the visible areas of the element, and it can also be a gradient. And here we're getting closer, but how can a gradient help?
There are not only linear but also radial gradients. And when we adjust the stops properly, we can create a black circle on a white background and ultimately also a transparent circle with a non-transparent background:

Finally, we can take this (pure css) gradient and use it as the "mask-image" for the track element to cut-out that part that is covered by the knob, in a way that the knob will always have the lower background to shine-through it. Of course it has to adapt in size and position to the knob depending on the current state and must be animated in the same way and speed as the knob when toggling on or off.
Without the knob it looks like this:

 

 

Finally, it's hardly possible to see that the track is html/css while the knob is made of bitmaps. 
As a nice surprise It turned out that In disabled-on state, the dot from the disabled knob fits perfectly into the track.
So here's the result:

 

Edited January 16, 2023 by softworkz

[softworkz 3341]

QUIZ

How many bitmaps do you think are used by that skinned toggle control?

[chef 3749]

44 minutes ago, softworkz said:

QUIZ

How many bitmaps do you think are used by that skinned toggle control?

I'm going to guess 10 maybe 12... 

[softworkz 3341]

12 would be right when there would be a distinction between hover and focused state (which is not unusual).

WMC doesn't have a hover state because they automatically change focus "on hover", which means that it's focusing elements just when you move the mouse over it (without clicking), which means  'hover' == 'focus'. That's a part of the "Two-Foot experience". 

@Luke told me that Emby had done it the same way in earlier days (can't remember myself) and it was abandoned for being too confusing/annoying.I'm still thinking about bringing it back (just) for the WMC theme.. It's probably less confusing than it was for Emby back in the days as the UI is made for that. But It needs to be tried out.

[chef 3749]

It looks amazing. If there had been a toggle in WMC, that is what it would have been. I can't wait to see this.  Keep up the great work! It's awesome to follow.

 

[K1ng_Lear 185]

Do you have the intention to bring this fabulous theme to the client apps, too?

[softworkz 3341]

16 hours ago, K1ng_Lear said:

Do you have the intention to bring this fabulous theme to the client apps, too?

Intention - yes. There also exists internal consensus for making it available to selected client apps/devices.

The keyword being "selected", though. The regular themes are adaptable and able to work well even on rather low-profile clients - for example by disabling visual effects, animations, transparency and gradients. The WMC theme in contrast, strongly relies on all these things and makes intensive use of bitmaps with alpha-blending and newer CSS features. Illustrating that by example is one of the reasons why I have given some insights into the anatomy of the toggle control in the post above.

Getting this to work on all clients/devices is a lengthy process with continuous work, reacting to user feedback and making changes accordingly - something that @Luke has painfully gone through for the core themes over the years. You might be able to imagine his reaction when I had told that the theme would be using around 280 bitmaps (for comparison, bitmap count used by core themes: 1).

Thanks @Luke for still not turning it down!

But what's clear is that the burden for maintaining this across all apps and devices cannot be put upon him, neither do I have much interest in working on degrading the experience to make it work on less capable devices. Either it works and looks in the way it's supposed to do or it's not the kind of theme it's meant to be.

When a client device isn't capable to handle the theme smoothly, it won't be available for those.

Candidates on the "very likely" side are apps running on desktop PCs with decent hardware or Android devices with powerful CPU and graphics. Rather unlikely are non-recent smart TVs or low-power/low-mem SBCs and sticks. For everything in between, it's yet to be determined.
There's also a "No" side, which includes clients that are using different UI frameworks like the Android TV app or Roku.

As you can see, while the question is simple, the answer is less, as I do not want to create any false expectations. 

The above is all I know for know.

[LazyMonday91 25]

Wowww juste isnane all this work !!

Quote

Getting this to work on all clients/devices is a lengthy process with continuous work, reacting to user feedback and making changes accordingly - something that @Luke has painfully gone through for the core themes over the years. You might be able to imagine his reaction when I had told that the theme would be using around 280 bitmaps (for comparison, bitmap count used by core themes: 1).

Thanks @Luke for still not turning it down!

i can't imagine all the time it need to test on all this devices , you're a juggernaut brooo !! xD