Theme Support

[Aloshi]

I've begun adding initial theme support, and I've put instructions in the README.md. There's still a lot to do, but now you can insert any images you want and have them scale.

Off the top of my head:

1. Allow color definitions for the game list - e.g. game name color, folder color, selector color.
2. Add an option to hide the header text.
3. Add more positioning options for images (right now X is the center of the image and Y is the top...confusing!)
4. Add a tile option for resizing.

I have no artistic talent, so I'm essentially making tools I won't use, and as such, won't get tested very well. So if you're trying to do something and it seems harder than it should be, tell me! Odds are I can fix it. Looking forward to seeing what you guys make.

[Xevin-zz]

Never break aspect. (It's a rule!) Just have it so you can define an area that the box art can go and if either dimension is too large, scale the image until it fits. That's what I need. Not sure about others.

And you're right about that picture in my head. It looks awesome! =P

[Aloshi]

Alright, just pushed a bunch of changes.

• Added theming tags for the fast select box. There's a lot of them, check out THEMES.md for a complete list. Let me know if I forgot anything. (by the way, if no background is defined, a default blue square will be used)
• Redid how tiling works to use OpenGL's repeat texture wrapping mode. Should be faster now (uses way fewer verticies for many-tiled images) AND you can be precise with how far something gets tiled. (By the way, this kind of breaks part of the genesis theme since it wasn't exact before - change the X dimension for the red striped background to .5 to fix that)

I'll try to work on a better way to define the area of the game images next. I'll probably have something equivalent to how you define images right now, like <gameImagePos> and <gameImageDim>.

With regards to defining different fonts, I'm not sure when I'll get to that. The text stuff definitely needs improvement, but I'm kind of afraid to touch it after spending 8 hours writing the current text rendering code.

[Xevin-zz]

SWEET! I cannot wait for the weekend now. I'm gonna be theming like crazy. I have some awesome ideas for the default theme and system boxes and I can hardly wait to start on them!

Also I just remembered a bug when I read your post. On a few of the themes the center position wasn't .5 I had to play around with the numbers to find the center. Looks like you fixed the bug without me saying anything about it! I'll make the necessary changes to the themes.

[66tree]

Greetings, I love all the work that has gone into EmulationStation and the RetroPie installation script. I greatly appreciate all that you are doing. I just wanted to chime in with a suggestion to the default theme and it's color palette. I would stick to a grey scale theme with a subtle highlight color blue. Here is a good example of a basic, legible theme. It's basic and easy to read. The only change I would make to the color scheme I linked to above would be to darken the greys. Once again thank you for bringing retro gaming to the Pi.

[Xevin-zz]

So I started working on the default theme this afternoon. Everything was moving along nicely. It was clean and simple and looking good, but then something started to happen. Things started to age and weather. Rust started forming. Maybe it was because I was watching Revolution while I was working. But in the end I had this: http://imgur.com/rLDFR I'm not sure if its a good default theme, but it looks cool I think. Kinda has a space station feel. An Emulation Space Station if you will...

While I was working on the xml file I ran into a problem. I wanted the system title center aligned in the left column. I haven't been using the generated system title text, so I forgot that we can't do that. Yet. =)

[elpendor]

@Xevin Personally, I think it's too flashy for a default theme. I agree with @BasicObject, it should be something along those lines.

Don't get me wrong, I think it's great. But not default theme material, as it stands out a lot.

[Aloshi]

Just pushed some changes allowing you to better control where the game art ends up:

• <gameImagePos>$infoWidth/2 0.2</gameImagePos>
• <gameImageDim>$infoWidth 0</gameImageDim>
• <gameImageOrigin>0.5 0</gameImageOrigin>

[Aloshi]

Another small tweak to theming: you can now define the alpha of a color as well - this lets you make slightly transparent selector bars, for example. This was a side effect of adding some simple animations today (the game art slides/fades in, and fades out).

[petrockblog]

I just had a look at the recent version of ES and I must say that I like the animations!

If there are any updates for the themes package I would be glad to update them in the RetroPie script :-)

[Aloshi]

If @Xevin is okay with it, I could put up some slightly "fixed" versions of his older themes (uses <gameImagePos> to fix the image positions, relative paths, etc.) on my website, and/or preferably work out some way to let him add new themes to the page as he updates/finishes them (unless you'd rather use your own hosting space).

The next item on my theme agenda is to add font/text support for themes to let you change the font the game list and descriptions use, and hopefully where they display.

[Xevin-zz]

Sorry for dropping out of contact for the last couple of weeks. Had a few things that needed taking care of...

I would LOVE a better way to post and update the themes I'm working on. Right now I'm scattered over 3 computers and my RPi. Even I am a bit confused on what is where. Also it would be good to have a place for everybody to upload themes and make changes to existing ones. Community theming! =)

The game art animations sound AWESOME! Hopefully this weekend I get some free time to test them out! Work has been kicking me in the butt recently.

[Aloshi]

I'm about ready to add in fonts to theming, but I'd like to ask some questions about what syntax would make the most sense.

Right now, I'm planning on something like:

<gameDescFont>
   <path>./art/desc.ttf</path>
   <size>0.05</size>
</gameDescFont>

Font size is defined as a percentage of screen height. I considered using the usual "points" unit of measurement but thought this would work better. There's also always some additional padding between lines (e.g. the game list).

There's one issue I'm not sure how to handle though - text color. Right now text colors are defined with special <descriptionColor> etc. tags. I could move color into font declarations, but this would break old themes (and I'd rather not leave the cruft of trying to stay backwards compatible in). The other option is to leave it as it is - which works fine but is a little scattered. Opinions?

This will likely be the last major change to theming.

[Aloshi]

Just committed custom font support. I opted to leave the color definitions as they were, so things remain backwards compatible.

[ReliCWeb]

Awesome! I updated all my themes with new fonts and they look great now. I can read all my descriptions again :-P

Thanks and keep up the awesome work!

[petrockblog]

Is there a possibility to change the width of the description text? I just started to complete the missing themes and to come up with a default theme ...

Also, is there a tag for setting the sound when changing the system?

[Aloshi]

The width of the description text is currently the left side of the screen plus 3% of the screen (left margin) to $infoWidth - 3% (right margin). I could implement descriptionPos and descriptionSize tags if you need them.

There isn't a tag for setting sound when changing systems right now. The reason it's not simple is because when you change systems, the Theme object, which holds the current theme data, changes to contain the new theme's data - which means the system change sound would be deleted while it's playing. I might have a way around this, though.

[petrockblog]

For now, I manages to get along with the default positioning of the description text. It would be nice, though, to have it configurable, I think.

In my opinion, the "system change" sound would be a basic element for user feedback and is quite important. Maybe it would already be ok, if a sound is played when a system is shown (opposed to a sound played, when a system is left). But I may be wrong ...

[HorstBaerbel]

Would it be possible to resize all game images to the same size in the GUI? Either make the width the same, or the height...

[Aloshi]

You should be able to do that with the <gameImageDim>[x] [y]</gameImageDim> tag. Leave one axis as 0 to keep aspect ratio. More info in THEMES.md.

[ghost]

Would anyone be able to help me figure out where to put the custom themes to make them work? I have put them exactly where the es_systems.cfg wants them, but every time I go to boot ES it loads the "basic" (text) theme. What should I do?

[Aloshi]

The simplest place is in the "PATH=" directory (where you put your ROMs), as a file named theme.xml. There's a complete list of allowed places in THEMES.md.

If it's not working, then there might be a problem parsing the theme file (bad syntax, missing resources) - those errors should output to the terminal. You can check ~/.emulationstation/es_log.txt to make sure there aren't errors (it should also report that a theme file is successfully being loaded).

[ghost]

Ah! Thank you. I had "misplaced" some files. After looking over the es_log.txt and moving the artwork back to the proper place, it worked like a charm. Thank you!

[martin84]

Hi everybody,

How can I get 2 pics in a theme among each other?

The themes from aloshi have one pic (the BoxArt) on the left side. I want to place a screenshot of the game below the BoxArt.

I’ve already tried to copy the "gameImagePos" from the themes.xml:

"gameImagePos"Pic1.jpg"/gameImagePos" "gameImageDim"…"/gameImageDim"

"gameImagePos"Pic2.jpg"</gameImagePos" "gameImageDim"…"/gameImageDim"

Also I’ve copied the in the gamelist.xml:

"image"”Path to Boxart”"/image" "image"”Path to Screenshot”"/image"

(sorry I had to replace the <> signs with the "")

Can anybody help me??

[Aloshi]

Unfortunately, the only image that is dynamically loaded based on the game selected is, at the moment, the <image> element in the gameslist.xml (at the <gameImagePos>, etc). It's not currently possible to display any other metadata (e.g. another image) per game. Sorry.

[martin84]

Thank you for your answer :-) I think that I just merge the Images to one common Image ;-)

Am Donnerstag, den 21.02.2013, 06:26 -0800 schrieb Aloshi:

Unfortunately, the only image that is dynamically loaded based on the game selected is, at the moment, the element in the gameslist.xml (at the , etc). It's not currently possible to display any other metadata (e.g. another image) per game. Sorry.

— Reply to this email directly or view it on GitHub.

[ghost]

Is it possible at the moment to add linebreaks in the description or other fields for genre, year etc.?

Would also be nice to be able to set the position and dimensions of the gamelist and description so we can create a wider variety of themes.

Ideally I would be able to have a the images on the lef, the gamelist on the right with the description just below that.

[Aloshi]

Linebreaks should work in descriptions - or did I break that? The other metadata fields aren't actually displayed (or even parsed).

It should be pretty doable to set a maximum "length" for the list. You can already set X and Y offsets for the list, just not maximum sizes. It should be pretty easy to add a maximum X size for the description too. I'll see what I can do.

EDIT: I was originally planning to look at this Tuesday, but I've gotten a bad case of bronchitis and school assignments piling up - I won't get a chance to do this for a while, sorry.

[ghost]

OK I didn't realise linebreaks should work as all of the examples i'd seen it has been bunched together. I will try tonight then, I am actually manually creating the XML file so I can have it exactly the format I want.

It would be nice if you could set Offsets and Maximum size (width and length) for description and game list.

Thanks

[Dano-omg]

Aloshi,

About a year ago, you wrote: "You can use a left-aligned list by adding < listLeftAlign / > to a theme"

Can you explain how to use that exactly? (I'm very new to this.)

I have a theme.xml (in the nes directory), but it already has < listLeftAlign / > at the top... (and the list is center aligned). I tried adding changing it to:

< listLeftAlign>true< /listLeftAlign > < listLeftAlign>on< /listLeftAlign > < listLeftAlign>off< /listLeftAlign > < listLeftAlign>whatever?< /listLeftAlign >

But none of those seem to do anything. What am I missing?

[Aloshi]

The first way looks to be correct. Are you using the detailed game list view (your system has a gamelist.xml present)?

[Dano-omg]

Brilliant! (I did not have a gamelist.xml defined. I added one based on your notes from another page, and everything is now left aligned and indented a bit -- I can totally work with this. Thank you!) :)

[drwsss]

Hi! Is there a way to hide games description, without having to manually edit the gamelist.xml file? If it's possible to completely erase the field, that would be great; if it's not, at least I would like to be able to place it "outside" the screen so it would be hidden. Thanks!

[Aloshi]

The most direct way would be to edit src/components/GuiGameList.cpp and remove or comment out line 71 then recompile.

Other than that you could try setting the description font to have an alpha of zero or almost-zero (set the color in each theme.xml to something like 0xffffff00), but that will also hide the sort select text.

[drwsss]

I don't know how to recompile so I have to try the other method... How should I use it? Because I'm trying with 0xffffff00 at the top of the theme but it doesn't work. Thanks again.

---

EDIT: It worked by adding 00 to the end of the color: 3A3E9F00, without the 0x at the beginning.

[expandables2]

How to change list selector size? for example the Width