Input needed: ES theming improvements

EctoOne

@mattrixk Io was the first theme that caught my attention when I got my Pi a few months ago because it was dark and simple. Then I found DarkAde but since then I kept the black and white Systemlogos from Io.
But I don't think I will release it, because I'm not sure about all those copyright things. Maybe we can make a new thread about custom modded themes and use pastebin and some instructions to get around that, I don't know. In my case people just have to get their on wallpaper and font, download Io and paste my main theme.xml over yours (should work I guess).

Edit: Here are Images of Basic and Detailed View

Nismo

@lilbud Sorry for the offtopic but... are you from spain?

mattrixk

Hi @Zigurana, I had a little play with this Carousel Mod during my lunch break. I love it and can't wait for it to be a part of the main RetroPie install. I do have a small list of issues, and another list of questions/ideas.

Issues

Changing themes will occasionally send the start menu down to "Quit" instead of staying on the "UI Settings" option.
The right hand logo takes a second to "pop" in (you already know this one).
There seems to be a slight overlap or border (about 1px) between the Carousel and Infobar. You can see it if both are set to <color>FFFFFF33</color>.
Transparency doesn't work for <infobarfontcolor> (I don't know if transparency is supposed to work for text in general).
If you make the <height> less than the <logosize>, the <infobar> sits over the bottom of the logo. Maybe swap their z-index so the carousel is "higher" than the infobar?
If you only have 3 systems and set the <maxlogocount> to 4 or 5, it still only shows 3. I don't think many people would only have 3 systems, but it's worth mentioning.

Questions

Is it possible to set the origin point of the carousel? At the moment the <ypos> works from the top of the carousel. It would be handy if we could set the <origin> point to either the center or the bottom.
Are we able to set the Infobar font to lowercase (or capital case)?
Is it possible to have the Infobar above the Carousel?
Is it possible to add a background to the Carousel (and Infobar), like a pattern or image? I realise we could just add <image name="behind_carousel" extra="true"> or something, but that image would disappear when you scroll between systems. It's not a big thing, I just thought I'd mention it.

I think that's it for now. I'll keep playing with it over the next few days. I also want to the give the Video Mod a go too. This is fun.

EctoOne

I was wondering if it's possible to change the width of the carousel and move it sideways.
I was looking for some wallpapers for my personal theme and I found some where it would be awesome if I could set the systems to show only one and have that slightly of center to the right. It would be a good option too if you could get the vertical carousel to work. Kinda like we have now with the gamelists.

lilbud

@Nismo No, I'm in the US.

It is a popular picture here.

mattrixk

@EctoOne said in Input needed: ES theming improvements:

I was wondering if it's possible to change the width of the carousel

I was thinking the same thing this morning. I'd like to be able to set the width of the carousel as well as the height, so I can make it not span the whole screen.

It could even work like a normal element with <size>0.8 0.4</size> instead of having <width> and <height>. It could then work with the <origin> and <pos> tags so you could easily place the carousel anywhere on the screen as you would a normal image.

Edit:
That would also help with the eventual vertical carousel possibility.

Edit 2:
I'd also like to be able to position the InfoBar separately. The fact that it's attached to the Carousel and the only way to change it is to change its size is messing with the design I want to do.

mattrixk

@Zigurana: I also noted that if you try to use <systemcarousel name="carousel"> in a theme on vanillaES, it breaks the whole theme (turns it back into the plain white background with black text and no extra images). So that means the theme isn't backwards compatible.

sigh, if only XML could do if/else statements.

fieldofcows

@mattrixk We discussed conditional XML a while ago. I came up with this: https://retropie.org.uk/forum/topic/6964/video-view-for-all-themes/62. I think it would be good to do something like this for new theme features.

mattrixk

@fieldofcows Oh yeah, I remember that thread now. That seems like it would be a good way to go about it, that way you can target everything in a theme, and not have to worry about it breaking for people how don't have systems that support them.

Capeman

@Rookervik I use a condensed list just like you posted and my ES doesnt crash, not sure why thats happening to you, but i only have the 3 lines per game (i produce them from a weird method, but regardess, 3 lines per game until its played once, then <playcount> is automatically added back in).

jdrassa

I decided to work on this some since we hadn't heard from @Zigurana in a while.

Code can be found here on GitHub:
https://github.com/jrassa/EmulationStation/tree/system-carousel

Here is a script module you can add to RetroPie-Setup/scriptmodules/supplementary/ to try installing it using RetroPie-Setup
https://gist.github.com/jrassa/b126ed86026fcadcdc380932d2e2e329

Here is a sample of what the theme xml would look like.

<feature supported="carousel">
  <view name="system">

    <carousel name="systemcarousel">
      <pos>0 0.42</pos> <!-- Currently only y value is used -->
      <size>1 0.2325</size> <!-- currently only height value is used -->
      <color>ffffffd8</color>
      <logoScale>1.5</logoScale>
      <logoSize>0.125 0.155</logoSize>
      <maxLogoCount>5</maxLogoCount>
    </carousel>

    <infobar name="infobar">
      <color>dddddd00</color>
      <fontColor>000000ff</fontColor>
      <fontPath></fontPath>
      <fontSize>0.035</fontSize>
    </infobar>

  </view>
</feature>

Changes:

Fixed defaults so that it more closely matches current behavior.
Implemented @fieldofcows feature idea for theme backward compatibility. I also implemented something similar directly on the view element. This won't help any here, but it should simplify backward compatibility if/when grid view is added.
Renamed systemcarousel element to carousel (for potential future reuse beyond the system view).
Split apart infobar and carousel into separate elements.
Switched height and ypos elements to size and pos. In current implementation width and xpos values will be ignored, but I wanted
to switch to these for forward compatability purposes.
Fixed the issue with right hand logo not appearing initially when scrolling.
Added a few additonal theme elements for forward compatibility purposes
- pos, size and origin on infobar
- origin on carousel

mattrixk

@jdrassa: I said this to @Zigurana when he first came out with this, and now I'm saying it to you:

Gir I Love You

With just a little glimpse of my latest theme, using the new carousel for the hell of it:
Indent Theme - Carousel

Zigurana

@jdrassa
Hey cool!
I've been away from the code for a while, to stave off a complete overload (more work than RetroPie related), but I just started picking this up again yesterday, so it's cool to see this ball is still rolling!

Would you mind to add your work as a PR to my branch, or if I make one for your branch, so we can pool idea's? I ve gone along the same lines as you have, so there will slight differences in implementation, but those are nice to compare as well.

jdrassa

@Zigurana PR appears to be complicated by the fact you forked from Aloshi and I forked off of the RetroPie fork. I tried to create a PR, but it also wanted to include all the other changes from the RetroPie fork. Not sure if I can have more then 1 fork of the same repository, I need to investigate.

Zigurana

@jdrassa. My branch is a bit out of date, but both eventually originate from the Aloshi one. Are you sure its not just the latest set of differences (video support took a lot of commits).
I can try and update the branch tomorrow, and see if I can create a PR. Not tonight though, need to go to the movies tonight. :-)

EctoOne

@jdrassa So does your branch also contain video preview and the WSOD fix from @fieldofcows ?
It's a little confusing with all the mods out there and that's why I refuse to put something like this on my Pi (I should really get another SD for testing purposes tho).

jdrassa

@Zigurana looks like you are right. I will submit a PR once you have updated your branch.

jdrassa

@EctoOne it does contain the video preview and WSOD fix. The end goal is to get these changes into RetroPie.

EctoOne

@jdrassa yes I know and I appreciate everything you and everyone else is doing to improve ES. I only meant that it was hard to keep track off which mod has which changes included. Since I've joined this community I think there has been at least 4 version around. Video, Grid, Carousel and the one with OSK and WiFi enhancement. So seeing that some of them are merged is great.
Another question, is there a way to get a build for Windows? Even though I'm personally not interested in Video Preview myself, I still want to figure out how to put it in my personal Theme. I have versions for video and carousel but, especially with your changes, it would be great to have a complete version for development on my PC first.

Zigurana

@jdrassa I've updated my branch, the following fixes are in:

element type systemcarousel is now called carousel, so the XML looks like:
<carousel name = "systemcarousel">
The allowed entries for these are:

	("carousel", makeMap(boost::assign::map_list_of
		("type", STRING)
		("size", NORMALIZED_PAIR)
		("pos", NORMALIZED_PAIR)
		("color", COLOR)
		("logoScale", FLOAT)
		("logoSize", NORMALIZED_PAIR)
		("maxLogoCount", FLOAT)));

these types correspond to the types that already existed for the other elements, taking two float values where appropriate, although currently only one is used for size and pos.

introduced new systemInfo node, of element type text, accepting the following entries:

	("text", makeMap(boost::assign::map_list_of
		("pos", NORMALIZED_PAIR)
		("size", NORMALIZED_PAIR)
		("text", STRING)
		("backgroundColor", COLOR)
		("fontPath", PATH)
		("fontSize", FLOAT)
		("color", COLOR)
		("alignment", STRING)
		("forceUppercase", BOOLEAN)
		("lineSpacing", FLOAT)
		("value", STRING)))

This was all already present, except for the background color one, allowing you to specify the color and opacity of the infobar color.

Check the repo here (yes, I made a typo in the repo-name X-P )

My next steps:

Move the carousel to a new component type, making it yet another implementation of the GuiComponent superclass.
vertical carousel types (needs adjustements of the input handler and help elements as well.

@jdrassa : I did not add the compatibility stuff yet, as I think its another functionality altogether, and it should be decided on first how we are going to pick that up. I.e. I am happy to merge it in, once it gets posted to master, but I am not introducing it here as part of this extension of ES.