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

mbuzina

mbuzina

Retired Team Member
  • Premium Supporter
    • April 11, 2005
    2,839
    726
    Germany
    Home Country
    Germany Germany
    Tried it, did not work as expected.
    having
    XML: 
    <visible>True</visible>
<animation effect="fade" delay="5000" time="2500" start="0" end="100" pulse="true" condition="true">Conditional</animation>

    did hide the image for 5 seconds and fadein/fadeout the image for 5 seconds, but it was never visible for exactly 5 seconds (switched to 5 sec for testing). Also another control with <visible>!control.isvisible(51)</visible> never showed at all.

    The stupid thing is, that I have a control that has text for 10 seconds every 10 seconds and no text for the other 10, which would be an ideal flip switch - but it just does not trigger animation or visibility with control.hastext!
     
    Last edited:
    kiwijunglist

    kiwijunglist

    Super Moderator
  • Team MediaPortal
    • June 10, 2008
    6,746
    1,751
    New Zealand
    Home Country
    New Zealand New Zealand
    Yeah I tried as well didn't work.

    Maybe you need a skinhelper plugin It could do quite a few tasks,
    eg. You need an on off plugin, it's whole function is to return the value on, for 10 seconds then return the value off for 10 seconds, then repeats.
     
    mbuzina

    mbuzina

    Retired Team Member
  • Premium Supporter
    • April 11, 2005
    2,839
    726
    Germany
    Home Country
    Germany Germany
    I guess these should be MP internal functions (I know plugin will be quicker).
     
    mbuzina

    mbuzina

    Retired Team Member
  • Premium Supporter
    • April 11, 2005
    2,839
    726
    Germany
    Home Country
    Germany Germany
    catavolt said:
    .... but still does not work....
    Click to expand...
    You still miss outer parenthesis :
    XML: 
    <label>#(iif(eq(string.trim(string.format('{0}',div(cint(string.ltrim(string.ltrim(#currentplaytime,'0123456789'),':')),10)),'0,2,4,6,8'),''),'A','B'))</label>

    Works fine as a toggle, but not as an animation trigger. But I found a solution - it is a bit of a copy & paste job, but this works as an animation trigger:
    XML: 
    <label>#(switch(
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'10'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'11'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'12'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'13'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'14'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'15'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'16'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'17'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'18'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'19'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'30'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'31'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'32'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'33'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'34'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'35'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'36'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'37'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'38'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'39'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'50'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'51'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'52'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'53'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'54'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'55'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'56'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'57'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'58'),'OK',
					eq(string.ltrim(string.ltrim(#currentplaytime,'1234567890'),':'),'59'),'OK',
					eq(1,1),''
				))</label>

    Now fine-tuning the animation so that the front image disappears exactly when it is standing on the edge.
     
    Pog

    Pog

    Retired Team Member
  • Premium Supporter
    • September 7, 2009
    401
    315
    Wicklow
    Home Country
    Ireland Ireland
    Got a fliping animation working:

    Code: 
    <!-- Cover Filp Timer -->
	<control>
	  <type>label</type>
	  <id>5544</id>
	  <label>#(iif(eq(string.trim(string.format('{0}',div(cint(string.ltrim(string.ltrim(#currentplaytime,'0123456789'),':')),10)),'0,2,4,6,8'),''),' ',''))</label>
	</control>
<!-- Front Cover -->
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>300</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>CoverA.png</texture>
	  <animation effect="rotatey" time="1000" center="850,0" start="0" end="-180" loop="false" reversible="false" condition="!Control.HasText(5544)">conditional</animation>
	  <animation effect="fade" delay="500" time="100" start="100" end="0" condition="!Control.HasText(5544)">conditional</animation>
	  <visible>!Control.HasText(5544)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>300</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>CoverA.png</texture>
	  <animation effect="rotatey" time="1000" center="850,0" start="-180" end="0" loop="false" reversible="false" condition="Control.HasText(5544)">conditional</animation>
	  <animation effect="fade" delay="500" time="100" start="0" end="100" condition="Control.HasText(5544)">conditional</animation>
	  <visible>Control.HasText(5544)</visible>
	</control>
<!-- Back Cover -->
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>300</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>CoverB.png</texture>
	  <animation effect="rotatey" time="1000" center="850,0" start="180" end="0" loop="false" reversible="false" condition="!Control.HasText(5544)">conditional</animation>
	  <animation effect="fade" delay="450" time="100" start="0" end="100" condition="!Control.HasText(5544)">conditional</animation>
	  <visible>!Control.HasText(5544)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>300</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>CoverB.png</texture>
	  <animation effect="rotatey" time="1000" center="850,0" start="0" end="180" loop="false" reversible="false" condition="Control.HasText(5544)">conditional</animation>
	  <animation effect="fade" delay="450" time="100" start="100" end="0" condition="Control.HasText(5544)">conditional</animation>
	  <visible>Control.HasText(5544)</visible>
	</control>

    Edit... I see were all busy today ;)

    Edit 2... Quick note on this flip method, when you change song and it's on the back cover it will nicely flip back around.
     
    Last edited:
    Pog

    Pog

    Retired Team Member
  • Premium Supporter
    • September 7, 2009
    401
    315
    Wicklow
    Home Country
    Ireland Ireland
    An alternative spining cover. Does a complete spin every 10 seconds.

    This version is a lot easier to adjust timings. See the 10),10)),2) line, change the 10's to any repeat delay you want and the 2 is the number of seconds to allow the spin to complete.

    Code: 
    <!-- Cover Spin Timer -->
	<control>
	  <type>label</type>
	  <id>5544</id>
	  <label>#(iif(lt(sub(
		add(mul(cint(string.trim(string.rtrim(#currentplaytime,'0123456789'),':')),60),cint(string.trim(string.ltrim(#currentplaytime,'0123456789'),':'))),
		mul(div(add(mul(cint(string.trim(string.rtrim(#currentplaytime,'0123456789'),':')),60),cint(string.trim(string.ltrim(#currentplaytime,'0123456789'),':'))),
		10),10)),2)
		,' ',''))</label>
	</control>
<!-- Cover Spin Front/Back/Pause -->
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>300</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="1000" center="850,0" start="0" end="-360" loop="false" reversible="false" condition="Control.HasText(5544)">conditional</animation>
	  <animation effect="fade" delay="250" time="100" start="100" end="0" condition="Control.HasText(5544)">conditional</animation>
	  <visible>Control.HasText(5544)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>300</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>..\..\..\Thumbs\Music\Artists\#Play.Current.ArtistL.jpg</texture>
	  <animation effect="rotatey" time="1000" center="849,0" start="-180" end="-540" loop="false" reversible="false" condition="Control.HasText(5544)">conditional</animation>
	  <animation effect="fade" delay="250" time="100" start="0" end="100" condition="Control.HasText(5544)">conditional</animation>
	  <visible>Control.HasText(5544)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>300</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="1000" center="850,0" start="0" end="-360" loop="false" reversible="false" condition="Control.HasText(5544)">conditional</animation>
	  <animation effect="fade" delay="700" time="100" start="0" end="100" condition="Control.HasText(5544)">conditional</animation>
	  <visible>Control.HasText(5544)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>300</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>#Play.Current.Thumb</texture>
	  <visible>!Control.HasText(5544)</visible>
	</control>
     
    Pog

    Pog

    Retired Team Member
  • Premium Supporter
    • September 7, 2009
    401
    315
    Wicklow
    Home Country
    Ireland Ireland
    Can't leave well enough alone... tweaked spinner with easing/tweeners for the animations. Looks quite sexy.

    Code here:

    Code: 
    <!-- Cover Spin Timer -->
	<control>
	  <type>label</type>
	  <id>5544</id>
	  <label>#(iif(lt(sub(
		add(mul(cint(string.trim(string.rtrim(#currentplaytime,'0123456789'),':')),60),cint(string.trim(string.ltrim(#currentplaytime,'0123456789'),':'))),
		mul(div(add(mul(cint(string.trim(string.rtrim(#currentplaytime,'0123456789'),':')),60),cint(string.trim(string.ltrim(#currentplaytime,'0123456789'),':'))),
		10),10)),2),' ',''))</label>
	</control>
<!-- Cover Spin Front/Back/Front/FrontHold -->
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>300</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="2000" center="850,0" start="0" end="-360" tween="sine" easing="inout" loop="false" reversible="false" condition="Control.HasText(5544)">conditional</animation>
	  <animation effect="fade" delay="650" time="100" start="100" end="0" condition="Control.HasText(5544)">conditional</animation>
	  <visible>Control.HasText(5544)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>300</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>..\..\..\Thumbs\Music\Artists\#Play.Current.ArtistL.jpg</texture>
	  <animation effect="rotatey" time="2000" center="849,0" start="-180" end="-540" tween="sine" easing="inout" loop="false" reversible="false" condition="Control.HasText(5544)">conditional</animation>
	  <animation effect="fade" delay="650" time="100" start="0" end="100" condition="Control.HasText(5544)">conditional</animation>
	  <visible>Control.HasText(5544)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>300</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>#Play.Current.Thumb</texture>
	  <animation effect="rotatey" time="2000" center="850,0" start="0" end="-360" tween="sine" easing="inout" loop="false" reversible="false" condition="Control.HasText(5544)">conditional</animation>
	  <animation effect="fade" delay="1300" time="100" start="0" end="100" condition="Control.HasText(5544)">conditional</animation>
	  <visible>Control.HasText(5544)</visible>
	</control>
	<control>
	  <type>image</type>
	  <posX>600</posX>
	  <posY>300</posY>
	  <width>500</width>
	  <height>500</height>
	  <texture>#Play.Current.Thumb</texture>
	  <visible>!Control.HasText(5544)</visible>
	</control>
     

    Users who are viewing this thread

    Online now: 2 (members: 0, guests: 2)

    About The Project

    The vision of the MediaPortal project is to create a free open source media centre application, which supports all advanced media centre functions, and is accessible to all Windows users.

    In reaching this goal we are working every day to make sure our software is one of the best.

             

    Quick Navigation

    Support MediaPortal!

    The team works very hard to make sure the community is running the best HTPC-software. We give away MediaPortal for free but hosting and software is not for us.

    Care to support our work with a few bucks? We'd really appreciate it!

    Community platform by XenForo® © 2010-2021 XenForo Ltd.
    Top Bottom