Difference between revisions of "Skinning How To/Window sizing and resizing"

From Second Life Wiki
Jump to navigation Jump to search
m
Line 1: Line 1:
= Introduction =
= Introduction =


The default, minimum, and maximum sizes of floaters can all be changed in the viewer xml files, located in your Second Life installation folder under \skins\xui\[Language]. For this example, we will be using the floater that controls the search window: '''floater_directory.xml'''.   
The default, minimum, and maximum sizes of floaters can all be changed in the viewer xml files, located in your Second Life installation folder under \skins\xui\[Language]. For this example, we will be using the lag meter floater: '''floater_lagmeter.xml'''.   


= Tutorial =
= Tutorial =


Open floater_directory.xml in [http://www.activestate.com/Products/komodo_ide/komodo_edit.mhtml Komodo], or your favorite text editor, and you will see the following lines of code at the top:
Open floater_lagmeter.xml in [http://www.activestate.com/Products/komodo_ide/komodo_edit.mhtml Komodo] or your favorite text editor and you will see the following lines of code at the top of the file:


<pre><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<pre><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater can_close="true" can_drag_on_left="false" can_minimize="true"
<floater can_close="true" can_drag_on_left="false" can_minimize="true"
     can_resize="false" height="570" min_height="570" min_width="780"
     can_resize="false" height="150" name="floater_lagmeter"
     name="directory" rect_control="FloaterFindRect2" title="Search Second Life"
     rect_control="FloaterLagMeter" title="Lag Meter" width="350"></pre>
    width="780"></pre>


This code controls the size, positioning, and abilities of the floater that contains the search window.  
The parameters in the <code><floater></code> tag control the size, positioning, and user abilities for the lag meter.  


= Toggling resizing =
= Toggling resizing =


Resizing is controlled by the parameter <code>can_resize=""</code> (true or false).  
Resizing is set by the parameter <code>can_resize=""</code> (true or false).  


In the example above, you can see that <code>can_resize="false"</code>, which prevents the floater from being resized by the user (via the triangle in the lower right).  
In the example above you can see that <code>can_resize="false"</code>, thus preventing the floater from being resized by the user (via the triangle in the lower right).  


Change <code>can_resize=""</code> to <code>true</code> so that the code now reads:
To allow resizing, change <code>can_resize=""</code> to <code>true</code>. The code should now read:


<pre><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<pre><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater can_close="true" can_drag_on_left="false" can_minimize="true"
<floater can_close="true" can_drag_on_left="false" can_minimize="true"
     can_resize="true" height="570" min_height="570" min_width="780"
     can_resize="true" height="150" name="floater_lagmeter"
     name="directory" rect_control="FloaterFindRect2" title="Search Second Life"
     rect_control="FloaterLagMeter" title="Lag Meter" width="350"></pre>
    width="780"></pre>


The search window can now be resized.  
The lag meter is now resizable.  


= Default size =
= Default size =


The default size of a floater is controlled by <code>height=""</code> and <code>width=""</code> in pixels. In the code above, you can see that the default height and width are set to <code>height="570"</code> and <code>width="780"</code>.  
The default floater size is set by the parameters <code>height=""</code> and <code>width=""</code> (in pixels). In the code above, you can see that the default height and width are set to <code>height="150"</code> and <code>width="350"</code>.  


The maximum sizes for height and width are 768 by 1024 pixels, respectively. However, you will never need to set a floater that big (and shouldn't. Floaters set to full screen will have their lower portions obscured by the toolbar. For more information, see my toolbar tutorial (under construction)).  
The maximum sizes for height and width are 768 by 1024 pixels, respectively. However, you will never need to set a floater that big (and shouldn't. Floaters set to full screen will have their lower portions obscured by the toolbar. For more information, see my toolbar tutorial (under construction)).  


Let's change the <code>width=""</code> to <code>500</code> and <code>height=""</code> to <code>200</code> so that the code now reads:
Let's change the <code>height=""</code> to <code>500</code> and to <code>width=""</code> <code>300</code> so that the code now reads:


<pre><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<pre><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater can_close="true" can_drag_on_left="false" can_minimize="true"
<floater can_close="true" can_drag_on_left="false" can_minimize="true"
     can_resize="true" height="200" min_height="570" min_width="780"
     can_resize="true" height="500" name="floater_lagmeter"
     name="directory" rect_control="FloaterFindRect2" title="Search Second Life"
     rect_control="FloaterLagMeter" title="Lag Meter" width="300"></pre>
    width="500"></pre>


The default size of the search window is now significantly smaller.
If you open the lag meter, you'll now notice its height and width are noticeably larger.


= Min and max size =
= Min and max size =


Notice how if you run the viewer now, the default size appears larger than 200x500, though? That is because of the maximum and minimum values.  
The maximum and minimum sizes for floaters are set by the parameters <code>min_height=""</code>, <code>min_width=""</code>, <code>max_height=""</code> and <code>max_width=""</code> (in pixels). The maximum width is the greatest width the user can resize a floater; the maximum height is the greatest height (and likewise for the minimum).  


In the xml files, the maximum and minimum sizes are controlled by <code>min_height=""</code>, <code>min_width=""</code>, <code>max_height=""</code> and <code>max_width=""</code> in pixels. The maximum width is the greatest width the user can resize a floater; the maximum height is the greatest height (and likewise with minimum).
For the lag meter, let's set the minimum and maximum to the following:
 
For the search window, let's set them to the following values:


<code>min_height="100"</code>
<code>min_height="100"</code>
<code>min_width="300"</code>
<code>min_width="300"</code>
<code>max_height="600"</code>
<code>max_height="500"</code>
<code>max_width="800"</code>
<code>max_width="700"</code>


The code should now read:
The code should now read:
Line 64: Line 59:
<pre><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<pre><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater can_close="true" can_drag_on_left="false" can_minimize="true"
<floater can_close="true" can_drag_on_left="false" can_minimize="true"
     can_resize="true" height="200" min_height="100" min_width="300"
     can_resize="true" height="500" name="floater_lagmeter"
     name="directory" rect_control="FloaterFindRect2" title="Search Second Life"
     rect_control="FloaterLagMeter" title="Lag Meter" width="300"
     width="500" max_height="600" max_width="800"></pre>
     min_height="100" min_width="300" max_height="500" max_width="700"></pre>


The search window now defaults to 200x500 pixels, and can be resized to anywhere between 100x300 and 600x800 pixels.
The lag meter now defaults to 500x300 pixels, and can be resized to anywhere between 100x300 and 500x700 pixels.


[[Category:Skinning]]
[[Category:Skinning]]

Revision as of 21:19, 1 May 2008

Introduction

The default, minimum, and maximum sizes of floaters can all be changed in the viewer xml files, located in your Second Life installation folder under \skins\xui\[Language]. For this example, we will be using the lag meter floater: floater_lagmeter.xml.

Tutorial

Open floater_lagmeter.xml in Komodo or your favorite text editor and you will see the following lines of code at the top of the file:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater can_close="true" can_drag_on_left="false" can_minimize="true"
     can_resize="false" height="150" name="floater_lagmeter"
     rect_control="FloaterLagMeter" title="Lag Meter" width="350">

The parameters in the <floater> tag control the size, positioning, and user abilities for the lag meter.

Toggling resizing

Resizing is set by the parameter can_resize="" (true or false).

In the example above you can see that can_resize="false", thus preventing the floater from being resized by the user (via the triangle in the lower right).

To allow resizing, change can_resize="" to true. The code should now read:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater can_close="true" can_drag_on_left="false" can_minimize="true"
     can_resize="true" height="150" name="floater_lagmeter"
     rect_control="FloaterLagMeter" title="Lag Meter" width="350">

The lag meter is now resizable.

Default size

The default floater size is set by the parameters height="" and width="" (in pixels). In the code above, you can see that the default height and width are set to height="150" and width="350".

The maximum sizes for height and width are 768 by 1024 pixels, respectively. However, you will never need to set a floater that big (and shouldn't. Floaters set to full screen will have their lower portions obscured by the toolbar. For more information, see my toolbar tutorial (under construction)).

Let's change the height="" to 500 and to width="" 300 so that the code now reads:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater can_close="true" can_drag_on_left="false" can_minimize="true"
     can_resize="true" height="500" name="floater_lagmeter"
     rect_control="FloaterLagMeter" title="Lag Meter" width="300">

If you open the lag meter, you'll now notice its height and width are noticeably larger.

Min and max size

The maximum and minimum sizes for floaters are set by the parameters min_height="", min_width="", max_height="" and max_width="" (in pixels). The maximum width is the greatest width the user can resize a floater; the maximum height is the greatest height (and likewise for the minimum).

For the lag meter, let's set the minimum and maximum to the following:

min_height="100" min_width="300" max_height="500" max_width="700"

The code should now read:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater can_close="true" can_drag_on_left="false" can_minimize="true"
     can_resize="true" height="500" name="floater_lagmeter"
     rect_control="FloaterLagMeter" title="Lag Meter" width="300"
     min_height="100" min_width="300" max_height="500" max_width="700">

The lag meter now defaults to 500x300 pixels, and can be resized to anywhere between 100x300 and 500x700 pixels.