Appearance Manager

[Old Dog]

Code:

[size=3]
<!-- COMPOSITE IMAGES -->

<CompositeImage name="Background" size="720,480">
    <!--
        [b]Appearance Mangager requires MainBackground.jpg
        in the skin's root directory (one up from here)[/b]
    -->                        
    <DrawImage filename="..\MainBackground.jpg" loc="0,0" size="720,480"/>        
    <!--
        [b]Appearance Mangager requires the skin effect
                se.png in the main menu directory[/b]
    -->                        
    <DrawImage filename="se.png" loc="0,0" size="720,480"/>        
</CompositeImage>

<CompositeImage name="SelectedButtonImage" size="240,35">
    <!--
        [b]Appearance Mangager requires MainButtonSelected.png
        in the skin's root directory (one up from here)[/b]
    -->                        
    <DrawImage filename="..\MainButtonSelected.png" loc="0,0" size="240,35"/>
    <DrawText text="@buttonText" loc="0,2"  size="240,35" textStyle="SelectedButtonText"   align="Center"/>
</CompositeImage>
        
<CompositeImage name="NormalButtonImage" size="240,35">
    <!--
        [b]Appearance Mangager requires MainButtonNormal.png
        in the skin's root directory (one up from here)[/b]
    -->                        
    <DrawImage filename="..\MainButtonNormal.png" loc="0,0" size="240,35"/>        
    <DrawText text="@buttonText" loc="0,2"  size="240,35" textStyle="ButtonText"   align="Center"/>
</CompositeImage>
        
<CompositeImage name="CenteredSelectedButtonImage" size="240,35">
    <!--
        [b]Appearance Mangager requires MainButtonSelected.png
        in the skin's root directory (one up from here)[/b]
    -->                        
    <DrawImage filename="..\MainButtonSelected.png" loc="0,0" size="240,35"/>
    <DrawText text="@buttonText" loc="0,2"  size="240,35" textStyle="SelectedButtonText"   align="Center"/>
</CompositeImage>
        


<!-- SPECIAL ELEMENTS -->

<!--
    [b]Appearance Mangager will edit the
        special elements related to task images.[/b]
-->                        
<SpecialElement name="TaskDescription" visible="true" loc="400,275" size="250,70" align="Center"/>        
<SpecialElement name="TaskImage" visible="true" loc="450,100" size="150,203"/>        
[/size]

That's it!
-David

P.S. Next: How to make your plugin skin compatible with AM.

[Old Dog]

Code:

[size=3]
<CompositeImage name="Background" size="720,480">            
    <!--
        [b]Appearance Mangager requires Background.jpg
        in the skin's root directory (one up from here)[/b]
    -->                        
    <DrawImage filename="..\Background.jpg" loc="0,0" size="720,480"/>
    <DrawImage filename="..\Darker.png" loc="175,55" size="510,350"/>
    <DrawText text="Recordings" loc="32,16" size="200,120" textStyle="ScreenName" align="Left"/>                                    
    <!--
        [b]Optional per plugin.
        Appearance Mangager recommends the skin effect
        se.png in the plugin's directory[/b]
    -->                        
    <DrawImage filename="se.png" loc="0,0" size="720,480"/>
</CompositeImage>        



<!-- These are best kept in your BaseSkin.xml -->

<!-- image used for a selected button -->
<CompositeImage name="SelectedButtonImage" size="135,28">
    <!--
        [b]Appearance Mangager recommends that button image files
        be kept in the skin's root directory (one up from plugin).
        File name is arbitrary.[/b]
    -->                        
    <DrawImage filename="..\ButtonDn135x28.png" loc="0,0" size="135,28"/>
    <DrawText text="@buttonText" loc="-1,1" size="135,28" textStyle="SelectedButtonTextHi" align="Center"/>
    <DrawText text="@buttonText" loc="1,3"  size="135,28" textStyle="SelectedButtonTextLo" align="Center"/>
    <DrawText text="@buttonText" loc="0,2"  size="135,28" textStyle="SelectedButtonText"   align="Center"/>
</CompositeImage>
        
<!-- image used for a normal button -->
<CompositeImage name="NormalButtonImage" size="135,28">
    <!--
        [b]Appearance Mangager recommends that button image files
        be kept in the skin's root directory (one up from plugin)
        File name is arbitrary.[/b]
    -->                        
    <DrawImage filename="..\ButtonUp135x28.png" loc="0,0" size="135,28"/>
    <DrawText text="@buttonText" loc="-1,1" size="135,28" textStyle="ButtonTextHi" align="Center"/>
    <DrawText text="@buttonText" loc="1,3"  size="135,28" textStyle="ButtonTextLo" align="Center"/>
    <DrawText text="@buttonText" loc="0,2"  size="135,28" textStyle="ButtonText"   align="Center"/>
</CompositeImage>
        
<!-- image used for a popup selected button -->
<CompositeImage name="PopupSelectedButtonImage" size="124,28">
    <!--
        [b]Appearance Mangager recommends that button image files
        be kept in the skin's root directory (one up from plugin)
        File name is arbitrary.[/b]
    -->                        
    <DrawImage filename="..\ButtonDn124x28.png" loc="0,0" size="124,28"/>        
    <DrawText text="@buttonText" loc="-1,1" size="124,28" textStyle="SelectedButtonTextHi" align="Center"/>
    <DrawText text="@buttonText" loc="1,3"  size="124,28" textStyle="SelectedButtonTextLo" align="Center"/>
    <DrawText text="@buttonText" loc="0,2"  size="124,28" textStyle="SelectedButtonText"   align="Center"/>
</CompositeImage>
        
<!-- image used for a popup normal button -->
<CompositeImage name="PopupNormalButtonImage" size="124,28">
    <!--
        [b]Appearance Mangager recommends that button image files
        be kept in the skin's root directory (one up from plugin)
        File name is arbitrary.[/b]
    -->                        
    <DrawImage filename="..\ButtonUp124x28.png" loc="0,0" size="124,28"/>        
    <DrawText text="@buttonText" loc="-1,1" size="124,28" textStyle="ButtonTextHi" align="Center"/>
    <DrawText text="@buttonText" loc="1,3"  size="124,28" textStyle="ButtonTextLo" align="Center"/>
    <DrawText text="@buttonText" loc="0,2"  size="124,28" textStyle="ButtonText"   align="Center"/>
</CompositeImage>
        


[/size]

[Old Dog]

Just to make sure we are all on the same page...

As a developer, I see AM as a component for the skin designer. The skin designer is free to choose to include or not to include AM in their skin.

As the developer of The Collection I have chosen to include AM. For my end-users, AM is a tool to configure the GUI using a remote control.

Anyone, especially talented graphic artists, may create SkinPacks for the Collection and post them or distribute them as they see fit.

(Its Collection, not Collective!)

[Fatman_do]

Give this a try for a familiar feel. Didn't turn out as good as I had hoped.

[Old Dog]

Looks good to me!

Keep at it, it gets easier. This might even make a good learning playground.

Enjoy!
David

[Old Dog]

Some of you may have read where I have referred to the 3-1/2 layers of a GBPVR skin. For most of you, these layers are intuitively obvious, you just know about them and design your skins for them. You don’t really need to spend time thinking about it.

However, sometimes it is worthwhile to drop back to the basics and identify the elementary qualities of your target environment. I ended up doing this as I attempted to maximize end-user choices for The Collection.

There’s no magic here, its not rocket science, but to give them names, the layers are:

• The background layer
  
• The static motif (or skin) layer
  
• The content layer
  
• The dynamic motif (or dynamic skin) layer
  

(more later…)

[Old Dog]

The Appearance Manager has subdirectories for backgrounds, static skins (skin-effects) and dynamic skins (buttonsets).

The content layer is represented by the skin.xml files.

There really aren't any hard and fast rules on designing a skin. For example, AM requires the Colors directory under backgrounds, but also supports siblings for colors. Simply create a directory along side Colors, say "Floral", drop in some JPGs. You've just combined the background and static skin layers for the main menu, you're using wallpaper!

BTW, the dynamic skin can be more than just buttons. Anything that contributes to the "look" but changes dynamically could be placed here. Plain Jane doesn't use graphics for dynamic elements other than buttons. Other skin designers may want to use graphics files for selector bars or other types of user feedback devices. Just drop them in into your AM buttonsets sub-directory to create coordinated designer packages.

(enough for now)

[Fatman_do]

Would it be possible for you to change appearance manager to either:

a) use all directory structures in
..\appearance\backgrounds\
for plugin backgrounds as well.

or

b) use a new directory
i.e. ..\appearance\pluginbackgrounds\
that appearance manager can use in sub-directory categories.

I think (a) is all that would really be needed.

It appears that plugin backgrounds only are selected in the \Colors directory. I can work around it by dumping all images in that directory, but I like the organizational method the other directories use.

[Old Dog]

Would it be possible for you to change appearance manager to either:

a) use all directory structures in
..\appearance\backgrounds\
for plugin backgrounds as well.

I sure could, in fact I used to. I stopped because the other directories were simply used for wallpaper which I think gets in the way on submenus. Of course this may have been a bad decision.

I'm willing to change it but before I just jump on it I'd like for us to discuss it a little (having someone else help with the solutions sure makes it easier).

What kind of images are you planning on using? I ask this because I'm guessing what one of your answers might be.

Best Regards,
David

[Fatman_do]

I have started and stopped several skin designs, and for the most part I use either the same background, or a slightly modified one for plugin backgrounds.

I have started a new skin project I call for now: Chameleon.
(I will more publicly announce when I get more fleshed out) that will benefit from that organizational method. To explain it without images. Take the "Blue" background with a few color variants. You could use those same backgrounds for plugins, or use solid colors, or ect..

I plan on contacting most of the major skinners and asking for approval to include their backgrounds, buttons, ect. in a preview, and maybe include them in distribution. Sounds ambitious for someone that is short on talent I know.

What I am going to try to do is start with my take on "Blue" and be able to end up with my take on "ContourHC" or "Collection" ect. I see it as a vehicle to blend all these great skins into one.

BTW may I include images from the Collection in my work?