Io - New Theme

[mattrixk]

Hmm, thanks for the heads up @meleu. I make my themes using a portable windows version of ES, rather than RetroPie on a RPi, so I never got that error. I'll have a look into it. Judging from the error message, it could be that RetroPie doesn't like the google font I've used, but honestly, I don't really know what any of that means. Maybe someone who knows more about RetroPie like @herb_fargus or more about themes in general like @Rookervik would have a better idea.

I just realised it could be something to do with font sizing. In the Io theme I wanted to hide a couple pieces of metadata, so instead of using <pos>1 1</pos> or something, I used <fontSize>0</fontSize>. It worked fine for me so I didn't think much of it. I didn't do this in Spare or MetaPixel.

[cyperghost]

@mattrixk
Yes that is it. It works for me on all systems now.

• Open io.xml and search for <fontSize>0</fontSize>
• Replace all occurrences with <pos>1 1</pos>

afair there are 2 matches of the fontsize string. Thank you!

[mattrixk]

@cyperghost: Great, thanks for testing that out. I'll hopefully get a fix up for that soon.

That's something I'll need to remember for the future.

[mattrixk]

I've made an update to the Io theme.

1. I fixed the fontSize bug pointed out by @meleu.
2. The theme now has 3 different sizes for different size screens:

• Large size for desktops and computer monitors (this is the default view).
• Medium size sacrifices most metadata for a larger image.
• Small size is for handhelds and shows nothing but the image and gamelist. It also has larger font size for better legibility on a smaller screen.

'Io' Theme Detailed View - Medium

'Io' Theme Basic View - Small

'Io' Theme Detailed View - Small

I don't have any way to test this on a handheld or 4/3 screen, so if anyone comes across any problems, let me know and I'll see about fixing them.

@RetroPieNerd: Do I need to do anything to update this in RetroPie, or does it just pull straight from the GitHub repo, so anyway grabbing it gets the current version?

[backstander]

Great theme @mattrixk !!!

[PokeEngineer]

@mattrixk

esthemes.sh pulls straight from the GitHub Repo so all you would have to do is select your theme and press update.

[PokeEngineer]

@mattrixk

So it will download the latest version and overwrite the old in RetroPie.

[mattrixk]

Thanks @backstander :D

@RetroPieNerd: Cheers for the info. It's good that I don't really have to do anything on my end except update the theme repo and anyone pulling it gets the most recent version. It could get messy if I had to somehow push it to the RetroPie repo or something. I'm not fully down with GitHub yet.

[mattrixk]

The Medium size option of the Io Theme now supports 4:3 resolution.

[meleu]

@mattrixk I forgot to give a feedback. The io theme is now running fine here. Thanks!

[cyperghost]

@meleu
Do you think it could be possible to change large/medium/small size of themes directly via RetroPie? I think about a database that holds data which theme is able to be changed. You select the option, do a restart of ES et voilà c'est bon.

[mattrixk]

@meleu: Cheers for the testing. I'm working in GridView now.

@cyperghost: I like the idea, but it's way out of my realm of understanding. It's not something that ES themes can do natively.

[meleu]

Hi @mattrixk !

I'm working on a script to automatically generate launching images (discussing about the script on this thread).

I'm not a specialist in emulationstation themes and its XML file structure, but I was able to make my script get the background image from the XML file associated with the theme. More precisely, it gets the <path> field from the system view <image name=background>.

Example from the metapixel theme:

<theme>
    ...
    <view name="system, basic, detailed">
        <image name="background" extra="true">
            ...
            <path>./art/bg_simple.png</path>

The script successfully gets the bg_simple.png file from the metapixel.xml.

This approach works fine with every theme I tested my script, except the IO theme. Because it seems that its XML file (large.xml) doesn't follow the <image name=background> standard. I see bg_color, bg_help, bg_logo, bg_gamelist, etc... But no background.

So here's my question: Is there a more accurate way to get background from a ES theme XML file?

[meleu]

@meleu said in Io - New Theme:

So here's my question: Is there a more accurate way to get background from a ES theme XML file?

I think I've found the answer a little hidden in one sentence of the EmulationStation themes documentation:

"Extra" elements will be drawn in the order they are defined (so define backgrounds first!).

Would I be right to say that I can get the system view background from the very first "extra" XML element inside the <view name=system>?

Time to make some tests... :-)

[mattrixk]

@meleu:

I'm a web developer by trade, so I generally end up having set ways that I label things. In this example, if something is a background, then it's labelled with "bg_". So here, the overall background colour is labelled "bg_color", the background of the Help bar is labelled "bg_help", etc.

The Io theme doesn't really have a background image as such. Each background box is a single element using a 16x16px white PNG, stretched the right size and then has a colour applied to it with the <color> tag. If I labelled "bg_color" as just "background", you would most likely just be pulling in a square white PNG.

Would I be right to say that I can get the system view background from the very first "extra" XML element inside the <view name=system>?

That sounds like it might be the way to go. One question though, does it get just the background path? Sometimes a theme might have a plain white background image/pattern, and then it has the colour applied with the <color> tag (as it is with Io). Would your script grab the colour as well, or just the image?

[meleu]

@mattrixk I've made some tests with the first "extra" element inside the system view really seems to be way to go. I'm not on a RetroPie now, but later I'll post some generated images for IO theme here... ;-)

Would your script grab the colour as well, or just the image?

It takes the color too.

Here is an example of a generated image where the script took the color from the megadrive/theme.xml (material theme):

The script has an option named --solid-bg-color, when this option is not present, the script applies the color on the background in a "semitransparent way" (I don't know how to describe it, oh my poor english... :/ ). If the user use the --solid-bg-color option the script applies a solid color to the background image (if the background has a picture, it will be fully covered by the color, in other words, the picture will can not be seen).

[meleu]

@mattrixk Unfortunately getting the first "extra" element inside the system view isn't that trivial... Well, doing this way worked fine for io theme, but some other themes stopped working. And it's related with where the <include> is placed. The solution I'm thinking is to dump every <include>d file in one big temporary xml file and get the data from this file. Will do it later...

Cheers!

EDIT: as I promised, here are some automatically generated launching images for IO theme.

[cyperghost]

I created Capcom images for IO theme

Grap them here even if they are not high quality but the IO theme is my favourite one because of it's simpelness.

The darker icon is named system-black.png and is shown if the system is selected in ES. The greyer icon is named system-white.png and shows the unselected status.

create folder capcom in your roms folder
create theme.xml there

<?xml version="1.0"?>
<theme>
<formatVersion>4</formatVersion>
<include>./../io.xml</include>
<view name="system">
<image name="logo">
<path>./system-black.png</path>
</image>
</view>
<view name="basic, detailed">
<image name="logo">
<path>./system-white.png</path>
</image>
</view>
</theme>

[cyperghost]

Made favourites icon-set for IO. I just added a text outlined with barbed wire. My first attempts with PSPX (it was given free for years ago!) Does a nice job...

The pic are free to use but please respect the work of others!

DELETED! Reason: Ugly!

DELETED! Reason: Ugly!

How to use:

1. Name the grey picture system-white.png the black one is named system-black.png
2. Create a folder favourites within IO theme
3. Create theme.xml file like posted in black box

<?xml version="1.0"?>
<theme>
<formatVersion>4</formatVersion>
<include>./../io.xml</include>
<view name="system">
<image name="logo">
<path>./system-black.png</path>
</image>
</view>
<view name="basic, detailed">
<image name="logo">
<path>./system-white.png</path>
</image>
</view>
</theme>

[cyperghost]

I made 2 new FAVs icons... the one above look ugly and martial!
Seems to be it was late last night ;) I may delete 2 two pictures above
Even the color palette is made as @mattrixk used #d8d8d8 for the light grey.
Thank to him

!