Kodi Community Forum

Hi,
recently I started working on providing tools for flexible controls placement and sizing (so we can define single set of .xml files that will work well on different aspect ratios).

Now we are limited to <posx>, <posy>, <width> and <height> (which essentially tells xbmc where left/top edge of control should be placed and what width/height should be). While it's ok for single resolution - it doesn't really work well if we will run same .xml on different aspect ratios. Idea here is to extend positioning system so we could:
- be able to specify not only where left/top edge should be - but also where right/bottom edge and where horizontal/vertical center of control should be
- use percentage values that will be converted to concrete value based on parent (that is control group/grouplist/window that our control is directly placed in) size

Above text might doesn't say much, so here's example: look here http://i46.tinypic.com/2ppar7d.jpg and notice what changes were made so it looks good on both 4:3 and 16:9 aspects:

1. Time label on top, play/previous/next and progress control on top panel are cenetered (now we need to adjust posx for both aspect ratios in seperate .xml)
   
2. Panel container's width is stretched to fill entire space (now we need to adjust width for both aspect ratios in seperate .xml)
   
3. (optionally) Scrollbar, settings button and info on top and 4 buttons on bottom button could need to be moved (in case 'r' suffix in <posx> wasn't used)
   

So what exactly You'd be able to do with this new feature (points here show how to accomplish changes I listed above):

1. You simply define something like this:
   
   Code:

   <posx center="50%" />
<width>300</width>
   or more compact
   
   Code:

   <posx center="50%" width="300" />
   What does it mean? It means that center of control will be placed at 50% of the parent width (which will cause control to be centered and have constant width of 300). Why do we need center="50%" than just saying center="true"? Imagine You'd want center of control to be placed 100 pixels/points from parent's left (or right) edge so You use <posx center="100(r)" width="150"> or center to be in 3/4 of parent's width: <posx center="75%" width="150" />
   
2. You use:
   
   Code:

   <posx left="50" right="50r" />
   It means that left edge of control will be placed at position "50" (same as current <posx>50</posx>) and right edge will be placed at "50r", so there will be 50 pixels on left and right no matter how wide window/group is. Width of control will be calculated automaticly.
   
3. To anchor to the right:
   
   Code:

   <posx right="10r" />
<width>200</width>
   or
   
   Code:

   <posx right="10r" width="200" />
   This is currently possible by using
   
   Code:

   <posx>210r</posx>
<width>200</width>
   but I imagine not needing to calculate Yourself (200+10)r (easy example here :p but it's not always that easy) could be benificial and should make it easier to read xml - You look what params are used and say: "aha, 'right' and 'width' is defined - this means that control will be aligned/anchored to the right"
   

To sum it up:
We plan to be able to define 4 attributes "left", "right", "center", "width" (and "top", "bottom", "center", "height" for horizontal) from which You will be able to pick any combination of 2 and let xbmc to do proper calculation for control placement and sizing. (propably it will be possibly to mix f.e. "left" and "center" but this doesn't seem to make much sense to really use it, but hey - You can)

In case You want to follow some pre-discussion we had before coming to this idea - check here https://github.com/xbmc/xbmc/pull/1208 but please comment about it in this topic as this is better place to do it than github.

Thanks for info.

- looks like this will break compatibility?
- why would we want web page design approach to htpc 10 foot interface?

Just curious where we are heading.

Whatever we will choose, we will keep backward compatibility (and possibly provide tool that will auto convert old system to new one). It's also possible that we won't use syntax I used in 1st post if something better will be figured out. That's why this is request for comment - we'd appreciate Your input here to make it better.

It's not that we *want* web page design approach - it's more that we could benefit by reusing some of ideas that are used there (stuff that allow to make web page look ok-ish in different resolutions/window sizes). If You guys think of better way to do that I'm more than ok with doing it that way.

Ok, thanks for keeping back door for old skins.

And sorry if it sounded negative because suggestions from my side were lacking. It is just that I don't believe in one size fits all thing. I guess I'll wait for someone to make a good use of it and maybe try to learn from that.

Very nice addition. While you're at this, I always wanted to have proper resizing with zoom animation.



Top is the unzoomed image, mid is how it currently looks like and bottom is how it should look like if zoomed. Basically the zoom animation should use the border value... would this be possible to add as an option?

Another thing is $VAR for posx, width etc... is that on the todo list for Frodo?

`Black:
"zoom" animation behaviour is currently correct. We would need "control resize" animation to achieve what You need. I think both that and $VAR for posx,etc will be a little bit easier/faster to code once this little "project" will be finished. Can't promise it will be ready for frodo, but (at least for me) it's definitely on to-do list

Okay thanks for the info.