-
Notifications
You must be signed in to change notification settings - Fork 346
Gridview Roadmap and FAQ
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.
| / | Status | Description |
|---|---|---|
| 1. | Waiting review | Allow swapping between systems using left shoulder and right shoulder |
| 1.1. | Waiting review | Update the help prompt of the grid : Add a new "Left/Right shoulder" icon for the help system. Update the outdated help prompt to match the one of the Basic game list view (add "select" for options and "x" for random, ...) |
| 2. | Done | Enable the grid view for developers (see "How to enable the grid view ?" in the FAQ below for more informations) |
| 3. | Done | Rewrite the grid view display code written by Aloshi (using a "tileMaxSize" parameter from theme, as suggested by @jrassa on https://github.com/RetroPie/EmulationStation/issues/206#issuecomment-326809971) |
| 3.1. | Done | Rewrite selected tile growth code (currently it just "eat" the margin around, if we want it bigger I need to write some code so the selected tile is drawn on top of other tiles). |
| 3.2. | In review | Add base theming syntax |
| 4. | Waiting for previous PR | Add the metadata from the detailed game list view to the grid view |
| 4.1 | In development | Add a new metadata label and value for the grid view : game title |
| 5. | Add new default icon for games without cover | |
| 6. | Add new default icon for folders | |
| 7. | Add dynamic image loader | |
| 8. | Enable the grid view for users | |
| 9. | Add game title under game cover | |
| 10. | Add more animations | |
| 11. | Add navigation sounds | |
| 12. | Slide on selected game when "TransitionStyle" is set to "Slide" |
The new theming syntax will be used (see below in "Theming syntax" section) starting at step 3.2. After step 3.2, the grid theming syntax will be extended when new features are shipped (idk how to say that exactly, for example the step 12 "Add more animations" will bring new possibilities for themes to customize the grid view so the theme syntax will be extended at the same moment).
I will refer to this post when shipping my different pull requests. I tried to plan ahead as much as possible but I may have missed a few small features or fix so I will add sub-numbers to the list for them (like 1.1.)
- How to enable the grid view ?
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).
- What are the grid view specific controls ?
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.
This second rule look strange to me. For example if we select the 2nd game of the last row and press down, we should have now selected the 2nd game (we stay in 2nd column) from the first row, but instead we select the last game of the last row (we stayed in last row but changed column using the "down" button, which I find strange). So this may change in the future.
- What define the number of elements per line ?
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)
I didn't have any RetroPie's main contributors feedback on this so this is subject to change. I just posted my 2 theming syntax propositions for now. If you want to discuss this please go in the related theming syntax discussion (link is a the bottom of this post in the "Ressources" part).
Condensed syntax, similar to the one used by the text list :
<view name="grid">
<text name="md_title">
<color>
<backgroundColor>
<alignement>
<forceUppercase>
<lineSpacing>
</text>
<imagegrid name="gamegrid">
<!-- Grid general configuration -->
<size>
<padding>
<!-- Grid tile configuration -->
<tileMaxSize>
<tileColor>
<tileTextColor>
<tileTextBackgroundColor>
<tileTextAlignement>
<tileTextForceUppercase>
<tileTextLineSpacing>
<tileTextColor>
<tileTextRow>
<tileBackgroundPath>
<tileBackgroundColor>
<tileBackgroundColorCenter>
<tileBackgroundColorEdge>
<tileBackgroundPadding>
<!-- Grid selected tile configuration -->
<selectedTileMaxSize>
<selectedTileColor>
<selectedTileTextColor>
<selectedTileTextRow>
<selectedTileBackgroundColor>
<selectedTileBackgroundSize>
<!-- Grid images configuration -->
<missingImagePath>
<folderImagePath>
</imagegrid>
</view>Middle ground approach, halfway between current theming syntax and the condensed one from the text list :
<view name="grid">
<!-- Game title configuration (the one displayed at the top of the screen) -->
<text name="md_title">
<color>
<backgroundColor>
<alignement>
<forceUppercase>
<lineSpacing>
</text>
<!-- Grid configuration -->
<imagegrid name="gamegrid">
<size>
<padding>
<tileMaxSize>
</imagegrid>
<!-- Grid unselected tiles configuration -->
<image name="md_grid_tile">
<color>
<size>
<backgroundPath>
<backgroundColor>
<backgroundColorCenter>
<backgroundColorEdge>
<backgroundPadding>
<textColor>
<textRowSize>
<textAlignement>
<textForceUppercase>
<textLineSpacing>
</image>
<!-- Grid selected tile changes configuration
(override md_grid_tile parameters when selected) -->
<image name="md_grid_tile_selected">
<color>
<size>
<backgroundColor>
<backgroundSize>
<textColor>
<textRowSize>
</image>
<!-- Image used for games wihout cover -->
<image name="missing_boxart">
<path>
</image>
<!-- Image used for folders -->
<image name="folder">
<path>
</image>
</view>Grid view original pull request
https://github.com/RetroPie/EmulationStation/pull/203
Grid view theming syntax discussion