[jmarshall]

hi all,

here's my initial ideas for the button bar for the home page.

the idea is that we will replace all the link buttons such as my videos, my pictures, my music, settings etc. etc. with a completely user-configurable set of buttons. this means that skinners will no longer have control over what buttons the user sees - it will be up to the user themselves.

this will inevitably reduce the amount of stuff that skinners can do. in particular, each button in the new button bar will have the same look, and the look will only be specified once. additional things such as the gaps between buttons, and general layout stuff (such as whether the buttons are laid out vertically, horizontally or otherwise) plus total sizing of the bar will be skinnable as well.

my current plan is to have something like this:

<control>
<description>button bar</description>
<id>1</id>
<posx>100</posx>
<posy>200</posy>
<width>150</width>
<height>200</height>
<align>center</align>
<texturefocus>buttonfocus.png</texturefocus>
<texturenofocus>buttonnofocus.png</texturenofocus>
<orientation>vertical</orientation> (or horizontal)
<buttonheight>30</buttonheight>
<gap>5</gap>
</control>

additional stuff that could be done if skinners feel they want it:

<scroll></scroll> (values: smooth, none)

the idea is we need to support more than a fixed number of buttons. in particular, we need to consider what should happen if say 10 buttons are requested, when there are only enough room for 5. should they wrap scroll, so that the highlighted item is the one in the middle of the list and the cursor doesn't move, or should they scroll more like the list views, where they only scroll up/down when you move up/down while at the top/bottom?

also, should there be an alpha-fade out of the top and bottom buttons?

any info skinners could give me over the next day or two would be great. most reasonable requests are probably implementable, so don't be afraid to ask! i'll be coding this up over the next couple of days.

cheers,
jonathan

[jmarshall]

other stuff:

what should happen if only 4 buttons are being displayed? should they be centered vertically within the list, and the movement/highlighting reverted to the way it is at the moment? what happens then as you get more buttons??

fun stuff to think about

if any skinners want to chat on irc about it, i'll be idling in #xbmc on efnet.

cheers,
jonathan

[pin87a]

sweet! you rock.

imo the list should "wrap scroll" (button stays in the middle) because with that method the user immediately knows there are more choices as soon as they press up or down.
if it only scrolls when you try to go past the bottom or top it is less intuitive.

alpha fading on the top and bottom buttons would be nice.

hmm... i think the buttons should probably be centered and scroll as normal even if there isn't enough to fill the allotted space. but then again that might be a little weird because as you move the list up and down there will be blank space. hmm..

as for suggestions, the only thing i can think of at the moment is setting up some kind of default icon setup for the images that are displayed when a certain type of button is selected.
i.e. if a button linking to the videos page is selected a video icon pops up, or if a button that links to a script a script icon of some sort will pop up, or a button linking to settings, or to an xbe, etc...

[jmarshall]

yeah - i like the idea of the scrolling with the selected item in the middle, though it does get a little awkward in the case of just a few items. we could do the same scroll behaviour, but not have it wrap - that would overcome the problem with only 2 buttons for instance. (like evox does it's items for instance).

thanks for reminding me about the background pictures - i will have to think about how to best implement it - something along those lines (type of window) will probably do the trick.

alpha fade could be configurable (on/off is probably all that is needed).

i'll probably get started tomorrow - feel free to post here (or catch me on #xbmc) if you have suggestions and/or want alterations to be made.

cheers,
jonathan

[BritneysPAIRS]

id like wrap scroll with any number of buttons. but the wrap scroll to alpha fade at top/bottom and for the spacing to be definable as an arc size like ms dashboard or as a set space in pixels. id like to see buttons be pics as well as text or pic and text. id like it to be able to be centered left right or center.

ummm and id love for a button to be passworded :thumbsup: i know this could be considered a new feature but it would still be great.

id like buttons to be able to open folders like now. launch xbes and be able to reboot or shutdown

cheers

[BritneysPAIRS]

another suggestion i have for 2 skins im working on

one is an enlarge command for highlighted menu so middle is bigger than top or bottom and size tapering in a circular calcuation to be smaller at the sides....can give a pic if it doesnt make sense.
this would be neat to use in 2 ways, as if it is rotating around a globe or a an osx looking menu.

cheers

[Ph03n1x]

sounds like a great idea! i agree with pretty much everything thats been said.

as far as suggestions go it would be cool if there was an option to zoom buttons in and out of view as the user scrolls through the list...

edit: looks like britneyspairs beat me to it! :d

also pictures as buttons would be ideal, a nice way to implement it would be to link a button bar with a separate button definition file. the definition file could then be modified through the frontend if required.

[jmarshall]

the problem with having pictures instead of text with this model is that there'd have to be a set of images that the user could choose from. remember, this feature is for users primarily - not for skinners. the idea is that users would have control over what they would want to have access to on the homepage. (for instance, i'd personally kill off my weather and my programs, as i never use them). they could then add other things that they want (such as a particular script etc.) to the main button bar.

for this reason, having no text is not really a feasible option. however, we could have a set of predefined images (<videoimage>, <audioimage> etc. that the user could choose from, or that would be automatically applied based on the action that a particular button does).

as for the circular arc thing, i don't think i'm gonna do that to be honest - 3d effects don't tend to fit in with 2d stuff very well, and we want to keep a consistent look across the application. having the button that is currently selected larger than the ones on either side is probably doable though - i'll keep it in mind.

for now, i plan to do the wrap + alpha fade at edges effect. i'm not sure how it's gonna work, given that we don't have alpha support for ttf fonts at the moment. even if we did have, the alpha support currently is only the alpha for the entire text, whereas with buttons we can change the alpha for each corner of the button, allowing a graduated effect.

anyway, i'm gonna clean up some other code stuff this morning and add various patches that people have submitted. after that, i'll start looking at implementing some of this.

cheers,
jonathan

[BritneysPAIRS]

how about passwording for the users not the skinners

[jmarshall]

yes, passwording can be added later.

for now i'm asking what skinners want wrt to the look/control they'd have over the look.

at the moment i'm wondering whether it might be better to keep the buttons more in control of the skinner, by limiting the number of buttons that the user can have (to say 6 or so).

the buttons would be defined as they are at the moment, except their ids would be generic and no longer linked to a particular function (thus no hyperlinks will be necessary). the user will then decide what is displayed on the buttons (it's label) and what the button does. they'd then be able to hide buttons if they don't want all 6 displayed.

with this method, the skinner gets control over the look of the buttons, and the placement etc. the user gets control over what they do.

the only disadvantage with this that i can see is that it limits the maximum number of buttons to whatever number we decide. i personally don't see this as an issue, but i can understand how some might. remember that we have the subpanel that we could use to achieve more buttons if necessary.

let me know what you all think regarding this. it'd be fairly simple to implement (much simpler than the button scroller idea) and would mean that skins would not need to be changed etc.

cheers,
jonathan

[pin87a]

personally i was hoping for this feature to eliminate the need for a popup subpanel.
which is a very awkward ui design in my opinion.
(selecting a random icon pops up more menu items?)

if the number of buttons was limited we would kinda be back where we started from.
the users would still have no way to easily add buttons for all of their favorite features and scripts.

anyways, that's just my opinion.
obviously it is up to you to decide if implementing it would be worthwhile. you are doing all of the work...

[Livin]

allow the user to place as many button on the screen as they want.
allow any button to launch items directly, like scripts, music playlists, whatever.
allow placement of the buttons anywhere on the screen and in any order.

i figured all of this would be available being that xml is very flexible.

i have not tried skinning xbmc becasue there is no skinning app for it but it seems to me that there are several other apps (media portal, xlobby, etc) that use xml and the skins seem much more 'diverse' in the gui layouts and much more flexible.

is this a limitation of the xbmc design or are the skin designers just not being as creative (no insult intended to the skinners)?

[lixx]

hi

i want to see this button bar with a possibility for the skinner to choose between diffrent scroll types. my english is not very good, so i made a pic with some types of scrolling:

*click*

1. fixed cursor at the first or last position - with fading
2. fixed cursor in the middle, or the skinner can choose the postion of the cursor - fading, too
3. the number of buttons is limited and the user can only change them, no add or delete; possile to loop jump from last pos to first pos.
4. "unlimited" menu items, the bar only scrolls if you are at first or last position an press left or right key; possile to loop jump from last pos to first pos.

i think that's it so far from my side..

mfg lixx

sorry for my bad english ^^

[jmarshall]

looks good lixx - thanks for the pics - makes it easy to explain stuff!

i'm personally in favour of numbers 3 and 4 (combined).

the bar will be like number 3 if the number of buttons fits, or like number 4 if there's more buttons than slots.

with this sort of system it allows the user the most customization (ie they can add/remove as many buttons as they like).

the problems i see with numbers 1 and 2 is that they don't work very well for small numbers of buttons. eg in number 2 what would happen in the case of just 2 buttons?

although i like the idea of the alpha fade out, it causes problems with small numbers of buttons.

i'm gonna start implementing this once i finish doing the context menu for my pictures (ie tomorrow). i will initially implement the combined 3 and 4 design.

once again, the more comments the better system we can come up with!

cheers,
jonathan

[lixx]

jmarshall:
can you explain the problem with the two button bar? i don't understand it in my opinion this works fine for example in evox
small animation:

*click*

mfg lixx