Grid View Theme Ideas

[herb_fargus]

I've been thinking a bit about @jacobfk20's swanky gridview test build and have been playing with ideas of how to theme grid views. I figured this merited its own thread as the original is getting far too large to keep track of.

As a preface, its still experimental and still in development but looks very promising.

Here are some examples

Carbon

Material with Boxart

Material with Screenshots

Material with vertical Logo

Placing the game title at the bottom required removing the help text. Also its possible in the future the game title will be changed to being under each game.

The thing that's cool about the grid view is you can have your original theme work just fine and then its relatively simple to incorporate grid view (so far @lilbud is the only one who has his material theme updated with grid view compatibility.)

Anyways I'm open to new ideas and suggestions on how to best theme a grid with ES

[lilbud]

@herb_fargus I like that vertical logo on my theme. Looks nice

[monstermadeofman]

Agreed vertical theme looks awesome as hell. Do you think this i something that will be incorporated as standard in later updates?

[herb_fargus]

@monstermadeofman I'm hoping the gridview will be incorporated into the retropie fork of ES after its had more testing and is deemed to be stable enough to include

@lilbud do you want me to share the theme with you? (if you're on IRC we can collaborate on something together if you like)

[lilbud]

@herb_fargus You can share it with me over IRC my name will be lilbud

[jacobfk20]

I really like what you guys are able to do with it even though you still have limited theme controls. I have plans to make the tiles themselves be themeable but I'm still mostly focused on getting it to run stable and smooth. Keep up the good work :)

[mattrixk]

@herb_fargus It's looking really good, but I don't really like the look of having the unselected roms being grey. It just looks kind of washed out, not the big colourful wall it should be.

How is the selected rom differentiated from the unselected ones in the code? Do the unselected ones just have their opacity set lower? Would there be another way to highlight the selected rom, maybe a border or an underline or something?

I really like the look of having the logo down the side (and I'm sad I didn't think of it first), but how did you get the vertical logo? Were you able to somehow rotate the main logo image, or is it just a secondary image?

I haven't had the chance to give the new build a go, so I don't know what it is capable of yet.

[herb_fargus]

@mattrixk part of that is just my laptop is a bit dim, its more bright in implementation but yeah essentially the selected rom lights up more and the rest have a transparency of sorts on them. It also grows a tad when you select it so you know which game you're on.

As far as the rotated logo, I had to rotate it and save it as another svg as I dont believe ES has a rotation function.

[mattrixk]

@herb_fargus Okay, cool. I figured it was just a different image (but adding a rotate feature would be cool). Hopefully I'll have a chance to try the Grid build this weekend. I have a spare SD card, so I'll just set up a fresh install so I don't fudge my current setup.

[Ekstreme]

Looks great. A view like this would certainly encourage people to not just dump full rom sets onto their PI, but be more deliberate and selective to avoid chaos

[mattrixk]

@Ekstreme said in Grid View Theme Ideas:

A view like this would certainly encourage people to not just dump full rom sets onto their PI, but be more deliberate and selective to avoid chaos

Heh, I tried that... still ended up with a few hundred SNES roms.

[deathr0w]

This looks wonderful can't wait to fire it up on my Pie it's even making me hungry looking at it :)

[mattrixk]

@herb_fargus
Are you able to change how many rows and columns of games are shown? I notice in your screenshots that Carbon has a 5x3 grid, but Material has a 5x4 grid.

Landscape covers and screenshots are fine 5 across, but portrait covers could maybe go 6 across. Also, are you able to change the size of the images with the <size> property like a normal image?

[herb_fargus]

@mattrixk the grid layout is defined in the selector. You essentially define the area the grid will be in in the theme and then in the emulationstation menu you can change the scales roughly so diff numbers of images show up depending on the scale you choose

[lilbud]

Vertical view in ES. This will be the default grid view

[herb_fargus]

@lilbud heres my attempt at it:

I do like the simplicity of your version. did you do away with titles altogether or is the first one just not loaded yet?

[lilbud]

@herb_fargus I merged your pull request. The first one is not loaded yet.

[mattrixk]

@herb_fargus, @lilbud Those both look great. I can't wait to get my virtual machine running so I can play with Grid View too.

[lilbud]

@herb_fargus I did have an idea. Put all of the metadata in the sidebar. I tried it and soon realized some logos would be too big to fit.

[herb_fargus]

@lilbud logos like publishers? I have another idea that I'm trying out, just getting a screenshot ready to post