This is an old revision of the document!
Layouts define the look and feel for your frontend. Each layout is a folder containing at least the following two main files.
Path | Description |
---|---|
/layouts/<layout name>/ | Folder to store all image files for a particular asset. i.e. <layout name> = “Default 16×9“ |
/layouts/<layout name>/splash.xml | Splash screen to show at startup |
/layouts/<layout name>/layout.xml | Main layout file to show when frontend is loaded |
An example of a layout An example of a layout.xml
The global settings.conf file contains the default layout used by RetroFE. It is however possible to give a collection a completely different layout by adding the layout.xml and layout artwork to the /layouts/<layout name>/collections/<collection name>/layout/ directory. A splash.xml is not required/used for a collection's layout. This way you can give each collection a completely different look and feel.
RetroFE will first search for a layout XML file that matches the screen ratio, so e.g. layout 16×9.xml or layout 4×3.xml. If that file is not found, it will default to layout.xml.
A layout generally consists of the following structure:
<layout> <sound/> <menu/> <video/> <image/> <text/> <reloadableVideo/> <reloadableImage/> <reloadableText/> <reloadableScrollingText/> </layout>
The <layout> tag can use the following parameters:
width | The virtual width to use for this layout. This will be scaled automatically by the frontend if the screen resolution is different. |
height | The virtual height to use for this layout. This will be scaled automatically by the frontend if the screen resolution is different. |
loadFontSize | The size (quality) of the font to load. Lower font sizes is more blurred, Higher font sizes are a little more pixelated. It is best to set this to the same value as fontSize most used in the layout. |
font | Location of the font (relative to the layout folder). |
fontColor | Default RGB color of the font (in hex, i.e. “6699AA”). |
fontSize | Default font size of to display if not specified by a component. |
minShowTime | Minimum amount of time (in seconds) to show the current layout (only applicable in splash.xml). |
Example:
<layout width="1920" height="1080" font="Roboto-Bold.ttf" loadFontSize="64" fontColor="dedede">
The <sound> tag can use the following parameters:
<sound>tag parameters
Tag | Description |
---|---|
type | triggers on the following events: "load" (page load), "unload" (page exit), "highlight" (scroll), "select" (entering game/sub-menu). |
src | Location of the sound file (relative to the layout folder). |
Example:
<sound type="load" src="load.wav"/>
The <menu> tag is used to define a menu structure, and uses the following structure:
<menu> <itemDefaults/> <item/> </menu>
The <menu> tag supports the following parameters:
<menu> tag parameters | |
---|---|
type | The type of menu to display. Set to custom to specify all the points on the screen. Set to vertical to have a vertical scrolling list prebuilt for the layout |
imageType | If specified, uses an image to be displayed for each menu item (if it exists). Text will be used if the image could not be found. |
orientation | Set to “horizontal” to use the Left/Right controls to scroll. set to “vertical” to use Up/Down. |
scrollTime | The amount of time (in seconds) it takes for an item to scroll to the next point on the menu (i.e 0.750 = 750 milliseconds) |
scrollAcceleration | The acceleration rate to scroll by when holding down the up/down/left/right scroll key |
menuIndex | The index at which the menu should be inserted in the menu hierarchy. If omitted, the menu will be inserted at the next index. This also allows multiple menus to be inserted at the same index, displaying multiple menus at the same time. |
The <itemDefaults> tag supports the following parameters:
<menu> <itemDefaults> tag parameters | |
---|---|
spacing | Used when the menu type is set to vertical. Defines the spacing in pixels for all edges of a menu item. |
index | Used when the menu type is set to vertical. Specify a options for a particular menu item when in list mode (first=first visible item, last=last visible item, start=first - 1, end - last + 1) |
font | Location of the font (relative to the layout folder). |
fontColor | Default RGB color of the font (in hex, i.e. “6699AA”). |
fontSize | Default font size of to display if not specified by a component. |
loadFontSize | The size (quality) of the font to load. For the best results, use the same value as fontsize. |
The <item> tag supports the following parameters:
<menu> <item> tag parameters | |
---|---|
font | Location of the font (relative to the layout folder). |
fontColor | Default RGB color of the font (in hex, i.e. “6699AA”). |
fontSize | Default font size of to display if not specified by a component. |
loadFontSize | The size (quality) of the font to load. For the best results, use the same value as fontsize. |
For more information, see this example
The <image> tag supports the following parameter:
<image> tag parameters | |
---|---|
src | The location of the image to display (relative to the location of the active layout folder) |
Example:
<image src="bg.png" x="0" y="0" height="stretch" width="stretch" layer="0"/>
The <text> tag supports the following parameters:
<text> tag parameters | |
---|---|
value | The text message to display |
font | Location of the font (relative to the layout folder). |
fontColor | Default RGB color of the font (in hex, i.e. “6699AA”). |
fontSize | Default font size of to display if not specified by a component. |
loadFontSize | The size (quality) of the font to load. For the best results, use the same value as fontsize. |
Example:
<text value="Year:" x="300" y="850" xOrigin="right" yOrigin="top" fontSize="48" layer="7"/>
The <reloadableVideo> tag can be used to display a video of the selected item, and supports the following parameters:
<reloadableVideo> tag parameters | |
---|---|
imageType | The type of image to display if a video cannot be found: “numberButtons”, “numberPlayers”, “year”, “title”, “manufacturer”, “genre”. |
mode | See mode attribute for more details. |
textFallback | Set to true to have text displayed of a the item title if an image cannot be loaded. |
font | Location of the font (relative to the layout folder). |
fontColor | Default RGB color of the font (in hex, i.e. “6699AA”). |
fontSize | Default font size of to display if not specified by a component. |
loadFontSize | The size (quality) of the font to load. For the best results, use the same value as fontsize. |
backgroundColor | Fill the component with a background color. |
backgroundAlpha | Background color transparency: 0 = 0% visible, 0.5=50% visible, 1=100% visible |
Example:
<reloadableVideo imageType="screenshot" x="400" y="300" xOrigin="center" yOrigin="center" height="480" maxWidth="640" layer="3"/>
The <reloadableImage> tag can be used to display an image of the selected item, and supports the following parameters:
<reloadableImage> tag parameters | |
---|---|
type | The type of image to display: “numberButtons”, “numberPlayers”, “ctrlType”, “numberJoyWays”, “rating”, “score”, “year”, “title”, “developer”, “manufacturer”, “genre”, “playlist”, “collectionName”, “collectionSize”, “collectionIndex”, “collectionIndexSize”, or any type you pick where the title will be used as the name of the file. |
mode | See mode attribute for more details |
textFallback | Set to true to have text displayed of a the item title if an image cannot be loaded |
font | Location of the font (relative to the layout folder). |
fontColor | Default RGB color of the font (in hex, i.e. “6699AA”). |
fontSize | Default font size of to display if not specified by a component. |
loadFontSize | The size (quality) of the font to load. For the best results, use the same value as fontsize. |
Example:
<reloadableImage type="logo" mode="system" x="1350" y="50" xOrigin="center" yOrigin="top" height="250" maxWidth="1100" layer="7"/>
The <reloadableText> tag can be used to display textual information about the selected item, and supports the following parameters:
<reloadableText> tag parameters | |
---|---|
type | The type of text to display: “time”, “numberButtons”, “numberPlayers”, “ctrlType”, “numberJoyWays”, “rating”, “score”, “year”, “title”, “developer”, “manufacturer”, “genre”, “playlist”, “collectionName”, “collectionSize”, “collectionIndex”, or “collectionIndexSize”. |
mode | See mode attribute for more details |
font | Location of the font (relative to the layout folder). |
fontColor | Default RGB color of the font (in hex, i.e. “6699AA”). |
fontSize | Default font size of to display if not specified by a component. |
loadFontSize | The size (quality) of the font to load. For the best results, use the same value as fontsize. |
Example:
<reloadableText type="year" x="310" y="850" xOrigin="left" yOrigin="top" fontSize="48" maxWidth="300" layer="7"/>
The type=“time” allows for an additional parameter: timeFormat, which follows the C++ strftime abilities.