z-index support for themes

alphatoanant

@jdrassa I was able to get a build of this running on windows by following the guide fieldofcows had put together (thank you for writing that up fieldofcows!)

Feedback so far...

It was straightforward to update my theme to support z-index while keeping things backward compatible. I tested on various builds and the feature="z-index" node is being ignored correctly when it's not supported and picked up correctly when it should be

Re: @jdrassa said in z-index support for themes:

However, themes that were using "extra" images to overlay video elements like @Nismo's oldroom theme will need to use z-index since all extras will default to being placed below the video element to be more consistent with md_image.

I did run into this as I am overlaying a CRT bezel and md_image over the video in video view
So without setting z-index video view initially looked like this:
alt text

That said...
It was an easy addition to the theme to get things layered nicely using z-index and because of backward compatibility I added it now to have it in place when z-index support is available without any impact (at least from my testing so far)

With z-index settings everything layered exactly as intended:
alt text

I can't speak for other themers though so would be interested to see if this a feels like a good path forward for others as well.

To maybe help with that...
I just made a commit to master on CRT to add the z-index changes in (figured it could help other themers to see a full working example)

You can check out the specific changes at around line 181 in this file:https://github.com/anthonycaccese/es-theme-crt/blob/master/_inc/templates/16x9.xml

The approach I took was to work with the cascading nature of ES and just add a section with the z-index settings for the elements I have called out above it. It felt like the best balance between backward compatibility, not duplicating too many elements and having it ready for later.
It didn't throw any errors when testing in debug mode and it feels pretty good so far.

@jdrassa, thank you for doing this! Just with the small time I have had with it so far I can see it being a huge help for creating themes. I have another use case I want to test with but it is looking really good from my end so far.

Cheers!

duiz

@alphatoanant Mind uploading that build to MEGA or Mediafire? I'm currently working on the Custom Game Box theme and would like to play around with this feature.

jdrassa

@alphatoanant First off, I have to apologize that you had to build this yourself. I didn't realize the windows build didn't get pushed to github properly. That has been fixed and is there for anyone else who may need it.

Glad it was straightforward for you to update your theme. The initial layering issue you saw is to be expected. Previously, md_video was placed lower on the rendering stack to enable overlays. I made a conscious decision to move it up near md_image as it felt more consistent.

You can look here to see the default z-index values. The default values are spaced apart to make it easier to place items between them.

Your approach of setting just the z-index values in there own section is exactly what I envisioned.

Thanks for the feedback.

jdrassa

@duiz A windows build is now available on github here It should have been there from the start, but didn't get deployed properly.

mattrixk

@jdrassa Thank you for the Windows build. You've linked to the themes.md again, so for anyone curious, the correct link to the Windows z-index build is:

https://github.com/jrassa/EmulationStation/releases/tag/2.1.6-152-win

A question, do you need to use <feature supported="zIndex"> and put all the z-index values in there, or can you just add the <zIndex> property to the normal flow of the document?

If you add the <zIndex> property to the normal flow of the document, will it just be ignored by other versions of ES, or will <zIndex> break them?

alphatoanant

@jdrassa no apology needed and no worries. I have been meaning to get a build flow setup and your worked helped give me a kickstart =)

Your approach on the render stack order makes sense to me. I feel good about it as a path forward from my end and it seems like a nice baseline. The default z-index values you linked to are super helpful so thank you for that as well.

@duiz, jdrassa just uploaded a build here: https://github.com/jrassa/EmulationStation/releases/tag/2.1.6-152-win
If you have any questions on z-index setup from there in the theme I would be glad to help based on what I have seen

@mattrixk, I tried adding <zIndez> to the normal flow of the document just to see what it would do and it breaks rendering + throws an unknown property error in versions of ES where it's not supported yet.

jdrassa

@mattrixk unfortunately <zIndex> elements will break any older versions of ES, so you will need to use <feature> to maintain compatibility. Depending on what one is trying to do with the z-index values, backward compatibility may not make sense in which case you could use them in the normal flow.

The <feature> elements are kind of building up at this point. We may need to come up with a community recommendation on how what is a reasonable time-frame on how long use a particular feature value. On the maybe plus side, the theme variables feature I have been working on won't be able to support backwards compatibility so it could serve as a reset point for theme makers to integrate these newer features directly into the theme.

mattrixk

@jdrassa I'm really looking forward to your theme variables mod, that should really make things easier/cut down on the amount of needed code.

I have a theme I've been working on for ages, but the art is nearly done, so I'm focusing on that until it's done. After that I can get back into looking at the new ES builds (I still have to play with @Zigurana's kid-friendly Windows build that I haven't had a chance to look at yet. Sorry Zig).

SuperSirLink

@jdrassa This is very cool! Thanks for doing this! Looking forward to playing with this...

SuperSirLink

I have only updated ES from source using the retro-pie setup script, what is the best way to pull this version down on top of an install that was done using the retro-pie setup script?

duiz

@jdrassa I noticed that the Herdinger branch of ES has a hide game feature. Would it be possible to implement this into your z index branch release?

https://github.com/Herdinger/EmulationStation/commit/196d9175c38da86f778e6a1af4fc8abb09270eea

SuperSirLink

what path do I need to be in when pulling this down from GitHub to overwrite the build version on a RetroPie script install?

jdrassa

@SuperSirLink Sorry for the delayed response. I have been out of town and away from my computer. I am not sure the exact path, but you can add this script to RetroPie-Setup/scriptmodules/supplementary and then you will be able to install it using RetroPie-Setup. It should appear in the experimental section.

jdrassa

@duiz said in z-index support for themes:

@jdrassa I noticed that the Herdinger branch of ES has a hide game feature. Would it be possible to implement this into your z index branch release?

https://github.com/Herdinger/EmulationStation/commit/196d9175c38da86f778e6a1af4fc8abb09270eea

This branch is only intended for testing the z-index feature before it is merged into the RetroPie repository. I believe @Zigurana is planning on implementing hidden games here.

Syhles

@jdrassa
Saw your PR on the Retropie GitHub when I woke up, looking forward to it going through. I have been following this thread since it started.

Quick question slightly unrelated to this, after this PR goes through are you going back to working on variable support or something else?

SuperSirLink

@jdrassa said in z-index support for themes:

@SuperSirLink Sorry for the delayed response. I have been out of town and away from my computer. I am not sure the exact path, but you can add this script to RetroPie-Setup/scriptmodules/supplementary and then you will be able to install it using RetroPie-Setup. It should appear in the experimental section.

No worries... Life had pulled me a way too onto other things... Cool, thanks for that! It is installing now, thanks again!

ruckage

@jdrassa
Only just discovered this thread and first of all I have to say this is a great addition, zdepth is something that I've wanted in ES since I first began using it - it opens up so many new possibilities. Thank you for all you work.

Now I do have a problem and haven't seen it mentioned here so thought I would ask. Currently I'm only experimenting with this on Windows but I'm getting a bug where if you fast scroll through the gamelist in detailed view then dark boxes appear on the screen - one covers the description text entirely (though the text can still be seen) and also some random smaller boxes in the gamelist itself. In debug mode a reload fixes it but it then happens again if you fast-scroll.

Not sure if it's a known issue or something specific to the windows build but thought I should mention it.

Syhles

@ruckage
This has been fixed in a update a few days to a week ago on the source build.

Not sure if it made it to the windows build yet, they've been rapid firing updates for about a week.

Here's the GitHub
https://github.com/RetroPie/EmulationStation/pulls

ruckage

@Syhles
Thanks, that's good to hear. I just downloaded the Windows build today so I guess it's not up to date but as long as I know it's fixed on retropie then it's not a problem.

alphatoanant

Hi @jdrassa I found time to work on the other use case I mentioned above and have run into a snag.

It may not be z-index related. That said it does seem to be related to layering so I was wondering if you could take a look and help point me in the right direction.

Some background:

I am working on a theme for small screens (320x240 res) and had an idea to build a theme that looks like this:
alt text

See the image on the right of the view?
The idea there is to allow a user to scrape screenshots for each game normally without any additional cropping

In order to achieve that look the md_image essentially hangs off the right side of the view like this:
alt text
(green is what is visible in the view / red is what is positioned to be hidden outside)

The snag:

In testing, I have found cases where the image from one view will kind of "pop" into place on the view next to it. And when that happens the image sits on top of the gamelist itself.

It's much easier to see in video form so I recorded this to walk through it:

I have tried a few different things (reordering my elements, working with different z-index values) but unfortunately haven't be able to find something that works consistently.

Of note is I haven't found this behavior when showing video in place of the image.

I uploaded a version of the theme here if it helps to see the structure:
https://github.com/anthonycaccese/es-theme-crt-tft

Any help or guidance you have would be awesome. I also completely understand if this is out of scope and better asked somewhere else. Please let me know either way and thank you for your help.