Grid View EmulationStation Mod Ideas

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

mattrixk

@lilbud: That seems to be a different image to the one you've used in the screenshot above. That one had rounded corners and much thicker border than this one. (I'm not saying this one doesn't do the same thing, just that they look like different images to me).

lilbud

@mattrixk First, I redid it. Second, I got the outline working.

undefined

Third, I updated the Material theme to have this change.

herb_fargus

@lilbud Just so I understand: with the ninepatch thing and the selector we can define the selector border colour to be anything? I.e. we could make every system a diff selector colour to match the colour of that system?

jacobfk20

Another update before bed. (it's on my google drive above)
The grid's origin is now set to the top left of the first tile. I don't know if you guys will like the change, but I can revert it back easily.
gridtile_text <color> can now be animated.
"gridtile_text" <color>
"gridtile_text_selected" <color>

I also removed some dead code.

@mattrixk A storm just hit around here and took out my pc that I was using to build the x86 versions. ...so I can't provide an x86 version tonight. I'll let you know tomorrow when I get it back up and running.

@lilbud That looks pretty nice. I actually like the look of not centering the game title text. Is that weird that I like that?

jacobfk20

@herb_fargus Yes, you can make the gridtile background be any color. I haven't tried per system, but you should be able to.

lilbud

@herb_fargus Yes we can, I changed the selector to white, so all it takes is a color tag in the systems theme.xml

lilbud

@mattrixk Hermine? So powers out?

jacobfk20

Also here is a quick dirty pic I took of what I've done with the current theme options. Sorry from my phone but the PC I was running ES on got slightly killed by a storm just now.

mattrixk

@lilbud: That's looking really good.

@jacobfk20: No worries mate, take your time. I hope your computer and everything else is okay. I should probably spend some time with the missus tonight anyway.

Also, it looks from that pic that you've gotten the gridtile_margin sorted too.

jacobfk20

@mattrixk There still is some issue. I had to do -0.05 and -0.08 or something. It'll hopefully be fully fixed tomorrow.

lilbud

@jacobfk20 Upload the theme.xml

Is everyone getting hit by this storm?

mattrixk

@lilbud said in Grid View EmulationStation Mod Ideas:

Is everyone getting hit by this storm?

I'm not :D , but then again, I'm in Australia, so...

jacobfk20

@lilbud Sure I can upload it. I'll do it sometime this evening.

@mattrixk My linux box is back up and running. Just reinstalled xubuntu and rebuilt everything with the retropie setup script. I'll be pushing an x86 build in an hour or two.

Edit: Added x86 build to drive. It also has a slight modification to hopefully fix margin between tiles.

jacobfk20

Pretty minor update tonight.

Just changed how margin works between tiles. (margin of 0 0 will put tiles right next to each other)
Tiles load slightly faster. (this is a simple number change, I slowly am able to increase this speed as things get more stable)
The Dynamic Loader should not leave you "stranded." As in, if the user is hovering over an unloaded tile, it'll notice it's unloaded and force an update.

Both (rpi & x86) have already been pushed to my google drive.

@lilbud I also put my theme.xml in that folder as well. I had n64 set to gridsize 6p.

herb_fargus

@jacobfk20 I was talking with another dev about the whole gridview thing: some exerpts our conversation:

in my opinion a good design would e to support custom grid resolutions (eg. fixed 5x3, or fixed 2 rows and "fill as much as possible horizontally" with some padding), and the box arts would then scale accordingly

in the code default and grid mode is a dcompletely different class, with their own variables and stuff
ideally, there'd be one view class, which'd just apply whatever theme you throw at it

I'm not super familiar with the backend and everyone has their own way of implementing things and I like what you've come up with thus far. I liked the mockup of what @lilbud posted where there is the infobox with metadata per game kinda like kodi. In terms of the code, The metadata is already there for the detailed view so in terms of the view class for the grid view I think as you said it should be simple enough to include those in theming like they are for the detailed theme and then people can set up their themes accordingly (e.g. with the material theme I could make the left side system panel a right side metadata panel like kodi)

I'm going to have to play around some more with theming with all your changes and see what I can come up with.