z-index support for themes

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.

ruckage

@alphatoanant
Hi,

Do you specifically want the left side of the screenshot displayed? If not you could use the new z indexing to draw the scraped image filling the entire screen and then draw everything else on top of that- no overhang needed.

jdrassa

@alphatoanant I will look into it. I have a few ideas on how to fix it.

alphatoanant

Thank you @jdrassa, if there is any other info I can help provide don't hesitate to let me know.

@ruckage, thank you for the suggestion! I may take a crack at that (possibly shift the image display to the left side of the view and the gamelist to the right as an alternative). Anecdotally from the set of images I checked most of them just look better shown from the left side of the screenshot =). That said checking some of the resolutions there is, unfortunately, still some chance for overhang into the next view. I am aiming to fill the height of the screen and some systems screenshots sized up to a 240 height extend a bit past 320 width (genesis and gba specifically). More to try - possibly making the image a strict 1x1 size and see if the distortion looks weird. My ideal state would be to see if there is a fix for the above though (it could give us more options for theming)

jdrassa

@alphatoanant This should be fixed if you update EmulationStation.

alphatoanant

@jdrassa thank you! It's working perfectly. Very awesome and much appreciated. Will try to finish up work on the next iteration of the theme by end of weekend. Cheers.

pablosbrain

How or Can zIndex be used with other elements that aren't images?
<helpsystem name="help">
<textlist name="gamelist">
Those are a couple of the items i am trying to use it with, but it fails.

pablosbrain

Nevermind... Figured out i can do negative zIndexs on the images to put them below everything else.