LUIS (Love UI System) - A Modular UI Framework for LÖVE

[SiENcE]

Hi löve community!

I want to share LUIS (Love UI System), a new UI framework I've been working on for 6 month now.

logo_small.png (253.77 KiB) Viewed 2807 times

LUIS is a UI framework as it provides a complete system for handling user interfaces, input, state management, and related functionality in LÖVE applications.

LUIS consists of two main parts:
1. A lightweight, zero-dependency core UI library providing retained mode UI management
2. A comprehensive collection of widgets that together form a full UI framework

Link: https://github.com/SiENcE/luis
Docs: https://github.com/SiENcE/luis/blob/mai ... get-system

14 Samples: https://github.com/SiENcE/luis/tree/main/examples

Sample 1 - Gamemenu which features a set of widgets

Recording_2024-12-17_14.59.55.gif (875.8 KiB) Viewed 2807 times

Sample 2 - UI Editor made with Luis for Luis.

Recording_2024-11-12_00.58.43.gif (478.81 KiB) Viewed 2755 times

What is LUIS?

LUIS is a UI framework (not a library) as it provides a complete system for handling user interfaces, input, state management, and related functionality in LÖVE applications. It focuses on making UI layout and management more intuitive through a grid system while providing rich features like layers, theming, and mouse, keyboard and gamepad support.

Key Features

The core library (with 0 dependencies) handles:
- Retained mode UI element management
- Input processing (mouse, keyboard, touch, gamepad)
- Layer management for complex UI hierarchies
- Grid-based layout system for precise UI positioning
- Event propagation
- State management for saving/loading configurations
- Easy to extend with custom widgets

The widget collection builds on this foundation to provide a complete UI framework with:
- Rich widget library (16+ widgets including ColorPicker, DialogueWheel, NodeGraph)
- Theming system
- Animation support
- Layout management via FlexContainers for dynamic, responsive layouts
- Debug visualization tools

What Makes LUIS Different?

While there are several UI libraries for LÖVE, LUIS takes a unique approach by:

1. Separating the core UI management from widgets, allowing you to use just what you need
2. Grid-Based Design: Everything snaps to a customizable grid, making layout easier and more consistent
3. Layer System: Multiple UI layers that can be shown/hidden independently
4. FlexContainers: Powerful container widgets that can be nested, dragged, and resized
5. Built-in Gamepad Support: support for gamepad/joystick input incl. focus management!

Quick Example

Here is a simple example using only the core library and creating your own button widget (press 'TAB' for debug view):

Code: Select all

local initLuis = require("luis.init")

-- Direct this to your widgets folder.
local luis = initLuis()

-- Create a Button widget
local CustomButtonWidget = {}
function CustomButtonWidget.new(x, y, width, height, text, onClick)
    local self = {
        type = "CustomButtonWidget", position = {x=x, y=y},
        width = width, height = height, text = text,
        onClick = onClick, hovered = false, pressed = false
    }
    function self:update(mx, my)
        self.hovered = mx > self.position.x and mx < self.position.x + self.width and
                       my > self.position.y and my < self.position.y + self.height
    end
    function self:draw()
        love.graphics.setColor(self.pressed and {0.3,0.3,0.3} or {0.7,0.7,0.7})
        love.graphics.rectangle("fill", self.position.x, self.position.y, self.width, self.height, 3)
        love.graphics.setColor(1,1,1)
        love.graphics.print(self.text, self.position.x, self.position.y)
    end
    function self:click(_, _, button)
        if button == 1 and self.hovered then
            self.pressed = true
            if self.onClick then self.onClick() end
            return true
        end
        return false
    end
    function self:release(_, _, button)
        if button == 1 and self.pressed then
            self.pressed = false
            return true
        end
        return false
    end

    return self
end

-- Register the Button Widget to the LUIS core, create an Instance and us it
-- NOTE: The default method is to load them automatically by specifying a folder!
CustomButtonWidget.luis = luis
luis.widgets["CustomButtonWidget"] = CustomButtonWidget
luis["newCustomButtonWidget"] = CustomButtonWidget.new

function love.load()
    luis.newLayer("main")
    luis.enableLayer("main")
    luis.createElement("main", "CustomButtonWidget", 100, 200, 100, 50, "Click me!", function() print("Button clicked!") end)
end

function love.update(dt)
    luis.update(dt)
end

function love.draw()
    luis.draw()
end

function love.mousepressed(x, y, button, istouch)
    luis.mousepressed(x, y, button, istouch)
end

function love.mousereleased(x, y, button, istouch)
    luis.mousereleased(x, y, button, istouch)
end

function love.keypressed(key)
    if key == "tab" then -- Debug View
        luis.showGrid = not luis.showGrid
        luis.showElementOutlines = not luis.showElementOutlines
        luis.showLayerNames = not luis.showLayerNames
    end
    luis.keypressed(key)
end

Development Status

This is the first public release of LUIS, and while it's already functional, there are some known bugs and the API might change as I refine things. I'm actively working on improvements and would love to get feedback.
Pull requests, bug reports, and feature suggestions are very welcome! Feel free to check out the GitHub repository and contribute.

Thanks for checking out LUIS! Looking forward to seeing what you build with it.

[dusoft]

Hello,

this looks pretty good. I am going to test it, specifically the grid autosizing as I have some issues in my Layouter library that you have likely solved.

[SiENcE]

Hello,

thx. I don't know your layouter problem, but yes, check it out. The automatic resizing of the grid is modular. Not everything is implemented in the core or in the widgets (like snapping when moving, that's part of the program itself). But that has to do with the type of architecture I use. The Flexcontainer works good, but not 100% what i intended.

What is still missing is
- an anchor system for the layout and
- an improved method for handling touch, mouse, keyboard, and gamepad inputs simultaneously. Currently, gamepad and keyboard inputs have a focus mechanism, while touch and mouse inputs do not. This creates issues when all input methods are active at once.

For example, in the complex_menu sample, pressing a key or using the gamepad activates the focus system. Once a widget gains focus, input through mouse or touch becomes restricted, as the interaction is limited by the focused widget.

However, this is more of a higher level problem, as most games do not allow all forms of input at the same time. Maybe this is just an overly idealistic idea of mine :-).

[Perceptron]

Just wanted to tell you that I love LUIS! Very cool, I hope you stick with it, and maybe I can help out as I think I'm going to use it for a project.