A skinners guide to MePo (1 Viewer)

[n4orcer]

What, why?
I know we have an information thread above with basic information about skinning, though it’s not really updated and there is a lot more information available... In various skinners head, so lets try to collect and share it all here!

My idea for this thread is to be a good start-of point for new skinners to learn about and find good tips/tricks, links and good practices for skinning for MePo.

The thread should not really be a discussion about skinning, but more of a thread where skinners share good practices for coding, examples and workarounds for creating skins for MePo, basically a good first stop for new skinners where you can find links, known issues with workarounds, best practices, what to think about, important information all skinners should know/be aware of and so on.

I'm nowhere near as good with skinning as many of the more veteran skinners here, but I would like to share a few nuggets I have learned so far. Feel free to contribute with your tips and ideas on how to do certain things while skinning and perhaps find a solution why your code is not doing what you intend it to do.

If you post an example and code snippet, please describe what it does and why this is a good way of doing it and what problems it solves if it does so and if it is plugin specific do not forget to note which plugin it’s for.

If you have suggestions, links, good documentation or other things of interest please PM me and I will add it to the list below.

Please share this thread among your friends and fellow skinners, veterans care to share you expertise?

Good Links
MediaPortal Skin Architecture
MediaPortal1_Development/SkinArchitecture - MediaPortal Manual Documentation
MediaPortal1_Development/SkinArchitecture/MP_1_0_1-to-1_1_0 - MediaPortal Manual Documentation
MediaPortal1_Development/SkinArchitecture/MP_1_1_0-to-TBD - MediaPortal Manual Documentation
MediaPortal Skin Tools
https://forum.team-mediaportal.com/...request-here-48/there-need-skin-editor-69561/

MovingPictures
Skin Designer's Guide - Moving Pictures
Fanart Handler
SkinnersGuide - fanart-handler - Use Fanart Handler Plugin In Your Skin. - Project Hosting on Google Code
MP-TVSeries
SkinDesignersGuide - mptvseries - Skin Designers Guide for MP-TVSeries plugin. - Project Hosting on Google Code
Infoservice
InfoService
OnlineVideos
Skinning guide

Index
Known issues and work arounds – n4orcer (Will be posted tonight or tomorrow) Help wanted!
Required files by Mediaportal - Help wanted!
Control groups/Common GUI (Graphical User Interface) Elements/Naming schemes – n4orcer

 

[offbyone]

OnlineVideos
Skinning guide

 

[n4orcer]

OnlineVideos
Skinning guide

Thanks! Added to the main post.

 

[n4orcer]

Control groups/Common GUI (Graphical User Interface) Elements/Naming schemes

Control groups
Control groups is a way to group different types of controls together that share common configuration and settings. Groups is also a great way to collect interface elements together that logically belongs together.

I will be using code from Essence-1080p as an example below.
Imagine you have a “bar” placed on the top of your skin that you want to show on all screens of your skin, this “bar” will look the same throughout the skin and will be show some common information to the user. In our case in Essence, this “bar” will display the current Time and Date on the left side of the screen and show weather information and current module/selection to the right of this “bar”.

To simplify the use of this “element” as we choose to call this “bar”, we have created a new file in the main directory of the skin, we choose to name it “common.gui.elements.xml”. The reason for this name is that it is a common file, it’s purpose is to hold and display GUI elements that are visible on all the screens throughout the skin.

For the sake of keeping this section short, I will only show one part of the skin, the Time and Date part of this “bar”.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<window>
<id></id>
        <controls>
        <control>
                <description>GROUP: Time/Date</description>
                <type>group</type>
                <dimColor>0xffffffff</dimColor>
                <animation effect="Slide" time="350" start="0,-300" end="0,0" delay="125">WindowOpen</animation>
                <animation effect="Slide" time="350" start="0,0" end="0,-300" delay="125">WindowClose</animation>
               
          <control>
            <id>2001</id>
            <description>Time</description>
            <type>label</type>
            <posX>1</posX>
            <posY>1</posY>
            <font>font16</font>
            <shadowAngle>45</shadowAngle>
            <shadowDistance>1</shadowDistance>
            <shadowColor>FF000000</shadowColor>
            <textcolor>ffffffff</textcolor>
            <align>LEFT</align>
            <label>#time</label>
        </control>
                
          <control>
            <description>Date</description>
            <type>label</type>
            <posX>128</posX>
            <posY>4</posY>
            <font>font8</font>
            <shadowAngle>45</shadowAngle>
            <shadowDistance>1</shadowDistance>
            <shadowColor>FF000000</shadowColor>
            <textcolor>ffffffff</textcolor>
            <align>LEFT</align>
            <label>#date</label>
        </control>
</control>
</controls>
</window>

The above code will display the current time and the date on all screens of the skin. The whole group will slide in and out when you change screen in the skin. For example going from the main menu of the skin into MovingPictures.

Common GUI (Graphical User Interface) Elements and Naming schemes
During our time of developing Essence we talked about how to approach the common interface that are found troughout the skin and how to name our files. We considered and looked how others did and ultimatly we decided to use the above naming convention. There are about just as much ways to do this that there is skins available but for us the following seemed most logical and to be honest I love to see a nice good file structure and naming structure of files. 

All XML files where decided that they should follow the <type/plugin>.<elementtype>.<purpose/feature>.xml. Most of the files follow this standard and more does so as we continue to work on the skin. A few good examples;

common.gui.background.xml – Easy to understand, it’s a common file and it’s gui related and it’s purpose is the background of the skin.
common.gui.home.overlay.music.xml – Also fairly easy though it deviates some from the above standard. It’s a common file, gui related but only for home screens. It’s purpose is the music overlay that actually is visible on all screens.

Now moving on to images and media. Here we have not done so good, yet atleast. The above structure is kind-of the way we are doing it, but as we been lazy and added more support faster the naming convention have been put a side for certain things. Here we have a few examples;

gui.common.bar.focus.png – it’s a gui element, it’s common and it’s a “bar”, its purpose is the focus item in menus and buttons. Here we deviate some from the above convention, we should probably fix that but it’s not really a priority at this point.
gui.movie.details.background.png – it’s a gui element, it’s used in movies and specifically for the details and it’s a background. This is a bit more obscure as this is used in tvseries aswell and should really be renamed to gui.common.details.background.png or something. This is the background we use in the details view of movies aswell as in the area we specify as the movie “details” in the list view.

Now, what is the purpose of this? Well really, I don’t know. The idea is to show you how you could name your files in a good and logical way, make you think and plan for these things as you start on your skin. I feel that it’s easier to pick what image or xml file does what and where it is used with the way we name our files.

It’s up to all skinners to do it the way the feel but this have worked great for us and we are happy with it. It’s easy for new members of the team to pickup and use. It’s easy for them to jump in without guessing what image or xml file does what and what’s its impact is.

I hope this have served as a good example of how you could do things while skinning for MePo. Let me know what you think and how you would have done it differently and why!

Thanks for reading,
n4orcer