Kodi Community Forum

I am trying to understand the skin hiërarchie however there are a couple of questions.

XBMC version: 12.0-ALPHA7 Git:20121111-860cd91 (Compiled: Nov 11 2012)

Code:
        <control type="label">

            <label>Test</label>

            <posx>100</posx>

            <posy>100</posy>

            <height>100</height>

            <width>250</width>

            <align>left</align>

            <aligny>top</aligny>

            <font>Nexa-Light60</font>

            <textcolor>White</textcolor>

        </control>

        <control type="label">

            <label>Test</label>

            <posx>300</posx>

            <posy>100</posy>

            <height>100</height>

            <width>250</width>

            <align>left</align>

            <aligny>top</aligny>

            <font>DroidSans60</font>

            <textcolor>White</textcolor>

        </control>

        <control type="label">

            <label>Test</label>

            <posx>500</posx>

            <posy>100</posy>

            <height>100</height>

            <width>250</width>

            <align>left</align>

            <aligny>top</aligny>

            <font>OpenSans-Regular60</font>

            <textcolor>White</textcolor>

        </control>

        <control type="label">

            <label>Test</label>

            <posx>700</posx>

            <posy>100</posy>

            <height>100</height>

            <width>250</width>

            <align>left</align>

            <aligny>top</aligny>

            <font>SegoeUI60</font>

            <textcolor>White</textcolor>

        </control>

        <control type="image" id="1">

            <description>My first image control</description>

            <posx>900</posx>

            <posy>100</posy>

            <width>200</width>

            <height>100</height>

            <align>left</align>

            <aligny>top</aligny>

            <texture>test.png</texture>

        </control>

The image (8x8) is nicely shown on the given posx and posy. The text however is not.
The fonts i tested:

Code:
        <font>

            <name>Nexa-Light60</name>

            <filename>Nexa-Light.ttf</filename>

            <size>60</size>

        </font>

        <font>

            <name>DroidSans60</name>

            <filename>DroidSans.ttf</filename>

            <size>60</size>

        </font>

        <font>

            <name>OpenSans-Regular60</name>

            <filename>OpenSans-Regular.ttf</filename>

            <size>60</size>

        </font>

        <font>

            <name>SegoeUI60</name>

            <filename>segoeui.ttf</filename>

            <size>60</size>

        </font>

Fonts:

Nexa light
DroidSans regular
OpenSans regular
SegoeUI regular

The vertical text position is not shown on posy 100. It looks like this is font related?
Why is this and how are you skinners handle this?

A other thing i don't really understand is this.
I tested this with 2 fonts.

DroidSans regular
OpenSans regular

Code:
        <font>

            <name>DroidSans30</name>

            <filename>DroidSans.ttf</filename>

            <size>30</size>

        </font>

        <font>

            <name>DroidSans60</name>

            <filename>DroidSans.ttf</filename>

            <size>60</size>

        </font>

        <font>

            <name>OpenSans-Regular30</name>

            <filename>OpenSans-Regular.ttf</filename>

            <size>30</size>

        </font>

        <font>

            <name>DroidSans60</name>

            <filename>DroidSans.ttf</filename>

            <size>60</size>

        </font>

Code:
        <control type="label">

            <label>Test</label>

            <posx>100</posx>

            <posy>100</posy>

            <height>100</height>

            <width>250</width>

            <align>left</align>

            <aligny>top</aligny>

            <font>DroidSans60</font>

            <textcolor>White</textcolor>

        </control>

        <control type="label">

            <label>Test</label>

            <posx>300</posx>

            <posy>100</posy>

            <height>100</height>

            <width>250</width>

            <align>left</align>

            <aligny>center</aligny>

            <font>DroidSans30</font>

            <textcolor>White</textcolor>

        </control>

        <control type="label">

            <label>Test</label>

            <posx>500</posx>

            <posy>100</posy>

            <height>100</height>

            <width>250</width>

            <align>left</align>

            <aligny>top</aligny>

            <font>OpenSans-Regular60</font>

            <textcolor>White</textcolor>

        </control>

        <control type="label">

            <label>Test</label>

            <posx>700</posx>

            <posy>100</posy>

            <height>100</height>

            <width>250</width>

            <align>left</align>

            <aligny>center</aligny>

            <font>OpenSans-Regular30</font>

            <textcolor>White</textcolor>

        </control>

As shown in the above picture the 2 fonts are reacting very different when it comes to the posy. As webdesigner i am familiar with html and css. If i use html/css in the same way as i did above it will look like this:

The small text is vertically aligned center. The height is still 100 i will asume the text must be centered within it's given height.
At least that is what the wiki says:

Quote:align Can be left, right, or center. Aligns the text within the given label <width>. Defaults to left
aligny Can be top or center. Aligns the text within its given label <height>. Defaults to top

The characters you're testing with don't touch the top or bottom of the fonts height - try testing with accented characters (À, Ç, etc) and you'll see different results.

Or lowercase characters like g, j and y

Thx guys did not thought about that characters.
For the DroidSans font it did work.

But for the OpenSans there is still some space in between. But this looks font related.

Code:
        <control type="label">

            <label>ÀAÇC</label>

            <posx>100</posx>

            <posy>100</posy>

            <height>72</height>

            <width>250</width>

            <align>left</align>

            <aligny>top</aligny>

            <font>DroidSans60</font>

            <textcolor>White</textcolor>

        </control>

        <control type="label">

            <label>ÀAÇC</label>

            <posx>300</posx>

            <posy>100</posy>

            <height>72</height>

            <width>250</width>

            <align>left</align>

            <aligny>center</aligny>

            <font>DroidSans30</font>

            <textcolor>White</textcolor>

        </control>

        <control type="image" id="1">

            <description>My first image control</description>

            <posx>100</posx>

            <posy>100</posy>

            <width>300</width>

            <height>72</height>

            <align>left</align>

            <aligny>top</aligny>

            <colordiffuse>FFFFFFFF</colordiffuse>

              <texture>test.png</texture>

        </control>

        <control type="label">

            <label>ÀAÇC</label>

            <posx>500</posx>

            <posy>100</posy>

            <height>72</height>

            <width>250</width>

            <align>left</align>

            <aligny>top</aligny>

            <font>OpenSans-Regular60</font>

            <textcolor>White</textcolor>

        </control>

        <control type="label">

            <label>ÀAÇC</label>

            <posx>700</posx>

            <posy>100</posy>

            <height>72</height>

            <width>250</width>

            <align>left</align>

            <aligny>center</aligny>

            <font>OpenSans-Regular30</font>

            <textcolor>White</textcolor>

        </control>

        <control type="image" id="2">

            <description>My first image control</description>

            <posx>500</posx>

            <posy>100</posy>

            <width>300</width>

            <height>72</height>

            <align>left</align>

            <aligny>top</aligny>

            <colordiffuse>FFFFFFFF</colordiffuse>

              <texture>test.png</texture>

        </control>

Is there a attribute like you have with css: z-index property to place the text above a image? Now i needed to add some transparency to the image to get the image visible?

Layering is done by the order of the controls. So for example: if a label needs to look like it comes from behind an image, you need to have 2x the same label. And use conditional animation or visibility on the top one.

So:
<control type="label">
<control type="image">
<control type="label"> <-- not visible yet

There is a <zorder> but this only specifies the “depth” that a window should be drawn at.

Hmm that is the order i do use, label above image.

Code:
        <control type="label">

            <label>StartÀ</label>

            <posx>100</posx>

            <posy>88</posy>

            <height>70</height>

            <width>250</width>

            <align>left</align>

            <aligny>top</aligny>

            <font>NexaLight60</font>

            <textcolor>White</textcolor>

        </control>

        <control type="image">

            <description>My first image control</description>

            <posx>100</posx>

            <posy>100</posy>

            <height>100</height>

            <width>100</width>

            <align>left</align>

            <aligny>top</aligny>

              <texture>test2.png</texture>

        </control>

(2012-11-15, 13:38)Baswazz Wrote: [ -> ]Hmm that is the order i do use, label above image

Has to go the other way around if you want the label above the image. The position of the controls in the XML is read from the top (will appear beneath the next controls in the stack) to the bottom (will appear above the previous controls in the stack).

No that is label under image.

Background
Middle (where you want the image)
On top (text in this case)

Thx for helping me out on this, things are getting a little more understandable Big Grin

Baswazz

Hitcher

butchabay

Baswazz

MassIV

Baswazz

Sranshaft

MassIV

Baswazz