Steam Big Picture Mode Theme

KazanTheMan

Hi there all! I'm a big fan of steamgrids, and I make my own for all of my ROMs and PC games. I find the overall clean, ambient look of Steam's Big Picture Mode very pleasing to the eye. I looked for some time for something I could use with ES and retropie, but never really saw any themes that caught my eye design-wise. So I made one myself, modeled after one of my favorite big screen front ends.

Updated as of April 10th, 2017.

Imgur previews:
Custom carousel: http://imgur.com/RLtwBf1
Standard Failover: http://imgur.com/V6p0B3k Updated: http://imgur.com/82ZlUKR
Basic View: http://imgur.com/iOUL7Lk
Detail View: http://imgur.com/2nDzEOG Updated: http://imgur.com/GZGqBDi

It supports carousel themes if your version allows it. It fails over to the standard carousel fairly cleanly if not. It works in 4:3, albeit not prettily. A lot of the text becomes illegible and some elements don't behave well. It still works and isn't outright terrible, but I don't recommend it if you can avoid it. I tested it rigorously and it scales pretty much flawlessly from 1024x576 to 2k.

Grid view is planned, but I need support for it to be a little more robust before I do that. It has built in theme support for basically all standard emulation platforms, I think there are 50+ packed in.
Available on GitHub here.

If you should happen upon a bug, I'll keep checking back here for updates, but contacting me on Reddit would be the most effective way of reaching me.

PS: I used the Toolkit posted by mattrixk to test the theme on Windows. The carousel theme works flawlessly using the build of ES included with that. However, it does not work on RetroPie. If anyone could give point me in the direction on how I can get it working for RetroPie, if at all, I would love to know so I can provide detailed instructions with this theme for those who are unfamiliar with the process. Bear in mind, my own inexperience with linux and github may mean I need some hand-holding through the process as well. Figured it out. You just need to make sure your update scripts are updated, then update emulationstation from the package manager.

PPS: I used the logo files supplied by the simple theme that comes with emulationstation. Not sure if that's looked down upon or not. Eventually, I plan to trace my own vectors for as many of the options as possible to make it more cohesive for the appearance of the theme.

mattrixk

I love seeing new themes, and yours is very nice indeed. I'm glad the Toolkit came in handy for you too.

I have a question and a suggestion if you don't mind.

There is a large empty space in the bottom-right of the Detailed View. Is there something missing from there? It just looks a bit vacant compared to the rest of the screen.

In regards to the System Logos, you could check out the ones from the Io Theme. I took the default Carbon logo SVGs and altered them to be dual colour (#0c0c0c and #d8d8d8). You could take these and make them into colours that match your theme (perhaps the blue colour you're using in the gamelist. It looks like it could be #66C0F4). It's pretty simple but can be a bit time consuming. If you need a hand with it let me know.

KazanTheMan

Thank you. The toolkit made testing much simpler. The bottom right is the space I intend to fill once I learn to script for the pi and make it a section for per-game screenshots and possibly video, similar to how the actual steam interface works. I'm still deciding how I want to implement that script, so it's far from being completed. I'll probably go ahead and put a filler element in place for now until I find a solution for it.

As far as the SVGs go, I was thinking more of going with iconographic vector controllers when possible for system logos, similar to what the steam interface uses on it's carousel page. I intend explore the idea of negative space full system logos as well, but my goal is solid, single color representations for the logos.

mattrixk

@KazanTheMan Cool, sounds like you have things well in hand. I can't wait to see a finished product.

I'm not familiar with the Steam layout, so I don't know how it looks, but one idea for filling the space is to make use of the extra <marquee> tag in the video view. You could have the <video> playing where the screenshot is currently, then in the empty space you could use the <marquee> to display a secondary image.

Granted everyone will have different things scraped into the marquee tag. Most will probably have the game Logo, but you could use it for box art, or even a create a custom Mix image of box art, logo and screenshot with the Universal XML Scraper.

kbronctjr

@KazanTheMan Hi man, awesome theme. Can you add the Steam system?

Cheers!

SuperSirLink

@KazanTheMan said in Steam Big Picture Mode Theme:

Thank you. The toolkit made testing much simpler. The bottom right is the space I intend to fill once I learn to script for the pi and make it a section for per-game screenshots and possibly video, similar to how the actual steam interface works. I'm still deciding how I want to implement that script, so it's far from being completed. I'll probably go ahead and put a filler element in place for now until I find a solution for it.

As far as the SVGs go, I was thinking more of going with iconographic vector controllers when possible for system logos, similar to what the steam interface uses on it's carousel page. I intend explore the idea of negative space full system logos as well, but my goal is solid, single color representations for the logos.

I would be interested in seeing how you pull that off once you do, if you don't mind sharing... Building a theme where I would like to display box art and screenshots as you scroll through the list...

KazanTheMan

@kbronctjr I'm not sure I follow. What do you mean by Steam system?

@SuperSirLink Like I said, I need to learn some scripting for it. From some rudimentary testing I don't think emulation station supports extra metadata tags, so I might have to hijack the marquee metadata and replace whatever image is stored there. That is not ideal, as the video view has some very inconsistent behavior and rendering from the detailed view, not to mention altering a users image data or metadata for one theme is poor practice.

mattrixk

@KazanTheMan: I think @kbronctjr means to make a folder for Steam. The Carbon theme has a folder for it if you need an example.

kbronctjr

Yeah, that's what i meant because with some Nvidia graphics cards you can stream your games to the pi, so I directly stream the steam app. Some themes has a folder for steam where you can add the script to launch the streaming. It would be awesome if you add the folder and Steam logo.

Cheera

kbronctjr

Hi man, Thanks for the steam folder. How do I activate the new carousel view? I have the las retropie version

KazanTheMan

@kbronctjr If the carousel view is not being themed, you should update the retropie update scripts, then in the package manager, update emulationstation from source, not binaries. After that the carousel should be properly themed.