Grid tile content (image, text, or more ...)

[A12C4]

Introduction

Dear RetroPie users, some may already know me under the nickname of "Koerty", some never heard of me because I'm not that much active on the forum, as I work mostly in the darkness of EmulationStation's github repository.

For those who don't know, I completely disassembled @jacobfk20 grid view into smaller pieces, that I'm modifying, cleaning, optimizing ... and when I'm done I ship them part by part, piece by piece to RetroPie's team so they can carefully review each part and ask for changes if needed (btw, thanks to @jdrassa , @BuZz , @Hex and all the other reviewers for their dedication).

The final result may change slightly from Jacobfck20's grid view but it will keep the same spirit.

Today if I write to you on the forum, it is because I want more input, especially from theme makers, but users and developers opinions are welcome as well.

Today's topic is :

Should we include the game's name inside the grid tiles ?

For those who still don't see what I'm talking about because of my garbage tier english, here is a screenshot, just remember some parts of the grid view are still in early development stage, please don't mind.

I had in mind a first solution, which consist of allowing the theme maker to have 3 options when creating his theme, regarding to the game names :

• Always hide : This option hide all the games name in the grid, it is still part of the metadata so the selected game name can still be displayed in big on top of the screen for example
• Always show : Always show the game name in the grid
• Show only selected : Show only the selected game's name, hide the others

I liked this option because it give more customizations option to the theme maker, but it may be a bit overkill.

Here are the pros and cons I thought about displaying the game name in the grid.
Pros :

• If the user miss too much game images, it can help him a lot more when scrolling through the grid, than just displaying the selected game name on top of the screen. For example if an user just added many games to a specific system, should we tell him "hey, go grab an internet connection and scrap their metadata before you use your EmulationStation ever again, m'okay ?"

Cons :

• The text length depend of the size of the tile, so it will be cut most of the time as you can see on the screenshot above
• The selected game name can also be displayed in big on top of the screen (or wherever you want, it's a metadata like the others), so in most use cases it will be enough
• Small point, not to take too much into consideration, but still, more options = more code = more possibles sources of bugs = harder to maintain

As you can see, there is more cons than pros, so let's take a look at other solutions.

Other solutions

I see 2 others easy solutions :

• Show only the game name of games which doesn't have an image, display it on top of a default image.
  This doesn't solve all our problems, as the text length still depend of the size of the tile, or even smaller if we apply some padding to try to fit in the default image, like this for example :
  
• Don't include the game name inside the grid : this could be another solution, just don't show the game name inside the grid, as many people already suggested me.

The last one is a reasonable solution, and currently what we may aim for, but if I'm still not convinced, it is because I had something else in mind. Something that would push the grid and EmulationStation to the next level, and which have never been seen in the other implementations. Note that I will need some time to properly implement that, and I need to focus first to release a first implementation of the grid view, similar to the one Jacobfk20 achieved, so it won't happen today, nor tomorrow.

Highly customizable grid tile

In a perfect world, the theme maker should be able to put whatever he want inside his grid tile, whatever it is the game name, number of player, last time played, publisher, ...

This would allow theme maker to push the grid to another level thanks to way more customization options, and allow them to create cool looking themes like on this screenshot took from another frontend :

This would take me some time to design and implement, but if someone can make a good use of it and create awesome themes with this, then I'm willing to put the effort to do it.

Conclusion

Currently, my goal is to ship a first, basic but stable and mature grid view, without game name, but this feature will come back later with the highly customizable grid tile, if I get enough positive feedback for it.

Thanks for reading all of this, I hope I wasn't too boring, I tried to gather all the useful informations while staying succinct.

Tell me more about what you think, if I missed something, if you would like to see that features or not, explain me why, etc ... as I said in introduction, this message aim more for theme makers, but all opinions are welcome.

[lilbud]

https://github.com/lilbud/es-theme-moderntv

If you need another theme to test with. I have an old custom theme you can use.

[Shadowron]

I really like the idea of a grid view. So first of all, thanks for all the effort in working towards this!

I also like the idea of having a title for each rom, because not all images are of good quality, not to mention weird aspect ratio's. Another thing that bothers me is that some roms have different titles (for example: Teenage Mutant Ninja Turtles and Teenage Mutant Hero Turtles). Most of the scrapped images I got use the American names, instead of the European. In the given example it's not that big of a problem, but with titles like River City Ransom/Street Gangs it gets more problematic. And i personal like to use the European names.

For the title issue I can think of two other solutions. The first one is a moving title. You select a rom and the title moves to the right and back (saw some themes, if not all using this). Another more time consuming, bit dirty and not as easy solution would be, to press a button to give a pop-up box with the title.

[herb_fargus]

I personally use screenshots rather than box art as that way I can guarantee a consistent aspect ratio (usually) so I don't particularly have an opinion on the titles. Though I'm excited to try it out on @chicuelo theme.

[chicuelo]

Another option is to reduce the amount of columns of each row (3 instead of 4) and make them look with a different aspect ratio, so you can get a better image visual and take advantage of that space to use a bigger game name, this is an example I have in mind right now, you also could use the game name on the right in a bigger size.

Tip: try to use a good performance font, could it be a condensed one, so you get more characters than other fonts on the same space

[A12C4]

@chicuelo Thank you for your input but I don't think what you suggested can work.

Another option is to reduce the amount of columns of each row (3 instead of 4) and make them look with a different aspect ratio, so you can get a better image visual and take advantage of that space to use a bigger game name

The problem is I can't assume the image aspect ratio like you did. The user may use screenshots or box art which have bigger height than width, in that case that would leave really small amount of space for the text (as the background size and the text size depend on the size of the image)

this is an example I have in mind right now, you also could use the game name on the right in a bigger size.

If you talk about displaying the selected game name in big somewhere like on top of the screen, this is already planned.

Tip: try to use a good performance font, could it be a condensed one, so you get more characters than other fonts on the same space

This is an interesting tip, I already thought about reducing the text size or make it slide when selected, but I didn't thought about changing the font.

Like changing the text size, changing the font is like half a solution, it guarantee it will work in more cases, but can't guarantee is work in all cases.

PS : I hope I doesn't sound too mean in my message, as english isn't my native language. Thank again for your input

[A12C4]

@lilbud Thanks I added it to my list, I will post some screenshots while using it later on but for now the theming syntax is too limited, it will just look like my screenshot of your Material theme with a different background image.

[A12C4]

@shadowron What do you mean by "saw some themes using this" ? The only scrolling text in EmulationStation is the game description as far as I know.

[EctoOne]

@a12c4 said in The Grid View need your opinion:

@shadowron What do you mean by "saw some themes using this" ? The only scrolling text in EmulationStation is the game description as far as I know.

I believe he's referring the scrolling names in the gamelist when they are to long for the set width.

Anyway on to the input, or some questions first:

• In the end will we get only one default solution or are we able to specify the look in the theme? Maybe with some tag like <tile_name>hidden|top|below|noimage</tile_name>.

• How is scrolling handled? I assume if we have more games then tiles, we can only scroll up/down to see the previous/next row. I could see some possibilities if we could scroll horizontally by columns. I'm thinking of having a grid with 3 columns where the left/right one are partially overlapped by some image to create some sort of preview. But now that i think of it, it would be probably a problem because the grid won't center on the selected tile, so that the selected tile might also be hidden when it's in the left/right column.

• Will grid view also support videos? I mean not just as an extra element like it is now, but also in the grid itself, like have a running video in the active tile. Side question: Are we able to use <md_marquee> as element in grid view? I still kinda hate it that it is exclusively bound to video view and not available in detailed view.

[herb_fargus]

@ectoone my personal opinion on points 2 and 3:

I personally think the grid should just function in rows from left to right top to bottom, not an infinite left to right loop as I feel it's a counterintuitive interface unless maybe it's like one of those book type ones like on Apple music or whatever it is, might look good on a handheld (probably better implemented on pegasus tbh). Also since you'll have multiple games per row it should be faster just by virtue of more visual real estate though. I believe the shoulder button function was discussed here

As far as videos I personally think that would just be seizure inducing if they all had videos running and probably taxing on something like the pie anyhow at that rate. I also don't care for videos either so even just on the active tile isn't my taste. So. There's that. I don't do the code, but just my personal opinion on the matter.

[lilbud]

How Navigation should work

[Clyde]

@a12c4 Foremost, great project. A good grid view may me the thing I miss most in Emulation Station.

Concerning the font size, please keep in mind that many people use Retropie with small screen resolutions. The font should remain readable on those.

edit: I second @EctoOne in the question of videos, if only in the selected frame to avoid the possible overload to the system and the players' senses that @herb_fargus mentioned. (Though overall videos could be an option for less sensitive people with bigger systems.)

[A12C4]

@herb_fargus Yes it scroll from top to bottom, if you hit the right side it just bring you to the leftest tile of the next row, if you hit the left side it bring you to the rightest tile of the previous row.

But I was actually thinking to give the possibility to theme makers to make the grid scroll horizontally, that would allow theme makers to do some cool looking one row themes like the snes mini theme.

Definitely not my priority at the moment, but the question is still open !

[Shadowron]

@ectoone said in The Grid View need your opinion:

@a12c4 said in The Grid View need your opinion:

@shadowron What do you mean by "saw some themes using this" ? The only scrolling text in EmulationStation is the game description as far as I know.

I believe he's referring the scrolling names in the gamelist when they are to long for the set width.

This, exactly.

[A12C4]

@ectoone Oh yes my bad forgot it also happened in the basic and detailed list view in the text list. About your questions :

• My plan is detailed in my original message : in the first version of the grid view distributed publicly, the game name will not be part of the grid (the ones inside the grid, you can still display the selected game name in big on top of the screen). In a second time, I want to see what theme makers/users want to do with their grid, if they just want the game name I will reintroduce it, if they want to customize more the grid I will go for the "highly customizable grid tile" talked about at the end of my first message, if they don't care I will just keep the image (atm I got a lot of feedback for the first option, but none for the second one).
• I partially answered that in my answer right above. No that wont work, because yes the left and right tiles will be partially hidden.
• Videos aren't supported. At all. The video preview of the selected game may be added later on the road. But displaying the videos directly in the grid, I'm not so confident about it.

[EctoOne]

Ok, my bad then. I thought this was already about customizable grids.

But yeah, i would prefer no title in the grid at all and go with the "go grab some images first". But only if <md_name>is added at the same time, so that I can place the game name wherever I want. If it's not added, I would probably say that I want the name either at the top or bottom of the grid, not inside the tiles.

And yes, i had horizontal scrolling in mind for a 1 row navigation myself. I believe @jdrassa was working on making the carousel working as element in gamelist view but sadly this wasn't mentioned in the last time.

[A12C4]

So, nobody is interested by the highly customizable grid tile so far ?

I love this idea as it could give the theme makers way more opportunities to create good looking grid views, like the snes mini theme do. But if nobody, or nearly nobody is interested, it's not worth the time developing and maintaining this functionality.

[EctoOne]

@a12c4 well of course I'm interested in a more customizable grid view, that's why I asked if we even have options to try different things. On the other hand, I personally have to see/test grid view first so that I can say if I'm interested or not.
I'm not sure if I would use a huge grid in my personal theme but a one line grid seems like something I would use.

Speaking of customizations, I noticed that you removed md_image from the metadata tags for grid view (at least that's how I understood the pr on github). I wonder if it would be possible (later) to define in the theme which image should be used for the grid. Something like <imagetype=image|marquee|thumbnail>, in that case it would make sense if we had md_image available in grid view.

[A12C4]

@ectoone I removed the md_image metadata because it made no sens in a grid view to display the exact same image that is already in the grid on the side of the screen with other metadata, as a "md_name" metadata field wouldn't make sens in the detailed view, as you are already using the game name to choose the game you want.

But about image and thumbnail, I must admit I don't know much about it, I assumed the thumbnail was just a smaller version of the image, like it is usually. Until now I just scrapped my game images using ES scrapper and nothing else. Is customizing the images something common ? How do you do it ? What tool, software is the most commonly used ?

For the video there is nothing planned right now, as most of the video related stuff is already and only usable in the video view, I would need to duplicate a lot of code with current implementation. We would need to first refactor all the code related to game views, to create one, unique view, where the theme maker would choose one way for the user to choose its game (either the text list or the grid), and then add all the extra stuff he want. This is a big task and won't be done anytime soon.

[A12C4]

@herb_fargus As I said in the message right above, I never tried to customize the images. Is this something common along the RetroPie user base ? How do you do that ? What tool/software should I look at ?