Chicuelo Theme

chicuelo

The issue was that I have created one project on GitHub web whit the same name, I can't delete so I change the project name for the publish, take a look now:

https://github.com/chicueloarcade/Chicuelo-Theme

How can I set those files to work on emulation station menu so you can download directly from the es themes manager?
Thanks for your help folks!

mitu

@chicuelo said in Upload My Theme:

How can I set those files to work on emulation station menu so you can download directly from the es themes manager?

You should create a pull request for the RetroPie-Setup repository so the theme to be added to the default list of themes available in RetroPie. Something similar to https://github.com/RetroPie/RetroPie-Setup/pull/2260 - clone the repository on your account, then modify the esthemes.sh file as in the pull request above (include your github account and repository), then do a pull request to the RetroPie-Setup repository.

Keigan

@chicuelo

Ahh, yeah GitHub was a pain the first time I tried to use it.

Great Theme man! This is easily the best I've seen on here, so clean.

As far as getting it available inside EmulationStation, I'm not sure. I've only ever used themes I've created and manually loaded, so not sure how the auto loader works. Someone in here will be able to help though!

chicuelo

@keigan
Thanks mate, hope you enjoy the theme. If you want some other system just ask!

EctoOne

I also must say that I really like it.
Yet, there is one minor issue. The indicator dots on the left side on the system view are based on your systems. I just tested it on my windows version and the dot was randomly jumping and/or skipping systems.

chicuelo

@ectoone said in Upload My Theme:

he indicator dots on the left side on the system view are based on your systems. I just tested it on my windows version and the dot was randomly jumping and/or skipping systems.

I know! On the readme file I explain that part. It would be great if retropie incorporates that function on a future. It was the only way I find how to do it

chicuelo

@mitu

Gorgeous, I will try to do it!

EctoOne

@chicuelo said in Upload My Theme:

@ectoone said in Upload My Theme:

he indicator dots on the left side on the system view are based on your systems. I just tested it on my windows version and the dot was randomly jumping and/or skipping systems.

I know! On the readme file I explain that part. It would be great if retropie incorporates that function on a future. It was the only way I find how to do it

Yeah, I really like the dots, they are such a good replacement for a regular carousel. Maybe you should upload a version without the dots, so that everyone can use it without having random jumps.

SgtJimmyRustles

That's a real clean theme. Not my personal cup of tea, but it's one that I'd be proud to share if I were you.

chicuelo

@ectoone said in Upload My Theme:

Yeah, I really like the dots, they are such a good replacement for a regular carousel. Maybe you should upload a version without the dots, so that everyone can use it without having random jumps.

I updated the files and removed the indicators so you can use the theme in any order

arturgomes

@chicuelo is not better to zip everything and upload in some website for now ? like mega or google drive

mitu

@arturgomes You can download a zipfile from github repository. Use the Clone or Download button at the right top of the repo and choose to download the zip.

Keigan

@chicuelo said in Upload My Theme:

@ectoone said in Upload My Theme:

he indicator dots on the left side on the system view are based on your systems. I just tested it on my windows version and the dot was randomly jumping and/or skipping systems.

I know! On the readme file I explain that part. It would be great if retropie incorporates that function on a future. It was the only way I find how to do it

I have a way to cheat this, however it may be more work than you care to do since the indicators will work with your setup. If anyone is interested though, and has basic Photoshop skills, it's fairly straightforward.

chicuelo

@keigan

I have a way to cheat this, however it may be more work than you care to do since the indicators will work with your setup. If anyone is interested though, and has basic Photoshop skills, it's fairly straightforward.

I'm interested on doing it the proper way. What do you suggest to make it work?

Keigan

I'm in the middle of writing up a how to on this, and may have realized the most simple way in the world to do it in the process. Let me run a few tests first to see, cause this way wouldn't be a cheat.

Keigan

@chicuelo

So the simpler way won't give the effect I feel we are looking for. My thought was create a circle call it logo and have every system use it as it's logo. This will do an indicator, though the indicator will always be in the center and not scroll from top to bottom, so I'll finish my work around post and post that.

If anyone knows though how to keep the logo list static, and move down system to system and highlight the selected one, that would be huuuge.

Keigan

It's basically how you did it, but since you included it with the background, another person doesn't have the option to use it without having the systems in the same order, and the same number of systems.

I'll explain the whole process in case some people feel they want to do it

TLDR;

Create a fake indicator bar, with dots for every system you have (12 systems, 12 dots, 12 saved images). Starting with the top dot being filled in, save as 1.png, then move to dot 2 and save as 2.png, etc. Using your es_systems.cfg, look at the order of your systems. So link the logo of the first system to 1.png, second system to 2.png, etc. This will be done in each systems theme. The more systems you have the more you will need to do.

Well my way isn't really a "proper" way, as so much as a work around. Without it being added into ES and automatically figuring out the number of systems to create the number of indicators, there isn't really a proper way.

One work around way, and I believe one that would be the easiest for people is to basically make a faux indicator consisting of the number of systems you have to choose from. For instance I believe you had 16 on yours, but I only run 10 or less typically. So I would need to make an image with 10 dots, where as you would need 16. So to cater to everyone you would need to make multiple options, that's why I figure it's not the greatest option since it's not a huge benefit to you. But maybe someone who can use Photoshop and has 5 systems can make on for themselves.

Since you don't use the Logo in your theme, I would use that as the indicator.

So in the photo below you can see I mocked up a layout of where I would want my dots to go

step1

It measured 100w x 430h. If you want more spacing, or have more systems, you can make this bigger. I'm just using this as a guide.

So below I have my indicator on slot #2. I would save this image as 2.png. The background would be transparent as well, I'm only using a dark background for the mock up, the final indicator set up would be transparent so it wouldn't cause any issues.

dots

So following this process, switch the white dot to all other spots naming them the number the white dot is located.

When this is done I would check your es_systems.cfg to find out your systems order. So the first system will always be the first one when ES/RP starts up. So whether you want that to be on the top dot, or middle, or do not care, that's up to you. The main thing is the systems follow their order in this file, and so you can place them anyway you please, but know the order so you can make the dots move to the next, when you move.

So my order goes #1 NES, #2 SNES, #3 GB, GBA, ...

So inside my NES theme.xml I make the logo in the systems menu link to 1.png

nes

So do this for every system, making sure to link to the proper corresponding indicator.

Now for setting up the placement, I hope if you decided to do this you understand how it gets set up in the XML.

So for the logo are there are a few measurements we need.

The size of the image (for me 100 x 430), the screen size (for me 1920 x 1080) and the distance from the top left of the screen (for me 0 x 325). Using this info we can place the logo list where we need.

So looking at our main theme.xml file we see this section:

themes

I will admit I'm not 100% sure on how exactly logoScale and logoSize work. I've only toyed with them on another theme I made and they worked but I never payed full attention to what changed and when. However if we keep logoScale to 1 (Which I believe is the size you want the selected system logo to be in regards to the rest, but since we are only going to show one logo at a time, no need to make it bigger), and the logoSize to match size (as shown above) everything should work out.

The way the XML sizes and positions things is using percentages as decimals. So 1 = 100%, 0.5 = 50%, etc. We get these percentages by using our screen size as a guide.

As I mentioned my screen size is 1080p, so every width will be divided by 1920 and every height will be divided by 1080 to get my answers.

Image Size

100 x 430

100 / 1920 = 0.0520833333333333

430 / 1080 = 0.3981481481481481

Position

0 x 350

0 / 1920 = 0

325 / 1080 = 0.3009259259259259

So I put that in my XML. Colour you can fill in with a 6 hex colour code followed by 00 to make transparent, we don't want any colour involved.

And boom, should be good.

I appologize for the long drawn out process, I just wanted to try and cover every little bit for anyone who made need a little more explaining done. And maybe there is an easier way it would be nice if there was one.

chicuelo

@keigan said in Upload My Theme:

my way isn't really a "proper" way, as so much as a work around. Without it being added into ES and automatically figuring out the number of systems to create the number of indicators, there isn't really a proper way.

I understand this method. The only issue is that you have to create the dots based on the amount of systems you have. And if you add some, you have to do all again

HurricaneFan

@keigan Great explanation!

omgmog

This is a great theme!

I've whipped up an additional system-bg.jpg to use for Kodi if anybody is interested.

To use it, I simply cloned another system (e.g. psx to kodi) and replaced the asset, then with a Kodi launcher under ~/RetroPie/roms/kodi and a system added in /etc/emulationstation/es_systems.cfg it works.

I had to reproduce the text styles myself, so they might not be perfect. If you've got a .psd or something as a template that would be great!

Thanks!