centerleft with image control in a list container
#1
I want to use the XML-tag <centertop> with an image control in a list container. But it didn't work.

Here is my code:
PHP Code:
...
<
itemlayout height="40" width="100">
    <
control type="image">
        <
left>0</left>
        <
top>0</top>
        <
width>100</width>
        <
height>40</height>
        <
texture border="5">button-nofocus.png</texture>
    </
control>
    <
control type="image">
        <
left>5</left>
        <
centertop>20</centertop>
        <
width>41</width>
        <
height>41</height>
        <
texture aligny="center" align="center">$INFO[ListItem.Property(Icon)]</texture>
        <
aspectratio>keep</aspectratio>
        <
visible>!StringCompare(ListItem.Property(Icon),"")</visible>
    </
control>
</
itemlayout>
.... 

The image is always on x=5 and y=0.

Is this not supported by the current kodi version? Or is my code wrong?
Reply
#2
It's doing what you've coded - setting the center line of the image at 20px from the top.

If you want the center line to be half the listitem height (50px) then either use <centertop>50</centertop> or <centertop>50%</centertop>.

Image
Reply
#3
Hi Hitcher,

thank you for your quick response.

But that's weird, because I'm doing exactly that and it does not work. I currently work on the new window for our AudioDSP Manager. I use the fork from Alwin (https://github.com/AlwinEsch/kodi). I have now tried it with the indication of pixels and percentage, but both is not working (see my screenshots). I suspect that it's a bug or have I missed a small detail (have not worked much with the window XML files).

This is my complete XML file:
PHP Code:
<window type="dialog">
    <
zorder>1</zorder>
    <
defaultcontrol>9000</defaultcontrol>
    <include>
dialogeffect</include>
    <
allowoverlay>no</allowoverlay>
    <
coordinates>
        <
system>1</system>
        <
left>40</left>
        <
top>40</top>
    </
coordinates>
    <
controls>
        <include>
BehindDialogFadeOut</include>
        <
control type="image">
            <
left>0</left>
            <
top>0</top>
            <
width>1200</width>
            <
height>640</height>
            <
texture border="40">$VAR[SelectBack]</texture>
        </
control>
        <
control type="group">
            <
left>0</left>
            <
top>0</top>
            <
width>1200</width>
            <
height>40</height>
            <
control type="button">
                <
description>reload skin buttononly for debugging</description>
                <
centerleft>600</centerleft>
                <
top>15</top>
                <
width>64</width>
                <
height>32</height>
                <
label>-</label>
                <
font>-</font>
                <
onclick>ReloadSkin()</onclick>
                <
texturefocus>DialogCloseButton-focus.png</texturefocus>
                <
texturenofocus>DialogCloseButton.png</texturenofocus>
                <
onleft>10</onleft>
                <
onright>10</onright>
                <
onup>10</onup>
                <
ondown>10</ondown>
                <
visible>system.getbool(debug.showloginfo)</visible>
            </
control>
            <
control type="button">
                <
description>dialog close button</description>
                <
left>1120</left>
                <
top>15</top>
                <
width>64</width>
                <
height>32</height>
                <
label>-</label>
                <
font>-</font>
                <
onclick>PreviousMenu</onclick>
                <
texturefocus>DialogCloseButton-focus.png</texturefocus>
                <
texturenofocus>DialogCloseButton.png</texturenofocus>
                <
onleft>1</onleft>
                <
onright>1</onright>
                <
onup>1</onup>
                <
ondown>1</ondown>
                <
visible>system.getbool(input.enablemouse)</visible>
                <include>
VisibleFadeEffect</include>
            </
control>
            <
control type="image">
                <
description>dialog header image</description>
                <
centerleft>600</centerleft>
                <
top>16</top>
                <
width>1140</width>
                <
height>40</height>
                <
texture>dialogheader.png</texture>
            </
control>
            <
control type="label">
                <
description>window header label</description>
                <
left>0</left>
                <
top>20</top>
                <
width>1200</width>
                <
height>30</height>
                <
font>font13_title</font>
                <
label>$LOCALIZE[15020]</label>
                <
align>center</align>
                <
aligny>center</aligny>
                <
textcolor>selected</textcolor>
                <
shadowcolor>black</shadowcolor>
            </
control>
        </
control>
        <
control type="list" id="9000">
            <
description>processing mode selection list</description>
            <
left>30</left>
            <
top>70</top>
            <
width>1140</width>
            <
height>40</height>
            <
onup>200</onup>
            <
ondown>200</ondown>
            <
onleft>9000</onleft>
            <
onright>9000</onright>
            <
orientation>horizontal</orientation>
            <
scrolltime tween="sine" easing="out">200</scrolltime>
            <
itemlayout width="228" height="40">
                <
control type="image">
                    <
left>0</left>
                    <
top>0</top>
                    <
width>228</width>
                    <
height>40</height>
                    <
texture border="5">button-nofocus.png</texture>
                </
control>
                <
control type="label">
                    <
posx>5</posx>
                    <
posy>0</posy>
                    <
width>218</width>
                    <
height>40</height>
                    <
textcolor>grey3</textcolor>
                    <
font>font13_title</font>
                    <
aligny>center</aligny>
                    <
align>center</align>
                    <
info>ListItem.Label</info>
                    <
scroll>false</scroll>
                    <
scrollspeed>0</scrollspeed>
                </
control>
            </
itemlayout>
            <
focusedlayout width="228" height="40">
                <
control type="image">
                    <
left>0</left>
                    <
top>0</top>
                    <
width>228</width>
                    <
height>40</height>
                    <
texture border="5">button-focus2.png</texture>
                    <
animation effect="fade" start="100" end="50" time="0" condition="!Control.HasFocus(9000)">conditional</animation>
                </
control>
                <
control type="label">
                    <
posx>5</posx>
                    <
posy>0</posy>
                    <
width>218</width>
                    <
height>40</height>
                    <
textcolor>white</textcolor>
                    <
font>font13_title</font>
                    <
aligny>center</aligny>
                    <
align>center</align>
                    <
info>ListItem.Label</info>
                    <
scroll>false</scroll>
                    <
scrollspeed>0</scrollspeed>
                </
control>
            </
focusedlayout>
            <
content>
                <
description>processing mode selection list</description>
                <
item id="91">
                    <
label>1. Preprocessing</label>
                    <
label2>some short Description some short Description some short Description</label2>
                    <
visible>true</visible>
                    <
onclick>noop</onclick>
                    <
property name="currentMode">Preprocessing</property>
                </
item>
                <
item id="92">
                    <
label>2. Input Resampling</label>
                    <
label2>some short Description some short Description some short Description</label2>
                    <
visible>true</visible>
                    <
onclick>noop</onclick>
                    <
property name="currentMode">InputResampling</property>
                </
item>
                <
item id="93">
                    <
label>3. Masterprocessing</label>
                    <
label2>some short Description some short Description some short Description</label2>
                    <
visible>true</visible>
                    <
onclick>noop</onclick>
                    <
property name="currentMode">Masterprocessing</property>
                </
item>
                <
item id="94">
                    <
label>4. Output Resampling</label>
                    <
label2>some short Description some short Description some short Description</label2>
                    <
visible>true</visible>
                    <
onclick>noop</onclick>
                    <
property name="currentMode">OutputResampling</property>
                </
item>
                <
item id="95">
                    <
label>5. Postprocessing</label>
                    <
label2>some short Description some short Description some short Description</label2>
                    <
visible>true</visible>
                    <
onclick>noop</onclick>
                    <
property name="currentMode">Postprocessing</property>
                </
item>
            </
content>
        </
control>
        <
control type="group">
            <
description>white borders and mode description</description>
            <
left>30</left>
            <
top>109</top>
            <
width>1140</width>
            <
height>500</height>
            <
control type="image">
                <
description>blue border</description>
                <
posx>0</posx>
                <
posy>0</posy>
                <
width>1140</width>
                <
height>500</height>
                <
texture border="5">button-focus3.png</texture>
                <
colordiffuse>80FFFFFF</colordiffuse>
            </
control>
            <
control type="label">
                <
description>current mode description label</description>
                <
left>10</left>
                <
top>0</top>
                <
width>1120</width>
                <
height>30</height>
                <
font>font12</font>
                <
align>left</align>
                <
aligny>center</aligny>
                <
textcolor>white</textcolor>
                <
selectedcolor>selected</selectedcolor>
                <
label>$INFO[Container(9000).ListItem.Label2]</label>
            </
control>
        </
control>
        <
control type="group" id="200">
            <
description>available- and active mode lists</description>
            <
left>30</left>
            <
top>150</top>
            <
width>1140</width>
            <
height>500</height>
            <
control type="group">
                <
description>available modes group</description>
                <
left>0</left>
                <
top>0</top>
                <
width>570</width>
                <
height>360</height>
                <
control type="label">
                    <
description>blue label for available modes</description>
                    <
left>10</left>
                    <
top>2</top>
                    <
width>550</width>
                    <
height>30</height>
                    <
font>font12_title</font>
                    <
label>$LOCALIZE[15053$LOCALIZE[15055] ($INFO[Container(20).NumItems])</label>
                    <
align>center</align>
                    <
aligny>center</aligny>
                    <
textcolor>blue</textcolor>
                    <
shadowcolor>black</shadowcolor>
                </
control>
                <
control type="image">
                    <
description>available modes list border</description>
                    <
left>10</left>
                    <
top>30</top>
                    <
width>538</width>
                    <
height>340</height>
                    <
texture border="4">button-nofocus.png</texture>
                </
control>
                <
control type="image">
                    <
description>available modes list border</description>
                    <
left>10</left>
                    <
top>30</top>
                    <
width>550</width>
                    <
height>340</height>
                    <
texture border="5">button-nofocus.png</texture>
                    <
visible>system.getbool(debug.showloginfo)</visible>
                </
control>
                <
control type="scrollbar" id="60">
                    <
description>scrollbar for available modes list</description>
                    <
left>540</left>
                    <
top>30</top>
                    <
width>25</width>
                    <
height>340</height>
                    <
texturesliderbackground border="0,14,0,14">ScrollBarV.png</texturesliderbackground>
                    <
texturesliderbar border="0,14,0,14">ScrollBarV_bar.png</texturesliderbar>
                    <
texturesliderbarfocus border="0,14,0,14">ScrollBarV_bar_focus.png</texturesliderbarfocus>
                    <
textureslidernib>ScrollBarNib.png</textureslidernib>
                    <
textureslidernibfocus>ScrollBarNib.png</textureslidernibfocus>
                    <
onleft>20</onleft>
                    <
onright>21</onright>
                    <
showonepage>false</showonepage>
                    <
orientation>vertical</orientation>
                </
control>
                <
control type="list" id="20">
                    <
left>15</left>
                    <
top>35</top>
                    <
width>528</width>
                    <
height>335</height>
                    <
onup>9000</onup>
                    <
ondown>20</ondown>
                    <
onleft>21</onleft>
                    <
onright>60</onright>
                    <
pagecontrol>60</pagecontrol>
                    <
scrolltime>200</scrolltime>
                    <
itemlayout height="46" width="528">
                        <
control type="image">
                            <
left>0</left>
                            <
top>3</top>
                            <
width>528</width>
                            <
height>40</height>
                            <
texture border="5">button-nofocus.png</texture>
                        </
control>
                        <
control type="image">
                            <
left>15</left>
                            <
centertop>23</centertop>
                            <
width>37</width>
                            <
height>37</height>
                            <
texture aligny="center" align="left">$INFO[ListItem.Property(Icon)]</texture>
                            <
aspectratio>keep</aspectratio>
                            <
visible>!StringCompare(ListItem.Property(Icon),"")</visible>
                        </
control>
                        <
control type="image">
                            <
left>15</left>
                            <
centertop>23</centertop>
                            <
width>37</width>
                            <
height>37</height>
                            <
texture aligny="center" align="left">defaultAudioDSP.png</texture>
                            <
aspectratio>keep</aspectratio>
                            <
visible>StringCompare(ListItem.Property(Icon),"")</visible>
                        </
control>
                        <
control type="label">
                            <
description>active addon name and mode name</description>
                            <
left>80</left>
                            <
top>3</top>
                            <
width>435</width>
                            <
height>40</height>
                            <
font>font12</font>
                            <
align>left</align>
                            <
aligny>center</aligny>
                            <
textcolor>white</textcolor>
                            <
scroll>false</scroll>
                            <
selectedcolor>selected</selectedcolor>
                            <
label>$INFO[ListItem.Property(AddonName)]: $INFO[ListItem.Property(Name)]</label>
                        </
control>
                    </
itemlayout>
                    <
focusedlayout height="66" width="515">
                        <
control type="image">
                            <
left>0</left>
                            <
top>3</top>
                            <
width>528</width>
                            <
height>60</height>
                            <
texture border="5">button-focus2.png</texture>
                            <
animation effect="fade" start="100" end="30" time="0" condition="!Control.HasFocus(20)">conditional</animation>
                        </
control>
                        <
control type="image">
                            <
left>5</left>
                            <
centertop>33</centertop>
                            <
width>61</width>
                            <
height>61</height>
                            <
texture aligny="center" align="left">$INFO[ListItem.Property(Icon)]</texture>
                            <
aspectratio>keep</aspectratio>
                            <
visible>!StringCompare(ListItem.Property(Icon),"")</visible>
                        </
control>
                        <
control type="image">
                            <
left>5</left>
                            <
centertop>33</centertop>
                            <
height>50</height>
                            <
width>50</width>
                            <
texture aligny="center" align="left">defaultAudioDSP.png</texture>
                            <
aspectratio>keep</aspectratio>
                            <
visible>StringCompare(ListItem.Property(Icon),"")</visible>
                        </
control>
                        <
control type="label">
                            <
description>addon name and mode name on focus</description>
                            <
left>80</left>
                            <
top>3</top>
                            <
width>335</width>
                            <
height>40</height>
                            <
font>font12</font>
                            <
align>left</align>
                            <
aligny>center</aligny>
                            <
textcolor>white</textcolor>
                            <
scroll>false</scroll>
                            <
selectedcolor>selected</selectedcolor>
                            <
label>$INFO[ListItem.Property(AddonName)]: $INFO[ListItem.Property(Name)]</label>
                        </
control>
                        <
control type="label">
                            <
description>ADSP-Mode description on focus</description>
                            <
left>80</left>
                            <
top>33</top>
                            <
width>435</width>
                            <
height>30</height>
                            <
font>font12</font>
                            <
align>left</align>
                            <
aligny>center</aligny>
                            <
textcolor>grey2</textcolor>
                            <
scroll>false</scroll>
                            <
selectedcolor>selected</selectedcolor>
                            <
label>Mode Description Description Description Description Description Description</label>
                            <
visible>!Control.HasFocus(20)</visible>
                        </
control>
                        <
control type="label">
                            <
description>ADSP-Mode description on focus</description>
                            <
left>80</left>
                            <
top>33</top>
                            <
width>435</width>
                            <
height>30</height>
                            <
font>font12</font>
                            <
align>left</align>
                            <
aligny>center</aligny>
                            <
textcolor>grey2</textcolor>
                            <
scroll>true</scroll>
                            <
scrollsuffix>&gt;   &lt;</scrollsuffix>
                            <
selectedcolor>selected</selectedcolor>
                            <
label>Mode Description Description Description Description Description Description</label>
                            <
visible>Control.HasFocus(20)</visible>
                        </
control>
                    </
focusedlayout>
                </
control>
            </
control>
            <
control type="group">
                <
left>570</left>
                <
top>0</top>
                <
width>570</width>
                <
height>360</height>
                <
control type="label">
                    <
description>blue active modes label</description>
                    <
left>10</left>
                    <
top>2</top>
                    <
width>550</width>
                    <
height>30</height>
                    <
font>font12_title</font>
                    <
label>$LOCALIZE[15054$LOCALIZE[15055] ($INFO[Container(21).NumItems]) </label>
                    <
align>center</align>
                    <
aligny>center</aligny>
                    <
textcolor>blue</textcolor>
                    <
shadowcolor>black</shadowcolor>
                </
control>
                <
control type="image">
                    <
description>active modes list border</description>
                    <
left>10</left>
                    <
top>30</top>
                    <
width>480</width>
                    <
height>320</height>
                    <
texture border="5">button-nofocus.png</texture>
                </
control>
                <
control type="image">
                    <
description>available modes list border</description>
                    <
left>10</left>
                    <
top>30</top>
                    <
width>550</width>
                    <
height>320</height>
                    <
texture border="5">button-nofocus.png</texture>
                    <
visible>system.getbool(debug.showloginfo)</visible>
                </
control>
                <
control type="scrollbar" id="61">
                    <
description>scrollbar for active modes list</description>
                    <
left>470</left>
                    <
top>30</top>
                    <
width>25</width>
                    <
height>320</height>
                    <
texturesliderbackground border="0,14,0,14">ScrollBarV.png</texturesliderbackground>
                    <
texturesliderbar border="0,14,0,14">ScrollBarV_bar.png</texturesliderbar>
                    <
texturesliderbarfocus border="0,14,0,14">ScrollBarV_bar_focus.png</texturesliderbarfocus>
                    <
textureslidernib>ScrollBarNib.png</textureslidernib>
                    <
textureslidernibfocus>ScrollBarNib.png</textureslidernibfocus>
                    <
onleft>21</onleft>
                    <
onright>20</onright>
                    <
showonepage>false</showonepage>
                    <
orientation>vertical</orientation>
                </
control>
                <
control type="list" id="21">
                    <
left>15</left>
                    <
top>35</top>
                    <
width>460</width>
                    <
height>320</height>
                    <
onup>9000</onup>
                    <
ondown>21</ondown>
                    <
onleft>60</onleft>
                    <
onright>61</onright>
                    <
pagecontrol>61</pagecontrol>
                    <
scrolltime>200</scrolltime>
                    <
itemlayout height="50" width="460">
                        <
control type="image">
                            <
left>0</left>
                            <
top>0</top>
                            <
width>460</width>
                            <
height>50</height>
                            <
texture border="5">button-nofocus.png</texture>
                        </
control>
                        <
control type="image">
                            <
left>4</left>
                            <
top>4</top>
                            <
centerleft>25</centerleft>
                            <
centertop>25</centertop>
                            <
width>42</width>
                            <
height>42</height>
                            <
texture>$INFO[ListItem.Property(Icon)]</texture>
                            <
aspectratio>keep</aspectratio>
                        </
control>
                        <
control type="label">
                            <
description>active addon name and mode name</description>
                            <
left>65</left>
                            <
top>0</top>
                            <
width>335</width>
                            <
height>40</height>
                            <
font>font12</font>
                            <
align>left</align>
                            <
aligny>center</aligny>
                            <
textcolor>white</textcolor>
                            <
scroll>false</scroll>
                            <
selectedcolor>selected</selectedcolor>
                            <
label>$INFO[ListItem.Property(Number)].  $INFO[ListItem.Property(AddonName)]: $INFO[ListItem.Property(Name)]</label>
                        </
control>
                    </
itemlayout>
                    <
focusedlayout height="70" width="420">
                        <
control type="image">
                            <
left>0</left>
                            <
top>0</top>
                            <
width>460</width>
                            <
height>70</height>
                            <
texture border="5">button-focus2.png</texture>
                            <
animation effect="fade" start="100" end="30" time="0" condition="!Control.HasFocus(21)">conditional</animation>
                        </
control>
                        <
control type="image">
                            <
left>4</left>
                            <
top>4</top>
                            <
centerleft>35</centerleft>
                            <
centertop>35</centertop>
                            <
width>62</width>
                            <
height>62</height>
                            <
texture>$INFO[ListItem.Property(Icon)]</texture>
                            <
aspectratio>keep</aspectratio>
                        </
control>
                        <
control type="label">
                            <
description>addon name and mode name on focus</description>
                            <
left>65</left>
                            <
top>0</top>
                            <
width>335</width>
                            <
height>40</height>
                            <
font>font12</font>
                            <
align>left</align>
                            <
aligny>center</aligny>
                            <
textcolor>white</textcolor>
                            <
scroll>false</scroll>
                            <
selectedcolor>selected</selectedcolor>
                            <
label>$INFO[ListItem.Property(Number)].  $INFO[ListItem.Property(AddonName)]: $INFO[ListItem.Property(Name)]</label>
                            <
visible>true</visible>
                        </
control>
                        <
control type="label">
                            <
description>ADSP-Mode description on focus</description>
                            <
left>65</left>
                            <
top>30</top>
                            <
width>410</width>
                            <
height>30</height>
                            <
font>font12</font>
                            <
align>left</align>
                            <
aligny>center</aligny>
                            <
textcolor>grey2</textcolor>
                            <
scroll>false</scroll>
                            <
selectedcolor>selected</selectedcolor>
                            <
label>Mode Description Description Description Description Description Description</label>
                            <
visible>!Control.HasFocus(21)</visible>
                        </
control>
                        <
control type="label">
                            <
description>ADSP-Mode description on focus</description>
                            <
left>65</left>
                            <
top>30</top>
                            <
width>410</width>
                            <
height>30</height>
                            <
font>font12</font>
                            <
align>left</align>
                            <
aligny>center</aligny>
                            <
textcolor>grey2</textcolor>
                            <
scroll>true</scroll>
                            <
scrollsuffix> |                </scrollsuffix>
                            <
selectedcolor>selected</selectedcolor>
                            <
label>Mode Description Description Description Description Description Description</label>
                            <
visible>Control.HasFocus(21)</visible>
                        </
control>
                    </
focusedlayout>
                </
control>
            </
control>
        </
control>
        <
control type="spincontrolex" id="13">
            <
description>process type</description>
            <
left>30</left>
            <
top>605</top>
            <
width>830</width>
            <
height>30</height>
            <
font>font12</font>
            <
texturefocus border="5">button-focus2.png</texturefocus>
            <
texturenofocus border="5">button-nofocus.png</texturenofocus>
            <
label>15056</label>
            <
onright>20</onright>
            <
onleft>61</onleft>
            <
onup>6</onup>
            <
ondown>4</ondown>
            <
visible>system.getbool(debug.showloginfo)</visible>
        </
control>
    </
controls>
</
window

Image

Image
Reply
#4
Looks like they're not working in a list for some reason. Huh

Just use <top>4.5</top> for now.
Reply
#5
Sorry I can not use this, because the logos can have different sizes and I always want to center them.

Can I report this somewhere?
Reply
#6
They will be centred because you're using aligny="center". Wink
Reply
#7
Many thanks. Now it works and looks great.
Reply
#8
No problem.
Reply

Logout Mark Read Team Forum Stats Members Help
centerleft with image control in a list container0