• Introduction
• Roadmap
• How to enable the grid view
• Controls
• Grid dimension and tile sizes
• Theming syntax
• Ressources

The grid view is an huge feature for EmulationStation and many points are suggest to discussion (design, implementation, ...) so I created this post to gather all the informations related to the grid view and I will keep it updated accordingly to further developments and discussions.

This is just a list of ideas that may or may not come later (after the grid V1 release), which aren't planned or are still in discussion.

Sounds

• Navigation sounds for the grid
• Refactoring navigation sounds handling for all views and elements

Animations

• Slide on selected game when "TransitionStyle" is set to "Slide"
• Sliding tiles when scrolling in the grid
• Animate selected/unselected tile changes

Metadata

• Video support / Marquee / ...

Grid tile content

• Videos in the grid
• Text in the grid tile / Modular grid tile
• Allow themes to switch from max size to min size for images in the grid

Miscellaneous

• Current position indicator (either a graphical scroll bar or just display the position number)
• Grid view for system list

The grid view is only available on the "master" branch of RetroPie/EmulationStation, not on the "stable" branch. This mean if you want to use it on your Pi you have to install emulationstation-dev package. Be careful that this version is less battle-tested than the stable version as it include latest developements, so more bugs/crashs/unintended behaviors may happen.

Starting at step 2, for easier reviewing and testing, the grid view will be enabled for developers by changing the value of GamelistViewStyle to grid in es_settings.cfg, using the command below for example :

sed 's!<string name=\"GamelistViewStyle\" value=\"[a-zA-Z]*\" />!<string name=\"GamelistViewStyle\" value=\"grid\" />!' ~/.emulationstation/es_settings.cfg -i

After step 8, the grid view will be considered stable and reliable enough to allow users to enable it using the menu (Menu > UI settings > Gamelist view style).

The user will navigate in the grid using left/right/up/down arrows.

If we hit the farest right column and the user press the right button, we go to the first game of the next line, or the first game of the first line if that was the last game of the last line. This is the opposite when we hit farest left column and press left.

If we hit the last row and press down, we go to the last game of the last row (and stick to it, you can't go to the first row using the "down" button). Same for the first row and press up, we go to the first game.

Right now the grid analyze all the elements inside it to find the biggest image and calculate how much time the biggest image can fit in a row. It also upscale (without breaking aspect ratio) other images to this size.

This will change after step 3 and 6, the theme will define the grid size, the images size and the margins. The grid view will then calculate how much images can fit using this 3 values, using the following formulas (the first one is easier to read, the second one is the one actually used in the code) :

GRID_SIZE = COLUMNS * TILE_SIZE + (COLUMNS - 1) * MARGIN 
<=> COLUMNS = (GRID_SIZE + MARGIN) / (TILE_SIZE + MARGIN) 

Visual representation of the grid and tile size

This is just an example of what the theming syntax could look when complete. This may change slightly in final version. Refer to the THEMES.md documentation if you wish to create a theme which support the grid view.

<view name="grid">
	<text name="md_title">
		<!-- All the standard text settings -->
	</text>

	<imagegrid name="gamegrid">
		<pos>
		<size>
		<margin>
		<gameImage>
		<folderImage>
		<scrollDirection>
	</imagegrid>

	<gridtile name="default">
		<size>
		<padding>
		<imageColor>
		<backgroundImage>
		<backgroundCornerSize>
		<backgroundColor>
		<backgroundCenterColor>
		<backgroundEdgeColor>
	</image>

	<gridtile name="selected">
		<size>
		<padding>
		<imageColor>
		<backgroundImage>
		<backgroundCornerSize>
		<backgroundColor>
		<backgroundCenterColor>
		<backgroundEdgeColor>
	</image>
</view>

• Grid tile background size discussion
• Grid tile content discussion
• Original pull request
• Theming syntax discussion