[Theme] CRT

alphatoanant

Hi Everyone, below is my first attempt at a theme for ES and I was hoping to run it by all of you to get feedback, updates, etc...

I was inspired to build it after following the thread where @fieldofcows added video preview support to ES and then the follow-up work done by @Nismo on his amazing oldroom theme. So this is a theme with support for the new video view and video tags.

I based it heavily on the awesome Carbon theme by Eric Hettervik; and then rebuilt from scratch so I could learn the theming system (note: all logos were sourced from Carbon as well; I made a few small modifications to lighten some of the logo text in a few like NGPC)

The design was based on old video game poster designs like these http://imgur.com/J4eeTun and http://imgur.com/Ut0SWfJ

Please let me know what you think overall and what I can add/remove or change. I'll be glad to make updates and fixes as they come in. Thank you!

Updates

7/18/2017

Added support for the new Game Collections feature by pjft

5/14/2017

Added display of marquee image
Cleaned up layout of metadata
Added basic styling of carousel

5/3/2017

Updated CRT Bezel images from PNG to SVG to help with clean scaling on different resolutions
Added future support for z-index layering being discussed in this thread - https://retropie.org.uk/forum/topic/9785/z-index-support-for-themes

4/31/2017

CRT has been added to the list of themes that can be installed from within retropie (go to Retropie > ES Themes menu).
The theme can still be installed manually by downloading from github but the retropie menu option helps remove a step and will allow you to stay in sync with updates as well =)

4/30/2017

Fixed box art scaling issue on video view
Added 4x3 layout option
Added display of genre and release date metadata
Added backward compatibility check for older versions of retropie without video support
Added child friendly ES support

1/15/2017

Created "CRT Centered" theme variant - https://github.com/anthonycaccese/es-theme-crt-centered

1/12/2017

Increased the size of boxart displayed on the video view
Replaced genre and release date metadata with last played (genre and release date metadata does not appear to be consistent and last played does look like it will be more helpful overall)
Tightened up spacing and reordered metadata on detail and video views

Download

Can be installed directly through the ES Themes menu in Retropie
or
Install manually by downloading from: https://github.com/anthonycaccese/es-theme-crt

Video Walkthrough

Screenshots

Video View

Detailed View

Basic View

4x3 Layout
Basic View

More images on Imgur

Details

Has support for system, basic, detailed and video views
Displays the following metadata on detailed and video views: rating, description, # of players, genre, publish date & last played
Matching splashscreens are included in the _inc/images folder
16x9 layout Tested on 720p and 1080p resolutions
4x3 layout tested on 480p/480i resolutions

How to use

Requires a Pi2/3 (videos are very choppy on a Pi0/1)
Install latest version of retropie through the setup script (ersions after 4.1.8 work)
Add <video> elements to your gamelist to reference videos for each game on your pi (videos can be stored anywhere just like images)
To use 4x3 layout: edit the root theme.xml file and change <include>./_inc/templates/16x9.xml</include> to <include>./_inc/templates/4x3.xml</include>

Acknowledgments

The theme design was based on old console poster designs like these http://imgur.com/J4eeTun and http://imgur.com/Ut0SWfJ
All Logo graphics are from the default Carbon theme made by Eric Hettervik (see: https://github.com/RetroPie/es-theme-carbon/)
Static.mp4 default video from OldRoom theme by Nismo (see: https://retropie.org.uk/forum/topic/5823/looking-for-testers-for-es-video-preview-on-raspberry-pi/20)
Video support possible because of work done by fieldofcows (see: https://retropie.org.uk/forum/topic/4820/video-preview-in-emulationstation)
Theme tutorial written by mattrixk was a huge help in learning how to build this (see: https://github.com/RetroPie/RetroPie-Setup/wiki/Creating-Your-Own-EmulationStation-Theme) and his Spare theme is equally awesome.

Possible Future Updates

System specific backgrounds that match historical poster designs for a given system (I built an NES example to check out here: http://i.imgur.com/XCx3Tko.png)
Grid view support

Download

Can be installed directly through the ES Themes menu in Retropie
or
Install manually by downloading from: https://github.com/anthonycaccese/es-theme-crt

Thank you again

mattrixk

I like it. It's very clean and uses the space well. It should also work well on smaller screens as it isn't too cluttered.

I'm also glad the tutorial helped you. If you need help getting the kid-friendly icons working I can help you out (just with the icons though. If you have problems with the ES Mod itself, Zigurana might be a better bet).

ebtalk

Solid solid solid work.

I'd almost reconsider using times played / last played instead of the ratings on the detailed view.

Otherwise fantastic job.

Nismo

@alphatoanant Seems very clean, i like it, but something is wrong...

You need to set marquees yes or yes, because marquees are always displayed even if you doesn't use the code, so if you don't place them, marquees are displayed in a very big size in the top left corner of the screen.

Or you can move them out of the screen.

Also my box images are displayed in a very small size in the corner of the tv.

This is what i get:

alt text

Nice theme anyway.

alphatoanant

@mattrixk, thank you for the offer! I will definitely take you up on the help with kid-friendly updates once I get a version of it setup to test with

@ebtalk, that's solid feedback. The main reason I hadn't included those at this time is that I have become used to having "save metadata on exit" turned off (started doing that more once I had started using pizero's because it felt like it helped with boot time). I'll try to revisit that again. There also might be room to add those in next to the rating. I'll take a shot at that and provide an image to see what you think.

@Nismo, re the marquee tag... I totally missed on one of the rules of ES themes - some items have default placements that you need to watch for =). Thank you for catching that. I'll provide a few ideas to ask for your feedback as ultimately I think adding the display of it would be nice. For now I made a quick update to position it off screen while I work out placement options - that change is up on github now.

re: box art image size. Design wise I was going for the main focus in video view to be the video itself so I sized down the boxart in that view. The maxSize is around 172x90px in a 720 resolution. Can you send me one of your box images that I can test? I can try different maxsize params to see if I can find a happy medium. Thank you again for your help and feedback.

Nismo

@alphatoanant I 'll upload one to you ASAP. I don't have time right now.

Of course you can ask me what you want. Nice work.

Edit: here you have
https://s28.postimg.org/ngldgl07x/Aero_the_Acro_Bat_2_U_image.png

pablo

Absolutely love this... silly noob question, but how exactly could I install this theme for myself? I'm assuming it will have a slightly different process than the regular channels.

MartinS

@pablo said in [New Theme] 'CRT' with support for Video Preview:

Absolutely love this... silly noob question, but how exactly could I install this theme for myself? I'm assuming it will have a slightly different process than the regular channels.

I had the same question yesterday. Hopefully, this explains it...

https://retropie.org.uk/forum/topic/7038/how-does-a-novice-install-a-downloaded-theme/7

alphatoanant

@Nismo, awesome thank you. I'll start playing with sizes to see if I can find something that works for both 2d and 3d boxes.

@pablo, if you still need help let me know. One main thing to keep in mind is your retropie version is going to have to be the latest that you can install from the setup script (the version that can be downloaded from the site does not yet have video preview support in it yet). The version I am running is 4.1.8 as an fyi.

nasp2000

Very nice... But this is for RPi2 or 3.

Did this work it an original Raspberry Pi ?

badhorse

looks amazing dude!

one small thing i might change is the console logo looks a bit out of place in the middle. are you able to move the logo to where the stars are and put the stars to the right of the logo?

fuglem

Wow! this was exactly what I was looking for. Hope to see system specific backgrounds in the future, also would be great with backgrounds on the main menu.

great work!

Nismo

@fuglem take a look at my theme here:

alphatoanant

@Nismo your theme is so solid. I continue to be amazed by it - the system specific aspects are really great. Awesome work.

Nismo

@alphatoanant Thank you, it needs a lot of work... it's like to do one theme for each system..

Nismo

Long time without posting anything about the theme so here you have a little preview of amiga system. (I used megadrive system to test it).

I need to change the gb, gbc and gba cartridges for 3d box images.

I also fixed the gameboy with 4 buttons... lol

I need help to find a good quality image about somebody with a gameboy color in his hands, please somebody can help me?

My mistake gba is not in the video but is finished too.

Sorry for the offtopic @alphatoanant.

Capeman

Is the video preview support built into the ES version that is included in retropie 4.1 or do you need to get a forked version of ES to run these? I want to make sure before I try making one myself.

sam85461

Hey can anyone help me, i tried to install this on my computer version of emulation station but it shows as all white and none of the assets show up. thanks

Nismo

@sam85461 For windows you need the compiled version by @fieldofcows.

https://github.com/fieldofcows/EmulationStation/releases/tag/v0.1-beta.7

But it doesn't have some fixes like the fix for ES crashing if you use subfolders in roms folder and other things.

And if you manually scrape a game inside ES, it deletes your video and marquees tags in gamelist.xml.

alphatoanant

Updates so far:

Increased the size of boxart displayed on the video view
Replaced genre and release date metadata with last played (genre and release date metadata does not appear to be consistent and last played does look like it will be more helpful overall)
Tightened up spacing for metadata on detail and video views

Quick preview:
alt text

Download latest:
https://github.com/anthonycaccese/es-theme-crt/archive/master.zip

@Nismo - Thank you again for your sample boxart image. I have made updates to the size of its display on the video view. It's not as large as on your oldroom theme but I think I found a good balance for my theme based on the spacing I am working with. Please let me know what you think. Also no worries on offtopic above - I am excited to see more updates to oldroom.

@ebtalk - I played with metadata a lot this week; testing different scrapers and such. I was getting pretty spotty results for genre and release date so I made a change to replace those values with last played. I kept the ratings for now as I am planning on adding child-friendly theme icons on that row. Hoping to hear what you think.

@nasp2000 - Works well on a Pi2/3 on the latest versions of retropie (tested on 4.1.8 or later) I tried testing on my pi-zero earlier this week and video playback is choppy so a few of us are discussing alternatives for pi-zero/1 in the video preview thread.

@badhorse - I will try out a few options. The main reason I went with the logo centered was to have consistency in placement between the different views (moving from a video view to a basic view for example).

@Capeman - It's in the latest version you can update from with the retropie setup script. I know for sure its works on 4.1.8 and the latest from around 3 days ago which is 4.1.10.