Input needed: ES theming improvements

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.

Zigurana

~~If there is an interest, I could provide windows builds for this as well, I just need to figure out all the dependencies, and what I need to package to make it work...~~
Can someone try if this runs on a normal windows pc?

DOWNLOAD

And for clarity, the common system part of my theme now has this:

	<view name="system">
 
        <carousel name = "systemcarousel">
          <pos>0 0.8</pos>
          <size>1 0.2 </size>
          <color>000000c0</color>
          <logoScale>1.5</logoScale>
          <logoSize>0.14 0.15</logoSize>
          <maxLogoCount>5</maxLogoCount>
        </carousel>
        
        <text name = "systemInfo">
          <pos>0.6 0.65</pos>
          <size>0.4 0.15 </size>
          <backgroundColor>90909088</backgroundColor>
          <fontPath>./art/font.ttf</fontPath>
          <fontSize>0.033</fontSize>
          <color>ffff55ff</color>
        </text>
       
    	<helpsystem name="help">
			<pos>0.012 0.960</pos>
			<textColor>ffffff</textColor>
			<iconColor>ffffff</iconColor>
			<fontPath>./art/font.ttf</fontPath>
			<fontSize>0.033</fontSize>
		</helpsystem>

	</view>

which results in:
alt text

Nismo

@Zigurana Very nice work, I'm glad that you try to keep ES windows support.

Would be very nice to have a windows build for testing, unfortunately I don't have to much time now for testing...

mattrixk

@Zigurana I'll give the windows build a try on my lunch break (about 3 hours). I like that you can set the width for the infobar. Am I correct in assuming the carousel is still only 100% width, so you can only set its height and ypos?

EctoOne

@Zigurana Did some small testing on the Windows version and so far it works. At least the carousel part. One thing i noticed is that on some systems i get a different background color behind the description field even though i've nothing set there. On the most systems it is normal so it might be a windows thing.

Just did another test with the Carbon theme and there are weird boxes all over in system view. But it's already 3a.m here and I'm getting tired. Will test more later.

mattrixk

@Zigurana It's looking good. I used:

<carousel name="systemcarousel">
  <pos>0 0.677</pos>
  <size>1 0.260</size>
  <color>FFFFFF00</color>
  <logoScale>1</logoScale>
  <logoSize>0.200 0.100</logoSize>
  <maxLogoCount>5</maxLogoCount>
</carousel>

<text name="systemInfo">
  <pos>0.010 0.930</pos>
  <size>0.980 0.050</size>
  <backgroundColor>FFFFFF00</backgroundColor>
  <color>AAAAAA</color>
  <fontPath>./_inc/font/Roboto-Light.ttf</fontPath>
  <fontSize>0.025</fontSize>
</text>

To get:
Imgur

I have the logos set to width 20% each, with no logoScale. The NES logo looks smaller because it is taller than the other logos and not as long, so it's hit the height limit before hitting the width limit.

You might be able to see the overlap of the logos on the left and right of the image. This is where being able to set x-width would be awesome, but I can get around it by setting the width of the individual logos to something smaller.

Also it still has the pop-in of the right most logo when you cycle left.

I did notice some weirdness in the menus though:

green menu heading
Imgur

brown background behind menu item
Imgur

green menu heading | red behind menu items
Imgur

Strange colours showing up in the headers and over some of the items. It only seemed to happen on the items that you can choose left or right, not the on/off items. They also seem to change width as you press left/right.

It came and went. Sometimes none were coloured, other times 2 or 3 were coloured. I only noticed the coloured items in the UI Settings menu, but the Main Menu title was always that dull green colour.

Zigurana

@mattrixk, you are more or less correct. You can set the width to less than 100% but the logo's will likely still slide beyond it. Do you think its usefull to have a carousel that takes up less than a full screen width/height?

Zigurana

@mattrixk hmm, that means that my mechanism for checking if the bgcolor has been set is bugging out. I will have another look tonight.

mattrixk

@Zigurana said in Input needed: ES theming improvements:

Do you think its usefull to have a carousel that takes up less than a full screen width/height?

I think it would be a really good thing to have if it's not too hard to implement, and could open up a lot of new ideas for the design of the System View. You could set it to take up only half the screen and leave the rest for other things (system info, images, etc).

I think it would also be useful for when someone gets Vertical Carousel working, we could have a strip down one side that's only 10-20% wide, but 80-100% high.

EctoOne

Any chance that the <color> tag is for the actual system image (similar to how <image name="logo"> works) and <backgroundColor> for the carousel is added?

mattrixk

I'm kinda with @EctoOne on this one. I was trying to colour the system logo (all logos are one colour, and then use <color> to change their colour and opacity. It didn't work and I was sad :(