[docwra]

Hi Everyone,

Does anyone know a good coverflow example in a skin? I've done a quick google search but couldn't find any skinning tutorials on that one.

I seem to remember seeing it in older skins, but appears to have fallen out of favor in the new ones?

So does anyone know a good skin to examine the XML code for a coverflow view?

Something like this would be idea

[Hitcher]

That's just a fixedlist. I think this is what you mean -



Aeon Nox uses them.

[docwra]

Yep exactly, I had a quick look at the Aeon Nox showcase view, it seems to use a fixed array of items in there to animate and place in certain parts of the screen.

https://github.com/BigNoid/Aeon-Nox/blob...owCase.xml

Looks complicated

[wyrm]

@docwra,

There is a classic coverflow view in my skin. Lots of code, but not really that complicated. Code could probably be modernised with param includes, but it works so I don’t really see the point.

Wyrm (AppTV)

[Hitcher]

Looks complicated

Which is why you don't see many of them.

[docwra]

@docwra,

There is a classic coverflow view in my skin. Lots of code, but not really that complicated. Code could probably be modernised with param includes, but it works so I don’t really see the point.

Wyrm (AppTV)

Thanks! will take a look. Trying to untangle those include files is a nightmare for tinkerers like me, I prefer the straight old style skins.

Estuary is very hard to follow with random includes all over the place in main view files. I'm trying to modify the Shift view actually and its taken me a while just to understand where the thumbnail images come from etc.

<rant>I wish people would COMMENT CODE especially on the main skin Estuary, i've been doing it as I go through but probably only done 5% so far</rant> 

[jurialmunkey]

I have a fairly self contained coverflow view in Eminence:
https://github.com/jurialmunkey/skin.emi...owCase.xml

You essentially have three groups. A static group when the list isn't moving, and a duplicate group each for OnNext and OnPrevious because you need to rotate the posters a different way depending on movement direction.

[ajiratech]

Thanks @jurialmunkey @wyrm @Hitcher   
I started doing a coverflow too and have gone through the Aeon Nox and Eminence but still can't seem to get the Images outside of Fixed list to animate. They change as I scroll through the list but they do not trigger the animation, which means when they are displayed in rest position, they are not rotated towards the center as I would like them to be.

Here is my code:

         <control type="group" id="11000">   <!--- Main Screen style - very stylish movie DVDs-->
               <visible>Control.IsVisible(120)</visible>
               <control type="fixedlist" id="120"> 
                    <viewtype label="3D list">list</viewtype>
                    <orientation>horizontal</orientation>
                    <pagecontrol>25</pagecontrol>
                    <focusposition>2</focusposition>
                    <autoscroll>false</autoscroll>
                    <left>60</left>
                    <top>200</top>
                    <width>820</width>
                    <height>420</height>
                    <onleft>2051</onleft>
                    <onright>60</onright>
                    <onup>52</onup>
                    <ondown>52</ondown>
                    <scrolltime tween="sine" easing="inout"></scrolltime>
                    <preloaditems>10</preloaditems>
                    <pagecontrol>60</pagecontrol>
                    <itemlayout width="160" height="340"> 
                         <control type="image">
                              <left>200</left>
                              <top>80</top>
                              <width>180</width>
                              <height>320</height>
                              <info>ListItem.Icon</info>
                              <animation effect="rotatey" end="-55" time="400" condition="true">Conditional</animation>
                              <!-- this shows items towards the left of FocusedLayout just fine. animation works images are rotated towards the center when scrolling ends-->
                         </control>
                    </itemlayout>
                    <focusedlayout width="500" height="450">
                         <control type="image">
                              <left>200</left>
                              <top>50</top>
                              <width>250</width>
                              <height>375</height>
                              <info>ListItem.Icon</info>
                              <animation type="focus">
                                   <effect type="zoom" start="400, 95, 150, 260" time="400"/>
                                   <effect type="rotatey" end="0" center="auto" time="200" delay="200"/>
                              </animation>
                              <animation type="unfocus" condition="Container(120).OnNext">
                                   <effect type="zoom" end="85, 95, 150, 260" time="400"/>
                                   <effect type="rotatey" end="-55" center="auto" time="400"/>
                              </animation>
                              <animation type="unfocus" condition="Container(120).OnPrevious">
                                   <effect type="zoom" end="85, 95, 150, 260" time="400"/>
                                   <effect type="rotatey" end="55" center="auto" time="400"/>
                              </animation>
                              <!-- these animations also seem to work just fine, correct animations get triggered depending on scroll direction -->
                         </control>
                    </focusedlayout>
               </control>
               <control type="group">
                    <control type="image">
                         <visible>Control.IsVisible(120)</visible>
                         <left>1000</left>
                         <top>250</top>
                         <width>180</width>
                         <height>320</height>
                         <texture>$INFO[Container(120).ListItem(2).Icon]</texture>
                         <!-- <animation effect="rotatey" end="55" center="auto" time="200">Container(120).OnNext</animation> -->
                         <animation effect="rotatey" center="auto" end="55" time="200" reversible="false" tween="quadratic">Hidden</animation> 
                         <!-- Different animations attempted for this part, but none get triggered. The images are shown with no rotation -->
                    </control>
               </control>
               <control type="group">
                    <control type="image">
                         <visible>Control.IsVisible(120)</visible>
                         <left>850</left>
                         <top>250</top>
                         <width>180</width>
                         <height>320</height>
                         <texture>$INFO[Container(120).ListItem(1).Icon]</texture>
                         <animation type="Hidden" condition="Container(120).OnNext">
                              <effect type="rotatey" end="55" center="auto" time="400"/>
                         </animation>
                         <!-- Different animations attempted for this part, but none get triggered. The images are shown with no rotation -->
                    </control>
               </control>
               <control type="group">
                    <control type="image">
                         <visible>Control.IsVisible(120)</visible>
                         <left>1150</left>
                         <top>250</top>
                         <width>180</width>
                         <height>320</height>
                         <texture>$INFO[Container(120).ListItem(3).Icon]</texture>
                         <animation effect="rotatey" end="45" time="400" condition="true">Conditional</animation>
                         <!-- Different animations attempted for this part, but none get triggered. The images are shown with no rotation -->
                    </control>
               </control>

          </control>     <!-- end of group 11000 -->

Please advice on how to get a static image/group that is not a part of Fixedlist to animate so I can show it in rotated position.

I've looked through the two coverflow examples code but still do not understand how it animates them, I seem to be doing similar thing here but obviously something is missing.

Should I be forcing them to hide and then become visible quickly so it triggers the animation ? If yes, how do I do that?

[Hitcher]

They'll most likely be triggered by Container.OnNext/OnPrevious animations.

Also, please use the insert syntax option </> to make reading it easier.

ie

xml:
<control type="group" id="11000">

    <!--- Main Screen style - very stylish movie DVDs-->

    <visible>Control.IsVisible(120)</visible>

    <control type="fixedlist" id="120"> 

        <viewtype label="3D list">list</viewtype>

        <orientation>horizontal</orientation>

        <pagecontrol>25</pagecontrol>

        <focusposition>2</focusposition>

        <autoscroll>false</autoscroll>

        <left>60</left>

        <top>200</top>

        <width>820</width>

        <height>420</height>

        <onleft>2051</onleft>

        <onright>60</onright>

        <onup>52</onup>

        <ondown>52</ondown>

        <scrolltime tween="sine" easing="inout"/>

        <preloaditems>10</preloaditems>

        <pagecontrol>60</pagecontrol>

        <itemlayout width="160" height="340"> 

            <control type="image">

                <left>200</left>

                <top>80</top>

                <width>180</width>

                <height>320</height>

                <info>ListItem.Icon</info>

                <animation effect="rotatey" end="-55" time="400" condition="true">Conditional</animation>

                <!-- this shows items towards the left of FocusedLayout just fine. animation works images are rotated towards the center when scrolling ends-->

            </control>

        </itemlayout>

        <focusedlayout width="500" height="450">

            <control type="image">

                <left>200</left>

                <top>50</top>

                <width>250</width>

                <height>375</height>

                <info>ListItem.Icon</info>

                <animation type="focus">

                    <effect type="zoom" start="400, 95, 150, 260" time="400"/>

                    <effect type="rotatey" end="0" center="auto" time="200" delay="200"/>

                </animation>

                <animation type="unfocus" condition="Container(120).OnNext">

                    <effect type="zoom" end="85, 95, 150, 260" time="400"/>

                    <effect type="rotatey" end="-55" center="auto" time="400"/>

                </animation>

                <animation type="unfocus" condition="Container(120).OnPrevious">

                    <effect type="zoom" end="85, 95, 150, 260" time="400"/>

                    <effect type="rotatey" end="55" center="auto" time="400"/>

                </animation>

                <!-- these animations also seem to work just fine, correct animations get triggered depending on scroll direction -->

            </control>

        </focusedlayout>

    </control>

    <control type="group">

        <control type="image">

            <visible>Control.IsVisible(120)</visible>

            <left>1000</left>

            <top>250</top>

            <width>180</width>

            <height>320</height>

            <texture>$INFO[Container(120).ListItem(2).Icon]</texture>

            <!-- <animation effect="rotatey" end="55" center="auto" time="200">Container(120).OnNext</animation> -->

            <animation effect="rotatey" center="auto" end="55" time="200" reversible="false" tween="quadratic">Hidden</animation> 

            <!-- Different animations attempted for this part, but none get triggered. The images are shown with no rotation -->

        </control>

    </control>

    <control type="group">

        <control type="image">

            <visible>Control.IsVisible(120)</visible>

            <left>850</left>

            <top>250</top>

            <width>180</width>

            <height>320</height>

            <texture>$INFO[Container(120).ListItem(1).Icon]</texture>

            <animation type="Hidden" condition="Container(120).OnNext">

                <effect type="rotatey" end="55" center="auto" time="400"/>

            </animation>

            <!-- Different animations attempted for this part, but none get triggered. The images are shown with no rotation -->

        </control>

    </control>

    <control type="group">

        <control type="image">

            <visible>Control.IsVisible(120)</visible>

            <left>1150</left>

            <top>250</top>

            <width>180</width>

            <height>320</height>

            <texture>$INFO[Container(120).ListItem(3).Icon]</texture>

            <animation effect="rotatey" end="45" time="400" condition="true">Conditional</animation>

            <!-- Different animations attempted for this part, but none get triggered. The images are shown with no rotation -->

        </control>

    </control>



</control>

<!-- end of group 11000 -->

[ajiratech]

Thanks @Hitcher 

I was not aware of the "insert syntax option". I like the coloring and would have preferred to post it that way. Now I know how to do that.

As for the animation, it turns out, they were triggering but my view was too crowded and had too many things going on so I didn't see it. After cleaning up I do see it working.

xml:


<!-- This one was able to rotate the image in the group at rest position. -->

<animation effect="rotatey" end="45" time="400" condition="true">Conditional</animation>

I still have one problem though. The image displayed by this code below shows up at an X axis position I didn't expect. Maybe this is expected behavior, but I don't see how this X position is calculated/determined when we use rotation.

If I remove the animation for "rotatey" then the image shows up at expected X coordinate, i.e. left most side. But when I allow the animation "rotatey" as show in code below, then the X position looks like something that will be a value of 350 or so. See attached picture - the first two images are for the same Icon, same list position, the only difference is the first one was rotated on y axis by -55 degrees. (see code below) 

xml:


<control type="group">  

     <left>0</left>

     <top>200</top>

     <width>1280</width>

     <height>720</height>

     <control type="image">

          <left>0</left>

          <top>70</top>

          <width>180</width>

          <height>320</height>

          <texture>$INFO[Container(120).ListItem(-3).Icon]</texture>

          <animation effect="rotatey" end="-55" center="auto" time="400" condition="true">Conditional</animation>

     </control>

     <control type="image">

          <left>0</left>

          <top>70</top>

          <width>180</width>

          <height>320</height>

          <texture>$INFO[Container(120).ListItem(-3).Icon]</texture>

     </control>

     <control type="image">

          <left>340</left>

          <top>70</top>

          <width>180</width>

          <height>320</height>

          <texture>$INFO[Container(120).ListItem(-1).Icon]</texture>

          <animation effect="rotatey" end="-55" center="auto" time="400" condition="true">Conditional</animation>

     </control>

</control>

Can you point to some documentation that talks more about how the <rotate> determines position ? The only documentation I found does not tell much about how the position is determined. 
https://kodi.wiki/view/Animating_your_skin

Thanks again.

[Hitcher]

Try messing around with the center value. I think it's based on the parent control.