search

tobspr / LUI

Lightweight User Interface for Panda3D
MIT License
84 stars 24 forks source link

No Listbox widget #28

Open bkeys opened 7 years ago

bkeys commented 7 years ago

There is no support for a listbox currently, is there any plans to get one implemented? Here is an example of a listbox listbox

This is a pretty important GUI element to have available

bkeys commented 7 years ago

On a side note I would be willing to try to implement some of these widgets if you had some basic documentation on how to add new widgets to LUI

tobspr commented 7 years ago

Right now there are only select boxes. Listboxes seem useful, although I don't know when I'd find some time to implement them. Unfortunately there is not much documentation about adding new widgets, however it's not that complicated. You can just create your own widget class in Builtin/ (for example, see https://github.com/tobspr/LUI/blob/master/Builtin/LUIButton.py), and implement the gui control there.

There are also people who already contributed something, you might be able to meet them in the panda3d irc, they probably can help you with that, too. If you have any further/specific questions, don't hesitate to ask :)

bkeys commented 7 years ago

So I spent most of my night getting the ground work laid for a functional listbox widget. Functionally I actually got one working, as I mostly reused the code from the Radio and RadioGroup.

ugly listbox

The last major step I need to make is removing the O from the left of the bullet. But when I comment out the line

self._sprite

in class LUIListBoxOption the vertical alignment of it all blows up and looks like this

bad listbox

Here is the source code of what I got so far. Do you have any clue what is causing the bad vertical alignment?


from LUIObject import LUIObject
from LUISprite import LUISprite
from LUILabel import LUILabel
from LUILayouts import LUICornerLayout, LUIHorizontalStretchedLayout
from LUIInitialState import LUIInitialState
from LUIScrollableRegion import LUIScrollableRegion
from LUIVerticalLayout import LUIVerticalLayout

from functools import partial

__all__ = ["LUIListbox"]

class LUIListbox(LUIObject):

    """ Selectbox widget, showing several options whereas the user can select
    only one. """

    def __init__(self, width=200, height=200, options=None, selected_option=None, **kwargs):
        """ Constructs a new selectbox with a given width """
        LUIObject.__init__(self, x=0, y=0, w=width + 4, h=height + 4, solid=True)
        LUIInitialState.init(self, kwargs)
        # The selectbox has a small border, to correct this we move it
        self.margin.left = -2

        self._bg_layout = LUIScrollableRegion(parent=self, width="100%")
        self._v_layout = LUIVerticalLayout(parent=self._bg_layout)
        self._option_group = LUIListboxOptionGroup()
        for i in range(1, 40):
            LUIListboxOption(parent=self._v_layout.cell(), label=str(i), group=self._option_group)

class LUIListboxOptionGroup(LUIObject):

    """ Simple helper to group a bunch of LUIListOption and ensure only one is
    checked at one timem """

    def __init__(self):
        """ Constructs a new group without any ListOptiones inside """
        self._boxes = []
        self._selected_box = None

    def register_box(self, box):
        """ Registers a box to the collection """
        if box not in self._boxes:
            self._boxes.append(box)

    def set_active_box(self, active_box):
        """ Internal function to set the active box """
        for box in self._boxes:
            if box is not active_box:
                box._update_state(False)
                box._label.alpha = 1.0
            else:
                box._label.alpha = 0.3
                box._update_state(True)
        self._selected_box = active_box

    def get_active_box(self):
        """ Returns the current selected box """
        return self._selected_box

    active_box = property(get_active_box, set_active_box)

    def get_active_value(self):
        """ Returns the value of the current selected box (or None if none is
        selected) """
        if self._selected_box is None:
            return None
        return self._selected_box.get_value()

    active_value = property(get_active_value)

class LUIListboxOption(LUIObject):

    """ A radiobox which can be used in combination with a LUIListboxOptionGroup """

    def __init__(self, parent=None, group=None, value=None, active=False, label=u"Option", **kwargs):
        """ Constructs a new radiobox. group should be a handle to a LUIListboxOptionGroup.
        value will be the value returned by group.value, in case the box was
        selected. By default, the radiobox is not active. """
        assert group is not None, "LUIListboxOption needs a LUIListboxOptionGroup!"
        LUIObject.__init__(self, x=0, y=0, solid=True)
        self._sprite = LUISprite(self, "Radiobox_Default", "skin") # Removing me causes the vertical problem
        self._label = LUILabel(parent=self, text=label, margin=(0, 0, 0, 23),
                               center_vertical=True)
        self._value = value
        self._active = False
        self._hovered = False
        self._group = group
        self._group.register_box(self)
        if active:
            self.set_active()
        if parent:
            self.parent = parent
        LUIInitialState.init(self, kwargs)

    def on_click(self, event):
        """ Internal onclick handler. Do not override. """
        self.set_active()

    def on_mouseover(self, event):
        """ Internal mouseover handler """
        self._hovered = True
        self._update_sprite()

    def on_mouseout(self, event):
        """ Internal mouseout handler """
        self._hovered = False
        self._update_sprite()

    def set_active(self):
        """ Internal function to set the radiobox active """
        if self._group is not None:
            self._group.set_active_box(self)
        else:
            self._update_state(True)
        """ Internal method to select an option """

    def get_value(self):
        """ Returns the value of the radiobox """
        return self._value

    def set_value(self, value):
        """ Sets the value of the radiobox """
        self._value = value

    value = property(get_value, set_value)

    def get_label(self):
        """ Returns a handle to the label, so it can be modified (e.g. change
            its text) """
        return self._label

    label = property(get_label)

    def _update_state(self, active):
        """ Internal method to update the state of the radiobox. Called by the
        LUIListboxOptionGroup """
        self._active = active
        self.trigger_event("changed")
        self._update_sprite()

    def on_mousedown(self, event):
        """ Internal onmousedown handler. Do not override. """
        self._sprite.color = (0.86, 0.86, 0.86, 1.0)

    def on_mouseup(self, event):
        """ Internal onmouseup handler. Do not override. """
        self._sprite.color = (1, 1, 1, 1)

    def _update_sprite(self):
        """ Internal function to update the sprite of the radiobox """
        img = "Radiobox_Active" if self._active else "Radiobox_Default"
        if self._hovered:
            img += "Hover"
        self._sprite.set_texture(img, "skin")
tobspr commented 7 years ago

First of all, thanks for your effort!

Do you see any error messages on the console? Make sure you also comment the usage of self._sprite in the member methods (on_mousedown, on_mouseup, etc..).

Also, try removing the center_vertical option from the Label (self._label). It's a while since I programmed it, but I believe it might cause issues since then the label will have no height then.

Best regards, Tobias

bhkeys commented 7 years ago

Okay that worked well. But how would you suggest changing the background color of the label and having it expand to the entire region? I need to do this for visuals and so that the user does not have to click on the text directly to activate the option. Here is what it looks like currently

current listbox

It also appears like it is a bit offset to the right still; I am not sure what is causing that.

tobspr commented 7 years ago

The offset to the right is because the label has some margin. If you remove the margin=(0, 0, 0, 23) on the label, it will stick to the left. If you set the width of the label to "100%", it should fill the whole container, and thus recieve all click events. However, I believe there is no easy way to set the background color of the label. You would have to make an empty sprite behind the label (Use a LUISprite with the "blank" texture), and set its color to the desired background color. You can set the width and height of the background sprite to "100%" to make sure it fills the whole cell.

bhkeys commented 7 years ago

I can set either the LUIListboxOption or the LUILabel inside of it to "100%" and it will not do the expected behavior. Perhaps this serves as the example you were talking about in this issue

tobspr commented 7 years ago

You will have to set the width of both the LUIListboxOption and the LUILabel to 100%. Does it work then?

bhkeys commented 7 years ago

Same behavior if I specify it twice.

tobspr commented 7 years ago

Hm, I will have a look then. Could you tell me what region.root.ls() prints? (Region is your LUIRegion) Also try calling it after a second or so, after at least one frame was rendered

bhkeys commented 7 years ago 
[LUIBaseElement] pos = 0, 0; size = 800 x 600; z = 0
 [LUIFrame] pos = 0, 0; size = 200 x 0; z = 0
  [LUICornerLayout] pos = 0, 0; size = 0 x 0; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_TR:skin; z = 0
   [LUISprite] pos = 0, 0; size = 0 x 5; tex = SunkenFrame_Top:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_TL:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 0; tex = SunkenFrame_Right:skin; z = 0
   [LUISprite] pos = 0, 0; size = 0 x 0; tex = SunkenFrame_Mid:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 0; tex = SunkenFrame_Left:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_BR:skin; z = 0
   [LUISprite] pos = 0, 0; size = 0 x 5; tex = SunkenFrame_Bottom:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_BL:skin; z = 0
tobspr commented 7 years ago

This seems somewhat incomplete, can you try calling it after a second or so, e.g. using taskMgr.doMethodLater ?

bhkeys commented 7 years ago 
[LUIBaseElement] pos = 0, 0; size = 800 x 600; z = 0
 [LUIFrame] pos = 0, 0; size = 200 x 0; z = 0
  [LUICornerLayout] pos = 0, 0; size = 0 x 0; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_TR:skin; z = 0
   [LUISprite] pos = 0, 0; size = 0 x 5; tex = SunkenFrame_Top:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_TL:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 0; tex = SunkenFrame_Right:skin; z = 0
   [LUISprite] pos = 0, 0; size = 0 x 0; tex = SunkenFrame_Mid:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 0; tex = SunkenFrame_Left:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_BR:skin; z = 0
   [LUISprite] pos = 0, 0; size = 0 x 5; tex = SunkenFrame_Bottom:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_BL:skin; z = 0
  [LUIVerticalLayout] pos = 0, 0; size = 0 x 0; z = 0
   [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
    [LUIButton] pos = 0, 0; size = 0 x 0; z = 0
     [LUIHorizontalStretchedLayout] pos = 0, 0; size = 0 x 0; z = 0
      [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
       [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
        [LUISprite] pos = 0, 0; size = 5 x 32; tex = ButtonDefault_Left:skin; z = 0
       [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
        [LUISprite] pos = 0, 0; size = 0 x 32; tex = ButtonDefault:skin; z = 0
       [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
        [LUISprite] pos = 0, 0; size = 5 x 32; tex = ButtonDefault_Right:skin; z = 0
     [LUILabel] pos = 0, 0; size = 0 x 0; z = 1
      [LUIText] pos = 0, 0; size = 68 x 17; text = u'Play Online'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
      [LUIText] pos = 0, 0; size = 68 x 17; text = u'Play Online'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
   [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
    [LUIButton] pos = 0, 0; size = 0 x 0; z = 0
     [LUIHorizontalStretchedLayout] pos = 0, 0; size = 0 x 0; z = 0
      [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
       [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
        [LUISprite] pos = 0, 0; size = 5 x 32; tex = ButtonDefault_Left:skin; z = 0
       [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0                                                                                                                                               
        [LUISprite] pos = 0, 0; size = 0 x 32; tex = ButtonDefault:skin; z = 0                                                                                                                       
       [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0                                                                                                                                               
        [LUISprite] pos = 0, 0; size = 5 x 32; tex = ButtonDefault_Right:skin; z = 0                                                                                                                 
     [LUILabel] pos = 0, 0; size = 0 x 0; z = 1                                                                                                                                                      
      [LUIText] pos = 0, 0; size = 42 x 17; text = u'Garage'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
      [LUIText] pos = 0, 0; size = 42 x 17; text = u'Garage'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
   [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
    [LUIButton] pos = 0, 0; size = 0 x 0; z = 0
     [LUIHorizontalStretchedLayout] pos = 0, 0; size = 0 x 0; z = 0
      [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
       [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
        [LUISprite] pos = 0, 0; size = 5 x 32; tex = ButtonDefault_Left:skin; z = 0
       [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
        [LUISprite] pos = 0, 0; size = 0 x 32; tex = ButtonDefault:skin; z = 0
       [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
        [LUISprite] pos = 0, 0; size = 5 x 32; tex = ButtonDefault_Right:skin; z = 0
     [LUILabel] pos = 0, 0; size = 0 x 0; z = 1
      [LUIText] pos = 0, 0; size = 49 x 17; text = u'Settings'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
      [LUIText] pos = 0, 0; size = 49 x 17; text = u'Settings'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
   [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
    [LUIButton] pos = 0, 0; size = 0 x 0; z = 0
     [LUIHorizontalStretchedLayout] pos = 0, 0; size = 0 x 0; z = 0
      [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
       [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
        [LUISprite] pos = 0, 0; size = 5 x 32; tex = ButtonDefault_Left:skin; z = 0
       [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
        [LUISprite] pos = 0, 0; size = 0 x 32; tex = ButtonDefault:skin; z = 0
       [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
        [LUISprite] pos = 0, 0; size = 5 x 32; tex = ButtonDefault_Right:skin; z = 0
     [LUILabel] pos = 0, 0; size = 0 x 0; z = 1
      [LUIText] pos = 0, 0; size = 26 x 17; text = u'Quit'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
      [LUIText] pos = 0, 0; size = 26 x 17; text = u'Quit'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
 [LUIFrame] pos = 0, 0; size = 400 x 400; z = 0
  [LUICornerLayout] pos = 0, 0; size = 0 x 0; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_TR:skin; z = 0
   [LUISprite] pos = 0, 0; size = 0 x 5; tex = SunkenFrame_Top:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_TL:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 0; tex = SunkenFrame_Right:skin; z = 0
   [LUISprite] pos = 0, 0; size = 0 x 0; tex = SunkenFrame_Mid:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 0; tex = SunkenFrame_Left:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_BR:skin; z = 0
   [LUISprite] pos = 0, 0; size = 0 x 5; tex = SunkenFrame_Bottom:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_BL:skin; z = 0
  [LUIVerticalLayout] pos = 0, 0; size = 0 x 0; z = 0
   [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
    [LUIListbox] pos = 0, 0; size = 204 x 204; z = 0
     [LUIScrollableRegion] pos = 0, 0; size = 0 x 100; z = 0
      [LUIObject] pos = 0, 0; size = 0 x 0; z = 0
       [LUIObject] pos = 0, 0; size = 0 x 0; z = 0
        [LUIObject] pos = 0, 0; size = 0 x 0; z = 0
         [LUIVerticalLayout] pos = 0, 0; size = 0 x 0; z = 0
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'1'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'1'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'2'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'2'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'3'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'3'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'4'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'4'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'5'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'5'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'6'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'6'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'7'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'7'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'8'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'8'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'9'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 7 x 17; text = u'9'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'10'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'10'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'11'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'11'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'12'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'12'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'13'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'13'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'14'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'14'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'15'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'15'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'16'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'16'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'17'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'17'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'18'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'18'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'19'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'19'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'20'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'20'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'21'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'21'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'22'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'22'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'23'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'23'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'24'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'24'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'25'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'25'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'26'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'26'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'27'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'27'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'28'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'28'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'29'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'29'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'30'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'30'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'31'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'31'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'32'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'32'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'33'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'33'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'34'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'34'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'35'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'35'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'36'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'36'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'37'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'37'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'38'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'38'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
          [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
           [LUIListboxOption] pos = 0, 0; size = 0 x 0; z = 0
            [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'39'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
             [LUIText] pos = 0, 0; size = 14 x 17; text = u'39'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
      [LUIObject] pos = 0, 0; size = 20 x 0; z = 0
       [LUISprite] pos = 0, 0; size = 3 x 0; tex = NULL; z = 0
       [LUIObject] pos = 0, 0; size = 10 x 0; z = 0
        [LUISprite] pos = 0, 0; size = 11 x 6; tex = NULL; z = 0
        [LUISprite] pos = 0, 0; size = 11 x 1; tex = NULL; z = 0
        [LUISprite] pos = 0, 0; size = 11 x 5; tex = NULL; z = 0
      [LUIHorizontalStretchedLayout] pos = 0, 0; size = 0 x 0; z = 0
       [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
        [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
         [LUISprite] pos = 0, 0; size = 18 x 18; tex = ScrollShadowTop_Left:skin; z = 0
        [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
         [LUISprite] pos = 0, 0; size = 0 x 18; tex = ScrollShadowTop:skin; z = 0
        [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
         [LUISprite] pos = 0, 0; size = 18 x 18; tex = ScrollShadowTop_Right:skin; z = 0
      [LUIHorizontalStretchedLayout] pos = 0, 0; size = 0 x 0; z = 0
       [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
        [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
         [LUISprite] pos = 0, 0; size = 18 x 18; tex = ScrollShadowBottom_Left:skin; z = 0
        [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
         [LUISprite] pos = 0, 0; size = 0 x 18; tex = ScrollShadowBottom:skin; z = 0
        [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
         [LUISprite] pos = 0, 0; size = 18 x 18; tex = ScrollShadowBottom_Right:skin; z = 0
   [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
    [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
     [LUIText] pos = 0, 0; size = 120 x 17; text = u'Join an online game'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
     [LUIText] pos = 0, 0; size = 120 x 17; text = u'Join an online game'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
   [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
    [LUIFrame] pos = 0, 0; size = 380 x 320; z = 0
     [LUICornerLayout] pos = 0, 0; size = 0 x 0; z = 0
      [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_TR:skin; z = 0
      [LUISprite] pos = 0, 0; size = 0 x 5; tex = SunkenFrame_Top:skin; z = 0
      [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_TL:skin; z = 0
      [LUISprite] pos = 0, 0; size = 5 x 0; tex = SunkenFrame_Right:skin; z = 0
      [LUISprite] pos = 0, 0; size = 0 x 0; tex = SunkenFrame_Mid:skin; z = 0
      [LUISprite] pos = 0, 0; size = 5 x 0; tex = SunkenFrame_Left:skin; z = 0
      [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_BR:skin; z = 0
      [LUISprite] pos = 0, 0; size = 0 x 5; tex = SunkenFrame_Bottom:skin; z = 0
      [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_BL:skin; z = 0
     [LUIVerticalLayout] pos = 0, 0; size = 0 x 0; z = 0
   [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
    [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
     [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
      [LUIButton] pos = 0, 0; size = 0 x 0; z = 0
       [LUIHorizontalStretchedLayout] pos = 0, 0; size = 0 x 0; z = 0
        [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 5 x 32; tex = ButtonDefault_Left:skin; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 0 x 32; tex = ButtonDefault:skin; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 5 x 32; tex = ButtonDefault_Right:skin; z = 0
       [LUILabel] pos = 0, 0; size = 0 x 0; z = 1
        [LUIText] pos = 0, 0; size = 63 x 17; text = u'Join Game'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
        [LUIText] pos = 0, 0; size = 63 x 17; text = u'Join Game'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
     [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
      [LUIButton] pos = 0, 0; size = 0 x 0; z = 0
       [LUIHorizontalStretchedLayout] pos = 0, 0; size = 0 x 0; z = 0
        [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 5 x 32; tex = ButtonDefault_Left:skin; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 0 x 32; tex = ButtonDefault:skin; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 5 x 32; tex = ButtonDefault_Right:skin; z = 0
       [LUILabel] pos = 0, 0; size = 0 x 0; z = 1
        [LUIText] pos = 0, 0; size = 89 x 17; text = u'Direct Connect'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
        [LUIText] pos = 0, 0; size = 89 x 17; text = u'Direct Connect'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
 [LUIFrame] pos = 0, 0; size = 400 x 400; z = 0
  [LUICornerLayout] pos = 0, 0; size = 0 x 0; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_TR:skin; z = 0
   [LUISprite] pos = 0, 0; size = 0 x 5; tex = SunkenFrame_Top:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_TL:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 0; tex = SunkenFrame_Right:skin; z = 0
   [LUISprite] pos = 0, 0; size = 0 x 0; tex = SunkenFrame_Mid:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 0; tex = SunkenFrame_Left:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_BR:skin; z = 0
   [LUISprite] pos = 0, 0; size = 0 x 5; tex = SunkenFrame_Bottom:skin; z = 0
   [LUISprite] pos = 0, 0; size = 5 x 5; tex = SunkenFrame_BL:skin; z = 0
  [LUIVerticalLayout] pos = 0, 0; size = 0 x 0; z = 0
   [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
    [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
     [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
      [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
       [LUIText] pos = 0, 0; size = 41 x 17; text = u'Master'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
       [LUIText] pos = 0, 0; size = 41 x 17; text = u'Master'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
     [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
      [LUISlider] pos = 0, 0; size = 250 x 0; z = 0
       [LUIHorizontalStretchedLayout] pos = 0, 0; size = 0 x 0; z = 0
        [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 3 x 7; tex = SliderBg_Left:skin; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 0 x 7; tex = SliderBg:skin; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 3 x 7; tex = SliderBg_Right:skin; z = 0
       [LUIObject] pos = 0, 0; size = 0 x 0; z = 1
        [LUISprite] pos = 0, 0; size = 4 x 8; tex = NULL; z = 0
        [LUISprite] pos = 0, 0; size = 121 x 8; tex = NULL; z = 0
       [LUISprite] pos = 0, 0; size = 18 x 18; tex = NULL; z = 2
   [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
    [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
     [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
      [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
       [LUIText] pos = 0, 0; size = 34 x 17; text = u'Music'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
       [LUIText] pos = 0, 0; size = 34 x 17; text = u'Music'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
     [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
      [LUISlider] pos = 0, 0; size = 250 x 0; z = 0
       [LUIHorizontalStretchedLayout] pos = 0, 0; size = 0 x 0; z = 0
        [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 3 x 7; tex = SliderBg_Left:skin; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 0 x 7; tex = SliderBg:skin; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 3 x 7; tex = SliderBg_Right:skin; z = 0
       [LUIObject] pos = 0, 0; size = 0 x 0; z = 1
        [LUISprite] pos = 0, 0; size = 4 x 8; tex = NULL; z = 0
        [LUISprite] pos = 0, 0; size = 121 x 8; tex = NULL; z = 0
       [LUISprite] pos = 0, 0; size = 18 x 18; tex = NULL; z = 2
   [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
    [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
     [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
      [LUILabel] pos = 0, 0; size = 0 x 0; z = 0
       [LUIText] pos = 0, 0; size = 76 x 17; text = u'Sound Effect'; color = 0 0 0 0.6 / 1 1 1 1; z = 0
       [LUIText] pos = 0, 0; size = 76 x 17; text = u'Sound Effect'; color = 0.9 0.9 0.9 1 / 1 1 1 1; z = 1
     [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
      [LUISlider] pos = 0, 0; size = 250 x 0; z = 0
       [LUIHorizontalStretchedLayout] pos = 0, 0; size = 0 x 0; z = 0
        [LUIHorizontalLayout] pos = 0, 0; size = 0 x 0; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 3 x 7; tex = SliderBg_Left:skin; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 0 x 7; tex = SliderBg:skin; z = 0
         [LUILayoutCell] pos = 0, 0; size = 0 x 0; z = 0
          [LUISprite] pos = 0, 0; size = 3 x 7; tex = SliderBg_Right:skin; z = 0
       [LUIObject] pos = 0, 0; size = 0 x 0; z = 1
        [LUISprite] pos = 0, 0; size = 4 x 8; tex = NULL; z = 0
        [LUISprite] pos = 0, 0; size = 121 x 8; tex = NULL; z = 0
       [LUISprite] pos = 0, 0; size = 18 x 18; tex = NULL; z = 2
tobspr commented 7 years ago

Can't see anything obvious, I will take a look when I find some time .. For the meantime you could try setting a hardcoded width, e.g. 200 or so

bkeys commented 7 years ago

I finished my listbox with the only issue being it does not adjust to the theme color. Any clue how I can do that? After that I will email you the file so you can add it to the repo. PR seems overkill for this.

bkeys commented 7 years ago

selection_399

bkeys commented 7 years ago

Could you tell me how to make it so that I can override the click, mouseup, mousedown, etc events so users can implement custom behaviors for their listboxes?

tobspr commented 7 years ago

Sorry for the late reply.

To make the listbox adjust to the theme color, you should probably make a sprite which is the background of your list items (Right now I suppose you use the "blank" sprite). Advantage of that is also that users might make their custom background image instead of a solid color (not sure if this would look any good though).

The list looks cool, although I would probably add some padding to the text (E.g. text.padding.left = 5 or so).

Not sure what you mean with overriding events. You can either add on_xxx methods to your class where xxx is the name of the event, or you use my_element.bind("something", my_handler)

Tbh, I would prefer a pull request when the listbox is done, since this is easier to merge, and also shows the correct git history then (In case somebody has questions about the code or so)