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

[mbuzina]

Very cool!

If you really want the skin to be what is in your head; do MP2!
Starting point -> https://forum.team-mediaportal.com/...-to-mp2-or-how-titan-gets-transformed.114860/

I'm sure great devs like @morpheus_xx would help out!

I have read that thread and I even started an MP2 skin - but I was not at all sure what to do. I could not even get an empty page to render ;-(

So I cam back to MP1 - as @morpheus_xx showed - transformation is doable.

 

[morpheus_xx]

But in principle the "transformation" was a rewrite using the ideas and some graphics from Titan...

I can offer my help if you want to start with MP2 skinning! It's much less work in the end than starting it in MP1

 

[kiwijunglist]

Did you make them 900 height based on my screens? That is just because of my laptop - the skin is full 1080p

yes I downloaded your screenshot and I used that in Photoshop to make the backgrounds. it is twice as wide as the image you provided

 

[mbuzina]

Thanks again @kiwijunglist the long white one looks good. Yes it will disappear on bright backdrops, but most backdrops are dark anyway. Even if it is not fully visible when moving you get a nice effect. Built in it looks like this


P.S.: 900 height is enough. The effect is meant to be faint so no one will notice any scaling effects.

 

[kiwijunglist]

great, can always redo it when you finish the skin to a different resolution. if tyre background is sliding you will see mismatch lines because the end doesn't match the start. if you spilt it in half then the second end doesn't match the first start. you should try tyre ones with slight halo or shadow they will be visible on any colored background. looks good, keep up the good work[DOUBLEPOST=1371137107][/DOUBLEPOST]Android keyboard

 

[mbuzina]

But in principle the "transformation" was a rewrite using the ideas and some graphics from Titan...

I can offer my help if you want to start with MP2 skinning! It's much less work in the end than starting it in MP1

OK, I could try to do both in a kind of parallel way and see who is winning ;-)

But first: How to start skinning MP2? I copied your Titanium, but I could not even make an empty stage from that...

 

[Pog]

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.

There may be a way around this... I have a fully dynamic menu system working with a as of yet unpublished mod that use variable based hyperlink targets and parameters.

Ok so, you have a var defined in string setting:

<entry name="#BasicHome.B0.0.Hyperlink">1</entry>

Redefine it on page load:

<define property="true" evaluateNow="true">#REF_BasicHome.B0.0.Hyperlink:#(cint(#BasicHome.B0.0.Hyperlink))</define>

Stick it in a control:

<hyperlink>#REF_BasicHome.B0.0.Hyperlink</hyperlink>

Note: only the variable ref and nothing else can go inside the hyperlink tags.

Not had a chance to test this but I have danced with the Devil when comes to skin expressions/definitions/parameters.

 

[mbuzina]

Thx for the code ideas @Pog. The issue I will have to battle is that depending on what a variable called #BasicHome.Current.ID is set to, the hyperlink needs to be either #BasicHome.B0.0.Hyperlink, #BasicHome.B1.0.Hyperlink, etc.

I will try this (I have tried some of it, but maybe not 100% what you proposed). Right now I am changing my overlay positioning scheme, so after that your idea will be next.

 

[Pog]

Yeah there are many elements where you can't use any logic to make a decision but there are various tricks that I've come accross.

You can run your logic in a <define> and use that evaluated value directly as long as it doesn't need to change once the page has loaded.

Another very useful trick I've found for running logic past the define stage is to use a dummy control and have a <lable> doing the logic creating a text flag that can then be evaluated with regular conditional controls.

<label>#(iif(eq(#myvar1,#myvar2),' ',''))</label>
...
<visible>control.hastext(5678)</visible>

Good luck.

 

[mbuzina]

OK, next up: General configuration of Overlays / Menu
Configurability of Overlays/Submenu
OK, now I added the following to SkinSettings for each menu entry:

	<entry name="#BasicHome.B1.Label">TV</entry>
	<entry name="#BasicHome.B1.Hyperlink">1</entry>
	<entry name="#BasicHome.B1.HyperlinkParameter"></entry>
	<entry name="#BasicHome.B1.Background">hover_my tv.png</entry>
	<entry name="#BasicHome.B1.c0r0">SUB</entry>
	<entry name="#BasicHome.B1.c1r0">WW</entry>
	<entry name="#BasicHome.B1.c2r0"></entry>
	<entry name="#BasicHome.B1.c0r1"></entry>
	<entry name="#BasicHome.B1.c1r1"></entry>
	<entry name="#BasicHome.B1.c2r1"></entry>
	<entry name="#BasicHome.B1.c0r2"></entry>
	<entry name="#BasicHome.B1.c1r2"></entry>
	<entry name="#BasicHome.B1.c2r2"></entry>
	<entry name="#BasicHome.B1.0.Label">EPG</entry>
	<entry name="#BasicHome.B1.1.Label">Clickfinder</entry>
	<entry name="#BasicHome.B1.2.Label">Recorded Programs</entry>
	<entry name="#BasicHome.B1.3.Label">Scheduled Recordings</entry>
	<entry name="#BasicHome.B1.4.Label"></entry>
	<entry name="#BasicHome.B1.5.Label"></entry>
	<entry name="#BasicHome.B1.6.Label"></entry>
	<entry name="#BasicHome.B1.7.Label"></entry>
	<entry name="#BasicHome.B1.8.Label"></entry>
	<entry name="#BasicHome.B1.9.Label"></entry>

AS you can see a few things have changed. Each basic home button now has 9 c0r0 - c2r2 entries. This TV entry has a submenu (SUB) @ position c0r0 (column 0, row 0) and a world weather overlay (WW) @ position c1r0 (column 1, row 0). The submenu is only supported at position 0,0 but WW for example supports all positions. If you set it to the rightmost column (c2) it will only show the current conditions.

Each overlay needs 9 conditional controls that are visible (in position 2000,2000, so off screen) if one of the positions is selected.

		<!-- Positional Controls  -->
		<control Style="hiddenStyle">
			<description>Pos 0,0</description>
			<id>12001</id>
			<type>label</type>
			<visible>string.equals(#BasicHome.Current.c0r0,LMUSIC)</visible>
		</control>
		<control Style="hiddenStyle">
			<description>Pos 0,1</description>
			<id>12002</id>
			<type>label</type>
			<visible>string.equals(#BasicHome.Current.c0r1,LMUSIC)</visible>
		</control>
...

a group control which is only visible if one of the positional controls is visible. It is also animated to the correct place on screen depending on the visibility of the fields (never set more than one, it will result in strangeness)

		<control>
			<type>group</type>
			<id>12000</id>
			<dimColor>FFFFFFFF</dimColor>
			<animation effect="slide" time="1" delay="11" start="0,0" end="0,0" condition="control.isvisible(12001)">conditional</animation>
			<animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(12001)">conditional</animation>
			<animation effect="slide" time="1" delay="11" start="0,0" end="0,142" condition="control.isvisible(12002)">conditional</animation>
			<animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(12002)">conditional</animation>
			<animation effect="slide" time="1" delay="11" start="0,0" end="0,285" condition="control.isvisible(12003)">conditional</animation>
			<animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(12003)">conditional</animation>
 
			<animation effect="slide" time="1" delay="11" start="0,0" end="420,0" condition="control.isvisible(12004)">conditional</animation>
			<animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(12004)">conditional</animation>
			<animation effect="slide" time="1" delay="11" start="0,0" end="420,142" condition="control.isvisible(12005)">conditional</animation>
			<animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(12005)">conditional</animation>
			<animation effect="slide" time="1" delay="11" start="0,0" end="420,285" condition="control.isvisible(12006)">conditional</animation>
			<animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(12006)">conditional</animation>
 
			<animation effect="slide" time="1" delay="11" start="0,0" end="840,0" condition="control.isvisible(12007)">conditional</animation>
			<animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(12007)">conditional</animation>
			<animation effect="slide" time="1" delay="11" start="0,0" end="840,142" condition="control.isvisible(12008)">conditional</animation>
			<animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(12008)">conditional</animation>
			<animation effect="slide" time="1" delay="11" start="0,0" end="840,285" condition="control.isvisible(12009)">conditional</animation>
			<animation effect="fade" time="180" delay="20" start="0" end="100" reversible="false" condition="control.isvisible(12009)">conditional</animation>
		   
			<animation effect="fade" time="200" delay="20" easing="inout" condition="true">Visible</animation>
			<animation effect="fade" time="200" easing="inout" condition="true">Hidden</animation>
			<posX>0</posX>
			<posY>0</posY>
			<visible>control.isvisible(12001)|control.isvisible(12002)|control.isvisible(12003)|control.isvisible(12004)|control.isvisible(12005)|control.isvisible(12006)</visible>
...
		</control>

The fade animations reduce the intermediate visibility (it still happens sometimes, but not often anymore). I have not touched focus handling yet, except some tests which were not successful.

I also adapted myHome and myHomePlugins.xml to have the same look as BasicHome. For good feedback to the user I included a large (96 point!) display of the currently selected item. I think this will be a general look in this skin.

Current situation, first 2 basic home, last plugin home: