[Canuma]

It has been a while since I touched kodi development, unfortunately Leia starts to show its age and I guess I have to move on. One of my personal showstopper so far has been (among others) the lack of a skin that satisfies me. Up to Leia, I used a certain config within the Titan Skin and I even tried to tamper with it, but after all the time I came to the conclusion I should let rest it in peace and start over. Now, skinning basically from scratch is another beast than just trying to fix existing problems, also I almost forgot everything I've learned in the past . So naturally, I have lot's of questions, which mostly solved so far by looking at other peoples work and have the skinning manual open all the time, as suggested.

For some of the most basic questions I didn't find however a "correct" answer, so here we go and apology if they have been answered already and I just didn't search hard enough.

Positioning (of controls)
First and foremost, am I understanding correctly, that basically every control has to be positioned in absolute order, to the main grid?
I cannot place them relative to other controls? Like let's say I am doing a 3 row horizontal layout. A 100px high header, footer 100px and a content area 880px
All those controls would then also have additional child elements, and so on.
What I'd like to to is just to define a first element header with 100px, add another element relative to the first one with 880px (which would be placed beneath the header) and finally the footer which ideally just takes the rest, but from what I've tried so far, this seems to be impossible? If so, could someone please explain the idea of group control, because I guess I didn't fully understand what it does.

A follow up question, what's the deal with <posx>,<posy>,<width>,<height> vs <left>,<top>,<right>,<bottom>?
I stumbled over those variations when studying other skins, and when looking into this issue the only useful thing I found was a posting from 2014, which basically states, that <left>,<top>,<right>,<bottom> is the way to go, whereas <posx>,<posy>,<width>,<height> is considered deprecated. However, when looking into the wiki pages, I usually find <left>,<top>,<width>,<height>? So what is the "correct" way to do this? 

There is probably a lot more stuff, but this seems to be the most basic things where I can already make wrong decisions, so I'd like to adress them before I go on. (Frankly, I am not sure if i will be able to make all this into that shiny new skin I imagine .)


Best practices
This is a more general question, where I hope to get some useful feedback.
Right now, I am using VisualStudio Code. Unfortunately there seems to be not a single dev tool for kodi skinning, which is not a big deal, but leads to some organizing problems. One major pain in the arse, when looking into existing skins, is to understand and find all those defined includes and variables. How do you guys organize and keep track of your includes and stuff?
Somewhat related, assuming that almost every skin started as a modification of a existing one, how to keep track that every necessary xml file has been modified to be consistent to your design? And how do you test single Items like e.g. requester or stuff you usually don't use, like in my case login screens and such?

In a rather naive attempt, i went with an empty xml folder, whith just a simple home.xml, containing 3 image controls to get an idea how to go on from there. This did however escalate quickly, as I didn't have any requester, a settings window and so on.
So how would you do a skin from scratch?

[scott967]

As you see, the most common positioning is relative to the upper left corner with I guess top and left as alias for posy and posx.  But you need to look at the skin concept of "group" and the derivatives of it which allow for positioning relative to the group rather than the entire window.

There's a lot other positioning tags, maybe in some cases better for RTL scripts for example, but not from what I've seen widely used.

There was some sort of design tool for sublime text (don't know current status) that maybe could be ported to visual code.  There's also an independent QA checker tool but it hasn't been kept current.  (The source is available but it is written in VB which I have no desire to learn.  I have been playing around with updating the control attribute tags though to include more recent controls and tags (like range and colorbutton)).

Another thing, which I have no understanding of, is that most skins currently use a design space of 1920x1080, i.e. 16:9 aspect.  I've never understood how skins are supposed to be designed to allow other optional aspect ratios.

scott s.
.

[Canuma]

But you need to look at the skin concept of "group" and the derivatives of it which allow for positioning relative to the group rather than the entire window.

I guess I misinterpreted the concept of groups then. What I was hoping is, that elements of a group would be automatically aligned regarding a given orientation. Like i have 3 image controls with a given width and height, and if I group them, they would be aligned horizontal or vertical, without giving them an absolute value of x and y. But what you are saying is, that a group "just" allows for members of a group to be positioned within? So e.g. I have a group with pos x/y 200, all group members will start at 200/200 instead of 0/0 if I omit a positioning tag?

There's a lot other positioning tags, maybe in some cases better for RTL scripts for example, but not from what I've seen widely used.

Just curious, what is a RTL script? Anyhow, I really just need to know if the mentioned tags are indeed deprecated or not. I don't mind using either, I just don't want to start using tags which will become obsolete at some foreseeable future (although this has been obviously the case for many years now, so that probably might not be a problem coming up in the near future)

There was some sort of design tool for sublime text.

When I started to tinker with skins few years ago, I had indeed a look into that, however even back than it was outdated and broken, not sure if that has changed.

Another thing, which I have no understanding of, is that most skins currently use a design space of 1920x1080, i.e. 16:9 aspect.  I've never understood how skins are supposed to be designed to allow other optional aspect ratios.

I guess Kodi calculates this itself nowadays, the resolution specific folders are gone. I assume you'd control that by specifying aspect ratio tags, so a 2:3 Poster for example will be the same no matter if you have a 4:3, 16:9 or 16:10 resolution.

Just a quick new question, Kodi isn't able to draw simple elements by itself, no? Like drawing a filled rectangle? I 'd have always to provide a texture for that?

[Hitcher]

A grouplist will auto align all the controls in it based on the itemgap value.

https://kodi.wiki/view/Group_List_Control

[Canuma]

A grouplist will auto align all the controls in it based on the itemgap value.

I also tried the grouplist, but as well, it didn't work as I hoped it would (I hope I don't sound to annoying here, I really just try to learn the concepts and adjust my expectations accordingly)
Ah stupid me. I just stumbled over my "I want to get everything right from start" idea. As I mentioned in my opening post, I 'd like to learn which of the positioning tags are to use. I thought that the post from 2014 was right and so i considered <width> and <height> deprecated. I made something like this:
 

xml:


<control type="grouplist">

<control type="image">

<top>100</top>

<bottom>100</bottom>

<texture border="5">diffuse/panel.png</texture>

<colordiffuse>ffffff00</colordiffuse>

<aspectratio>stretch</aspectratio>

</control>

<control type="image">

<top>100</top>

<bottom>100</bottom>

<texture border="5">diffuse/panel.png</texture>

<colordiffuse>ffff0000</colordiffuse>

<aspectratio>stretch</aspectratio>

</control>

</control>

And everything was placed just above each other. Now that I look at it again, It doesn't even make that much sense anymore . I replaced my stupid top/bottom construct with height and now not only does it actually have a height of 100, but as expected, the 2nd element is placed beneath the first.

So, let's recap:
If i want to have n elements grouped together and automatically positioned according to a given orientation, I should go for a grouplist control. For that to work, I have to provide its e.g. height, if i don't want it to be in it's default size.
To not assume things again, can you clarify that <height> and <width> are indeed not deprecated? But probably just the <posx/posy> tags?

Thank you guys, helped me already a lot.

[Hitcher]

To not assume things again, can you clarify that <height> and <width> are indeed not deprecated? But probably just the <posx/posy> tags?

Height and width are definitely not deprecated.

If you don't define them in a control then in most cases they'll inherit the parent control positions and/or dimensions.