Kodi Community Forum

Full Version: New feature added Auto Sizing Labels...
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
JMarshall and myself have added Auto Sizing labels as per r26770 which should allow a much needed feature.

Auto Size Labels

Wrapping your label in a grouplist with the auto width and appropriate minium and maximum values. Allows the labels width to dynamically change relevalant to how long the label text is. This allows a image or other control to be alligned to the right of the actual label text no matter how wide the label is.

<width min="29" max="200">auto</width>

See..

http://wiki.xbmc.org/?title=Label_Control
wow, nice feature
many thanks for your work
Finally Smile

Good job!
This is great but what I really want/need is auto sizing buttons so that way you can place an image behind the width of the label eg: for confluence breadcrum bar at the top of the screen
equinox: step up to jezz's wishes now Tongue
Jezz_X Wrote:This is great but what I really want/need is auto sizing buttons so that way you can place an image behind the width of the label eg: for confluence breadcrum bar at the top of the screen

Will look into it once my latest patch is merged (scrollable labels in button controls and ability to change the | in scrollable labels/buttons) as will be easier for me to manage as can then clear down my patch files.
Does this also work with buttons?

Quote:<include name="ButtonHomeSubCommonValues_Horizontal">
<width min="100" max="320">auto</width>
<height>56</height>
<align>center</align>
<font>Font_Bartowski_Main_SubMenu</font>
<textcolor>ffb8b7b7</textcolor>
<focusedcolor>mainblue</focusedcolor>
</include>

Which then is referenced in a horizontal grouplist:
Quote:<control type="button" id="90111">
<include>ButtonHomeSubCommonValues_Horizontal</include>
<label>$LOCALIZE[31003]</label>
<onclick>ActivateWindow(VideoFiles)</onclick>
</control>
<control type="button" id="90112">
<include>ButtonHomeSubCommonValues_Horizontal</include>
<label>$LOCALIZE[31079]</label>
<onclick>ActivateWindow(VideoLibrary,MovieTitles,return)</onclick>
</control>

It recognizes the max="320" value but doesn't behave like some of my auto-sizing labels I have in other areas
No, it hasn't been added for buttons.
How about wraplist? Is it possible to use the auto size in a wraplist item?

EDIT: The lable works but it would be nice if it were possible to set width="auto" on itemlayout and focusedlayout.
mindweaver Wrote:EDIT: The lable works but it would be nice if it were possible to set width="auto" on itemlayout and focusedlayout.

+1
Aenima99x Wrote:+1

+1 from me as well, I really need this feature
That's unlikely to be implemented. It complicates the control unnecessarily as you can no longer assume that things are the same size. In this case it's better to use a dedicated control for it: the goruplist.

Autosizing buttons will be added (after Dharma). Use grouplists with them to achieve what you want.

Cheers,
Jonathan
jmarshall Wrote:That's unlikely to be implemented. It complicates the control unnecessarily as you can no longer assume that things are the same size. In this case it's better to use a dedicated control for it: the goruplist.

Autosizing buttons will be added (after Dharma). Use grouplists with them to achieve what you want.

Cheers,
Jonathan

I guess what I'm after is the ability to use a grouplist inside itemlayout and focuslayout.

Moreless this:

PHP Code:
<focuslayout>
  <
grouplist>
  </
grouplist>
</
focuslayout

when you do this now, what happens is the autowidth control just always assumes the largest defined value.
Are you putting a bunch of autosizing labels inside a grouplist inside the focused layout?

Or are you trying to autosize the layouts themselves?

The latter can't be (and is unlikely to be) done. The former should be doable.

Cheers,
Jonathan
I'm trying to use labels in the grouplist, but instead them auto sizing they always assume the max value given.

Here is my focuslayout:

PHP Code:
            <focusedlayout width="633" height="189">
                <
control type="image">
                    <
posx>19</posx>
                    <
posy>20</posy>
                    <
width>253</width>
                    <
height>139</height>
                    <
texture background="true" diffuse="episodes/episodediffuse.png">$INFO[ListItem.Icon]</texture>
                    <
aspectratio scalediffuse="false">keep</aspectratio>
                    <
animation type="Focus" reversible="false">
                        <
effect type="zoom" center="127,70" start="50" end="100" time="200" tween="cubic" easing="out" />
                    </
animation>
                    <
visible>IsEmpty(ListItem.Title)</visible>
                </
control>
                <
control type="image">
                    <
posx>19</posx>
                    <
posy>20</posy>
                    <
width>253</width>
                    <
height>139</height>
                    <
texture background="true" diffuse="episodes/episodediffuse.png">$INFO[ListItem.Icon]</texture>
                    <
aspectratio scalediffuse="false">scale</aspectratio>
                    <
animation type="Focus" reversible="false">
                        <
effect type="zoom" center="127,70" start="50" end="100" time="200" tween="cubic" easing="out" />
                    </
animation>
                    <
visible>!IsEmpty(ListItem.Title)</visible>
                </
control>
                <
control type="image">
                    <
posx>-6</posx>
                    <
posy>-5</posy>
                    <
width>303</width>
                    <
height>189</height>
                    <
texture>episodes/episodeframe.png</texture>
                    <
animation type="Focus" reversible="false">
                        <
effect type="zoom" center="127,70" start="50" end="100" time="200" tween="cubic" easing="out" />
                        <
effect type="fade" start="0" end="100" time="200" />
                    </
animation>
                </
control>
                <
control type="grouplist">
                    <
posx>300</posx>
                    <
posy>25</posy>
                    <
width>620</width>
                    <
height>55</height>
                    <
align>left</align>
                    <
orientation>horizontal</orientation>
                    <
animation type="Focus" reversible="false">
                        <
effect type="fade" start="0" end="100" time="300" />
                    </
animation>                    
                    <
control type="label">
                        <
posx>0</posx>
                        <
posy>0</posy>
                        <
width min="25" max="43">auto</width>
                        <
label>[UPPERCASE]$INFO[ListItem.Episode][/UPPERCASE]</label>
                        <
font>episodenumber2</font>
                        <
textcolor>taskbar</textcolor>
                        <
selectedcolor>taskbar</selectedcolor>
                        <
visible>!IsEmpty(ListItem.Title)</visible>                    
                    </
control>    
                                
                    <
control type="label">
                        <
posx>0</posx>
                        <
posy>0</posy>
                        <
width min="25" max="520">auto</width>
                        <
height>34</height>
                        <
label>[UPPERCASE]$INFO[ListItem.Title][/UPPERCASE]</label>
                        <
font>tvtitle</font>
                        <
textcolor>taskbar</textcolor>
                        <
selectedcolor>taskbar</selectedcolor>
                        <
visible>!IsEmpty(ListItem.Title)</visible>                    
                    </
control>
                    <
control type="image">
                        <
posy>0</posy>
                        <
posx>0</posx>
                        <
width min="30" max="30">auto</width>
                        <
height>35</height>
                        <
aspectratio>keep</aspectratio>
                        <
texture>watched.png</texture>
                        <
visible>stringcompare(ListItem.Overlay,OverlayWatched.png)</visible>
                    </
control>
                    <
control type="image">
                        <
posy>0</posy>
                        <
posx>50</posx>
                        <
width min="41" max="41">auto</width>
                        <
height>35</height>
                        <
aspectratio>keep</aspectratio>
                        <
texture>unwatched.png</texture>
                        <
visible>stringcompare(ListItem.Overlay,OverlayUnwatched.png)</visible>
                    </
control>
                </
control>
                
                <
control type="textbox">
                    <
posx>302</posx>
                    <
posy>58</posy>
                    <
width>628</width>
                    <
height>100</height>
                    <
align>justify</align>
                    <
info>ListItem.Plot</info>
                    <
font>tvplot</font>
                    <
textcolor>movietitleb2</textcolor>
                    <
animation type="Focus" reversible="false">
                        <
effect type="fade" start="0" end="100" time="400" />
                    </
animation>
                </
control>
            </
focusedlayout

For instance in this grouplist the max value of the listitem.title is 520px and the watched/unwatched image "should" show right next to the label, but instead it's always 520px away.
Pages: 1 2