Building a skin from scratch - a tour - (1 Viewer)

[mbuzina]

I have just started to build a skin starting from complete empty files with just a few ideas in my head. I would like to share this experience with all interested. I guess I will learn a lot about the skinning engine - and maybe get a few of you guys to be interested in MP skinning/plugin development or top other support of MP.

@public Relations - let's see how this goes, it might be worth a blog post in future.

Soo let's get kicking:
1. Design Ideas
I am not a big "painter". I have 2 left hands (I beg your pardon, all left-handed) for drawing picures. So my theme will have a focus on fonts (large fonts) and foto realistic images (maybe I will snap some pics myself).

I am inspired in part by the windows 8 "Modern" look, so no rounded corners and I will use Segoe UI font as I believe this to be one of the most readable & balanced fonts available. I also will use fast & nice slide/fade animations to make the skin look lively.

I also want to have a very configurable skin. Ideally change a few settings in MP and your BasicHome looks completely different, as you want it to be. For this I will try to explore the limits of the skinning engine.

2. Getting started
As I am no real designer I will not start with mockups. They take just as long for me to draw as to code something in XML. So everything seen here will be functional from start. 1st check: which files do I need to have a working (but empty) skin? The wiki helps a little, but not enough. So here is the list:
Skin Folder needs to contain, I will copy file from Titan to get the correct IDs but then remove all defines & all controls (resulting in an empty skin page):
Folders:
Fonts (folder may be empty if font is installed on system, have to check later for deployment)
Sounds (also keep empty first)
Themes (also empty at first)
Media (needs some things here)
Media\tetris (MP complains if it is missing)
Media\weather
Media\weather\64x64
Media\weather\128x128

XML Files (directly in skin folder):
references.xml (copy from titan, delete the styles, check the default settings & modfy all font name references)
fonts.xml (start clear, I added fonts in different sizes, currently 96, 36,24,18,14,12,12 Bold, 11). More might come but not much - kiss
SkinSettings.xml (copied from Titan, need to clean some things, this will drive all customization of my skin)
splashscreen.xml (copied from Titan, need to make my own background for this)
topbar.xml and topbarhome.xml - just empty for the moment
myHome.xml and myHome PlugIns.xml - just left the menu definition in there for future reference.
BasicHome.xml - start empty, but this will be the first big thing to work on.

3. Skin Name
I had to name the folder and I was not sure about the name. Lets start with the nice multi-meaning word "Medium". My definition stems from the word Media and MP is the medium I use to enjoy media. And it needs to be balanced & find a nice middle ground, so it will be medium as well.

EDIT: If you are designing skins, have a good XML editor (I use VisualStudio) and install the MyRefresh plugin (https://forum.team-mediaportal.com/threads/myrefresh-refresh-skin-xml-inside-mp.114904/) - it will refresh the skin from disk (incl. re-caching) on pressing F5. Essential for a skinner.

 

[azzuro]

you can also use MPskinEditor, for 1st approch but it is not maintened
https://github.com/MediaPortal/MediaPortal-1/tree/master/Tools/SkinEditor

 

[mbuzina]

4. Initial look
OK, I want to have a tile at the top, a clock in the right, along with date & if available weather information. Weather should not be realistic image but needs to be iconic. So after looking around I found @legnods Titan mod (https://forum.team-mediaportal.com/threads/titan-flow-theme.115278/). Currently only 64x64 pics but maybe he has them in high resolution as well. I want a backdrop for each menu item, either fixed or fanart and I want a slow scrolling transparent overlay on that (similar to the Win 8 Modern start screen backdrop), I want horizontal menu with an optional submenu & uo to 3 overlays in parallel. A footer completes with a ticker and, if media is running lower left preview & song information.

The text needs a viewport / background, but it needs to be transparent to show the fotos beneath. Color schema should be easily changeable, lets start with white, transparent dark grey and an orange highlight color.

5. Configurability
I do not like the current external menu editors and I still want everyone to be able to customize their own HomeScreen. That is quite a challenge I put up for me here. But I want to put the following (current state) options in SkinSettings.xml which then can be edited in MP (I hope I will finish my skin ;-o ):

<entry name="#BasicHome.B0.Label">Play Disc</entry>
<entry name="#BasicHome.B0.Backdrop">hover_play disc.png</entry>
<entry name="#BasicHome.B0.Overlay.WW">r1</entry>
<entry name="#BasicHome.B0.Overlay.LatestRecordings">r2</entry>
<entry name="#BasicHome.B0.Overlay.LatestMusic">r3</entry>
<entry name="#BasicHome.B0.Overlay.LatestVideos">r0</entry>
<entry name="#BasicHome.B0.Overlay.LatestMovies">r0</entry>
<entry name="#BasicHome.B0.Overlay.LatestSeries">r0</entry>
<entry name="#BasicHome.B0.Overlay.ClickfinderPG">r0</entry>
<entry name="#BasicHome.B0.Overlay.SubMenu">r1</entry>
<entry name="#BasicHome.B0.Hyperlink">1</entry>
<entry name="#BasicHome.B0.HyperlinkParameter"></entry>
<entry name="#BasicHome.B0.Action"></entry>

Each of these entries are available 10 times giving me 10 menu items.

• Label empty --> Menu not shown.
• Backdrop can be one of the following acc. to plan: empty -> no backdrop, WORLDWEATHER -> current weather backdrop (thanks @legnod again for the pics, tell me if it is not OK to use them), FA_MUSIC, FA_MOVINGPICTURES, FA_MYVIDEOS, FA_TVSERIES, FA_PICTURES, FA_GAMES. Other ideas are welcome.
• Overlays: Value r0 -> Overlay not shown, r1 -> Overlay in row 1, r2 -> row 3, r3 -> row 3 giving me 3 places to have overlays (sizes will be defined). I hope I can manage focus throwing here...
• Hyperlink & Parameter: As they are
• Action: Will probably have to go as MP becomes unstable when a button has an action defined as being a skin setting. Probably a bug?

Submenu:
But that is not all in parameters. Each group (of 10 menu items) gets another 4 x 10 SkinSettings (yes, 400 settings!) each submenu will be defined by:

<entry name="#BasicHome.B0.0.Label">Recordings</entry>
<entry name="#BasicHome.B0.0.Hyperlink">1</entry>
<entry name="#BasicHome.B0.0.HyperlinkParameter"></entry>
<entry name="#BasicHome.B0.0.Action"></entry>

Note: Again, Action might have to go.

The menu will get up to 3 additional entries for exiting MP & shutting down, controlled by the following settings:

<entry name="#BasicHome.ShowExit">True</entry>
<entry name="#BasicHome.ShowRestart">True</entry>
<entry name="#BasicHome.ShowShutdown">True</entry>
<entry name="#BasicHome.Shutdown.Action">992</entry>

Note: Shutdown Action will be replaced by 4 True/False settings controlling the Shutdown action. With this skin you can define what shutdown does and have only one shutdown button. WAF security from the design on ;-)

 

[mbuzina]

6. First Results
I will not recount all the pains I went through to get the flexibility up to where it is now, but there are quite a few. Some things to think about:

• MP will not render anything that is off-screen. So if you want something to slide in from outside of the screen you need to position it inside first and then animate it away (use a conditional animation of slide with short timing & large positional change. Maybe include fade in so it is not visible while moving).
• MP is very touchy about how you use the Skin Expressions, Skin Functions, Visibility Conditions & more. This is just extensive trial & error and quite frustrating to be honest. For deciding on texture I found a good working switch function which I would like to share here:
  

  <texture>#(switch(
  	  eq(#BasicHome.B0.Backdrop,'WORLDWEATHER'),string.format('weather/backgrounds/{0}.jpg',#WorldWeather.TodayIconNumber),
  	  eq(1,1),#BasicHome.B0.Backdrop
  	))</texture>

  Make sure to use the exact whitspace configuration as I did here (start of switch on the same line as the texture tag, ending parentheses on same line as the closing tag. This way you have great conditional selection.
• Use of skin.setsting. I use setstring to maintain the current selected ID of the menu to control all of visibility & animation positions. That works great except some issues I stumbled upon (later more). I use the following set onfocus:
  

  <onfocus>#(skin.setstring('#BasicHome.Current.Label',#BasicHome.B0.Label))|#(skin.setstring('#BasicHome.Previous.ID',#BasicHome.Current.ID))|#(skin.setstring('#BasicHome.Current.ID',0))</onfocus>

• Use Styles religiously. My styles result in very short control definitions. I will omit ID, placement, etc. if possible. Use group controls to handle visibility better. But remember one thing (stupid, I know): If you animate a group control, its contents is animated twice. So slide a group 300 px to the right & the contents (if you do not use layouting) slides 600 px.
• Use conditional animation for positioning. Sample for one menu item
  

  <animation effect="slide" time="300" end="0,0" easing="inout" condition="control.isvisible(1100)">conditional</animation>
  <animation effect="slide" time="300" end="-800,0" easing="inout" condition="control.isvisible(1101)">conditional</animation>
  <animation effect="slide" time="300" end="-1600,0" easing="inout" condition="control.isvisible(1102)">conditional</animation>
  <animation effect="slide" time="300" end="-2400,0" easing="inout" condition="control.isvisible(1103)">conditional</animation>
  <animation effect="slide" time="300" end="-3200,0" easing="inout" condition="control.isvisible(1104)">conditional</animation>
  <animation effect="slide" time="300" end="-4000,0" easing="inout" condition="control.isvisible(1105)">conditional</animation>
  <animation effect="slide" time="300" end="-4800,0" easing="inout" condition="control.isvisible(1106)">conditional</animation>
  <animation effect="slide" time="300" end="-5600,0" easing="inout" condition="control.isvisible(1107)">conditional</animation>
  <animation effect="slide" time="300" end="-6400,0" easing="inout" condition="control.isvisible(1108)">conditional</animation>
  <animation effect="slide" time="300" end="-7200,0" easing="inout" condition="control.isvisible(1109)">conditional</animation>
  <animation effect="slide" time="300" end="-8000,0" easing="inout" condition="control.isvisible(1110)|control.isvisible(1111)|control.isvisible(1112)">conditional</animation>

  Controls 1110 -> 1112 are visible depending on the value of #BasicHome.Current.ID set by focus changing.

 

[mbuzina]

Time for a little teaser. This BasicHome works already, changes backgrounds as defined in SkinSettings and has 1 overlay. It does not (yet) hide or position the overlay as defined in the settings, that is a whole saga by itself (I left a post somewhere on that).

 

[mbuzina]

BIG Showstopper Alert:
The idea of the fully flexible home based on SkinSettings is not possible with the current MP1.4 code (****arrrrghh****).

When I try to use a setting as a Hyperlink target, MP will throw an error into the log and stops rendering upcoming controls.

[2013-06-13 13:50:13,178] [Log	] [MPMain  ] [INFO ] - GUIControlFactory.Create: #(cint(#BasicHome.B0.Hyperlink)) ist kein gültiger Wert für Int32.
  bei System.ComponentModel.BaseNumberConverter.ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, Object value)
  bei System.ComponentModel.TypeConverter.ConvertFromString(ITypeDescriptorContext context, CultureInfo culture, String text)
  bei MediaPortal.GUI.Library.GUIControlFactory.ConvertXmlStringToObject(String valueName, String valueText, Type type)
  bei MediaPortal.GUI.Library.GUIControlFactory.UpdateControlWithXmlData(GUIControl control, Type controlType, XmlNode pControlNode, IDictionary`2 defines, String filename)
  bei MediaPortal.GUI.Library.GUIControlFactory.Create(Int32 dwParentId, XmlNode pControlNode, IDictionary`2 defines, String filename)

Is this a bug or would that be a feature request? Will try to get this into a future MP Version (along with having the same for Action).

And that just at the moment the flexible positioning of overlays started to work...

 

[kiwijunglist]

I like this I was actually thinking of designing a skin quite similar and called it typeface or something like that. Great minds think a like The vector based outline weather images look good with the fonts. What you are doing will be really useful for anyone designing a new skin, as it is so messy starting with an existing skin. You can see this in titan where it has lots of code from Blue3 that is just commented out or images that are rendered of screen so they are not visible. I like how you are doing the overlays. You could actually consider dividing the middle of the screen into 9 tiles and the now playing overlay could be positional you basically choose what overlay is displayed in each tile for each menu item. Have you figured out how to do the menus if you want less than 10 menu items into your home screen?

 

[mbuzina]

Right now I have to horizontal positions, left & right. If the menu item has a submenu, all overlays are on the right & the submenu is on the left. If there is no submenu, the overlays go to the left. I might add more positions later. I like your idea of repositioning the now playing as well, hadn't thought of that one yet.

Yes, 10 menus or less works fine (just leave them blank & they will be hidden). The issue with the hyperlink is a big one though. Without that it will just not work at all ;-(

Right now I seem to have made a big screw up - all my labels are blank. So just reinstalling MP to see if I broke something in there ...

 

[mbuzina]

@kiwijunglist: interested in working together on this? I will setup a github repo (will try if I can get it working ;-)

 

[kiwijunglist]

I'd definitely be interested in sharing ideas and giving suggests and helping with graphics, but I don't have the time to be an 'official' part of it.
I haven't done any work on my theme in over a week and that is just a glorified homescreen!!
I don't really know how to program or anything, only 2 weeks ago I stopped using notepad to edit xml files (I tried out notepad++ , much easier)Your design makes me think of Win8 mobile and Android JellyBean. The black really screams android
Maybe after I finish my homescreen mods for Titan I could jump ship.