Skins. Grrr. Argh.

[imilne]

Attached are three skin files that I use to flick between different views in a list. They're in separate files because ultimately my plugin (Videos+) will have multiple views per list type (eg, there may be several views that end up using the HORIZONTAL_ICON mode).

At the moment, the skin is pretty much a cut and paste from Hairy/sub's default. Here's what I currently can't get my head around:

The list view (view-0.xml) defines a section for its metadata - ListSelectionMetaData - which is all the stuff (titles, posters, description, etc) that goes on the right hand side. It also has a different section - ListPosition - for the position bar along the bottom.

But the other two views just have CoversSelectionMetaData and IconSelectionMetaData that only really define the position bar.

My problem is that I want to expand them to include more metadata in their views, but also keep the position bar. Should the UiList code go looking for a "CoversPosition" if I define that (because it doesn't appear to). I'm so bad with skins that I couldn't possible extend the current CoversSelectionMetaData bit to fill the screen, but still leave the position bar part of it in the same place.

I'm not explaining this very well am I...

Iain

[Northpole]

Well, I started skinning the plugin yesterday. I haven't gotten too far yet but I can take a look at the default skin and see what I can do. You want to extend the CoversSelectionMetaData section, are you thinking about using the entire top half of the screen?

If you want to use part of the screen in Iconview, you'll need to change the 3 row x 7 columns layout to something else to free up some screen space. What did you have in mind there?

[Northpole]

Iain,

You could try this as a starting point in the Covers view.

Code:

<Element name="CoversSelectionMetaData" location="0,7.92" size="100,84.16" alpha="255" alphaFade="true">
    <RoundedRect location="0.25,0.25" size="99.5,99.5" fillColor="Transparent" borderColor="White" radius="0.1" borderWidth="1px"/>
    <Rect location="-2,94.49" size="104,5.51" fillColor="BaseColor2"/>
    <Text text="@name" location="0,94.49" size="100,5.51" font="Title1" align="Center" valign="Center"/>
    <Text text="File:" location="85.36,94.49" size="10,5.51" font="Title2Small" align="Left" valign="Center"/>
    <Text text="@positionInfo" location="0,94.49" size="95.36,5.51" font="Title3Minimum" align="Right" valign="Center"/>
  </Element>

This gives you the use of just about 85% of the screen. The white border shows the edge of the element.

[imilne]

Well, I started skinning the plugin yesterday

Heh, don't get too far ahead of yourself because it'll probably still be ages yet before the plugin is ready. Although saying that, the skin stuff it has so far is pretty much identical to the list views in the default skin (and the basic and details popups) so converting it for NextBlue will be easy (for now).

You want to extend the CoversSelectionMetaData section, are you thinking about using the entire top half of the screen?

The plugin will actually go looking for any skin file called view-[number].xml (sequentially), the idea being that the user - or skin authors - could design additional views beyond what the plugin itself knows about. Every view will be based around one of the three list modes, and then you could throw in whatever metadata tags (@title, @poster, @director, @codec etc) I end up supporting. The plan at the moment was to mirror the three "default" views, list, covers, and icon, and then start creating new views that provide the kind of information seen elsewhere, eg:







I've actually cheated in one of the views and moved the covers mode list off the screen entirely, so the entire screen can be used for metadata (or fanart), but the list still allows navigation.

Iain

[imilne]

This gives you the use of just about 85% of the screen. The white border shows the edge of the element.

Thanks, I'll give that a go later. Is there no way to keep the @positionInfo stuff separate though, so the bar maintains a consistent position across all the views? (I haven't tried your example yet, and it may well do, but it must have taken some awkward calculations if so?)

Iain

[imilne]

I should add that the multiple view thing was to allow, for example, one view that might be suitable for a folder full of movies (with posters), and another - different - view, more suitable for tv shows (with banners). This way you wouldn't have to tell the plugin in advance what all the folders contain; you can just control it with the views, as it remembers the view selected for each folder.

Iain

[sub]

Historically the position info was displayed in the selection metadata element for each of the list views. I cant remember the exact details, but one of the skins wanted to locate the position info somewhere else in list mode, so I added support for this separate element. I cant remember why I didnt add it for all the views at the time, but I've now made that possible in the next release. ie, like the "ListPosition" element, you can provide an "IconPosition" and/or "CoversPosition". They're done separately for each view since you may need this info in different locations depending on the view.

[imilne]

Ah, that sounds like what I'm after sub, thanks! That should make things much easier for my skin-challenged brain.

Iain

[Northpole]

This will produce the single sliding image like the star trek example above:

Code:

<VideosPlus type="Covers" name="Movie Details View"/>
  
  
  <Element name="CoversView" location="0,0" size="1,1" alpha="255" visibleItems="1"/>

  <Element name="CoversItem" location="0,0" size="100,100" alpha="255" alphaFade="true">
    <Image source="@previewImage" location="0,0" size="38.3,100" fixedAspectRatio="true" />
        <Rect location="38.3,0" size="61.7,100" fillColor="DimGray"/>

        <RoundedRect location="38.3,10" size="61.7,20" fillColor="Transparent" borderColor="White" radius="0.1" borderWidth="2px"/>
    <Text text="MetaData Here blah blah" location="38.3,10" size="61.7,20" font="DefaultSmall" wrap="true"/>

        <RoundedRect location="38.3,30" size="61.7,30" fillColor="Transparent" borderColor="White" radius="0.1" borderWidth="2px"/>
    <Text text="MetaData Here Again blah blah" location="38.3,30" size="61.7,30" font="DefaultSmall" wrap="true"/>

        <RoundedRect location="38.3,60" size="61.7,40" fillColor="Transparent" borderColor="White" radius="0.1" borderWidth="2px"/>
    <Text text="More MetaData Here blah blah" location="38.3,60" size="61.7,40" font="DefaultSmall" wrap="true"/>
  </Element>

  <Element name="CoversSelectionMetaData" location="0,87.44" size="100,4.64" alpha="255" alphaFade="true">
    <Rect location="-2,0" size="104,100" fillColor="BaseColor2"/>
    <Text text="@name" location="0,0" size="100,100" font="Title1" align="Center" valign="Center"/>
    <Text text="File:" location="85.36,0" size="10,100" font="Title2Small" align="Left" valign="Center"/>
    <Text text="@positionInfo" location="0,0" size="95.36,100" font="Title3Minimum" align="Right" valign="Center"/>
  </Element>

[Northpole]

The problem I notice in doing this little test was that the image size and aspect ratio may cause problems with gaps on the sides of the display. If all your images are the same size and aspect ratio, this works great, but if they differ then you won't get edge to edge coverage. In win xp MCE they zoom the image to fill the preview area while maintaining the aspect ratio.