xTV List view mod w/fanart

Scott R · 2009-02-05, 21:43

Background:
Inspired by Kris_Toff's xTV Wrap view w/fanart mod, I've been messing around with creating a List view mod w/fanart. Here's what I've come up with...

* Note: The screenshot above isn't completely accurate. The latest version of this mod uses a slightly larger font for the list and only shows a list of 18 movies. The screenshot above has a list of 21 movies, but the font was too small, making readability difficult for all but the largest of screens.

Instructions:
Note: Make backup copies of the files you'll be working with (or a backup of the entire xTV skin).

In file \xTV\PAL\includes.xml replace the section <include name="ListView-Icon"> as follows:

Code:

<!-- SLR - DVD coverart used in List view (supersize coverart, but only show if no fanart exists) -->
	<include name="ListView-Icon">
		<control type="image">
			<description>list item icon</description>
			<posx>0</posx>
			<posy>50</posy>
			<width>450</width>
			<height>450</height>
			<info>ListItem.Icon</info>
			<aspectratio>keep</aspectratio>
			<visible>IsEmpty(listitem.property(fanart_image)) + Control.IsVisible(50)</visible>
			<animation effect="rotatey" start="-20" end="-20" time="0" condition="Skin.HasSetting(tilted-icons)">Conditional</animation>
			<include>list-fade</include>
		</control>
		<control type="image">
			<description>list item icon reflection</description>
			<posx>0</posx>
			<posy>500</posy>
			<width>450</width>
			<height>450</height>
			<info>ListItem.Icon</info>
			<texture flipy="true" diffuse="fade2.png">-</texture>
			<aspectratio>keep</aspectratio>
			<visible>IsEmpty(listitem.property(fanart_image)) + Control.IsVisible(50)</visible>
			<animation effect="rotatey" start="-20" end="-20" time="0" condition="Skin.HasSetting(tilted-icons)">Conditional</animation>
			<include>list-fade</include>
		</control>
	</include>

In file \xTV\PAL\MyVideo.xml add the following right after the line <include>background</include> (line 6):

Code:

<!-- SLR - Fanart image for List view ... -->
		<control type="image">
			<posx>10</posx>
			<posy>60</posy>
			<width>475</width>
			<height>380</height>
			<visible>!IsEmpty(listitem.property(fanart_image)) + Control.HasFocus(50)</visible>
			<animation effect="fade" end="0" time="200">WindowClose</animation>
			<animation effect="fade" start="0" end="100" time="200">VisibleChange</animation>
			<texture>$INFO[listitem.property(fanart_image)]</texture>
		</control>
<!-- SLR - Reflection of fanart ... -->
		<control type="image">
			<posx>10</posx>
			<posy>440</posy>
			<width>475</width>
			<height>200</height>
			<visible>!IsEmpty(listitem.property(fanart_image)) + Control.HasFocus(50)</visible>
			<animation effect="fade" end="0" time="200">WindowClose</animation>
			<animation effect="fade" start="0" end="100" time="200">VisibleChange</animation>
			<texture flipy="true" diffuse="fade.png">$INFO[listitem.property(fanart_image)]</texture>
		</control>

In file \xTV\PAL 16x9\CommonViewTypes.xml replace section <include name="ListView"> with the following:

Code:

        <include name="ListView">
                <control type="list" id="50">
<!-- SLR - List text positioning ... -->
                        <posx>485</posx>
                        <posy>90</posy>
                        <width>285</width>
                        <height>430</height>
                        <onleft>2</onleft>
                        <onright>23</onright>
                        <onup>50</onup>
                        <ondown>50</ondown>
                        <include>list-fade</include>
                        <scrolltime>1</scrolltime>
                        <viewtype label="List">List</viewtype>
                        <pagecontrol>23</pagecontrol>
                        <itemlayout height="24">
                                <control type="image">
                                        <width>285</width>
                                        <height>30</height>
                                        <posx>0</posx>
                                        <posy>1</posy>
                                </control>
                                <control type="label">
                                        <posx>13</posx>
                                        <posy>-4</posy>
                                        <width>253</width>
                                        <height>32</height>
                                        <font>font8</font>
                                        <align>left</align>
                                        <aligny>center</aligny>
                                        <textcolor>button-text</textcolor>
                                        <selectedcolor>listselectedtext</selectedcolor>
                                        <info>ListItem.Label</info>
                                </control>
                        </itemlayout>
                        <focusedlayout height="24">
<!-- SLR - This positions the "highlight" box behind selected list item ... -->
                                <control type="image">
                                        <width>225</width>
                                        <height>32</height>
                                        <posx>5</posx>
                                        <posy>-4</posy>
					<texture>default-button.png</texture>
                                </control>
                                <control type="label">
                                        <posx>13</posx>
                                        <posy>-4</posy>
                                        <width>253</width>
                                        <height>32</height>
                                        <font>font8</font>
                                        <align>left</align>
                                        <aligny>center</aligny>
                                        <textcolor>button-text</textcolor>
                                        <selectedcolor>listselectedtext</selectedcolor>
                                        <info>ListItem.Label</info>
                                </control>
                        </focusedlayout>
                </control>
        </include>

Scott R · 2009-02-05, 23:24

Well, I made good progress. Here's what I've got now...

Scott R · 2009-02-06, 07:03

I wasn't really happy with it. The fanart still felt too "covered over" and the list of titles, even with the gray translucent background, was no longer as readable as it used to be (with the stock List view), so I played around some more, and here's the latest version that I'm liking:

kizer · 2009-02-06, 19:51

Me too. The 3rd image looks clean and well clean.

Worst case you could rid of the reflection and put in the plot at the bottom stretched across since you have the room.

I think the abscense of the thumb looks really nice and clean. Lets face it you already know what it is because you can see the text.

Maxim · 2009-02-06, 20:02

I like the third image, but it wouldn't seem to work with low res screen since the text would be smaller. Something is still missing from the background though. It's too solid, i'm not sure what can be done about that.

Scott R · 2009-02-07, 00:20

Yeah, I have mixed feelings about the fanart reflection. I may get rid of that. I was also thinking about shifting the fanart upwards a bit more and using the extra space below to show the movie summary. And, yes, the fontsize was actually too small. It looked fine on my laptop up-close, but when I moved the skin out to one of my XBox's in my bedroom (hooked up to a 37" LCD viewed from about 10' away), it was a bit too hard to read. So, I made an additional update since the last screenshot above which makes the fontsize a bit larger (though it still is smaller than stock and so shows more movie titles than stock).

One thing you don't see in the screenshots above is that I also tweaked it so that if a fanart image is *not* available, it shows a large DVD boxcover in its place.

I'd like to see if I can consolidate the code to fewer xml files, and ideally create this as an all-new additional view, rather than taking over the stock List view. If I can accomplish those tasks soon, I'll make the files available for others to enjoy.

Scott R · 2009-02-07, 00:27

One additional note...

I love the xTV skin due to its usability/simplicity/efficiency. Apple did a great job with the original AppleTV UI (which I think they made *less* usable by removing (?) the List view in the AppleTV update, so I think Chief's move towards the newer AppleTV is ill-founded, IMHO). But as much as I love the original AppleTV / xTV UI, I don't necessarily want it to look exactly like an original AppleTV clone. If I ever have the time and learn enough about skinning, I'd love to make an all-new UI which has all of the usability /efficiency advantages, but with its own look. The essence of this would be to possibly change the font, tweak the sound effects, and play around with some alternative background colors and icons.

But, IMO, the List view is the *best* view for movies, so as much as I love the eye-candy of some of the other XBMC skins out there, and the "fun" aspects of a Wrap or Coverflow view, the ideal new UI I envision might actually only have the List view.

kizer · 2009-02-07, 09:39

Looking at the images I meant to say the 4th image. Being the last one with the black bottom. Sorry we didn't learn how to count past 3 when I went to school.

nchall · 2009-02-19, 19:57

Have you made any more progress on this?

batrad · 2009-03-20, 20:49

the last one looks great ..

where i can download the script/mod?

Thanks

2009-02-06, 07:03	#3
Scott R Senior Member Join Date: Feb 2008 Posts: 164	I wasn't really happy with it. The fanart still felt too "covered over" and the list of titles, even with the gray translucent background, was no longer as readable as it used to be (with the stock List view), so I played around some more, and here's the latest version that I'm liking: Last edited by Scott R; 2009-02-06 at 07:06.

2009-02-06, 19:51	#4
kizer Fan Join Date: Jul 2008 Location: Seattle WA, US Posts: 548	Me too. The 3rd image looks clean and well clean. Worst case you could rid of the reflection and put in the plot at the bottom stretched across since you have the room. I think the abscense of the thumb looks really nice and clean. Lets face it you already know what it is because you can see the text. Last edited by kizer; 2009-02-06 at 19:53.

2009-02-19, 19:57	#9
nchall Member Join Date: Sep 2007 Posts: 48	Have you made any more progress on this? Last edited by nchall; 2009-02-19 at 20:21.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

2009-02-05, 23:24	#2
Scott R Senior Member Join Date: Feb 2008 Posts: 164	Well, I made good progress. Here's what I've got now...

2009-02-06, 20:02	#5
Maxim Fan Join Date: Sep 2004 Posts: 702	I like the third image, but it wouldn't seem to work with low res screen since the text would be smaller. Something is still missing from the background though. It's too solid, i'm not sure what can be done about that.

2009-02-07, 00:20	#6
Scott R Senior Member Join Date: Feb 2008 Posts: 164	Yeah, I have mixed feelings about the fanart reflection. I may get rid of that. I was also thinking about shifting the fanart upwards a bit more and using the extra space below to show the movie summary. And, yes, the fontsize was actually too small. It looked fine on my laptop up-close, but when I moved the skin out to one of my XBox's in my bedroom (hooked up to a 37" LCD viewed from about 10' away), it was a bit too hard to read. So, I made an additional update since the last screenshot above which makes the fontsize a bit larger (though it still is smaller than stock and so shows more movie titles than stock). One thing you don't see in the screenshots above is that I also tweaked it so that if a fanart image is not available, it shows a large DVD boxcover in its place. I'd like to see if I can consolidate the code to fewer xml files, and ideally create this as an all-new additional view, rather than taking over the stock List view. If I can accomplish those tasks soon, I'll make the files available for others to enjoy.

2009-02-07, 00:27	#7
Scott R Senior Member Join Date: Feb 2008 Posts: 164	One additional note... I love the xTV skin due to its usability/simplicity/efficiency. Apple did a great job with the original AppleTV UI (which I think they made less usable by removing (?) the List view in the AppleTV update, so I think Chief's move towards the newer AppleTV is ill-founded, IMHO). But as much as I love the original AppleTV / xTV UI, I don't necessarily want it to look exactly like an original AppleTV clone. If I ever have the time and learn enough about skinning, I'd love to make an all-new UI which has all of the usability /efficiency advantages, but with its own look. The essence of this would be to possibly change the font, tweak the sound effects, and play around with some alternative background colors and icons. But, IMO, the List view is the best view for movies, so as much as I love the eye-candy of some of the other XBMC skins out there, and the "fun" aspects of a Wrap or Coverflow view, the ideal new UI I envision might actually only have the List view.

2009-02-07, 09:39	#8
kizer Fan Join Date: Jul 2008 Location: Seattle WA, US Posts: 548	Looking at the images I meant to say the 4th image. Being the last one with the black bottom. Sorry we didn't learn how to count past 3 when I went to school.

2009-03-20, 20:49	#10
batrad Junior Member Join Date: Jun 2007 Posts: 27	the last one looks great .. where i can download the script/mod? Thanks

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)