Difference between revisions of "Skinning HowTo/XUI Buttons, Sliders, and Spinners"

From Second Life Wiki
Jump to navigation Jump to search
Line 279: Line 279:
*In source file llui/llmultislider.cpp
*In source file llui/llmultislider.cpp
*Used by panel.
*Used by panel.
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
    can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
    height="80" left="550" min_height="80" min_width="250" mouse_opaque="true"
    name="example_multi_slider_bar" tab_stop="false" title="multi_slider_bar"
    width="250">
    <multi_slider_bar bottom="20" enabled="true" height="40" increment="0.1" initial_val="0"
        left="20" max_val="1" min_val="0" mouse_opaque="true"
        name="multi_slider_bar" tab_stop="true" width="200" />
</floater>


====Common parameters====
====Common parameters====
*'''[[Skinning HowTo/Common XUI XML parameters#Used by all XUI elements|General]]:'''  name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
*'''[[Skinning HowTo/Common XUI XML parameters#Used by all XUI elements|General]]:'''  name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
*'''[[Skinning HowTo/Common XUI XML parameters#Positioning|Positioning]]:'''  width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
*'''[[Skinning HowTo/Common XUI XML parameters#Positioning|Positioning]]:'''  width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
*'''[[Skinning HowTo/Common XUI XML parameters#Text|Text]]:'''  label, font, font_size, font_style


====Specific parameters====
====Specific parameters====


===== allow_overlap =====
===== allow_overlap =====
===== can_edit_text =====
===== decimal_digits =====
===== draw_track =====
===== draw_track =====
''Optional.''
''Optional.''
Line 297: Line 305:
===== max_val =====
===== max_val =====
===== min_val =====
===== min_val =====
===== show_text =====
===== use_triangle =====
===== use_triangle =====
''Optional.''
''Optional.''
===== value =====


=== slider parameters ===
=== slider parameters ===

Revision as of 13:37, 3 October 2009

This page describes the XML attributes for the buttons, sliders, and spinners. These are some of the XML elements and parameters used within the floaters, panels, and so forth, that make up the viewer user interface. They are used by the XUI files in the \skins\default\xui folders. You can find attributes for other XUI elements at:

and you can find more general information at Skinning HowTo/Basics

Many XUI elements share the same parameters. Rather than repeatedly describing them, we just list their names here and describe them at Skinning HowTo/Common XUI XML parameters.

button parameters


  • Class LLButton : LLUICtrl : LLView
  • In source file llui/llbutton.cpp
  • Used by floater, panel, layout_stack, layout_panel, and form.
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
    can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
    height="80" left="550" min_height="80" min_width="250" mouse_opaque="true"
    name="example_button" tab_stop="false" title="button" width="250">
   <button bottom="20" enabled="true" font="SansSerif" halign="center" height="20"
        image_disabled="button_disabled_32x128.tga"
        image_disabled_selected="button_disabled_32x128.tga"
        image_selected="button_enabled_selected_32x128.tga"
        image_unselected="button_enabled_32x128.tga" label="button label"
        label_selected="button label" left="20" mouse_opaque="true" name="button"
        scale_image="true" tab_stop="true" width="200" />
</floater>

Common parameters

  • General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
  • Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
  • Text: label, font, font_size, font_style, halign
  • Others: sound_flags, tab_group

Specific parameters

scale_image

Optional. Specifies whether to scale the button art as its container/floater is resized. As of 1.18.x, all button art has this property set to true where the button size is not equal to 32x128.

Boolean: scale_image="true"

label_selected

Optional. Label is the text on the button's face when pressed into an 'on' state. Your button will inherit the label if you omit this property. String: label_selected="I've been clicked."

image_unselected

Optional. Overrides the default button art for the unselected/up and enabled button state. Art must be located in the ..\skins\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/textures). Art must also be named in textures.xml with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: image_unselected="btn_square_32x128.tga"

image_selected

Optional. Overrides the default button art for the selected/down button state. Art must be located in the ..\skins\[SKIN]\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/textures). By default, the button art is stretched to fit the specified button size.

String: image_selected="btn_square-down_32x128.tga"

image_hover_selected

Optional. Overrides the default button art for the selected/down and mouseover/hover button state. Art must be located in the ..\skins\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/[SKIN]/textures). Art must also be named in textures.xml with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: image_unselected="btn_square-down-hover_32x128.tga"

image_hover_unselected

Optional. Overrides the default button art for the unselected/up and mouseover/hover button state. Art must be located in the ..\skins\[SKIN]\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/[SKIN]/textures). Art must also be named in textures.xml with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: image_unselected="btn_square-up-hover_32x128.tga"

image_disabled

Optional. Overrides the default button art for the disabled button state. Art must be located in the ..\skins\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/[SKIN]/textures). Art must also be named in textures.xml with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: image_unselected="btn_square-disabled_32x128.tga"

image_disabled_selected

Optional. Overrides the default button art for the disabled and selected/down button state. Art must be located in the ..\skins\[SKIN]\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/textures). Art must also be named in textures.xml with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: image_unselected="btn_square-down-disabled_32x128.tga"

image_overlay

Optional. Applies an overlay image to the button. The button art will be sized to fit. As of 1.18.x, these icons should be 16 pixels high at maximum on a standard height 24px button to minimize scaling artifacts. Can be used with or without text. Art must be located in the ..\skins\[SKIN]\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/[SKIN]/textures). Art must also be named in textures.xml with an assigned UUID. See image_overlay_alignment for alignment options.

String: image_overlay="icn_media-play_16.tga"

image_overlay_alignment

Optional. Sets the alignment of the image_overlay icon.

Values:

  • left: left-aligns the art on the button. This standard is used for new button art with text in the Dazzle branch.
  • right: right-aligns the the art on the button.
  • center: centers the art on the button. This standard is used for new button art without text in the Dazzle branch.

String: image_overlay_alignment="left"

toggle

Optional. Determines whether the button is a toggle button or not. The Fly/Stop Flying button is a toggle button, for example.

Boolean: toggle="false"

pad_right

Optional.

hidden

Optional.

tab_stop

Optional.

help_url

Optional.

auto_resize

Optional.

user_resize

Optional.

default

Optional.

index

Optional.

text

Optional.

ignore

Optional.

label_width

Optional.

image

Optional.

flyout_button parameters


  • Class LLFlyoutButton : LLComboBox : LLUICtrl : LLView
  • In source file llui/llcombobox.cpp
  • Used by floater, panel, and layout_stack.
  • Can contain flyout_button_item.
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
    can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
    height="80" left="551" min_height="80" min_width="240" mouse_opaque="true"
    name="example_flyout_button" tab_stop="false" title="flyout_button"
    width="240">
   <flyout_button allow_text_entry="true" bottom="20" enabled="true" height="20" left="10"
        max_chars="30" mouse_opaque="true" name="flyout_button" tab_stop="true"
        width="223" label="flyout_button label" font="SansSerif">
       <flyout_button_item name="item 1" value="value 1">flyout_button_item 1</flyout_button_item>
       <flyout_button_item name="item 2" value="value 2">flyout_button_item 2</flyout_button_item>
       <flyout_button_item name="item 3" value="value 3">flyout_button_item 3</flyout_button_item>
   </flyout_button>
</floater>

Common parameters

  • General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
  • Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
  • Text: label, font, font_size, font_style, halign

Specific parameters

label_selected

Optional.

list_position

Optional.

auto_resize

Optional.

user_resize

Optional.

flyout_button_item parameters


  • member of LLFlyoutButton : LLComboBox : LLUICtrl : LLView
  • In source file llui/llcombobox.cpp
  • Used by flyout_button.
value
name

joystick_turn parameters


  • Class LLJoystickAgentTurn : LLJoystick : LLButton : LLUICtrl : LLView
  • In source file newview/lljoystickbutton.cpp
  • Used by floater.
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
    can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
    height="100" left="550" min_height="100" min_width="150" mouse_opaque="true"
    name="example_joystick_turn" tab_stop="false" title="joystick_turn"
    width="150">
   <joystick_turn bottom="20" enabled="true" font="SansSerif" halign="center" height="50"
        image_selected="move_backward_in.tga"
        image_unselected="move_backward_out.tga"
        image_disabled="button_disabled_32x128.tga"
        image_disabled_selected="button_disabled_32x128.tga"
        left="20" mouse_opaque="true" name="joystick_turn" quadrant="origin"
        scale_image="true" tab_stop="true" width="50" />
</floater>

Common parameters

  • General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
  • Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
  • Text: halign

Specific parameters

image_selected
image_unselected
quadrant
scale_image

joystick_slide parameters


  • Class LLJoystickAgentSlide : LLJoystick : LLButton : LLUICtrl : LLView
  • In source file newview/lljoystickbutton.cpp
  • Used by floater.
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
    can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
    height="100" left="550" min_height="100" min_width="150" mouse_opaque="true"
    name="example_joystick_slide" tab_stop="false" title="joystick_slide"
    width="150">
   <joystick_slide bottom="20" enabled="true" font="SansSerif" halign="center" height="50"
        image_selected="UIImgBtnSlideLeftInUUID"
        image_unselected="UIImgBtnSlideLeftOutUUID"
        image_disabled="button_disabled_32x128.tga"
        image_disabled_selected="button_disabled_32x128.tga"
        left="20" mouse_opaque="true" name="joystick_slide" quadrant="origin"
        scale_image="true" tab_stop="true" width="50" />
</floater>

Common parameters

  • General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
  • Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
  • Text: halign

Specific parameters

image_selected
image_unselected
quadrant
scale_image

multi_slider parameters


  • Class LLMultiSliderCtrl : LLUICtrl : LLView
  • In source file llui/llmultisliderctrl.cpp
  • Used by panel.
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
    can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
    height="80" left="550" min_height="80" min_width="250" mouse_opaque="true"
    name="example_multi_slider" tab_stop="false" title="multi_slider"
    width="250">
   <multi_slider bottom="20" can_edit_text="false" decimal_digits="3" enabled="true"
        height="20" increment="0.1" initial_val="0" label="multi_slider label"
        left="20" max_val="1" min_val="0" mouse_opaque="true" name="multi_slider"
        show_text="true" tab_stop="true" value="0" width="200" use_triangle="true" />
</floater>

Common parameters

  • General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
  • Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
  • Text: label, font, font_size, font_style

Specific parameters

allow_overlap
can_edit_text
decimal_digits
draw_track

Optional.

increment
initial_val
max_sliders
max_val
min_val
show_text
use_triangle

Optional.

value

multi_slider_bar parameters


  • Class LLMultiSlider : LLUICtrl : LLView
  • In source file llui/llmultislider.cpp
  • Used by panel.
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
    can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
    height="80" left="550" min_height="80" min_width="250" mouse_opaque="true"
    name="example_multi_slider_bar" tab_stop="false" title="multi_slider_bar"
    width="250">
   <multi_slider_bar bottom="20" enabled="true" height="40" increment="0.1" initial_val="0"
        left="20" max_val="1" min_val="0" mouse_opaque="true"
        name="multi_slider_bar" tab_stop="true" width="200" />
</floater>

Common parameters

  • General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
  • Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control

Specific parameters

allow_overlap
draw_track

Optional.

increment
initial_val
max_sliders
max_val
min_val
use_triangle

Optional.

slider parameters


  • Class LLSliderCtrl : LLUICtrl : LLView
  • In source file llui/llsliderctrl.cpp
  • Used by floater and panel.

Common parameters

  • General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
  • Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
  • Text: label, font, font_size, font_style

Specific parameters

increment
initial_val

Optional.

label_width

Optional.

max_val
min_val
show_text

Optional.

decimal_digits

Optional.

can_edit_text

Optional.

value

Optional.

volume

Optional.

edit_text

Optional.

slider_bar parameters


  • Class LLSlider : LLUICtrl : LLView
  • In source file llui/llslider.cpp
  • Used by panel.

Common parameters

  • General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
  • Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control

Specific parameters

increment
initial_val
max_val
min_val

spinner parameters


  • Class LLSpinCtrl : LLUICtrl : LLView
  • In source file llui/llspinctrl.cpp
  • Used by floater and panel.

Common parameters

  • General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
  • Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
  • Text: label, font, font_size, font_style

Specific parameters

decimal_digits

Optional.

increment

Optional.

initial_val

Optional.

max_val
min_val

Optional.

label_width

Optional.

can_edit_text

Optional.

allow_text_entry

Optional.

text_enabled_color

Optional.

text_disabled_color

Optional.

bg_visible

Optional.

border_drop_shadow_visible

Optional.

border_visible

Optional.

drop_shadow_visible

Optional.

h_pad

Optional.

v_pad

Optional.

volume_slider parameters


  • Class LLSlider : LLUICtrl : LLView
  • In source file llui/llslider.cpp
  • Used by floater and panel.

Common parameters

  • General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
  • Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control

Specific parameters

increment
initial_val
max_val
min_val
hidden

Optional.