Carousel Home Menu (Rotating/Circular Animation Effect) [Archive]

MacGyver

2007-06-16, 14:02

I've always wanted a circular home.xml menu, but was too lazy to code it.
Well I was bored out of my mind at work, so I did it.
Here is the code, hopefully it saves someone some time (it took me about 4 hours(mostly to type :) )).

Also included is the code for includes.xml the code in there is all the animation, so its easy to change the way it moves without having to change all 100 control calls. BTW I didn't spend a lot of time to get the animation exact (the way center=? works completely escapes me), so if someone is up to the task it's only about 40 numbers in the includes.xml code, please repost it if you do.

Here is the link for the home.xml (http://www.box.net/shared/1iq46ube82)

Here is the link for the text to add to the includes.xml (http://www.box.net/shared/jn4ra3so9a)

Use the <description> tags to make sense of the includes not the name.
The picture files are easy to figure out.

Questions?, Comments?, Problems?:rolleyes:

MacGyver

2007-06-16, 14:38

Almost forgot the screenshot.
http://a938.ac-images.myspacecdn.com/images01/1/l_a892a61cd49f342fc4bcfd25c39d6a01.jpg

Nuka1195

2007-06-16, 15:03

Very nice :)

MikeBeecham

2007-06-16, 16:51

looks good mate...I'm sure it'll save someone some time!

Gamester17

2007-06-16, 17:30

Time to rip-off... ...er, I mean clone/replicate some of MediaPortal's SPINSAFE/REVOLVE skins (http://www.team-mediaportal.com/files/Download/Skins/), hehe

I also really like home in their FACE skin (http://forum.team-mediaportal.com/new_face_mp-t9387.html) => http://www.mediaportal-skins.net/Bilder/SkinFace.wmv

:grin:

MacGyver

2007-06-16, 17:30

If you do try it out, make note of the fact the weather icon is coded to be dynamic (it downloads the correct icon for the current weather), so if you don't have you xbox connected to the internet it will not show up.

To save some time, here are the names of the graphics.
Background.PNG (mine was two colors black & dark grey)
File-manager-ICON.PNG
Music-icon.PNG
Pictures-ICON.PNG
Power-ICON.PNG
Programs-ICON.PNG
Scripts-ICON.PNG
Settings-ICON.PNG
Thumb_Mask2.png (it's a diffused fading reflection mask)
Video-ICON.png
Weather-ICON.PNG (it's commented out, due to it being dynamic "Weather.Condition")
WebBrowser-ICON.PNG (for the PIMPed and Deff builds with links included)

All the icons were 175x175 except the thumb mask 64x64, but any size up to 256x256 should be fine since it wil be resized anyway, but too big will slow it down a lot.

CHI3f

2007-06-17, 00:08

That is almost exactly how the home window for xTV is coded.

MikeBeecham

2007-06-17, 01:24

then it proves it works then :D

MacGyver

2007-06-17, 02:20

Except xTV isn't 2300+ lines long, or in a circle. But you are right, it is similar, but both ideas came from the old XbMac2.1b2R skin (props to Jacksor and b-wox). I also coded it so it could be modified easily from the includes.xml, that way if someone wanted to make it a full circle, or an almost flat ellipse, they wouldn't need to change every one of the 2300 lines in the home.xml only the 40 in the includes.xml. Also xTV has 3 icons, mine goes to 11, er I mean 10. :)

BTW, I wrote it for 16x9, use the includes.xml to fix aspect ratio for 4x3.

And if you want to split hairs, EVERY skin that uses reflections looks like my code for "Big Screen/Verve" since I was the first to figure out that an unsigned float would accept a negative number and display the icon upside-down. Now it's just flippy=true (thanx Jmarshal). :P

MacGyver

2007-06-17, 02:25

And yes, I do use xTV on my own xbox. :P (modified, of course, I like my weather button, what can I say?)

MikeBeecham

2007-06-17, 02:29

I use xMC at the moment :D

Did this little moment help to ease the tension?

MacGyver

2007-06-17, 02:50

Yes it did Jyra (mb), it's late here in Germany, so I'm grumpy. Cheif's right it does look more like xTV, I can't even tell you whats going on in the home screen for xMC, I think he used voodoo magic to animate it (it's about 1/3 the size it should be for what it does).

2 days until my vacation. Phoenix here I come. weather.com must be broken, it says it's 109 F there.

Livin

2007-06-17, 02:53

MacGyver...nice job!
Any thought about integrating it into the home screen for PM3 while still being able to maintain the integrity of the skin? I was thinking a "half" circle on the left side of the screen, replacing the current menu.

Also... that FACE skin rocks!

MacGyver

2007-06-17, 03:07

I tried to um, borrow the graphics from it once I saw it, but they haven't finished it yet on mediaportal. I know the animation for what I made isn't exact because I really couldn't figure out a logical way of coming up with the numbers for center=?, in the end I just kept throwing numbers at it until it looked right (some of those numbers are like 1600,30 what the hell is up with that?), if someone that understands the logic in using center, please let me in on it, and i'll fix it. I had never seen that FACE skin before I started writing this, and when he posted it, I was like no way, I thought mine was going to be unique. I mostly wrote it for the challenge, I had wanted to use something like it for my Verve skin but never got around to doing it.

If anybody wants to do anything with it, have at it. I was just bored at work.

jmarshall

2007-06-17, 04:30

Center in a rotation is the center of the rotation - pretty straight forward.

Center in a zoom is the center of the zoom, i.e. the point at which the object should be of size 0.

They're a bit tricky, I admit - I haven't looked at what you've done here though.

Cheers,
Jonathan

MacGyver

2007-06-17, 11:23

Jmarshal, I think I get it now, it explains why some of my numbers were negative and why some were huge. I just used trail and error, I didn't get it until just now (the fact it's the back but named center,and that start is middle threw me), it's like a stack of three pieces of paper, center=?,? is the back sheet were the icon would start if it where a size of zero; start=?,? is like the middle sheet where the icon would be size ?,? on it's path from the back; and posx,posy is the front sheet where the icon will end up, and what size it will up. It would be easier if instead of center, it was like place=?,?, then you could just tell it were to start, how big it was, and the posx,posy and height,width would be to tell it where to end. Now if center was like what I thought it was (some sort of center point for a circular zoom, like the gravity from a large planet affecting the light from a distant star by bending it around it), then I could see using the idea of a center. But like always, you have made the engine so open, we can use it to do things that weren't intended, and be able to do cool things through just trial and error. thanx jmarshall.

jmarshall

2007-06-17, 11:32

You can specify:

<animation effect="zoom" start="5,5,10,50" time="2000">Focus</animation>

And it'll start at 5,5 sized 10,50 and end up (as you haven't specified it) in it's standard position. XBMC calculates the sizing and center for you.

Cheers,
Jonathan

MacGyver

2007-06-17, 11:40

No way, i didn't know you could throw 4 numbers at start=. That would have made life a little easier (completely eliminated the need for all that trail and error).

If I get the time before my vacation, I'll recode it for EXACT animation (because it is by no means that way now).

thanx again.

MacGyver

2007-06-17, 14:53

Ok, I re-did it, all the animation is exact, and I put all the files need into a rar.
Also jmarshall, that second 5,(5) isn't quite right, it ends up being about 100-200 pixels lower than it should be, but at least the other 3 numbers were a gimme, only had to trial and error 1 out of 4 that isn't bad.

Rotating Home Menu.rar (http://www.box.net/shared/ytzobz2q7u)

I also made the shading more accurate.
http://a159.ac-images.myspacecdn.com/images01/41/l_5be27cce384bd76b716b90c2f25c24c6.jpg

Enjoy. I leave in 2 days, so if you need any help with it ask soon.

Nuka1195

2007-06-17, 15:54

That works really smooth. Good job.

I also like how you used the actual infoimage for weather.

How many additional controls would be needed to use a "Weather.IsFetched" condition and have another texture for those without internet?

MacGyver

2007-06-17, 16:13

10, well 20, but they are the same, well half of them. all in the home.xml.
just make another copy of each:
<control type="image">

<info>Weather.Conditions</info>
<include>C?-?</include>
<visible>Control.HasFocus(?)</visible>
</control>
<control type="image">
<include>C?-?R</include>
<visible>Control.HasFocus(?)</visible>
<info>Weather.Conditions</info>
<texture flipy="true" diffuse="Thumb_Mask2.png">-</texture>
</control>

And give one a ! conditional, and give other a non ! conditional. Unless a <texture> overrides a <info>, then you get the idea.

Also if someone wanted to, you could have ten different images per icon from different angles so that the images faced outward the whole time, ie. the image in the far back would be facing away. The font image is #1, the back is #6, and far right is #3.

If I get time, I'll add the conditional weather icons, (I didn't know there was a "Weather.IsFetched" condition, I must not of got the memo, else I would have done it that way to begin with)

Nuka1195

2007-06-17, 16:49

Nice,

What might look nice, is placing a globe or something in the middle so it looks like it's orbiting.

I'm no skinner, but this looks like it could be used for some interesting skins.

A new control for JMarshall :) an orbiting fixedlist. I could see DVD covers orbiting around something.

pike

2007-06-17, 16:57

I gave it a try in pal 16x9. there's a serious lag when you nav the menu, this is probably not your fault.

It looks really nice though!

Nuka1195

2007-06-17, 18:22

with xbmc_pc, pal16x9 works fine.

MacGyver

2007-06-17, 19:07

On my xbox, in 720p it's ok, but not quite as fast as the pc version.
Probably has something to due with the 2000+ lines. :)
I just wanted to put it out there, I hope someone can streamline it.
Maybe Leonardo (xMC skin) can make it smaller, since he seems to know black magic.

I could make it half the size, if it only rotated one way. :P

MacGyver

2007-06-17, 21:21

Ok, I'm done, I added conditional "is fetched" for the dynamic weather icon.
I also did add a big globe that rotated as the menu did, but it looked funny, and I would of had to change the priority for half the graphics to make it look right.
Plus it hid all the back icons, but it can be done if someone wanted to.

It now belongs to everyone, do with it what you will.
It would be a waste if someone doesn't take it and make it their own.

All other urls before are gone, here is the last one.
Rotating Home Menu.rar (http://www.box.net/shared/jsol1i1rih)

MikeBeecham

2007-06-17, 21:55

nice work mate....maybe I could make a skin to incorporate that at some stage. I want to get Pandora sorted first though...after that, who knows!

jmarshall

2007-06-18, 06:00

MacGyver: If the controls are in a group, then the zoom anim as I stated won't work quite the same with older than yesterday's SVN. They used to work with respect to the window coordinates.

I made a change in SVN yesterday that makes them work with respect to the control coordinates (far more logical!)

Cheers,
Jonathan

Gamester17

2007-07-10, 08:28

A few variations on ideas of how this carousel animation effect could be used for album covers:

http://img394.imageshack.us/img394/707/caruselev6.jpg

http://img466.imageshack.us/img466/8073/newstripyy6.jpg

http://img296.imageshack.us/img296/28/carousel2af8.jpg

http://img412.imageshack.us/img412/3043/carousel3yt1.jpg

More videos of the MediaPortal "Face" skin in action:
http://www.mediaportal-skins.net/Downloads/Face3.wmv
http://www.mediaportal-skins.net/Bilder/SkinFace.wmv

*These ideas are 'stolen' from the MediaPortal Face skin suggestion topic-thread (http://forum.team-mediaportal.com/new_face_mp-t9387.html) from their forums.

jmarshall

2007-07-10, 10:23

Haha, looks like MP is still keeping an eye on our SVN.

Wonder how long it'll take till they get the 3D stuff in (the stuff they've got in the videos is 2D only by the looks)

MikeBeecham

2007-07-10, 13:35

not that long I shouldn't imagine

MacGyver

2007-07-23, 21:58

Well, it looks like the newest updates to the zoom code KILLED this code, I'll recode it when I get a chance, but for now, don't bother downloading unless your using a pre 6-20-07 build. Sorry.

jmarshall

2007-07-24, 00:28

It shouldn't have had any affect. I have not been informed of anything breaking due to the recent changes (unless you're doing stuff inside a controlgroup - as that was wrong initially as I pointed out earlier).

Gamester17

2007-08-10, 15:47

IMHO this carousel home-menu would really suit the xTV skin for XBMC (http://xbmc.org/forum/showthread.php?t=24617)
...in fact the latest Front Row (http://www.apple.com/imac/software/frontrow.html) for Apple Mac has it like that now, see:
http://www.youtube.com/watch?v=ptegiuEQ1ZU

VERY SLICK! :cool:

MacGyver

2007-08-10, 21:54

It would probably look like this. :)

http://a301.ac-images.myspacecdn.com/images01/116/l_53e66e904387e881475793b91abc537c.jpg

JMarshall was right, it was the control group, so I fixed it, it now works in every resolution and on the Aug 5 build by T3CH. I hope chief doesn't mind the homage to xTV with his icons, if you do, let me know, and I'll remove them.
Like the original, lay this on top of PM3 to test it out, and only to test it out, or use it for your own skin, but don't try use as functional home.xml replacement for PM3 or xTV, doing so will most likely cause loss of functionality, as this is just a proof of concept and not a full skin, like theirs.

Rotating Home Menu (http://www.box.net/shared/7tqm9e90jc)

Like the original, feel free to use this code in whatever skin you wish and call it your own. :)

MacGyver

2007-08-10, 22:08

MacGyver

2007-08-11, 11:01

JMarshall,is there a way I can fix the bounce back that shows up in the win32 version really bad and the xbox not so much?. It's related to the zoom animation trying to finish it's course after the focus has been changed. Pressing to the left or right faster then a certain speed in the pc app will make it apparent. If I increase the zoom time to slow then it currently is, it's more apparent, and honestly I would like to see it a little slower in its rotating, but can't, do to the bizarre effects it induces. Is there a way I can terminate the animation somehow? It's not just here, it happens in all wraplists if you utilize some sort of animation, even zooming text lists.

alucard77

2007-08-12, 17:48

I hope that xTV uses this. It would go great with that skin. Give it a nicer flow.

alucard77

2007-08-17, 19:39

Oh, BTW, that weather icon is dynamic (it seems like it's always raining here in Heidelberg), but if you have no network connection, it will default to the old weather icon from xTV.

Also note that really wonderful glowing ellipse under those icons, I made that, and it shows the complete and total amount of artistic talent I have, and took me an hour to make, so don't ever expect any graphics from me ever again. :)

Hi There,

Have a quick question on this link. It seems that this link links to this update for PMIII. The link that you had for xTV is no longer working. Can I just take what is in this link and drop it into the xTV folder? Would that work?

I would love to use this in xTV.

MacGyver

2007-08-18, 20:47

no, I added like 1000 lines to the includes.xml, but if you copied the code I added to the end of it, the media could be dropped into media folder with no problems, and the new sized fonts in the fonts.xml, and then the home.xml could replace the one in xTV. but I made it when I was bored, and not really a replacement for anything, I added the xTV icons beacuse Gamester wondered what it would look like as a frontrow replacement. I wrote all the code so someone could use it in their skin if they wanted, and because I wanted to see what it would look like. Use it as a mod, or make a new skin with it, I made it whoever wants it.

alucard77

2007-08-20, 21:41

I am using a July 30th build of xmbc, and what is posted did not work for me. The script would load, but the icons were all jumbled at the left top part of the screen.

What I did is take the above link and substituted the files from within the PMIII folder and put those files in my xTV folder.

I wonder if it is something in the build or if I am doing something wrong.

MacGyver

2007-08-20, 22:09

alucard77, it goes like this.
1) take a brand new load of XBMC
2) then drop the files in the .rar onto that PM3 folder,
3) reset or reload the skin

the jumbling of the icons tells me that the includes.xml is not correct or is the one from PM3, mine is the same, but has like 1000 lines added to it.

most of the code is in there, I did that so other people could build it into there skin, and make changes, without having to rewrite it all.

It's not meant to be a home replacement, just a proof of concept.
I normally don't have enough free time to complete anything, but I am always willing to help out if I can, and I love emulating things due to my lack of artistic ability.

Wir3d

2007-08-21, 03:14

Works really well. If I wasn't so lazy I'd work on a skin using it.
Great Job MacGyver!

alucard77

2007-08-21, 20:20

MacGyver

2007-08-21, 20:39

alucard77, it would require ALOT of work for you to put it into xTV. It was never meant to be a drop in home replacement.

alucard77

2007-08-22, 03:24

Gotcha, I thought one of the ones you had posted was for xTV, and that I could switch it in.

Like I said before, hopefully the xTV designer incorporates it in future versions, it is great.

jaredharley

2007-09-28, 23:33

Hate to bump an old thread, but I was playing with the Carousel here at work (on XBMC_PC.exe) and I can't use it. To get the screen to show anything, I have to put the mouse in the top left corner of the screen, and then I can't get the carousel to rotate.

Can anyone confirm if this is working in the latest SVNs? (9-23-07)

MacGyver

2007-09-30, 15:01

it worked fine for me off the latest svn, but I rewrote it anyway and made it into a xTV mod.

Enjoy. (http://www.box.net/shared/fa7dr0d0k3)

aart

2007-09-30, 17:47

well thats very kind of you!! im gonna insert it and have a go with it....thanks

LoL

2007-09-30, 17:56

looks great, lets hope xtv takes it in :)

great work MacGyver

MacGyver

2007-09-30, 18:12

no need to insert it, its complete, just put the "xtv2" folder in the skins directory.

MacGyver

2007-09-30, 18:47

Almost forgot, I coded it to run under xbmc with linksboks too, but I don't have a current build with links in it, so I can't test it, in settings turn off tv, and the web browser icon will come up, if you have a build with links, it should go straight to the browser, and I created xtv style settings screens for it too, but can't test those on a newer build.

the home menu animation isn't as smooth as i'd like it to be (i think it's a timing thing), i'm hoping jezz can do something with it (i used his ideas from his smoooooth code for list2, so he's the one who understands it better). The animation code he came up with, cut the code needed for this down to about a tenth. :)

aart

2007-09-30, 20:46

i noticed the animation thing too, so hopefully you can adjust that. Also I think the headers are a little big of a font, can you point me to where in the home.xml i can ajust the fontsize?
otherwise a very goodlooking mod!!

MacGyver

2007-09-30, 21:16

aart, it's in the font.xml file for each resolution, its name is "special81" (but it's really only about 56 :) )

aart

2007-10-02, 02:36

thanks for pointing that out..:)

aart

2007-10-05, 19:42

did you find a cure yet for the animation thingy?

MacGyver

2007-10-05, 20:00

djdafreund

2007-10-05, 20:48

Thanks MacGyver for doing that. I'm liking that as a nice replacement. I know it's been mentioned it takes away alittle from being a iTV clone, but i personally don't care a whole lot about that, i just like most of the GUI setup for a skin and just find this addition making it more personalized to my wants and tastes. So thanks for doing this.

aart

2007-10-11, 17:55

macgyver did you manage to fix it yet? btw for the linksboks icon, i'd go with a safari icon from apple...

bionic1234

2007-10-25, 02:09

no aart, I'm sure it's timing, it looks like the rotation icons are coming up before the static has gone away. I'll try to look into it this weekend, and since chief has included coverflow into the svn, I 'll just release the home.xml and skin-settings.xml and additional icon images by themselves, that way it can be dropped onto new releases easier.

MacGyver, where do you normally release home.xml and skin-settings.xml files? Your carousel view is very cool, i'd like to use it with newer versions of xtv if possible.

MacGyver

2007-10-30, 17:19

ihaven't put out anything in a while, when I made thi last mod, I made the home.xml and skin-settings.xml pretty much the only files needed to add the effect, compare the skin-settings.xml with a new one, it should be pretty visable what I changed, but honestly, just try over-writting a new versions file with those 2 and it should be fine, I don't think chief changes the home or skin settings very much anymore, but I know he has updated the listviews.