Chicuelo Theme

EctoOne

@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!

chicuelo

@omgmog said in Upload My Theme:

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!

Very Precise! the only changes I would do is Kodi's logo on the left, where you typed the name, and maybe another TV.
The font is Roboto., its included in the pack

A Former User

Going to install this theme this weekend and give it a shot.

Can anyone report how it works using boxart vs. screenshots?

Newellj79

Awesome theme. If you are taking requests I would submit ms-dos and arcade. Then I could use it on my bar top. :)

Keigan

@chicuelo said in Upload My Theme:

@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

Exactly my reasoning for saying it's likely not worth your effort to do on a large scale.

More or less I was thinking if you wanted to make them to release, do multiple numbers all at one time. Make indicators starting at 5 systems and do it for up to 20 or 25 or however many you feel like doing, if any. Depending on if you wanted to keep the spacing the same it shouldn't take much more than 20 minutes to set up and save them all.

Like I said, it's a cheat, not a true solution. Though even if they built it in to ES, there would likely be issues as far as how much customization we could do to it. With this way you could do some cool indicators such as something like these (credit for the icons go to OpenEmu):

indicator

Where you could use icons, or anything instead of circles.

I'm certainly glad you originally included them because I'm definitely using them in my personal theme set ups.

jwbmonk

Has this been added to retropie setup?

Keigan

@newellj79 said in Upload My Theme:

Awesome theme. If you are taking requests I would submit ms-dos and arcade. Then I could use it on my bar top. :)

Check under the MAME folder, he has a nice looking ARCADE one made there.

mitu

Nice an clean theme, but some of the images are not loading.
For instance, theauto-lastplayed/theme.xml file (https://github.com/chicueloarcade/Chicuelo/blob/master/auto-lastplayed/theme.xml) references the /system-bg.jpg image, but in that folder there is no such image. Emulationstation complains:

lvl1: 	  Warning from theme "/etc/emulationstation/themes/chicuelo/auto-allgames/theme.xml"
    could not find file "./system-bg.jpg" (which resolved to "/etc/emulationstation/themes/chicuelo/auto-allgames/system-bg.jpg")
lvl1: 	  Warning from theme "/etc/emulationstation/themes/chicuelo/auto-lastplayed/theme.xml"
    could not find file "./system-bg.jpg" (which resolved to "/etc/emulationstation/themes/chicuelo/auto-lastplayed/system-bg.jpg")

The result is a blank screen when that system (collection) is selected.
Maybe you forgot to add the image in the repository ?

Just a quick suggestion - add a .gitignore file at the root of your folder, so that your uploads will ignore the .DS_Storefiles that the macOS Finder so graciously adds to every folder you browse. See https://gist.github.com/octocat/9257657 for a good example you can just copy and paste.