LUI (Lightweight User Interface) - Beta

Return to Panda Features in Development

LUI (Lightweight User Interface) - Beta

Postby tobspr » Fri Apr 01, 2016 3:08 pm

LUI (Lightweight User Interface)

So I'd like to announce LUI (Lightweight User Interface). It is meant to be a DirectGUI alternative,
being much faster and (hopefully) easier to use.

Features:
- Extremely fast, can handle thousands of elements
- Two skins already included with a more modern design than DirectGUI
- (should) be easier to use
- More convenient interface than DirectGUI:
--- Margin, Padding like in CSS
--- Easy to center and position elements (Setting top, left, right or bottom constraints)
--- Relative constraints (e.g. width="40%")
--- Easy to use layouts (Vertical layout, Horizontal layout), to make it easier to position elements


It is still in early beta, but it should be fairly useable already. What I need now is a lot of testing and
feedback, so LUI can be improved and eventually replace DirectGUI someday (or at least be a good alternative).

You can find the source and instructions on how to install it here: https://github.com/tobspr/LUI

Samples showing how to use LUI can be found here (Further Documentation/Wiki is planned): https://github.com/tobspr/LUI/tree/master/Demos

I would really appreciate your feedback on using LUI and suggestions on how to improve it.

Here is a screenshot of the default skin included:

Image
Last edited by tobspr on Sun Apr 03, 2016 2:39 am, edited 1 time in total.
User avatar
tobspr
 
Posts: 393
Joined: Wed Apr 10, 2013 11:03 am
Location: Germany

Re: LUI (Lightweight User Interface) - Beta

Postby Melan » Sat Apr 02, 2016 1:50 am

Hi tobspr -

Many thanks for this great tool ! It looks very nice and does provide a modern 'look and feel' to the UI: I definitively think it should replace DirectGUI.

Is there any chance for it to work with 1.9.2? Or are you using specific 1.10 features?

Thanks again.
Melan
 
Posts: 59
Joined: Sat Oct 19, 2013 3:04 am

Re: LUI (Lightweight User Interface) - Beta

Postby tobspr » Sat Apr 02, 2016 3:16 am

Melan wrote:Hi tobspr -

Many thanks for this great tool ! It looks very nice and does provide a modern 'look and feel' to the UI: I definitively think it should replace DirectGUI.

Is there any chance for it to work with 1.9.2? Or are you using specific 1.10 features?

Thanks again.


(Edited), Sorry, turns out it won't work with 1.9.2 since it does not support MAKE_PROPERTY2. You will have to compile panda from source
User avatar
tobspr
 
Posts: 393
Joined: Wed Apr 10, 2013 11:03 am
Location: Germany

Re: LUI (Lightweight User Interface) - Beta

Postby sal » Sat Apr 02, 2016 5:23 am

I've used DirectGUI so far and not that it is bad, but I do believe the skinning with your own textures is a mess and I also don't understand why it is in Python.
I think DirectGUI can do everything and look like the GUI from your picture, it's just time consuming to configure it to look that way and maybe it's a bit slower.

Could you please list some advantages or improvements over DirectGUI? Is it just the skinning or is there more? Thanks.
sal
 
Posts: 156
Joined: Thu May 14, 2015 1:18 pm

Re: LUI (Lightweight User Interface) - Beta

Postby tobspr » Sun Apr 03, 2016 2:39 am

sal wrote:I've used DirectGUI so far and not that it is bad, but I do believe the skinning with your own textures is a mess and I also don't understand why it is in Python.
I think DirectGUI can do everything and look like the GUI from your picture, it's just time consuming to configure it to look that way and maybe it's a bit slower.

Could you please list some advantages or improvements over DirectGUI? Is it just the skinning or is there more? Thanks.


Thanks for the hint, I added some key advantages to the post :)
User avatar
tobspr
 
Posts: 393
Joined: Wed Apr 10, 2013 11:03 am
Location: Germany

Re: LUI (Lightweight User Interface) - Beta

Postby sal » Sun Apr 03, 2016 3:39 am

Thanks!
sal
 
Posts: 156
Joined: Thu May 14, 2015 1:18 pm

Re: LUI (Lightweight User Interface) - Beta

Postby Melan » Sun Apr 03, 2016 10:35 am

(Edited), Sorry, turns out it won't work with 1.9.2 since it does not support MAKE_PROPERTY2. You will have to compile panda from source


Thanks for your reply.Then I'll need to upgrade from 1.9.2 to 1.10 before testing it, I think it will be easier. I don't know when I'll upgrade, but as soon as I will, I'll test LUI.

Without testing it, It seems that LUI doesn't include any Tree control. From my perspective, I think this is very useful,when it comes to develop some advanced interfaces (such as editors). Do you think it could / should be implemented?

Thanks
Melan
 
Posts: 59
Joined: Sat Oct 19, 2013 3:04 am

Re: LUI (Lightweight User Interface) - Beta

Postby Epihaius » Mon Apr 11, 2016 3:56 pm

This is really great :) !

If I could use it for my Panda3D Studio GUI, I would no longer have to put up with the quirks of wxPython on Linux - something I am really looking forward to.

Having played around with it a bit, I can say I like the use of layouts, the ability to create additional button templates and how easy it is to add widgets.

There are some things you might want to add/improve:
  • it would be great if other widgets and even frames could have additional templates too (e.g. one frame template could be used to create toolbars and another for creating panels);
  • for the buttons, it would be nice if they could also have graphics to represent their highlighted state (when mousing over them) and disabled state;
    also, being able to set their state programmatically would allow things like toggle buttons, which stay active until they are clicked a second time;
  • being able to select text in an input field (manually as well as programmatically) would also be nice;
  • while the feature of relative constraints is very cool, it doesn't seem to work well inside a layout (e.g. when setting the width of a button or frame relative, it seems to be reduced to zero);
    EDIT: this turns out to only happen in the main direction of the layout, which makes sense I guess;
  • when setting both the left and right offsets for a widget, it is offset from the left only, while I would have expected the widget to expand to respect both offsets (similar to relative constraints).

On a side note, opening a LUISelectbox leads to a warning about it having requested focus twice or more in one frame.

Although there is no demo showing the use of a colorpicker, it does seem to be implemented, which is great.
Do you also plan to add things like open and save file dialogs? Would be awesome, but I can understand if this is beyond the scope of this project.

All in all, very glad to see this and I hope you will continue to work on it :) !
Epihaius
 
Posts: 103
Joined: Wed Oct 12, 2011 10:37 am

Re: LUI (Lightweight User Interface) - Beta

Postby tobspr » Sat Apr 16, 2016 2:59 am

Thanks for the testing! (Sorry for the late reply, I somehow overlooked it)

it would be great if other widgets and even frames could have additional templates too (e.g. one frame template could be used to create toolbars and another for creating panels);


Hm, well maybe the skin could provide the frame styles, so that you can as many styles as you wish in your skin.

for the buttons, it would be nice if they could also have graphics to represent their highlighted state (when mousing over them) and disabled state;
also, being able to set their state programmatically would allow things like toggle buttons, which stay active until they are clicked a second time;


Makes sense, I'll consider adding a LUIToggleableButton or so

being able to select text in an input field (manually as well as programmatically) would also be nice;


Indeed thats something I planned to implement, although the internal logic for the input field will get much more complex, which is why I didn't implement it yet.

while the feature of relative constraints is very cool, it doesn't seem to work well inside a layout (e.g. when setting the width of a button or frame relative, it seems to be reduced to zero);
EDIT: this turns out to only happen in the main direction of the layout, which makes sense I guess;


You have to set a width on the layout. If you don't set a width, layouts (in general, all lui components) will fit to its children. So if your layout has no width, and a children with a width of 20% or so, that won't work.
General rule: If you specify relative constraints, make sure the parent has a defined width.

when setting both the left and right offsets for a widget, it is offset from the left only, while I would have expected the widget to expand to respect both offsets (similar to relative constraints).


I know it is this way in css, but in lui you basically just set the origin on the element. Adding support for automatic-stretching would be non-trivial, but might be considered in the future.

On a side note, opening a LUISelectbox leads to a warning about it having requested focus twice or more in one frame.


Thats fine, just can safely ignore it. The warning is just there to prevent widgets from allocating focus each frame
User avatar
tobspr
 
Posts: 393
Joined: Wed Apr 10, 2013 11:03 am
Location: Germany

Re: LUI (Lightweight User Interface) - Beta

Postby Epihaius » Tue Apr 19, 2016 1:05 pm

tobspr wrote:Hm, well maybe the skin could provide the frame styles, so that you can as many styles as you wish in your skin.

Fair enough, that should work.

tobspr wrote:You have to set a width on the layout. If you don't set a width, layouts (in general, all lui components) will fit to its children. So if your layout has no width, and a children with a width of 20% or so, that won't work.
General rule: If you specify relative constraints, make sure the parent has a defined width.

Alright, but what I observed for layouts in particular, is that one cannot *in any case* set a relative width for the widgets inside a horizontal layout (whether its own width - relative or absolute - is defined or not), or a relative height for the widgets inside a vertical layout.
The following code should illustrate this:

Code: Select all
        layout = LUIHorizontalLayout(parent=self._root, spacing=0)
##        layout = LUIVerticalLayout(parent=self._root, spacing=0)

        layout.pos = (20, 50)

        # making the width relative only has effect with a vertical layout
        layout.width = "60%"

        # making the height relative only has effect with a horizontal layout
        layout.height = "70%"

        # the following works only with a horizontal layout
        frame = LUIFrame(height="50%", width=120, style=LUIFrame.FS_raised)

        # the following works only with a vertical layout
##        frame = LUIFrame(height=70, width="90%", style=LUIFrame.FS_raised)

        layout.add(frame)



A few more things I'm wondering about:

  • While there is already a layout.remove_cell method, are there plans to implement methods to insert, hide and show cells as well?

  • Will it be possible to add/remove specific LUISelectbox menu items?
    Also, selecting a menu item doesn't really do anything except change the text on the LUISelectbox, so it's necessary to execute the corresponding action afterwards. I feel it would be better if the action were carried out immediately when clicking the item, and let that action itself control what text is displayed on the LUISelectbox (e.g. to allow conditional execution of an action).
    And it might also be more useful if the call to LUISelectbox.get_selected_option() would return the menu item ID string instead of the action (since one might associate that ID string with other data).
    These considerations stem from the fact that I'd like to use the LUISelectbox as a combobox/dropdownbox and even as a menubar, since I don't immediately see any other way to implement those. As such, some way to find out when the LUISelectbox is opened or closed would also be welcome (perhaps allow binding a handler to the left-clicking of the box itself).

  • What other events apart from "click" will we be able to bind handlers to, if any? Like "right-click" and "enter"/"leave" (e.g. for displaying tooltips)...

Okay I'm going to stop nagging you now :P .

Thanks for reading ;) .
Epihaius
 
Posts: 103
Joined: Wed Oct 12, 2011 10:37 am


Return to Panda Features in Development

Who is online

Users browsing this forum: No registered users and 0 guests