Grid View EmulationStation Mod Ideas

mattrixk

Hello to @jacobfk20, any Theme Makers (@Rookervik , @lilbud, @herb_fargus) and anyone else interested in the new EmulationStation Grid View Mod.

I've been playing with the Grid View for a couple of days now, and I've made a list of things I think will help people to style the Grid View, and also some ideas and requests to help make it more friendly to Theme Makers.

First, I should point out that I don't know how the backend works, so I don't know if the things I'm going to put forward are easy or hard to do, but I won't know if I never ask, so here it goes...

I'll start with each of the new Grid View Elements (listed here), one at a time, then move on to other additional ideas/requests.

gridtile

<image name="gridtile">
    <size> (sets size of gridtile and overrides default size based on boxart)
    <color> (not finished, but can be used)
</image>

<size>:
This controls the size of the basic (unselected) grid tiles, but I can't get <size> to work properly. Either it doesn't change at all, or it squishes the aspect ratio. If you look at <size> in the Image section of the ES Theme docs, it says if you leave one value at 0, then it will maintain ratio. This doesn't seem to do that.
<color>:
This doesn't do anything yet (at least not that I can see). Will we be able to use this to change the opacity of the unselected tiles? I'm not a big fan of the opacity, it makes the whole screen look washed out when only one item is bright and the rest are dull. I would prefer some other way to point out the selected tile (ideas on this are below).

gridtile_selected

// Following animates (tweens) to this when selected
<image name="gridtile_selected">  
    <size> (will add to default size if gridtile size is left unasigned)
    <color> 
</image>

<size>:
The property does work to change the size, but it still doesn't maintain aspect ratio of the art. If you choose one of the values as 0, the image disappears. You could play with the numbers, but you would have to do that for at least 3 different ones (for portrait, landscape and square), and not all of those are the same dimensions (eg: NES and MegaDrive are both portrait, but different dimensions).
<color>:
This does sort of work... sort of.
- If I give the selected tile an overlay colour, all the unselected tiles immediately lose their opacity.
- I can overlay any colour over the selected tile, at any opacity, but it just looks a odd.
- If I give the selected tile a white overlay to make it transparent with <color>ffffff99</color>, it then flashes a bright blue colour when you change tiles. It doesn't matter what colour I make it, it still flashes a bright colour. I think it comes from the overlay filter, but I don't know enough about it.

gridtile_background

// Gridtile's background
<ninepatch name="gridtile_background">
    <path> (changes gridtile's background)
</ninepatch>

This works fine. It would be nice if we could change the <color> property, but I understand that you don't want to get into that yet.
I would love to have a "gridtile_selected_background" so we could have a different background image for the selected tile. This way we could highlight the selected tile with a different border/background instead of using opacity or image size.

gridtile_text

// GameTitle in gridtile.                          
<text name="gridtile_text">
    <ALL>
</text>

<color>: I can change the colour of the text, but not the opacity. Selected tiles are still fully opaque, while unselected tiles still have a slight transparency (even when "gridtile" has no transparency set). I was hoping to use the opacity to potentially hide the game titles all together. Maybe there can be some kind of option to remove game titles from under the art, so the Grid View only shows the images.
<alignment>, <fontPath>, <fontSize> and <forceUppercase> all work.
<lineSpacing> appears to do nothing, but as there is only one line of game title, that isn't surprising.
<pos> and <size> do nothing. I was hoping we could use these to potentially give the title a little padding away from the art.
I'd like to be able to change the properties of the selected tile text separately to the unselected, maybe with a "gridtile_selected_text" tag.

md_grid_margin

<container name="md_grid_margin">
    <size> (sets size width and height of margin between tiles)
</container>

I don't really understand how the <size> is being calculated. If you set <size>0 0</size> I would have expected the images to be touching each other, but they aren't.
- if you remove the "gridtile_background" then the images are between 1.5% and 2% apart in width.
- if you use the default "gridtile_background", then the background images actually overlap each other by almost a full percent.
Setting <size>0.05 0.05</size> should put the tiles 5% of the screen width apart and 5% of the screen height apart, but it only puts them 4.5% width, and 3.5% height (using default "gridtile_background" image).

md_title

// Current Game selected.
<text name="md_title">
    <ALL TEXT PROPERTIES>
</text>

<color>, <fontPath>, <fontSize>, <alignment>, <forceUppercase> <pos>, <size>, <lineSpacing> all work.
A small thing: when you change to grid view (or swap themes while in grid view) the "md_title" doesn't display until you change which game is highlighted.

md_grid

// The container for the whole grid (will become a container in the future)
<text name="md_grid">
    <size>
    <pos>
</text>

This doesn't really seem to work right.
When I set <pos>0 0</pos> I would expect the first tile to be in the top left of the screen, but it starts at about w=8%, h=11%. If I then set <size>1 1</size>, then it stays at w=8%, but the whole thing moves up to h=7%. It's kind of like it's taking the position from the bottom of <image name="logo">, but I can't really tell.
If "md_grid" had the <color> Property, then we could use it to tell exactly where the container was.
I think the <size> property works as it's supposed to, but without the <color> property, it's impossible to tell for sure.
It also doesn't seem to really take "md_grid_margin" into account, but again, that is really hard to test.

Okay, so that's it for the existing stuff, now on to requests:

The Ninepatch Element

This is a big one for me. I love that you have ninepatch working for "gridtile_background", but I would also like to be able to use a generic ninepatch Element. It would be extremely flexible.

<ninepatch name="metadata_background" extra="true"> could be used as a background for gamelists, game images, descriptions etc. You could have a single 48x48 pixel image with (for example) a border and rounded corners, and be able to use that same image for every element, instead of having to make a large individual image for each element.

My ideal <ninepatch> Element would have almost all the same properties as an <image> Element:

<ninepatch>
	<pos>
	<size>
	<origin>
	<path>
	<color>
</ninepatch>

It won't need <tile>, and I can't think of how it would need <maxSize>.

GridView Metadata

I would like to be able to add more metadata to the Grid View.

Eg: Have the grid tiles take up 2/3 of the space, but leave the other 1/3 for the System Logo, Game Title, Description and whatever other metadata you want to display (genre, number of players, developer, etc).

Kind of like this:

gridview idea

New GridTile "Selected" Elements

I mentioned it above, but I thought I'd put it here too. We have "gridtile" and "gridtile_selected", which allows us to change the selected and unselected tile images independently. I would also like this option for both "gridtile_background" and "gridtile_text" by adding the "gridtile_selected_background" and "gridtile_selected_text" Elements. This will give us a lot flexibility when it comes to how the selected tile is displayed. Instead of just changing the opacity of the grid tile, we could:

Have a different coloured background/border.
Hide the backgrounds and change the colour of the selected game title.
Hide the backgrounds and the game titles, and only display the selected game title.

GridTile Movement

This is bit of a strange one and kind of hard to explain... Imagine you have 18 tiles, and your grid is 5x3. This means you will have 4 rows of tiles (5, 5, 5, 3). Currently, if you start at the first tile and go down to the 2nd row or the 3rd row, nothing moves (except which tile is selected). However, if you then go down to the 4th row, the whole thing jumps up so the 4th row is at the top, and the first 3 rows are off the top of the screen. I find this very jarring.

Would it possible to make it so when you move from the 3rd row to the 4th, it just moves all the rows up line, so instead of showing only row 4, it shows rows 2, 3 and 4?

It's the difference between moving down a single line, and turning the page completely.

Hmm... I've just gone back and tested it, and it seems like it's now behaving like I want it to. Odd. Maybe it has something to do with "md_grid" or "md_grid_margin".

Not Just GridView Related

Create a property called <minSize>. It works almost the same as <maxSize>, except while <maxSize> grows an image until the biggest side hits the size limit, <minSize> would grow the image until the smallest side hits the size limit. eg: Say you want use a screenshot to create a background image for a System View:
- If you used <size>1 1</size> any image that isn't the exact aspect ratio would stretch, either on the X or Y axis.
- If you used <maxSize>1 1</maxSize> with a portrait image or a landscape image without the exact aspect ratio, it would grow until it hit the top and bottom, then leave empty space to the left and right.
- However, if you used <minSize>1 1</minSize> then the image would fill the screen, while the overlap is cut off, either on the top/bottom, or the left/right.
- If I'm not explaining this well, you could liken it to background-position: contain; and background-position: cover; in CSS.
In the Detailed View, the metadata has some sort of hierarchy placed on it so that nothing can go over the top of it. If possible, I'd like to have that removed so that any "extra" element can cover any metadata (md_) element. Eg: you could use the <image name="md_image"> as a full width background image (in conjunction with <minSize>), and then everything else (logos, description, gamelist, etc) can go over the top of it.

Anyway, that's me done. Thoughts, feelings, suggestions?

Once again @jacobfk20, you rock!

jacobfk20

Very helpful list to go by, especially since I'm not a designer. I've noticed some of the things you have mentioned already and have already addressed them in the current build. Some I haven't fixed yet though (such as tile padding; It confuses me too... though I think it may have to do with the component grid that holds the image and game title)

Fixes or changes in current build:
gridtile <color> should now change opacity. It will not change the color. (I've even made a function to extract R, G, B, A from the color int and tween each color individually and it didn't work.)
gridtile_selected<color> will animate to opacity.
gridtile_text <pos> now works and is anchored to its cell.
<ninepatch> now has <color> but is only usable within gridview.

Just about everything you have listed I will most likely add. Nothing seems like it will take a lot to do except for adding minSize. That may be out of the scope of the Gridview branch.

I attempt to push a commit once a day with changes and updates to this. I will start posting changes here when I do commit.

Sorry I'm not much for words, but keep up the good work of documenting and testing :)

lilbud

What the hell is ninepatch?

Zigurana

@lilbud :
I believe its a way to create a stretchable box (with fancy borders and whatnot) while keeping the corners intact. You divide your area into nine parts (3x3), and stretch only the middle parts.
At least, that's what I gather from the code, never used it myself though.

jacobfk20

You are correct @Zigurana .
It stretches the entire middle's width and height.
stretches left and right side's height.
stretches bottom and top side's width.

lilbud

This is what I was suggesting to Herb over IRC a week or two ago

undefined

jacobfk20

@lilbud Now that I think about it and take a quick look around... I think adding in the metadata would be fairly easy. Would have to test it out sometime soon. Though Gridview is already, in some cases, pushing the pi pretty hard.

lilbud

@jacobfk20 I tried doing that, some logos, Like the Game boy Advance logo seem to be too wide for the "lefter"

lilbud

@jacobfk20 I found your latest test build, Is there a way to remove the background from the grid items?And make the game title go to another line if it is too long?

jacobfk20

Newest Build:
Fixes color tweening!
added <color> option to "gridtile_background" and "gridtile_background_selected"

Also I forgot to mention the previous build added the option to change the text container's height. (this will also change the size of the background.)
It can be changed with <container name="gridtile_textRow"> and "gridtile_textRow_selected"

You can get the latest gridview build on my google drive.
There is an issue with some tiles not drawing the background fully to the bottom of the tile. I am aware of this

And lastly, this project's Github.
If you can, please leave issues there.

jacobfk20

@lilbud. I just updated a couple minutes ago. So you may not have the newest with this option, but you can do it with:
<ninepatch name="gridtile_background"> <color>
and just set alpha all the way to 00.
You can also have it only show on the current game you have selected with:
<ninepatch name="gridtile_background_selected"> <color>

lilbud

@jacobfk20 Do you know of a way to make the background an outline, like kodi has?

undefined

jacobfk20

@lilbud In the current situation the only thing I can think of is changing the background color to blue 0000FFFF on ninepatch "gridtile_background_selected" and set it to 00000000 on ninepatch "gridtile_backgound" You can change the <size> of container "gridtile_textRow" to something like 0 0. The only problem is game title text. It is static and isn't animated yet. (as in it has no 'selected' frame. you can still set size, pos, spacing, etc.)

You can also try changing the padding of ninepatch "gridtile_background". (this goes outward from image I think though.)

lilbud

@jacobfk20 This is what I have so far.

undefined

jacobfk20

@lilbud Is that a mockup?

lilbud

@jacobfk20 Running in ES, like you said earlier. The bottom of the icon doesn't show

mattrixk

@jacobfk20 I'm glad to be of some help. What is the best way to upgrade to the newest version of the code (keeping in mind I'm running RetroPie on a virtual Ubuntu machine)? I can't wait to try out the new "gridtile_background_selected" element.

@lilbud said: Is there a way to remove the background from the grid items?

Another option is to add an empty <path></path> property to the "gridtile_background" element.

jacobfk20

@lilbud oh okay, the image you're using may not work well with the ninepatch component. It's kinda weird to figure it out. Can you upload a copy of the image you're setting as the background?

@mattrixk You can download the latest source from the github branch and copy and paste es-app and es-core into where you previously built the last source. Only overwrite files that are new. open terminal, cd to the directory, and hit type "make"

I'll start hosting a x86 build too.

Edit: I've added an x86 build.

mattrixk

@jacobfk20: Thanks mate, I'll give that a go when I get home.

@lilbud: The 9patch image needs to be 48px X 48px, so it splits up into 9 16px squares. I've made a little image to try and explain it:

ninepatch

The 1st image is the 48x48 image that gets used.
The 2nd has been split up to show the different sections.
The 3rd just numbers the sections.
The 4th shows how it gets used. In this example it's an 80x80 square, but it would work exactly the same for any size (eg: 423x 92 or 67x854), it really doesn't matter.

The main things to note are:

The corners (1, 3, 7 and 9) will always stay at 16x16.
Top and Bottom (2 and 8) will always stretch along the X-axis.
Left and Right (4 and 6) will always stretch along the Y-axis.
The middle (5) will always stretch both X and Y to fill in the middle.
When a section stretches, any pattern will stretch with it and look wrong/weird (as you can see in the 4th image above), so stick to flat colours.
Gradients can be used because the gradient stretches cleanly (where the sections meet will always be the same colour, no matter how much it stretches):

ninepatch3

The same should also work with opacity (although I haven't tested this), so you could have the image at 10% opacity at the top and 80% at the bottom and it would work fine.
You can also use gradients on the border, maybe starting at light at the top and making it darker at the bottom.

Ninepatch gives you huge flexibility in what the "gridtile_background" can look like, that's why I keep harping on about a generic ninepatch element for basic background usage (for behind gamelist and metadata etc). Can you image being able to use <ninepatch> with the same properties as <image>anywhere, on any view?

lilbud

@jacobfk20 Here is the image