CommunitySkin Skinning Tutorial

[Fatman_do]

The last grouping in the baseskin.xml file is called a CommonImage. It is similar in concept to NamedColors or Textstyles, in that we define what image we will use for certain core GBPVR composite image items.

This is an example of some..

Code:

<!-- Common images, used for backgrounds on various things -->
<CommonImages>

<CommonImage name="ListBackground">
    <DrawImage filename="..\_CoreImages\ListView.png" loc="0,0" size="100,100"/>
</CommonImage>
        
    <!-- details view -->
<CommonImage name="DetailsViewNormalItemBackground">
    <DrawImage filename="..\_CoreImages\Detail_Normal.png" loc="0,0" size="100,100"/>
</CommonImage>
<CommonImage name="DetailsViewSelectedItemBackground">
    <DrawImage filename="..\_CoreImages\Detail_Selected.png" loc="0,0" size="100,100"/>
</CommonImage>
<CommonImage name="DetailsViewSelectedInactiveItemBackground">
    <DrawImage filename="..\_CoreImages\Detail_SelectedInactive.png" loc="0,0" size="100,100"/>
</CommonImage>

This just means elsewhere in skins, we just have to say <DrawCommonImage name="ListBackground"> and gbpvr knows what image to use.

You could use xml code instead of images here if you wish, but that is not what the intent of the CommunitySkin is (ie. Image based skinning.).

An example of xml code images would be what sub uses in blue.

Code:

<CommonImage name="DetailsViewNormalItemBackground">
    [B][color=Red]<DrawRoundedRect loc="0.5,0.5" size="99,98" fillColor="ListNormal" borderColor="Transparent" radius="1" borderWidth="0"/>[/color][/B]
</CommonImage>

This is code that draws a rounded rectangle with the colors specified and radius specified. Border width is also something that can be modified.

That concludes a rundown of the basekin.xml file. The key points I wanted to stress here was the textstyles and named colors. Most other items are usually the same from theme to theme.

Up next we will tackle the main menu.

[Fatman_do]

Many of you may have seen screen shots of very elaborate main menus with weather, program, and album art information. Those features are currently only available under the legacy user interface of GBPVR.exe

Sub has indicated they will be making a return.

Also, I have not had favorable results with horizontal scrolling menus under PVRX2 and I believe that method is still under development.

That being said, the main menu will be shorter than what it would have been under the older UI.

The baseskin.xml is a very large and confusing file. The main menu, and many other plugin files are much smaller and can be a snap to modify. The more complex the plugin, the more complex the skin.xml file may be.

This is a typical main menu skin.xml file.

Code:

<settings>
    <!-- name colors -->
    <NamedColors>            
        <NamedColor name="StandardFill" color="Black"/>            
    </NamedColors>        
  
    <!-- text style -->
    <TextStyles>
    </TextStyles>

    <!-- placements -->
    <Placements>
        <Placement name="MenuButtonOrigin" loc="17.5,25" offset="9" rightShift="true" alpha="200"/>
        <Placement name="SelectedTaskDescription" loc="0,89" alpha="180"/>
        <Placement name="TaskImage" loc="42,15" alpha="210"/>
        <Placement name="CurrentTime" loc="0,2" alpha="200"/>
        <Placement name="InsetRect" loc="30,20" size="53,53"/>
    </Placements>

    <!-- Animations -->
    <Animations>
        <Animation name="SwitchScreen" type="FadeThrough" duration="300"/>    
    </Animations>

    <!-- Composite Images -->    
    <CompositeImages>    
        <CompositeImage name="TaskImage" size="45,62">
            <DrawImage filename="@taskImage" loc="0,0" size="100,100" fixedAspectRatio="true"/>            
        </CompositeImage>

        <CompositeImage name="SelectedTaskDescription" size="100,10">
            <DrawText text="@description" loc="0,0" size="100,100" textStyle="GeneralTextStyle" align="Center" valign="Center"/>
        </CompositeImage>

        <CompositeImage name="CurrentTime" size="100,5">
            <DrawText text="@currentTime" loc="0,0" size="100,100" textStyle="GeneralTextStyle" align="Center" valign="Center"/>
        </CompositeImage>

        <CompositeImage name="ButtonNormal" size="25.0,5.0">        
            <DrawImage filename="..\_CoreImages\buttonmainmenu_normal.png" loc="0,0" size="100,100"/>
            <DrawTextWithOutline text="@buttonText" loc="7,0" size="100,100" textStyle="ButtonTextNormal" align="Left" valign="Center" fillColor="Normal" borderColor="NormalOutline" outlineWidth="1" />
        </CompositeImage>

        <CompositeImage name="ButtonSelected" size="25.0,5.0">        
            <DrawImage filename="..\_CoreImages\buttonmainmenu_selected.png" loc="0,0" size="100,100"/>
            <DrawTextWithOutline text="@buttonText" loc="7,0" size="100,100" textStyle="ButtonTextSelected" align="Left" valign="Center" fillColor="Selected" borderColor="SelectedOutline" outlineWidth="1" />
        </CompositeImage>

    </CompositeImages>            
</settings>

To start off, sub defines the NamedColor here in blue, and we follow suit just in case of compatibility issues. We don't use it however.

Code:

<!-- name colors -->
<NamedColors>            
    <NamedColor name="StandardFill" color="Black"/>            
</NamedColors>

We don't have any textstyles defined here, so our buttons will use the textstyles defined in the baseskin.xml file. Lets say we want to add a few textstyles here to change things up and make them slightly different than the plugin screens.

I am going to add some textstyles. I'll give them names that describe what they do so it will help future skinners.

Code:

<TextStyles>
<TextStyle name="ClockText" color="ScreenName" size="40"/>
<TextStyle name="Title" color="ScreenName" size="17"/>
</TextStyles>

You see I am still using named colors from the baseskin.xml file. I could add different sized button text here, but I am fine with the ones in the baseskin.xml file.

The placements work the same way as described in the baseskin.xml file. There are a few additional items to cover.

Code:

    <!-- placements -->
<Placements>
    <Placement name="MenuButtonOrigin" loc="17.5,25" offset="9" rightShift="true" alpha="200"/>
    <Placement name="SelectedTaskDescription" loc="0,89" alpha="180"/>
    <Placement name="TaskImage" loc="42,15" alpha="210"/>
    <Placement name="CurrentTime" loc="0,0" alpha="200"/>
    <Placement name="InsetRect" loc="30,20" size="53,53"/>
</Placements>

The MenuButtonOrigin will say where we want the buttons to start. If we wanted to move them to the left or right, we would change it here. Offset="9" is non-functional at this time. It is possibly going to work in future releases of GBPVR. The rightShift="true", can also be set to "false". This determines if there is a visible shift in the buttons when you scroll them. "Alpha" is how transparent to make them. "255" is full opaque (cannot see through). "0" is fully transparent.

The rest of the placements are for location of task images, task decriptions (helper text when selecting a button that describes the plugin), time, and visualizations in the InsetRect.

The next item is

Code:

<Animations>
    <Animation name="SwitchScreen" type="FadeThrough" duration="300"/>    
</Animations>

Options here for type are "FadeThrough" and "ZoomThrough", the duration is the speed of the effect. The higher the number, the longer the duration of the effect. This is how screens transition each other.

The CompositeImages should be self explanitory. If you did not want task images or task descriptions, you can comment them out like this..

Code:

    [COLOR="SeaGreen"]<!-- Composite Images -->    
    <CompositeImages>    
        <!--<CompositeImage name="TaskImage" size="45,62">
            <DrawImage filename="@taskImage" loc="0,0" size="100,100" fixedAspectRatio="true"/>            
        </CompositeImage>-->[/COLOR]

I am going to add a title to the menu and that is about it. I do that by sneaking it into the CurrentTime composite image..

Code:

<CompositeImage name="CurrentTime" size="100,100">
    <DrawText text="@currentTime" loc="0,10" size="95,100" textStyle="ClockText" align="Right"/>
    [B][color=Red]<DrawTextWithOutline text="Command Center" loc="2,0" size="100,100" textStyle="CommandCenter" align="Left" fillColor="ScreenName" borderColor="GeneralOutline" outlineWidth="1" />[/color][/B]
        </CompositeImage>

This is my finished results with changes highlighted.

Code:

<settings>
    <!-- name colors -->
    <NamedColors>            
        <NamedColor name="StandardFill" color="Black"/>            
    </NamedColors>        
  
    <!-- text style -->
    <TextStyles>
[COLOR="Red"][B]        <TextStyle name="ClockText" color="ScreenName" size="13"/>
        <TextStyle name="CommandCenter" color="ScreenName" size="27"/>[/B][/COLOR]
    </TextStyles>

    <!-- placements -->
    <Placements>
        <Placement name="MenuButtonOrigin" loc="17.5,25" offset="9" rightShift="true" alpha="200"/>
        <Placement name="SelectedTaskDescription" loc="0,89" alpha="180"/>
        <Placement name="TaskImage" loc="42,15" alpha="210"/>
        <Placement name="CurrentTime" loc="0,2" [color=Red][B]alpha="255"[/B][/color]/>
        <Placement name="InsetRect" loc="30,20" size="53,53"/>
    </Placements>

    <!-- Animations -->
    <Animations>
        <Animation name="SwitchScreen" type="FadeThrough" duration="300"/>    
    </Animations>

    <!-- Composite Images -->    
    <CompositeImages>    
        <CompositeImage name="TaskImage" size="45,62">
            <DrawImage filename="@taskImage" loc="0,0" size="100,100" fixedAspectRatio="true"/>            
        </CompositeImage>

        <CompositeImage name="SelectedTaskDescription" size="100,10">
            <DrawText text="@description" loc="0,0" size="100,100" textStyle="GeneralTextStyle" align="Center" valign="Center"/>
        </CompositeImage>

        <CompositeImage name="CurrentTime" size="100,100">
            <DrawText text="@currentTime" [color=Red][B]loc="0,10" size="95,100"[/B][/color] textStyle="ClockText" align="Right"/>
            [color=Red][B]<DrawTextWithOutline text="Command Center" loc="2,0" size="100,100" textStyle="CommandCenter" align="Left" fillColor="ScreenName" borderColor="GeneralOutline" outlineWidth="1" />[/B][/color]
        </CompositeImage>

        <CompositeImage name="ButtonNormal" size="25.0,5.0">        
            <DrawImage filename="..\_CoreImages\buttonmainmenu_normal.png" loc="0,0" size="100,100"/>
            <DrawTextWithOutline text="@buttonText" loc="7,0" size="100,100" textStyle="ButtonTextNormal" align="Left" valign="Center" fillColor="Normal" borderColor="NormalOutline" outlineWidth="1" />
        </CompositeImage>

        <CompositeImage name="ButtonSelected" size="25.0,5.0">        
            <DrawImage filename="..\_CoreImages\buttonmainmenu_selected.png" loc="0,0" size="100,100"/>
            <DrawTextWithOutline text="@buttonText" loc="7,0" size="100,100" textStyle="ButtonTextSelected" align="Left" valign="Center" fillColor="Selected" borderColor="SelectedOutline" outlineWidth="1" />
        </CompositeImage>

    </CompositeImages>            
</settings>

There is a lot that you can play with. Change button sizes, text sizes, positions of elements. Add text or remove them. You can spend all day on the xml side of things with the menu.

One more thing of note, there has to be a file called background mask.png in the skin2\SkinName\Menu folder. This is an overlay image that lays on the top of the background and text. It is used to give different graphical enhancements above and beyond what the background will look like in other screens. They need to be mostly transparent, and if you are not a graphics tinkerer, it is best to make do with the ones included with the SkinPlugin.

[Fatman_do]

This tutorial is on "temporary hold". There are some new main menu elements introduced in GB-PVR v1.2.9 and I need to review them and update this thread.

I hope to get back to this next week.

[zehd]

If you are an artistic type, the easiest way to make a new theme is find a layout that you like and change the image files in the following folders..

skin2\Community3\Community3\Menu
skin2\Community3\_TaskImages
skin2\Community3\_CoreImages

then copy the \_CoreImages folder to the legacy folder..

skin\Community3\_CoreImages

Keep the names the same, just replace the images with your new ones of choice. I'll cover the names later and their meaning, but that shouldn't stop you from replacing the images.

Otherwise, use the SkinPlugin to set the images from the provided image library to a setup you like.

The Theme in this example will use Left side buttons.

I use Notepad++ as my .xml editor, but there are many others out on the web. In a pinch, you can use Notepad, but I like the color coding, grouping, and valid xml checking that Notepad++ has(via XML Tools plugin found on download page).

I will use the CommunitySkin in its default form (you can use any theme here).

My advice is, once you have a setup close to how you want yours to look, make a backup copy of the Community3 folder in both skin directories. That way you have something to fall back on in case things go haywire.

Next we will dissect the baseskin.xml file.

Huh?

You can delete this message, as it will break the flow of what you're going, but

huh?

If this is for beginners (And I am one), you might start off with how Community skin and the Skin Plugin works. Something like: (and I'm only winging it here) (please fill in the gaps and correct my ideas...)

Introduction:

The Community Skin project is designed to make it easier for the novice and expert alike to create or modify skins.

A skin is a collection of files: graphics, and configuration files (.xml) files (and even sound files) that will represent a collection of pages and panels seen while using the GUI in GB-PVR.

The XML configuration files are simple text files that tell GB-PVR to: show a background image, a few button and other graphic elements, and define what they look like: size, colour, location (placement) and function (Ornamental or functional - connecting to program features in GB-PVR)

Normally, all of the elements for one skin would be found in one specific directory:

Code:

C:\Program Files\devnz\gbpvr\skins2\[I]SpecificSkin[/I]

The Community Skins approach is that the elements from several different skin are stored in the same location.

Code:

C:\Program Files\devnz\gbpvr\skin2\Community3

Within this folder are all of the elements that make up the several skins the Community Skin can display.

When you use the SkinPlugin, you are selecting specific config files, that will display elements for just one skin at a time

Eg: Within GB-PVR and the SkinPlugin, I select 'Avance' and then only the elements of Avance are displayed when GB-PVR is used. If I choose a different skin 'Satori', then the elements are shifted around and then GB-PVR will only use the elements that make up 'Satori'

>>>> This is where you really need to get me straightened out because this is the reason I said 'huh?'

Now when it comes to editing a skin, it's best to start with an existing one.

You could swap out elements that the original skin uses with your own. Use the same filenames. You'll probably be starting and stopping GB-PVR a lot as you make a change, and then check to see what it looks like.

Once you finish making the changes, and your skin is working just fine, you can save it ... I have no idea, but probably explained later. A summary statement would be nice here...



Edit: The reason I need to know how to save right from the beginning is because I don't like to read, and I just wanna get enough to get started. I DO want to know I'm not going to screw something up, so I don't want to maess with an existing skin and then not be able to get it back...

[Hairy]

Edit: The reason I need to know how to save right from the beginning is because I don't like to read, and I just wanna get enough to get started. I DO want to know I'm not going to screw something up, so I don't want to maess with an existing skin and then not be able to get it back...

It's always a good idea to simply backup whichever skin you're going to edit. If you start with either the default Blue skin or the community skin, make a copy of it before you start editing it and then make regular interval copies of the edited skin as you progress.

If you are manually editing a skin then there is no "save" as such you simply copy the skin folder in which ever state you get it to.

fatman_do feel free to tidy this away as well

[Fatman_do]

zhed,

Thanks for the comments. Sometimes it is hard to write from the outside looking in perspective.

[Fatman_do]

Should I be writting this on the wiki so others can edit?

[McBainUK]

Sounds like a good idea. zehd's pretty handy with the wiki

[pz1]

Should I be writting this on the wiki so others can edit?

That would be a good idea not only for the sake of collaborative writing, but also to make the "state of the art" easier to find.

Let me also state that I highly appreciate what Zehd and you are doing for GBPVR!
Pieter

[zehd]

Should I be writting this on the wiki so others can edit?

(hah, I love the vote of confidence BEFORE I even offer...)

When I first joined I made a lot of contributions to the wiki, because as a newby, I could see the newby questions very clearly. So I asked, learned, understood, and wrote...

As far as skinning goes, I'm completely starting from scratch, although now I have expeience working with GB-PVR, 3rd party apps, and xml etc...

So as long as no one minds, I would like to start the wiki tutorial in a sandbox sort of thing, as I ask tonnes of newby questions.

From what I know so far, and as a programmer, I don't like a couple of 'standards' and I would like to share my thoughts too.

And in the end, we may even end up with a GUI wysiwyg editor to boot...

Short answer, I will gather the info from this page to get us started, and then start asking more questions...