Trying to figure out how the Grid View works

[Foolz]

Hi everyone,

I am trying to implement the grid view into some of older theme specifically twisted for my mini arcade. It works fine under Carbon2021. But when I try to copy the XML text over. Nothing shows up. However the selection will still work. I can see the game logo and snap chang in when more to a new game. (Just can see grid at all.)

I am trying to replace the old game list with either 1:6 grid or 2:3 grid at the specified area of the screen.

Can someone point me to the latest documentation for emulationstation on retroPie. Or example theme with a well defined Grid View? Everything I found is either super out of date or it is specifically for other distribution, which doesn't really work for RetroPie it seems. (Or I might did something wrong.)

Thank you so much for the help.

[r3dstar]

@Foolz Hey!

I've just started on my first theme and jumped into the grid view, butchering the Carbon2021 theme to fit my bartop. The documentation all seems over the place, but I had better luck looking at the GitHub repo of the RetroPie branch of the EmulationStation theme.

Here's what I have so far, happy to go into more detail with how I got here if there are any specific questions?

This example is from My Favourites, with SNES, NES, Arcade and Amiga. Each image is 4:3 or 320x240, and if present a video will play in the large tile to the right. I abused the marquee tag to link to the system svg

[r3dstar]

Actually, I'll just pop in my XML for the grid view here.

	<view name="grid">
		<image name="background" extra="true">
			<path>${themeArtFolder}/carbon_fiber_union_jack_blue.png</path>
			<tile>true</tile>
			<size>1920 1080</size>
			<pos>0 0</pos>
			<origin>0 0</origin>
		</image>

		<image name="top" extra="true">
			<path>${themeArtFolder}/top.png</path>
			<size>640 174</size>
			<pos>1280 60</pos>
			<origin>0 0</origin>
			<color>${themeColor}</color>
		</image>

		<image name="top2" extra="true">
			<path>${themeArtFolder}/top60.png</path>
			<size>1920 60</size>
			<pos>0 0</pos>
			<origin>0 0</origin>
			<color>${themeColor}</color>
		</image>

		<image name="undervideo" extra="true">
			<path>${themeArtFolder}/bottom.png</path>
			<size>640 70</size>
			<pos>1280 714</pos>
			<origin>0 0</origin>
			<color>${themeColor}</color>
		</image>

		<image name="bottom2" extra="true">
			<path>${themeArtFolder}/bottom.png</path>
			<size>640 70</size>
			<pos>1280 784</pos>
			<origin>0 0</origin>
			<color>${themeColor}</color>
		</image>

		<image name="shadow2" extra="true">
			<path>${themeArtFolder}/shadow.png</path>
			<size>640 166</size>
			<pos>1280 854</pos>
			<origin>0 0</origin>
		</image>

		<image name="truebottom3" extra="true">
			<path>${themeArtFolder}/bottom60.png</path>
			<size>1920 60</size>
			<pos>0 1020</pos>
			<origin>0 0</origin>
			<color>${themeColor}</color>
		</image>

		<helpsystem name="help">
			<iconColor>${themeColor}</iconColor>
			<textColor>${themeColor}</textColor>
		</helpsystem>

		<image name="video_bg" extra="true">
			<path>${themeArtFolder}/black.png</path>
			<size>640 480</size>
			<pos>1280 235</pos>
			<origin>0 0</origin>
			<color>000000ff</color>
		</image>

		<video name="md_video">
			<maxSize>640 480</maxSize>
			<pos>1600 475</pos>
			<origin>0.5 0.5</origin>
			<delay>0</delay>
			<showSnapshotNoVideo>true</showSnapshotNoVideo>
			<showSnapshotDelay>false</showSnapshotDelay>
			<visible>true</visible>
		</video>

		<image name="md_marquee">
			<maxSize>640 160</maxSize>
			<pos>1600 140</pos>
			<origin>0.5 0.5</origin>
			<visible>true</visible>
		</image>

		<imagegrid name="gamegrid">
			<size>1280 960</size>
			<pos>0 60</pos>
			<margin>0 0</margin>
			<scrollDirection>vertical</scrollDirection>
			<animate>true</animate>
		</imagegrid>

		<gridtile name="default">
			<size>320 240</size>
			<padding>0 0</padding>
			<imageColor>7f7f7fff</imageColor>
			<backgroundColor>ffffff00</backgroundColor>
			<backgroundImage>${themeArtFolder}/selector.png</backgroundImage>
		</gridtile>

		<gridtile name="selected">
			<size>320 240</size>
			<padding>16 16</padding>
			<imageColor>ffffffff</imageColor>
			<backgroundColor>ffffffff</backgroundColor>
			<backgroundImage>${themeArtFolder}/selector.png</backgroundImage>
		</gridtile>

		<text name="md_name">
			<fontPath>${themeFont}</fontPath>
			<fontSize>${themeGamelistFontSize}</fontSize>
			<forceUppercase>true</forceUppercase>
			<size>640 80</size>
			<pos>1280 710</pos>
			<alignment>center</alignment>
			<color>${themeColor}</color>
			<visible>true</visible>
		</text>
	</view>

[Foolz]

@r3dstar Man, that looks great!!

I still trying to figure what's going on on my grid view theme, it might have something to do with the other view setting or something, but not sure.

Gonna to try just do the grid view see what happen.

will posted when I get it working for sure.

[Foolz]

@r3dstar Here the code for the theme I am making, as far as the grid view goes, I just copied from the carbon2021 theme... But nothing shows up for some reason.

And one other interesting thing is that when I trid to put the
<resolution></resolution> tag on mine, it will just crash. But I can use the carbo2021 theme with no issues.... So not sure what's going on.

The screen I am using is 1024x768 if that have anything to do with anything.

<?xml version="1.0K" encoding="UTF-8"?>
<!--
theme name:     PiCade43
author:         FOOLZ
license:        creative commons CC-BY-NC-SA
-->
<theme>
	<formatVersion>6</formatVersion>
	<!-- Global Setting -->

	<view name="system,basic,detailed,video,grid">
		<image name="background" extra="true">
			<origin>0 0</origin>
			<pos>0 0</pos>
			<size>1 1</size>
			<path>./_inc/images/background.png</path>
			<tile>false</tile>
			<zIndex>1</zIndex>
		</image>

		<image name="logo">
			<path>./_inc/logos/${system.theme}.svg</path>
		</image>

		<image name="border" extra="true">
			<origin>0.5 0.5</origin>
			<path>./_inc/images/border.png</path>
		</image>

		<helpsystem name="help">
			<pos>1 1</pos>
		</helpsystem>
	</view>

	<view name="detailed,video,grid">
		<image name="logo">
			<maxSize>0.28 0.08</maxSize>
			<pos>0.18 0.08</pos>
		</image>

		<image name="border" extra="true">
			<pos>0.18 0.2</pos>
		</image>

		<image name="gamelist-fade" extra="true">
			<origin>0 0</origin>
			<path>./_inc/images/gamelist-fade.png</path>
			<size>0.1 1</size>
			<pos>0.45 0</pos>
			<zIndex>55</zIndex>
		</image>

		<image name="md_marquee" extra="true">
			<origin>0.5 0.5</origin>
			<pos>0.785 0.57</pos>
			<maxSize>0.300 0.180</maxSize>
			<zIndex>90</zIndex>
		</image>
	</view>

	<view name="basic,detailed,video">
		<textlist name="gamelist">
			<selectorColor>00000000</selectorColor>
			<selectedColor>F2C10A</selectedColor>
			<primaryColor>CCCCCC</primaryColor>
			<secondaryColor>CCCCCC</secondaryColor>
			<fontPath>./_inc/fonts/WorkSans-Bold.ttf</fontPath>
			<forceUppercase>1</forceUppercase>
			<fontSize>0.032</fontSize>
			<zIndex>54</zIndex>
		</textlist>
	</view>

	<!-- MetaData -->
	<view name="detailed,grid">
		<text name="md_name, md_releasedate, md_developer, md_publisher, md_genre, md_lastplayed, md_playcount, md_description, md_players,">
			<color>ffffff</color>
			<fontPath>./_inc/fonts/WorkSans-Bold.ttf</fontPath>
			<fontSize>0.024</fontSize>
		</text>
		<text name="md_lbl_rating, md_lbl_releasedate, md_lbl_developer, md_lbl_publisher, md_lbl_genre, md_lbl_lastplayed, md_lbl_playcount, md_lbl_players">
			<color>981318</color>
			<fontPath>./_inc/fonts/WorkSans-Bold.ttf</fontPath>
			<fontSize>0.024</fontSize>
		</text>
		<text name="md_lbl_rating">
			<pos>1.7 0.26</pos>
			<size>0.2 0.035</size>
			<zIndex>5</zIndex>
		</text>
		<rating name="md_rating">
			<pos>0.80 0.12</pos>
			<size>0.048 0.048</size>
			<filledPath>./_inc/images/circle.png</filledPath>
			<unfilledPath>./_inc/images/circle_empty.png</unfilledPath>
			<zIndex>5</zIndex>
		</rating>
		<text name="md_lbl_players">
			<pos>0.58 0.08</pos>
			<size>0.1 0.02</size>
			<zIndex>5</zIndex>
		</text>
		<text name="md_players">
			<pos>0.68 0.08</pos>
			<size>0.0375 0.02</size>
			<zIndex>5</zIndex>
		</text>
		<text name="md_lbl_releasedate">
			<pos>0.58 0.15</pos>
			<size>0.12 0.02</size>
			<zIndex>5</zIndex>
		</text>
		<datetime name="md_releasedate">
			<pos>0.68 0.15</pos>
			<size>0.12 0.02</size>
			<zIndex>5</zIndex>
		</datetime>
		<text name="md_lbl_genre">
			<pos>0.725 0.08</pos>
			<size>0.1 0.02</size>
			<zIndex>5</zIndex>
		</text>
		<text name="md_genre">
			<pos>0.790 0.08</pos>
			<size>0.190 0.02</size>
			<zIndex>5</zIndex>
		</text>
		<text name="md_lbl_playcount">
			<pos>1.7 0.22</pos>
			<size>0.2 0.035</size>
			<zIndex>5</zIndex>
		</text>
		<text name="md_playcount">
			<pos>1.8 0.22</pos>
			<size>0.0375 0.035</size>
			<zIndex>5</zIndex>
		</text>
		<text name="md_lbl_publisher">
			<pos>1.3 0.12</pos>
			<size>0.1 0.035</size>
			<zIndex>5</zIndex>
		</text>
		<text name="md_publisher">
			<pos>1.39 0.12</pos>
			<size>0.12 0.035</size>
			<zIndex>5</zIndex>
		</text>
		<text name="md_lbl_developer">
			<pos>0.58 0.11</pos>
			<size>0.10 0.035</size>
			<zIndex>5</zIndex>
		</text>
		<text name="md_developer">
			<pos>0.68 0.11</pos>
			<size>0.10 0.035</size>
			<zIndex>5</zIndex>
		</text>
			<text name="md_lbl_lastplayed">
			<pos>1.33 0.20</pos>
			<size>0.12 0.02</size>
			<zIndex>5</zIndex>
		</text>
		<datetime name="md_lastplayed">
			<pos>1.43 0.20</pos>
			<size>0.12 0.02</size>
			<color>ffffff</color>
			<zIndex>5</zIndex>
		</datetime>
		<text name="md_description">
			<fontSize>0.026</fontSize>
			<pos>0.58 0.20</pos>
			<size>0.40 0.25</size>
			<alignment>left</alignment>
			<zIndex>5</zIndex>
		</text>
	</view>

	<!-- System View -->
	<view name="system">
		<carousel name="systemcarousel">
			<origin>0.5 0.5</origin>
			<pos>0.5 0.45</pos>
			<type>horizontal</type>
			<color>00000000</color>
			<size>0.8 0.8</size>
			<logoScale>1</logoScale>
			<logoSize>0.6 0.6</logoSize>
			<maxLogoCount>1</maxLogoCount>
		</carousel>

		<text name="systemInfo">
			<origin>0.5 1</origin>
			<pos>0.5 0.7</pos>
			<color>CCCCCC</color>
			<!-- <fontPath>./_inc/fonts/WorkSans-Bold.ttf</fontPath> -->
			<fontSize>0.042</fontSize>
			<alignment>center</alignment>
		</text>

		<image name="border" extra="true">
			<size>0.3 0.005</size>
			<pos>0.5 0.2</pos>
		</image>
	</view>

	<!-- Basic View -->

	<view name="basic">
		<image name="logo"> 
			<maxSize>0.28 0.08</maxSize>
			<pos>0.5 0.08</pos>
		</image>

		<image name="border" extra="true">
			<size>0.3 0.005</size>
			<pos>0.5 0.2</pos>
		</image>

		<textlist name="gamelist">
			<pos>0.125 0.240</pos>
			<size>0.75 0.68</size>
			<alignment>center</alignment>
			<lineSpacing>1.5</lineSpacing>
			<zIndex>54</zIndex>
		</textlist>		
	</view>

	<!-- Detail View -->
	<view name="detailed">
		<textlist name="gamelist">
			<pos>0.05 0.24</pos>
			<size>0.45 0.7</size>
			<fontSize>0.032</fontSize>
			<alignment>left</alignment>
		</textlist>

		<image name="md_image">
			<origin>.5 .5</origin>
			<pos>0.785 0.75</pos>
			<maxSize>.350 .350</maxSize>
			<zIndex>60</zIndex>
		</image>
	</view>

	<!-- Video View -->
	<view name="video">
		<textlist name="gamelist">
			<pos>0.05 0.24</pos>
			<size>0.45 0.7</size>
			<fontSize>0.032</fontSize>
			<alignment>left</alignment>
		</textlist>

		<text name="md_name, md_releasedate, md_developer, md_publisher, md_genre, md_lastplayed, md_playcount, md_description, md_players,">
			<visible>false</visible>
		</text>
		<text name="md_lbl_rating, md_lbl_releasedate, md_lbl_developer, md_lbl_publisher, md_lbl_genre, md_lbl_lastplayed, md_lbl_playcount, md_lbl_players">
			<visible>false</visible>
		</text>

		<image name="md_image">
			<origin>.5 .5</origin>
			<pos>0.785 0.75</pos>
			<maxSize>.350 .350</maxSize>
			<zIndex>60</zIndex>
		</image>

		<video name="md_video">
			<origin>.5 .5</origin>
			<pos>0.785 0.29</pos>
			<maxSize>.48 .48</maxSize>
			<delay>0.2</delay>
			<showSnapshotNoVideo>false</showSnapshotNoVideo>
			<showSnapshotDelay>false</showSnapshotDelay>
			<zIndex>65</zIndex>
		</video>
	</view>

	<!-- Grid View -->

	<view name="grid">
		<video name="md_video">
			<origin>.5 .5</origin>
			<pos>0.785 0.75</pos>
			<maxSize>.400 .400</maxSize>
			<zIndex>60</zIndex>
		</video>
		
		<imagegrid name="gamegrid">
			<size>600 600</size>
			<pos>0 60</pos>
			<margin>0 0</margin>
			<autoLayout>2 3</autoLayout>
			<scrollDirection>vertical</scrollDirection>
			<scrollLoop>true</scrollLoop>
			<animate>true</animate>
			<zIndex>54</zIndex>
		</imagegrid>
		
		<gridtile name="default">
			<size>240 240</size>
			<padding>20 20</padding>
			<imageColor>7f7f7fff</imageColor>
			<backgroundColor>ffffff00</backgroundColor>
		</gridtile>

		<gridtile name="selected">
			<size>240 240</size>
			<padding>20 20</padding>
			<imageColor>ffffffff</imageColor>
			<backgroundColor>ffffff00</backgroundColor>
		</gridtile>
	</view>

</theme>

[r3dstar]

@Foolz Not sure, but the auto layout might be the problem?

You have a game grid of 600x 600, and the default tile size is 240x240, with a 20px buffer, which would give you 280x280 per tile.
But with a 2x3 auto layout that would be (2x280)x(3x280) = 560x840 which is deeper that your gridlayout.

I didn't use the autolayout tag so I'm not sure if it'll just merge below or above over element.

Also I didn't use the z index, not sure if the depth is the wrong way around. It didn't seem to do anything when I tried to use it, so I just put everything in order in the xml.

[Foolz]

@r3dstar

I have tried to play around with those numbers too.
Tried with or without autolayout.

I also tried all of those setting under carbon2021, things seems works fine there.

nothing would change anything. the grid still doesn't show up. So I can't see anything taking effect.

The only time the game grid will show up is when deleted the game grid tag. LOL and the default would grid would shows up.

All the controls seems to work as well, but the gamegrid or any color of a tile for example would not being show.