View Full Version : Horizon [PROTOTYPE]
Before anyone (else) bemoans the start of something new before something old is finished, I should point out that this is merely an experiment and a bid to learn more about the XBMC skinning engine. I figured, having seen a few requests to do something with Microsoft's new 360 dash, that it'd fun to do it as a kind of speed run. So the other night I bashed together a prototype to see if this menu scheme can work (it can) and I've given it a tweak or two since.
http://www.aeonproject.com/dropbin/horizon_proto1.jpg
http://www.aeonproject.com/dropbin/horizon_proto2.jpg
This is an incredibly simple model for an interface and doing it in XBMC should - let me reiterate that, should - be just as easy. The first thing to point out is that if I choose to flesh it out with basic view types and menus, I'll have to run it past Redmond first. I can't really afford to have the Microhammer brought down on me for various reasons. That said, I understand the actual dash is getting an overhaul of sorts anyway.
So what you have here are a number of interesting possibilities, many of which already work surprisingly well:
- You can set custom artwork for each of the menu options, and can even have it cycle. It's kinda like having every Aeon wallpaper slideshow visible at once. That looks like madness in practice, of course, so the cycle would have to be refined to only change with each load of the page. So you'd have different icons for each visit.
- Additionally, there is opportunity for a general custom wallpaper in the background. The page is made of several layers which build up to form the "floor" and background, on top of which is an Aeon-esque vignette. The advantage of this is that backdrops and other items can be slotted in between the layers, potentially controlling their visibility and contrast, ensuring they don't clash. Another possibility would be to drop the entire floor and menu to make more room up top.
- Functionally, this whole thing is actually very Aeon-esque, though the prototype is currently using a music roller-type object for the main menu. A bit tricksy, that. What it means is that there's little of Aeon's functionality that couldn't be included, such as changing menu items, backdrops, and even icon artwork on the fly.
- So long as the basic floor/sky backdrop could be sustained without hitch between windows - and if you look at Aeon's Settings/Core screens it clearly can - you could do a very nifty transition effect with this. Imagine the main menu cascading and fading backwards out of sight, the movie or music menu flowing in from the foreground to replace it. Entirely possible.
This was just me farting around, tbh, and the need to address certain key issues with Aeon (and a mountain of real work) means I can't do anything for the moment. Give it a weekend, though, and it could be well on its way. It'd be nothing extravagant or experimental, just a fulfilment of this basic design to incorporate XBMC's primary features.
Interested?
Is it, though? It is very basic.
joebrady
2008-08-07, 23:48
What's this "real work" you speak of????
pobhockle
2008-08-07, 23:48
That would be great. Very clean and user-friendly.
Following on from what's just been said, I think the worth of a skin like this would indeed be to make a foolproof interface that anyone could use. For that reason, I don't see why it would have many view types at all - maybe just a list and visual view type for each window. Furthermore, you could get away with murder in terms of skin textures. It'd be hard to notice if the backdrop elements were scaled from anything as low as SD resolutions, meaning you could divert practically all your resources into the content - the backdrops and icons. While I'm still an HD boy through and through, there simply isn't a reason why this couldn't run exactly the same on Xbox as it did on HTPC.
More thoughts, please.
MikeBeecham
2008-08-08, 00:19
I would be interested in seeing a skin like this develop if it was possible to make it "off the shelf" for all resolutions. A foolproof interface is only as good as the people that use it, and that would mean catering for the entire base of the community:
That would include both HD and SD.
Go for that and I would be happy.
nice copy, we need a clean foolproof skin. Pm3 is quite foolproof and most usable, but not so polished.
pobhockle
2008-08-08, 00:25
nice copy, we need a clean foolproof skin. Pm3 is quite foolproof and most usable, but not so polished.
Exactly.
And I like that you've rounded the icons here a bit. The square-edged covers in the new 360 dash don't work at all imo. It just feels wrong.
Agree that it has a very clean look to it.
You can set custom artwork for each of the menu options, and can even have it cycle. It's kinda like having every Aeon wallpaper slideshow visible at once. That looks like madness in practice, of course, so the cycle would have to be refined to only change with each load of the page. So you'd have different icons for each visit.
Or how about a cascade type cycle where the top menu changes then a few seconds later the second, then the third, etc?
That'd be nice, but bear in mind that every load has the potential to disrupt whatever animation's in the foreground. So if you were scrolling through the list and every odd second a backdrop changed, it could be quite unpleasant. I think the best bet would be to ask jm or someone for a <freeze>true</freeze> tag for multi-images. That way, it could pick a random picture when it became visible but leave it on that.
skunkm0nkee
2008-08-08, 01:01
Nice prototype images :grin:
I hope it see the light of day as a completed skin as I think the initial concept could work very well
chrislee149
2008-08-08, 01:31
Very nice execution of the idea. As for the backdrops animation... maybe do it the PM3 way and fade through backdrops on a time interval, but only for the selected menu?
I would love this in SD, by the way, since it doesn't seem as complex as other skins to adapt to different resolutions. Of course, you can do whatever you feel like with it.
Reggienz
2008-08-08, 01:59
Duncan, there is definitely a demand for an aesthetically pleasing and simple interface. There is little to choose from in terms of skins that anyone who is unfamiliar with XBMC can just use without at least spending some time familiarizing themselves with it beforehand. (Wives, Girlfriends, etc). My idea of a simple interface is no alternate view options (What you have mocked up here is impressive) and no icons on the home page other than Movies, Music, Tv Shows, Games and Pictures. Keep it easy to use and I think you'll find a lot of users will thank you. Of course these are all ideas I'm throwing out there and what you decide to run with will be as always appreciated by all. Aeon was a breath of fresh air and I'm certain that any new projects will be received with just as much enthusiasm. I look forward to watching this idea progress. Good luck!
BritneysPAIRS
2008-08-08, 08:09
If you want help to do this project I would help out this looks really good and like it simple.
To stop the image rotating in multimage just set time to 0 millisec id say. Or else increase it to 10000000000 millisecs
Also you might be surprised at how much work ive done on this type or interface..... simplifing things as much as poss
Duncan, there is definitely a demand for an aesthetically pleasing and simple interface. There is little to choose from in terms of skins that anyone who is unfamiliar with XBMC can just use without at least spending some time familiarizing themselves with it beforehand. (Wives, Girlfriends, etc). My idea of a simple interface is no alternate view options (What you have mocked up here is impressive) and no icons on the home page other than Movies, Music, Tv Shows, Games and Pictures. Keep it easy to use and I think you'll find a lot of users will thank you. Of course these are all ideas I'm throwing out there and what you decide to run with will be as always appreciated by all. Good luck!
This.
Here's a fairly accurate positioning if you want:
http://84.55.90.88/x360.jpg
<control type="image">
<posx>1122</posx>
<posy>319</posy>
<width>430</width>
<height>322.5</height>
<texture>test.png</texture>
<animation effect="zoom" end="39" time="0" condition="true">Conditional</animation>
</control>
<control type="image">
<posx>956</posx>
<posy>313</posy>
<width>430</width>
<height>322.5</height>
<texture>test.png</texture>
<animation effect="zoom" end="47" time="0" condition="true">Conditional</animation>
</control>
<control type="image">
<posx>762</posx>
<posy>302</posy>
<width>430</width>
<height>322.5</height>
<texture>test.png</texture>
<animation effect="zoom" end="55" time="0" condition="true">Conditional</animation>
</control>
<control type="image">
<posx>484.95</posx>
<posy>285.1</posy>
<width>430</width>
<height>322.5</height>
<texture>test.png</texture>
<animation effect="zoom" end="70" time="0" condition="true">Conditional</animation>
</control>
<control type="image">
<posx>70</posx>
<posy>255</posy>
<width>430</width>
<height>322.5</height>
<texture>test.png</texture>
</control>
/regards Tomas Watz
Here's a full demo Home.xml. Scrolling right works with animation
This one is nearly perfect.
Here's a screenshot with the original screenshot superimposed:
http://84.55.90.88/screennew.jpg
/regards Tomas
<window id="0">
<defaultcontrol>20</defaultcontrol>
<allowoverlay>yes</allowoverlay>
<controls>
<control type="wraplist" id="20">
<posx>10</posx>
<posy>10</posy>
<width>1280</width>
<height>250</height>
<visible>true</visible>
<onup>20</onup>
<ondown>20</ondown>
<onleft>20</onleft>
<onright>20</onright>
<orientation>horizontal</orientation>
<focusposition>2</focusposition>
<scrolltime>200</scrolltime>
<itemlayout width="200">
<control type="label">
<posx>0</posx>
<posy>0</posy>
<width>200</width>
<height>22</height>
<info>ListItem.Label</info>
</control>
</itemlayout>
<focusedlayout width="200">
<control type="label">
<posx>0</posx>
<posy>0</posy>
<width>200</width>
<height>22</height>
<info>ListItem.Label</info>
</control>
</focusedlayout>
<content>
<item id="1">
<label>My First Item</label>
<onclick>ActivateWindow(Home)</onclick>
<visible>true</visible>
</item>
<item id="2">
<label>My Second Item</label>
<onclick>ActivateWindow(MyMusicLibrary)</onclick>
</item>
</content>
</control>
<control type="image">
<visible>Container(20).OnNext</visible>
<posx>1286</posx>
<posy>444</posy>
<width>164</width>
<height>125</height>
<texture flipy="true" diffuse="testdiff.png">test.png</texture>
<animation type="Hidden">
<effect type="slide" end="-164,0" time="200" reversible="false"/>
</animation>
</control>
<control type="image">
<visible>Container(20).OnNext</visible>
<posx>1286</posx>
<posy>319</posy>
<width>164</width>
<height>125</height>
<texture>test.png</texture>
<animation type="Hidden">
<effect type="slide" end="-164,0" time="200" reversible="false"/>
</animation>
</control>
<control type="image">
<visible>Container(20).OnNext</visible>
<posx>1122</posx>
<posy>444</posy>
<width>164</width>
<height>125</height>
<texture flipy="true" diffuse="testdiff.png">test.png</texture>
<animation type="Hidden">
<effect type="zoom" end="117.95" time="200"/>
<effect type="slide" end="-132.26,13.57" time="200"/>
</animation>
</control>
<control type="image">
<visible>Container(20).OnNext</visible>
<posx>1122</posx>
<posy>319</posy>
<width>164</width>
<height>125</height>
<texture>test.png</texture>
<animation type="Hidden">
<effect type="zoom" end="117.95" time="200"/>
<effect type="slide" end="-132.26,-5.09" time="200"/>
</animation>
</control>
<control type="image">
<visible>Container(20).OnNext</visible>
<posx>966</posx>
<posy>460</posy>
<width>193</width>
<height>147</height>
<texture flipy="true" diffuse="testdiff.png">test.png</texture>
<animation type="Hidden">
<effect type="zoom" end="121.74" time="200"/>
<effect type="slide" end="-165.93,17.25" time="200"/>
</animation>
</control>
<control type="image">
<visible>Container(20).OnNext</visible>
<posx>966</posx>
<posy>313</posy>
<width>193</width>
<height>147</height>
<texture>test.png</texture>
<animation type="Hidden">
<effect type="zoom" end="121.74" time="200"/>
<effect type="slide" end="-165.93,-9.04" time="200"/>
</animation>
</control>
<control type="image">
<visible>Container(20).OnNext</visible>
<posx>764</posx>
<posy>481</posy>
<width>235</width>
<height>179</height>
<texture flipy="true" diffuse="testdiff.png">test.png</texture>
<animation type="Hidden">
<effect type="zoom" end="127.68" time="200"/>
<effect type="slide" end="-216.95,27.41" time="200"/>
</animation>
</control>
<control type="image">
<visible>Container(20).OnNext</visible>
<posx>764</posx>
<posy>302</posy>
<width>235</width>
<height>179</height>
<texture>test.png</texture>
<animation type="Hidden">
<effect type="zoom" end="127.68" time="200"/>
<effect type="slide" end="-216.95,-13.2" time="200"/>
</animation>
</control>
<control type="image">
<visible>Container(20).OnNext</visible>
<posx>487</posx>
<posy>516</posy>
<width>300</width>
<height>229</height>
<texture flipy="true" diffuse="testdiff.png">test.png</texture>
<animation type="Hidden">
<effect type="zoom" end="139.86" time="200"/>
<effect type="slide" end="-291,42.19" time="200"/>
</animation>
</control>
<control type="image">
<visible>Container(20).OnNext</visible>
<posx>487</posx>
<posy>285.1</posy>
<width>300</width>
<height>229</height>
<texture>test.png</texture>
<animation type="Hidden">
<effect type="zoom" end="139.86" time="200"/>
<effect type="slide" end="-291,-21.5" time="200"/>
</animation>
</control>
<control type="image">
<visible>Container(20).OnNext</visible>
<posx>80</posx>
<posy>575</posy>
<width>420</width>
<height>320</height>
<texture flipy="true" diffuse="testdiff.png">test.png</texture>
<animation type="Hidden">
<effect type="zoom" end="130" time="200"/>
<effect type="slide" end="-407,26" time="200"/>
<effect type="fade" start="100" end="0" time="200"/>
</animation>
</control>
<control type="image" id="3001">
<visible>Container(20).OnNext</visible>
<posx>80</posx>
<posy>255</posy>
<width>420</width>
<height>320</height>
<texture>test.png</texture>
<animation type="Hidden">
<effect type="zoom" end="130" time="200"/>
<effect type="slide" end="-407,-50" time="200"/>
<effect type="fade" start="100" end="0" time="200"/>
</animation>
</control>
<control type="image">
<visible>!Control.IsVisible(3001)</visible>
<posx>1122</posx>
<posy>444</posy>
<width>164</width>
<height>125</height>
<texture flipy="true" diffuse="testdiff.png">test.png</texture>
</control>
<control type="image">
<visible>!Control.IsVisible(3001)</visible>
<posx>1122</posx>
<posy>319</posy>
<width>164</width>
<height>125</height>
<texture>test.png</texture>
</control>
<control type="image">
<visible>!Control.IsVisible(3001)</visible>
<posx>966</posx>
<posy>460</posy>
<width>193</width>
<height>147</height>
<texture flipy="true" diffuse="testdiff.png">test.png</texture>
</control>
<control type="image">
<visible>!Control.IsVisible(3001)</visible>
<posx>966</posx>
<posy>313</posy>
<width>193</width>
<height>147</height>
<texture>test.png</texture>
</control>
<control type="image">
<visible>!Control.IsVisible(3001)</visible>
<posx>764</posx>
<posy>481</posy>
<width>235</width>
<height>179</height>
<texture flipy="true" diffuse="testdiff.png">test.png</texture>
</control>
<control type="image">
<visible>!Control.IsVisible(3001)</visible>
<posx>764</posx>
<posy>302</posy>
<width>235</width>
<height>179</height>
<texture>test.png</texture>
</control>
<control type="image">
<visible>!Control.IsVisible(3001)</visible>
<posx>487</posx>
<posy>516</posy>
<width>300</width>
<height>229</height>
<texture flipy="true" diffuse="testdiff.png">test.png</texture>
</control>
<control type="image">
<visible>!Control.IsVisible(3001)</visible>
<posx>487</posx>
<posy>285.1</posy>
<width>300</width>
<height>229</height>
<texture>test.png</texture>
</control>
<control type="image">
<visible>!Control.IsVisible(3001)</visible>
<posx>80</posx>
<posy>575</posy>
<width>420</width>
<height>320</height>
<texture flipy="true" diffuse="testdiff.png">test.png</texture>
</control>
<control type="image">
<visible>!Control.IsVisible(3001)</visible>
<posx>80</posx>
<posy>255</posy>
<width>420</width>
<height>320</height>
<texture>test.png</texture>
</control>
</controls>
</window>
I've completed the base icon scroller.
download and unrar to your skindir if you want to try it out.
I've used aeon as a base so if you want to switch back to another skin select Appearance and choose your skin instead.
New60.rar (http://84.55.90.88/New60.rar)
It's now updated with a slide-in animation on windowopen and a fade out on windowclose.
same link as post above.
That looks damn nice cant wait for this to be complete love the fade animations.
UND3R ACHI3V3R
2008-09-20, 23:59
Will this be a skin or is it just a concept?
UND3R ACHI3V3R
2008-10-04, 07:04
Will this be a skin or is it just a concept?
Maybe no-one saw this question?
Just a concept until someone else takes it on. I'm sure there are plenty of folks out there with a mind to reproducing the NX360E, and it'll have changed quite a bit by the time it launches.