LUI (Lightweight User Interface) - Beta

[size=150]LUI (Lightweight User Interface)[/size]

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:

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

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 :slight_smile:

Thanks!

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

This is really great :slight_smile: !

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 :slight_smile: !

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

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

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

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.

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.

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.

Thats fine, just can safely ignore it. The warning is just there to prevent widgets from allocating focus each frame

Fair enough, that should work.

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:

        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 :stuck_out_tongue: .

Thanks for reading :wink: .

Could this be merged into master yet so it will be in the snapshot builds or is beta too unstable for that?

Really looking forward to seeing this replace DirectGui.

I’m must say I’m really liking LUI.

Question: Anyone know of how z-sorting is handled?

I have some text that shows/hides within the game (think labels/tooltips), and it appears over UI elements like buttons.

LUI elements have a “z_offset” property you can use to control Z order.

Ha - well that was surprisingly easy, and works perfectly. Thanks!

Did this problem get fixed for 1.9.4 ? Is LUI finished or still a Beta? :wink:

Hi, i did try to install all the requirements of LUI and the P3DModule builder, but i still run into errors when trying to build the lui module.
The modulebuilder doesnt require you to build the whole Panda3D engine to be able to build the LUI, or was i fooled?

I get the following error, am i doing something obviously dumb?
As far as i know, all the files are where they are supposed to be…
" Traceback (most recent call last):
File “build.py”, line 51, in
run_cmake(config, args)
File “C:\Panda3D\asam\LUI-master\scripts\setup.py”, line 153, in run_cmake
output = try_execute(“cmake”, join_abs(get_script_dir(), “…”), *cmake_args, error_formatter=handle_cmake_error)
File “C:\Panda3D\asam\LUI-master\scripts\common.py”, line 242, in try_execute
process = subprocess.Popen(args, shell=False, stdout=subprocess.PIPE, stderr=subprocess.STDOUT)
File “C:\Panda3D\python\lib\subprocess.py”, line 775, in init
restore_signals, start_new_session)
File “C:\Panda3D\python\lib\subprocess.py”, line 1178, in _execute_child
startupinfo)
FileNotFoundError: [WinError 2] "

I think it does require you to install CMake; I suspect the error is trying to tell you that it can’t find CMake.

Whoops… CMake was installed, Freetype library was not. I found it there. One more reboot, and it built without any errors!
Thank you very much!

When I run the builder.py program, if there is an error that cannot find the path, how can I solve it?

Hi 1111,

It’s impossible to help you without more information. What the entire error message ? On which plateform do you built it ? I just built panda3d + lui without any problem on a debian system (well, it’s doesn’t work yet , but the built was done without any failure :laughing: )