besnoi/lovely-imgui

Modern Immediate-Mode library for LÖVE :hearts:

Lovely Imgui

LovelyImgui is a WIP immediate-mode gui written in pure Lua. It attempts to be simple, stupid and highly customizable!

Currently it doesn't support that many widgets but in the future (perhaps with support of contributors) it'll support many essential widgets and features! This limitation doesn't mean it's not fit for development - infact a complete project has been made with this GUI!!

The following screenshot can perhaps give you an idea of the number and type of widgets LI currently supports!

A demo of LovelyImgui

Here's a snippet showing a basic imgui created with Lovely-Imgui::

imgui = require 'imgui'

function love.draw()
  if imgui.button('Hello world') then
    imgui.label('You are clicking on the button!!')
  end
  imgui.draw()
end

Features of LovelyImgui

• Bloat-Free: Unlike Slab and SUIT, LI doesn't create a whole lot of tables or garbage! This gives LI a significant performance boost compared to forementioned libraries!
• Completely Customizable: You can change the colors or change the whole theme! Themes in LI are more like LAF in Java in the sense that themes not just define the look but also the "behaviour" - a feature you can exploit to make tweening possible in your theme!
• Simple and Comfortable Layout System: While still in progress, LI's layout system is based on rows and is very easy to understand! Ofcourse it comes with several limitations but for the simplest GUI the layout system can be very helpful!
• Responsiveness: Instead of talking, I guess I'll show you some GIFs:-

Documentation

Documentation will be live very soon once the alpha version is released! Curious souls can study the examples to learn how the library works!

Contribution

Making a GUI is easy! Making a reusable GUI is hard and by hard I mean really hard! There's currently a lot of stuff that I can't figure out (such as menu-bars, combo-boxes, windows, etc) so definitely I need some help. (And by help I mean "contribution" just so you don't get the wrong idea 😆)

lovely-imgui's Issues

Checkbox Widget Doesn't toggle state

First off, let me say I absolutely love what this library is trying to do and would very much like to see it finished.

In playing around with it, it seems the checkbox widget doesn't actually update the toggle variable when clicked. Investigating seems that the issue is that the if statement on line 44 of CheckBox.lua never is satisfied because the id is updated before it evaluates lastActiveItem.

I was able to get it to work by swapping out the if statement for the same one used in Button.lua

if uiState.hotItem==id and uiState.activeItem==id then

gamepad/keyboard support

First, this library looks awesome. Great work!

A common issue I have with love GUI libs is no gamepad support. I'm making a game that only uses gamepad/keys, but things like button could work if I could say "this is the current menu selection" or "the user has navigated to this button using the joypad".

I looked at the code and tried to figure it out, from an external-to-imgui perspective. This example is meant to use up/down keys and space to select:

imgui = require 'imgui'

local uiState = require "imgui.Core.UIState"

-- this tracks the current key choice
local currentItem = 1

-- NOTE: I'm new to imgui so there is probably a better way...
function love.draw()
  uiState.hotItem = currentItem

  imgui.layout.setFlex(true)
  imgui.layout.setColumns(2)

  if imgui.button('A') then
    imgui.label('You are clicking on the A button!!')
  else
    imgui.label('')
  end
  
  if imgui.button('B') then
    imgui.label('You are clicking on the B button!!')
  else
    imgui.label('')
  end
  
  if imgui.button('C') then
    imgui.label('You are clicking on the C button!!')
  else
    imgui.label('')
  end
  imgui.draw()
end

function love.keypressed(key)
  if key == 'space' then
    uiState.activeItem=currentItem
  end
  if key == 'up' then
    currentItem = currentItem - 1
  end
  if key == 'down' then
    currentItem = currentItem + 1
  end
  if currentItem > imgui['_genID'] then
    currentItem = 1
  end
  if currentItem < 1 then
    currentItem = imgui['_genID']
  end
end

function love.keyreleased(key)
  if key == 'space' then
    uiState.activeItem=nil
  end
end

It seems to be tracking the current-selection ok, but I can't quite figure out how to say "this was chosen".

Do you have a suggestion of a better way to do it? Is there interest in making this more internal (I am using _genID which seems hacky, but I bet widgets could even track this on their own.)

Here is a ready-made demo, just rename to demo.love:
demo.zip