Flex-buttons library

[Ambrozik]

This library provides functionality for managing interactive buttons in Love2D.
It supports three shapes: rectangles, circles, and polygons, and includes methods for handling events such as mouse movements, clicks, and state updates. Additionally, it allows for translating all layers and scaling.

Features
Layer System: The library implements a layer system where buttons are organized by layers.
Buttons in lower layers (with lower layer IDs) have higher priority, meaning they will respond to events before buttons in higher layers.

Hover State Management: Only one button can have a hover state or hover border state active at any given time. The library also includes a border system to check if a border is pressed or hovered.

Overlapping Buttons: The library handles overlapping buttons efficiently.
When buttons overlap, the topmost button (based on the layer system) will receive input events, while lower buttons remain unaffected, preventing errors or unintended behavior.



The following callback functions are available for customizing button behavior:

• BorderHover(xm, ym, dx, dy): Called every frame when the mouse is over the button border.

• BorderUnHover(xm, ym, dx, dy): Called once when the mouse leaves the button border.

• WhileBorderHover(self, xm, ym, dx, dy): Called every frame while the cursor is hovering over the button border.

• WhileBorderPressed(self, xm, ym, dx, dy): Called every frame while the button border is pressed, even if the mouse leaves the button.

• Hover(self, xm, ym, dx, dy): Called once when the mouse enters the button area.

• WhileHover(self, xm, ym, dx, dy): Called every frame while the mouse is over the button.

• WhilePressed(xm, ym, dx, dy): Called every frame when the button is pressed, even if the mouse leaves the button.

• UnHover(self, xm, ym, dx, dy): Called once when the mouse leaves the button area.

• BorderClick(self, xm, ym, button): Called once when the mouse clicks on the button border.

• Click(self, xm, ym, button): Called once when the mouse clicks inside the button.

• Release(self, xm, ym, button): Called once when the mouse releases a button inside the button's area.

• BorderRelease(self, xm, ym, button): Called once when the mouse releases a button on the button's border.

• WhileMoves(self, xm, ym, dx, dy, istouch): Called every time the mouse moves.

• Scroll(dxm, dym): Called every time the user scrolls, capturing the scroll direction and amount.

I’d appreciate any feedback you have, and please let me know if you encounter any bugs!

Repo : https://github.com/KrumYehor/Flex-buttons_love2d/
Documantation: https://github.com/KrumYehor/Flex-buttons_love2d/wiki

Demonstration:
https://www.youtube.com/watch?v=anh0iwF ... nel=Florbo

[dusoft]

The thing is - everytime I see a new UI library, I am asking whether it supports layouting. Creating elements is easy, however doing efficient layout (i.e. CSS-like, grid, masonry...) is difficult. Also, good interfaces require consistency.

And believe me, I have tried many libs listed here:
https://github.com/love2d-community/awe ... ov-file#ui

I have even created one focused more on grid layout.

I understand your library is focused on buttons and the callbacks are flexible enough to cover all cases. I like natural drag and drop and resizing, although the cursor on resize should always follow the corner and not move away from it. Otherwise I am sure somebody will find it helpful.

[SiENcE]

The thing is - everytime I see a new UI library, I am asking whether it supports layouting. Creating elements is easy, however doing efficient layout (i.e. CSS-like, grid, masonry...) is difficult. Also, good interfaces require consistency.

This is an interesting discussion.

I have also analyzed various UI libraries for Love2D and others and found that my biggest challenge when developing an application is to quickly create flexible layout options and achieve consistent handling of different input methods.

Which approach is more interesting: Auto Layout, manual layout using an editor, or descriptive layout like CSS?

What were your results when testing the different UI libraries?

[dusoft]

Some of them offered explicit, descriptive layouting options. Those are good, but rather talkative in terms of defining all the option in code. Many are window-oriented and that works more for OS layouts or advanced games (RPG, strategies).

Most of the libs did not offer proper layouts and rather just provided set of elements with callbacks.

I needed something simple and flexible (if I add a menu button, it should layout and scale automatically). That's why I developed my Layouter: https://github.com/nekromoff/layouter
It still does not provide full flexibility (horizontal vs vertical), but has an auto layout option, which is useful when you have only couple of elements displayed (e.g. a main menu or decision screen).

Also this recent one looks promising:
https://github.com/Nabeel20/Badr

[SiENcE]

Most of the libs did not offer proper layouts and rather just provided set of elements with callbacks.

I agree with your observations.

I have indeed also recently looked at “layouter”, but not tried it.

Badr looks interesting, but for me too complicated to use.

I've been developing my own library for several months. At its core, it's a lightweight library that handles input and "the system", while custom widgets are dynamically loaded as needed. It uses layers with grid-layout. For layout i have implemented a flex-container widget.

Here's a small showcase of the flexContainer widget, featuring five nested flexContainers with button widgets, dropdowns, graph nodes, and text inputs. The grid is used only for the initial layout and can be repurposed by the controlling program for other use cases.

Recording 2024-10-27 at 01.19.54.gif (3.16 MiB) Viewed 2388 times

@Ambrozik : Sorry for high jacking this thread.

[dusoft]

I've been developing my own library for several months. At its core, it's a lightweight library that handles input and "the system", while custom widgets are dynamically loaded as needed. It uses layers with grid-layout. For layout i have implemented a flex-container widget.

Here's a small showcase of the flexContainer widget, featuring five nested flexContainers with button widgets, dropdowns, graph nodes, and text inputs. The grid is used only for the initial layout and can be repurposed by the controlling program for other use cases.

Wow, that looks nice including the flexible container wrapping elements to width.

[SiENcE]

Thanks!

It still needs work before the first release as I want to have a stable core. There will be 13-15 widgets including FlexContainer, but really anyone can implement their own depending on their requirements for look and function as long as they stick to the widget interface.


I think the most difficult part is the consistent input handling of touch, mouse, gamepad and keyboard. Most ui libraries implement only 2 or 3 input methods. Adding more is mostly impossible.

I‘m also not sure about layouting.
On mobile you need a flexible layout. But in games the layout is mostly static and is only adjusted for different resolutions. Thats why unreal and unity use an anchor grid layout.
My core uses layers and they use a grid layout. On top of this the flexcontainer widget offers a dynamic layout. We will see if it‘s the right choice.

I‘m currently writing an layout editor, a small rpg and other samples to test all this.

[dusoft]

Indeed, most desktop games use grid and just scale it to screen size. Mobile might be different, but I grid should work as well.