home
products
contribute
download
documentation
forum
Home
Forums
New posts
Search forums
What's new
New posts
All posts
Latest activity
Members
Registered members
Current visitors
Donate
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Search titles only
By:
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
MediaPortal 1
MediaPortal 1 Skins
Building a skin from scratch - a tour -
Contact us
RSS
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="mbuzina" data-source="post: 1003593" data-attributes="member: 12382"><p><span style="font-size: 18px">My Music</span></p><p><span style="font-size: 12px">Or how to skin the first façade control. OK, to be honest, I was overwhelmed by the number of possible tags for the façade & its subcontrols. I just could not understand what it meant. So I started real slow, I created an empty page for mymusicsongs.xml (the file/folder view of mymusic) and set it to the default layout I created (header, footer, some background based on fanart/standard). Then I imported a non existing file named mymusic.common.facade.xml (yes, I delegated a problem ;-)</span></p><p> </p><p><span style="font-size: 12px">But still no contents. So I had a look at DefaultWide. It has a file called common.facade.music.xml (I changed the order as I want all music related stuff to be close together in a directory). From that I thought I could start with the simplest view, the listview. And yes, DefaultWide only contained the following info on the list view:</span></p><p>[CODE]<?xml version="1.0" encoding="utf-8" standalone="yes"?></p><p><window></p><p> <controls></p><p> <control></p><p> <description>group element</description></p><p> <type>group</type></p><p> <visible>!Control.HasFocus(50)</visible></p><p> <animation effect="fade" start="0" end="100" time="200">WindowOpen</animation></p><p> <animation effect="fade" start="100" end="0" time="200">WindowClose</animation></p><p> <control></p><p> <description>composite control consisting of a list control and a thumbnail panel</description></p><p> <type>facadeview</type></p><p> <id>50</id></p><p> <control style="NoShadow"></p><p> <description>listcontrol</description></p><p> <type>listcontrol</type></p><p> <id>50</id></p><p> </p><p> </control></p><p> </control></p><p> </controls></p><p></window>[/CODE]</p><p> </p><p>Yes, that gave me a list control, but it looked ugly. So I had to dive into the references.xml and define my default list control. With a lot of tweaking I came to the following default:</p><p>[CODE] <control></p><p> <description>default listcontrol</description></p><p> <type>listcontrol</type></p><p> <id>0</id></p><p> <posX>0</posX></p><p> <posY>130</posY></p><p> <width>1240</width></p><p> <height>672</height></p><p> </p><p> <textureFocus>hiddenMenu_overlay.png</textureFocus></p><p> <textureNoFocus></textureNoFocus></p><p> <textureHeight>52</textureHeight></p><p> </p><p> <IconXOff>10</IconXOff></p><p> <IconYOff>8</IconYOff></p><p> <itemWidth>40</itemWidth></p><p> <itemHeight>40</itemHeight></p><p> </p><p> <font>largeFont</font></p><p> <font2>largeFont</font2></p><p> <font3>labelFont</font3></p><p> <textcolor>FFB75700</textcolor></p><p> <textcolor2>FF297BFD</textcolor2></p><p> <textcolor3>FFB75700</textcolor3></p><p> <textcolorNoFocus>FFFFFFFF</textcolorNoFocus></p><p> <textcolorNoFocus2>FFFFFFFF</textcolorNoFocus2></p><p> <textcolorNoFocus3>FFFFFFFF</textcolorNoFocus3></p><p> <selectedColor>AAAAAAAA</selectedColor></p><p> <selectedColor2>AAAAAAAA</selectedColor2></p><p> <selectedColor3>AAAAAAAA</selectedColor3></p><p> </p><p> <textXOff>15</textXOff></p><p> <textYOff>2</textYOff></p><p> <textXOff2>1210</textXOff2></p><p> <textYOff2>2</textYOff2></p><p> <textXOff3>1240</textXOff3></p><p> <textYOff3>2</textYOff3></p><p> <textalign>left</textalign></p><p> <textalign2>right</textalign2></p><p> <textalign3>right</textalign3></p><p> </p><p> <textvisible1>True</textvisible1></p><p> <textvisible2>True</textvisible2></p><p> <textvisible3>False</textvisible3></p><p> </p><p> <shadedColor>AAffffff</shadedColor></p><p> <remoteColor>FFFC7B19</remoteColor></p><p> <downloadColor>fffc7b19</downloadColor></p><p> <playedColor>FF00B7FF</playedColor></p><p> </p><p> <colordiffuse>ffffffff</colordiffuse></p><p> </p><p> <spaceBetweenItems>2</spaceBetweenItems></p><p> <unfocusedAlpha applyToAll="true">255</unfocusedAlpha></p><p> <scrollOffset>1</scrollOffset></p><p> <scrollStartDelaySec>2</scrollStartDelaySec></p><p> <loopDelay>5</loopDelay></p><p> </p><p> <suffix>|</suffix></p><p> <folderPrefix /></p><p> <folderSuffix /></p><p> <spinCanFocus>False</spinCanFocus></p><p> <spinUp>spin_up.png</spinUp></p><p> <spinUpFocus>spin_up_focus.png</spinUpFocus></p><p> <spinDown>spin_down.png</spinDown></p><p> <spinDownFocus>spin_down_focus.png</spinDownFocus></p><p> <spinWidth>40</spinWidth></p><p> <spinHeight>40</spinHeight></p><p> <spinPosX>1050</spinPosX></p><p> <spinPosY>740</spinPosY></p><p> <spinAlign>right</spinAlign></p><p> <spinColor>00000000</spinColor></p><p> <explicitlyEnableScrollLabel>yes</explicitlyEnableScrollLabel></p><p> <dimColor>FFFFFFFF</dimColor></p><p> </p><p> <onleft>2</onleft></p><p> </control></p><p>[/CODE]</p><p> </p><p>That was a start. Now I wanted a hidden menu. It should look a bit like the win 8 "charms bar", but be text based. I like to have headers in there and I wanted to have a very smooth transition moving the menu items separately with a little delay (to see this you need to test later on). After quite some fiddling with the ActionGroup (this could use some more documentation. More? It could use documentation). I found a solution. Still, my StackLayout did not move the items after invisible items up (even though I told it to do so, existing bug), but well, you can not have everything. Still sometimes the transition away from the menu halts in the middle (I have a half transparent menu) and only continues if I move the focus again (another bug?).</p><p> </p><p>After that I wanted some nice thumbpanel and while I was at it, lets add spinning CD and ClearArt support. Again I felt something missing (I had this before): I would like to have an animation trigger that triggers on change of focus (any focus change) or change of selection in the façade. I would like the spinning CD to come out of the cover if I keep an item selected for a second or so. Right now I am not even capable of animating if the CD is there or not (control.hasthumb does not work, control.hastext does not work what to do?). At least it rotates. So here is my current result:</p><p>[ATTACH=full]130880[/ATTACH] [ATTACH=full]130881[/ATTACH]</p><p> </p><p>The empty hover pane is a placeholder for now playing. Another idea I have, that is not possible at the moment - Enlarge the façade / listview if nothing is playing and reduce it if something plays (and we need to show the Now Playing overlay). Not possible with the current skin engine.</p></blockquote><p></p>
[QUOTE="mbuzina, post: 1003593, member: 12382"] [SIZE=5]My Music[/SIZE] [SIZE=3]Or how to skin the first façade control. OK, to be honest, I was overwhelmed by the number of possible tags for the façade & its subcontrols. I just could not understand what it meant. So I started real slow, I created an empty page for mymusicsongs.xml (the file/folder view of mymusic) and set it to the default layout I created (header, footer, some background based on fanart/standard). Then I imported a non existing file named mymusic.common.facade.xml (yes, I delegated a problem ;-)[/SIZE] [SIZE=3]But still no contents. So I had a look at DefaultWide. It has a file called common.facade.music.xml (I changed the order as I want all music related stuff to be close together in a directory). From that I thought I could start with the simplest view, the listview. And yes, DefaultWide only contained the following info on the list view:[/SIZE] [CODE]<?xml version="1.0" encoding="utf-8" standalone="yes"?> <window> <controls> <control> <description>group element</description> <type>group</type> <visible>!Control.HasFocus(50)</visible> <animation effect="fade" start="0" end="100" time="200">WindowOpen</animation> <animation effect="fade" start="100" end="0" time="200">WindowClose</animation> <control> <description>composite control consisting of a list control and a thumbnail panel</description> <type>facadeview</type> <id>50</id> <control style="NoShadow"> <description>listcontrol</description> <type>listcontrol</type> <id>50</id> </control> </control> </controls> </window>[/CODE] Yes, that gave me a list control, but it looked ugly. So I had to dive into the references.xml and define my default list control. With a lot of tweaking I came to the following default: [CODE] <control> <description>default listcontrol</description> <type>listcontrol</type> <id>0</id> <posX>0</posX> <posY>130</posY> <width>1240</width> <height>672</height> <textureFocus>hiddenMenu_overlay.png</textureFocus> <textureNoFocus></textureNoFocus> <textureHeight>52</textureHeight> <IconXOff>10</IconXOff> <IconYOff>8</IconYOff> <itemWidth>40</itemWidth> <itemHeight>40</itemHeight> <font>largeFont</font> <font2>largeFont</font2> <font3>labelFont</font3> <textcolor>FFB75700</textcolor> <textcolor2>FF297BFD</textcolor2> <textcolor3>FFB75700</textcolor3> <textcolorNoFocus>FFFFFFFF</textcolorNoFocus> <textcolorNoFocus2>FFFFFFFF</textcolorNoFocus2> <textcolorNoFocus3>FFFFFFFF</textcolorNoFocus3> <selectedColor>AAAAAAAA</selectedColor> <selectedColor2>AAAAAAAA</selectedColor2> <selectedColor3>AAAAAAAA</selectedColor3> <textXOff>15</textXOff> <textYOff>2</textYOff> <textXOff2>1210</textXOff2> <textYOff2>2</textYOff2> <textXOff3>1240</textXOff3> <textYOff3>2</textYOff3> <textalign>left</textalign> <textalign2>right</textalign2> <textalign3>right</textalign3> <textvisible1>True</textvisible1> <textvisible2>True</textvisible2> <textvisible3>False</textvisible3> <shadedColor>AAffffff</shadedColor> <remoteColor>FFFC7B19</remoteColor> <downloadColor>fffc7b19</downloadColor> <playedColor>FF00B7FF</playedColor> <colordiffuse>ffffffff</colordiffuse> <spaceBetweenItems>2</spaceBetweenItems> <unfocusedAlpha applyToAll="true">255</unfocusedAlpha> <scrollOffset>1</scrollOffset> <scrollStartDelaySec>2</scrollStartDelaySec> <loopDelay>5</loopDelay> <suffix>|</suffix> <folderPrefix /> <folderSuffix /> <spinCanFocus>False</spinCanFocus> <spinUp>spin_up.png</spinUp> <spinUpFocus>spin_up_focus.png</spinUpFocus> <spinDown>spin_down.png</spinDown> <spinDownFocus>spin_down_focus.png</spinDownFocus> <spinWidth>40</spinWidth> <spinHeight>40</spinHeight> <spinPosX>1050</spinPosX> <spinPosY>740</spinPosY> <spinAlign>right</spinAlign> <spinColor>00000000</spinColor> <explicitlyEnableScrollLabel>yes</explicitlyEnableScrollLabel> <dimColor>FFFFFFFF</dimColor> <onleft>2</onleft> </control> [/CODE] That was a start. Now I wanted a hidden menu. It should look a bit like the win 8 "charms bar", but be text based. I like to have headers in there and I wanted to have a very smooth transition moving the menu items separately with a little delay (to see this you need to test later on). After quite some fiddling with the ActionGroup (this could use some more documentation. More? It could use documentation). I found a solution. Still, my StackLayout did not move the items after invisible items up (even though I told it to do so, existing bug), but well, you can not have everything. Still sometimes the transition away from the menu halts in the middle (I have a half transparent menu) and only continues if I move the focus again (another bug?). After that I wanted some nice thumbpanel and while I was at it, lets add spinning CD and ClearArt support. Again I felt something missing (I had this before): I would like to have an animation trigger that triggers on change of focus (any focus change) or change of selection in the façade. I would like the spinning CD to come out of the cover if I keep an item selected for a second or so. Right now I am not even capable of animating if the CD is there or not (control.hasthumb does not work, control.hastext does not work what to do?). At least it rotates. So here is my current result: [ATTACH=full]130880[/ATTACH] [ATTACH=full]130881[/ATTACH] The empty hover pane is a placeholder for now playing. Another idea I have, that is not possible at the moment - Enlarge the façade / listview if nothing is playing and reduce it if something plays (and we need to show the Now Playing overlay). Not possible with the current skin engine. [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
MediaPortal 1
MediaPortal 1 Skins
Building a skin from scratch - a tour -
Contact us
RSS
Top
Bottom