Duplicating AppleTV idle animation, suggestions?
#1
Hi Guys,

I would like to duplicate the idle animation that occurs in the AppleTV list view when there has been no user interaction for a set time. That is after about 30 second of inactivity, the Icon for the currently hi-lighted list item fades and is replaced with random icons of the same type scrolling down and across from the top middle of the screen to mid way down the left side of the screen. If you have a gen 2 AppleTV you would know what I'm trying to describe.

Anyway my thoughts on how to go about this would be to use <autoscroll>true</autoscroll> on a list that I had populated with icons via a <content> tag and then animate the icons as they scroll thru the list. The issue I have with this is I can't come up with a way to switch focus from the main list to the list of icons (and back again when the user interacts with the system again).

Now I don't want to lose the main list altogether, I just want the static icon for the current main list item to fade and be replaced with the animated icons from the new list to display instead when the system is idle for a period.

Does anyone have any ideas on how to shift focus like this, or am I barking up the wrong tree as to how to achieve this idle animation?

Your help and/or ideas would be greatly appreciated
Wyrm (xTV-SAF)
If required a FULL debug log can now be submitted from the skin in settings->skin settings->support. Or follow instructions here if you can't access skin settings.

FAQ's located at :- http://kodi.wiki/view/Add-on:AppTV
Reply
#2
Confused Confused

But i've never seen Gen2 idle. You want to replace current icon with icon slideshow after x time?
In focuslayout, the below image will show up after 5000. And is instantly gone if user moves focus.

Code:
<control type="image">
    <visible>Control.HasFocus(ID_of_current_list) + !substring(ListItem.Label,..,left)</visible>
    <animation effect="fade" start="0" end="100" time="300" delay="5000">Focus</animation>
    <animation effect="fade" start="100" end="0" time="0">UnFocus</animation>
    <texture>Control.Getlabel(ID_of_Slideshow)</texture>
</control>
And use the reverse of this animation on the static icon.
I use this with a static image, not sure if you can use Getlabel from one list into the other though.
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Reply
#3
Thanks for the reply MassIV and sorry I dropped off the planet there (had a high speed dash to other side of the country for a funeral).

I will try to explain the issue a bit better. Currently I have a list type view (id 50) that shows a text list on the right hand side of the screen and a large icon on the right hand side of the screen that is the current focused list items icon. This icon is is shown via a control outside of the itemlayout and focusedlayout blocks.

Now what I would like to achieve is for the large icon from list id 50 to fade after a short period (30 seconds maybe) of no user input, to be replace by a animated group of icons (three at a time from a list of ten icons). As one icon moves forward and fades it is replaced behind the group with the next icon in the list of ten icons, this continues until there is some sort of user input, at which point theses icons are replaced with the original id 50 list icon.

My idea on how to achieve this is to have another list (id 950 maybe) that has a <autoscroll> tag set to true and the content set via something like this.
PHP Code:
<content>special://skin/extras/playlists/recent_movies.xsp</content> 
Then as each item scrolls to the next item I show listitem(950).icon(0), listitem(950).icon(1), listitem(950).icon(2) and animate as appropriate to get the look I am after.

So I guess the question I need to ask is "how do I change focus away from list id 50 to list id 950 (or do I even need to do that) purely based on no interaction from the user?". Is this even possible, or am I just wasting my time on a wild goose chase?

Wyrm (xTV-SAF)
If required a FULL debug log can now be submitted from the skin in settings->skin settings->support. Or follow instructions here if you can't access skin settings.

FAQ's located at :- http://kodi.wiki/view/Add-on:AppTV
Reply
#4
I don't know if it'd work, but couldn't you use in your second list (id 950) a condition with System.IdleTime(time)?
Reply
#5
Couldn't you just use System.IdleTime(time) here? Use that in combination with (visibility) conditions I mean ?

edit:// typing too slow
Reply
#6
Thanks for the pointers guys, but I have come to the part of the show where we all get to point and laugh at Wyrm. I have tried the following code with no success. The static icon and other content fades away to leave nothing in it's place, that is the code does not seem to be working.
PHP Code:
            <control type="group">
                <
visible>System.IdleTime(30)</visible>
                <
control type="wraplist" id="950">
                    <
left>-10</left>
                    <
top>-10</top>
                    <
width>10</width>
                    <
height>10</height>
                    <
onleft>noop</onleft>
                    <
onright>noop</onright>
                    <
onup>noop</onup>
                    <
ondown>noop</ondown>
                    <
viewtype label="31028">wraplist</viewtype>
                    <
pagecontrol>noop</pagecontrol>
                    <
autoscroll>true</autoscroll>
                    <
scrolltime>200</scrolltime>
                    <
orientation>horizontal</orientation>
                    <
itemlayout height="10" width="10"></itemlayout>
                    <
focusedlayout height="10" width="10"></focusedlayout>
                    <
content>special://skin/extras/playlists/videos/RecentMovies.xsp</content>
                
</control>
                <
control type="group" id="951">
                    <
visible>Container(950).OnNext</visible>
                    <
animation effect="fade" start="100" end="100" time="200" reversible="false">Hidden</animation>
                    <
control type="image">
                        <
left>-123</left>
                        <
top>187</top>
                        <
width>88</width>
                        <
height>62</height>
                        <
texture background="true" diffuse="mask-squ.png">$INFO[Container(950).Listitem(2).thumb]</texture>
                        <
aspectratio aligny="bottom">keep</aspectratio>
                        <
colordiffuse>LongDistance</colordiffuse>
                        <
animation effect="slide" end="100,0" time="200" reversible="false">Hidden</animation>
                    </
control>
                    <
control type="image">
                        <
left>53</left>
                        <
top>187</top>
                        <
width>88</width>
                        <
height>62</height>
                        <
texture background="true" diffuse="mask-squ.png">$INFO[Container(950).Listitem(1).thumb]</texture>
                        <
aspectratio aligny="bottom">keep</aspectratio>
                        <
colordiffuse>LongDistance</colordiffuse>
                        <
animation effect="zoom" start="30,150,50,100" end="95,160,65,130" time="200" reversible="false">Hidden</animation>
                    </
control>
                    <
control type="image">
                        <
left>168</left>
                        <
top>200</top>
                        <
width>115</width>
                        <
height>81</height>
                        <
texture background="true" diffuse="mask-squ.png">$INFO[Container(950).Listitem(0).thumb]</texture>
                        <
aspectratio aligny="bottom">keep</aspectratio>
                        <
colordiffuse>MiddleDistance</colordiffuse>
                        <
animation effect="zoom" start="95,160,65,130" end="140,145,230,460" time="200" reversible="false">Hidden</animation>
                    </
control>
                    <
control type="image">
                        <
left>247</left>
                        <
top>181</top>
                        <
width>407</width>
                        <
height>287</height>
                        <
texture background="true" diffuse="mask-squ.png">$INFO[Container(950).Listitem(-1).thumb]</texture>
                        <
aspectratio aligny="bottom">keep</aspectratio>
                        <
animation effect="slide" start="0,0" end="-400,80" time="150" reversible="false">Hidden</animation>
                    </
control>
                </
control>
                <
control type="group">
                    <
visible>!Control.IsVisible(951)</visible>
                    <
control type="image">
                        <
left>53</left>
                        <
top>187</top>
                        <
width>88</width>
                        <
height>62</height>
                        <
texture background="true" diffuse="mask-squ.png">$INFO[Container(950).Listitem(2).thumb]</texture>
                        <
aspectratio aligny="bottom">keep</aspectratio>
                        <
colordiffuse>LongDistance</colordiffuse>
                    </
control>
                    <
control type="image">
                        <
left>168</left>
                        <
top>200</top>
                        <
width>115</width>
                        <
height>81</height>
                        <
texture background="true" diffuse="mask-squ.png">$INFO[Container(950).Listitem(1).thumb]</texture>
                        <
aspectratio aligny="bottom">keep</aspectratio>
                        <
colordiffuse>MiddleDistance</colordiffuse>
                    </
control>
                    <
control type="image">
                        <
left>247</left>
                        <
top>181</top>
                        <
width>407</width>
                        <
height>287</height>
                        <
texture background="true" diffuse="mask-squ.png">$INFO[Container(950).Listitem(0).thumb]</texture>
                        <
aspectratio aligny="bottom">keep</aspectratio>
                    </
control>
                </
control>
            </
control
Does anyone have any suggestions on what I have messed up.

Wyrm (xTV-SAF)
If required a FULL debug log can now be submitted from the skin in settings->skin settings->support. Or follow instructions here if you can't access skin settings.

FAQ's located at :- http://kodi.wiki/view/Add-on:AppTV
Reply
#7
I'm no skinner, but wouldn't

PHP Code:
<visible>System.IdleTime(30)</visible

mean this group of controls was only visible for the 1 second (assuming IdleTime has a one second resolution) that the IdleTime is 30, rather then any time when IdleTime is greater than 30? Using

PHP Code:
<visible>IntegerGreaterThan(System.IdleTime,30)</visible

would be my first thought.
Reply
#8
Now you are confusing me a bit about what you want.
From your previous post I thought you wanted to do something like below:

Code:
            <control type="wraplist" id="950">
                <left>230</left>
                <top>65</top>
                <width>250</width>
                <height>250</height>
                <onup>950</onup>
                <ondown>950</ondown>
                <autoscroll>true</autoscroll>
                <scrolltime>4000</scrolltime>
                <orientation>horizontal</orientation>
                <visible>System.IdleTime(2)</visible>
                <itemlayout width="250" height="250" />
                <focusedlayout width="250" height="250"/>
                <content target="video">library://video/recentlyaddedmovies.xml</content>
            </control>
            
            <control type="image">
                <left>230</left>
                <top>65</top>
                <width>250</width>
                <height>250</height>
                <aspectratio>scale</aspectratio>
                <texture>$INFO[Container(950).ListItem.Art(poster)]</texture>
                <visible>Control.IsVisible(950)</visible>
                <animation type="Conditional" condition="!Container(950).OnNext">
                    <effect type="zoom" start="40" end="100" time="400" center="auto" delay="600" />
                    <effect type="fade" start="0" end="100" time="800" delay="600" />
                </animation>
            </control>
            <control type="image">
                <left>230</left>
                <top>65</top>
                <width>250</width>
                <height>250</height>
                <aspectratio>scale</aspectratio>
                <texture>White.png</texture>
                <visible>!Control.IsVisible(950)</visible>
                <animation effect="fade" start="100" end="0" time="300">Hidden</animation>
            </control>
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Reply
#9
(2014-06-25, 08:10)Unfledged Wrote: I'm no skinner, but wouldn't

PHP Code:
<visible>System.IdleTime(30)</visible

mean this group of controls was only visible for the 1 second (assuming IdleTime has a one second resolution) that the IdleTime is 30, rather then any time when IdleTime is greater than 30? Using

PHP Code:
<visible>IntegerGreaterThan(System.IdleTime,30)</visible

would be my first thought.
Unfledged,

That sounded reasonable (although the wiki seemed to imply that I had it right), so I removed the condition altogether and it still did not work. Then I had a VERY close look to see what was going on and realised that I had included the code block inside of another with a incompatible visible condition. Moving my new code block fixed that issue, so now I have the icons appearing after 30 seconds of idle, so original visible condition was correct.

Thank you just the same for getting me looking in the right place.

Wyrm (xTV-SAF)
If required a FULL debug log can now be submitted from the skin in settings->skin settings->support. Or follow instructions here if you can't access skin settings.

FAQ's located at :- http://kodi.wiki/view/Add-on:AppTV
Reply
#10
(2014-06-25, 10:25)MassIV Wrote: Now you are confusing me a bit about what you want.
From your previous post I thought you wanted to do something like below:

Code:
            <control type="wraplist" id="950">
                <left>230</left>
                <top>65</top>
                <width>250</width>
                <height>250</height>
                <onup>950</onup>
                <ondown>950</ondown>
                <autoscroll>true</autoscroll>
                <scrolltime>4000</scrolltime>
                <orientation>horizontal</orientation>
                <visible>System.IdleTime(2)</visible>
                <itemlayout width="250" height="250" />
                <focusedlayout width="250" height="250"/>
                <content target="video">library://video/recentlyaddedmovies.xml</content>
            </control>
            
            <control type="image">
                <left>230</left>
                <top>65</top>
                <width>250</width>
                <height>250</height>
                <aspectratio>scale</aspectratio>
                <texture>$INFO[Container(950).ListItem.Art(poster)]</texture>
                <visible>Control.IsVisible(950)</visible>
                <animation type="Conditional" condition="!Container(950).OnNext">
                    <effect type="zoom" start="40" end="100" time="400" center="auto" delay="600" />
                    <effect type="fade" start="0" end="100" time="800" delay="600" />
                </animation>
            </control>
            <control type="image">
                <left>230</left>
                <top>65</top>
                <width>250</width>
                <height>250</height>
                <aspectratio>scale</aspectratio>
                <texture>White.png</texture>
                <visible>!Control.IsVisible(950)</visible>
                <animation effect="fade" start="100" end="0" time="300">Hidden</animation>
            </control>
Sorry about the confusion, was a bit hard to describe (went looking for pictures on the interweb to show what I meant to no avail ). The code I used in the example was basically taken from my vertical home menu screen, so that is not quite the effect I am after (more a place holder until I get the other issues sorted).

Current code should show three icons, Current icon, previous icon and the previous one to that. As the code stands right now I have included your <content> tag and I am in fact now showing three icons on the screen. Every 1 second (200ms was too quick, so slowed it down) the icons now change to the next in the sequence (as they should), but there is no animation between the icons as I was expecting. If I remove the block with <visible>Container(950).OnNext</visible> visible tag the result is exactly the same, thus it would seem that this condition is never true.

I don't suppose you have any idea of another visible condition I could use to trigger the animations in control group 951 to move between the still icon images?

Thanks for the help and being a sounding board. I'm sure the solution is staring me right in the face, just can't see it at the moment.

Wyrm (xTV-SAF)
If required a FULL debug log can now be submitted from the skin in settings->skin settings->support. Or follow instructions here if you can't access skin settings.

FAQ's located at :- http://kodi.wiki/view/Add-on:AppTV
Reply
#11
I might say something stupid as I don't know if I have the right image in my head, but wouldn't it work to put the image inside the focusedlayout in your 950 list with the proper animations set? Something like:

PHP Code:
<focusedlayout width="width" height="height">
    <
control type="image">
        <
animation type="Conditional" condition="Container(950).OnNext">
            <
effect>...</effect>
            <
effect>...</effect>
        </
animation>
        <
texture>$INFO[ListItem.Thumb]</texture>
    </
control>
</
focusedlayout

If it's an autoscrolling wraplist the size of the item, it will keep displaying only one item at the time, right? So all you have to do is make the focused item (image) zoom and fade (if I understood what you want) when it's scrolling to the next item. Wouldn't it work?

Edit: Shouldn't it be Container(950).OnScrollNext?
Reply
#12
@alex Problem with putting it in the focusedlayout is that the image will be scrolling into view during the whole scrolltime, and then immediately begin the 4000 lasting scroll of the next image. So even if you animate a zoom it would be scrolling into view the whole zoom.

@wyrm I tried the code i posted and it works for me, including the animation. Could you test it as it is and just throw it in a custom dialog like so http://pastebin.com/CqxUDhkn

<F2>ActivateWindow(3555)</F2>

And i don't have any <visible>Container(950).OnNext</visible> in my example. But <visible>Control.IsVisible(950)</visible> and a condition for the animation <animation type="Conditional" condition="!Container(950).OnNext">. Plz check if you copied correct.
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Reply
#13
(2014-06-25, 19:02)MassIV Wrote: @wyrm I tried the code i posted and it works for me, including the animation. Could you test it as it is and just throw it in a custom dialog like so http://pastebin.com/CqxUDhkn

<F2>ActivateWindow(3555)</F2>

And i don't have any <visible>Container(950).OnNext</visible> in my example. But <visible>Control.IsVisible(950)</visible> and a condition for the animation <animation type="Conditional" condition="!Container(950).OnNext">. Plz check if you copied correct.
MassIV,

Yep your code worked just fine, just was not the animation I was after. Have now modified my example and while the animation is still not quite what I am after, using your animation condition at least gets it animating sort of the way I want. Will now go thru and modify my animations until I have the effect I'm chasing.

Thanks for the help, might have to see if I can't backport how you did the animations to my vertical home menu as it would appear to be a quicker and lighter way to achieve the animations.

Wyrm (xTV-SAF)
If required a FULL debug log can now be submitted from the skin in settings->skin settings->support. Or follow instructions here if you can't access skin settings.

FAQ's located at :- http://kodi.wiki/view/Add-on:AppTV
Reply

Logout Mark Read Team Forum Stats Members Help
Duplicating AppleTV idle animation, suggestions?0