[Lib] SUIT - Simple User Interface Toolkit

[vrld]

SUIT need 0.10?

Yes. The main reason are the different mouse constants. It might work with 0.9.2 if you replace line 139 in core.lua.

How about "Hold Backspace to delete multiple characters"?

Already possible: [wiki]love.keyboard.setKeyRepeat[/wiki]

[miko]

Nice library, thanks!
Is it possible to set a widget state? Currently the widget is actice when a mouse is hovering over it, but I would like to use keyboard to select buttons (and see which is selected/active), and input to get a focus even if the mouse is not over it.

Btw, this library assumes that draw() and update() are called after each other. To save some CPU cycles in my app, I call draw() every few frames, but then update() gets many keypresses instead of one. The workaround is to use enterFrame:

Code: Select all

function love.update(dt)
  myupdate(dt)
  suit.enterFrame()
  myupdate(dt)
end

[vrld]

Is it possible to set a widget state? Currently the widget is actice when a mouse is hovering over it, but I would like to use keyboard to select buttons (and see which is selected/active), and input to get a focus even if the mouse is not over it.

It's undocumented, but you can set the id of the currently hovered and active (hovered and mouse down) item. You can get the id from the return state or provide your own id (can be any lua object) in the options (see here):

Code: Select all

suit.Button("Click?", {id = "button-1"}, suit.layout:row())
suit.setHovered("button-1")
-- or:
suit.setHovered(suit.Button("Click?", suit.layout:row()).id)

You can also query the hovered and active items, see here.

Finally, you can also ignore the real mouse completely and simulate mouse movement presses with suit.updateMouse(x,y,button_down).

Note that the widget(...).hit reacts to mouse presses only, so you may have to rewrite some of the widget functions.

Synchronizing keyboard and mouse was a major hassle and source of bugs in Quickie, which is why keyboard selection was dropped in SUIT. I will (at some point in the future) add the above to the documentation.

[Frohman]

Fantastic work, man.
I was literally looking for the Quickie repo just now to fix it for .10 and add mobile keyboard support, but found SUIT instead, haha!

About the only thing I can think of within my first 5 minutes of messing with it is some way to specify pixel scale, or at least rescale all elements, as everything is tiny on phone screens with high DPI's. I might be missing something, though.

Disregard that -- I was scaling the label size, not the element size (of course, you'll want specify your DPI-dependent font).

[padicao2010]

Finally, you can also ignore the real mouse completely and simulate mouse movement presses with suit.updateMouse(x,y,button_down).

Function updateMouse needs position (x,y), which may not be calculated comfortably.

I want to tab switch between different UI components.

Have any good idea?

[vrld]

Function updateMouse needs position (x,y), which may not be calculated comfortably.

You don't need to calculate it, because you already know it. Either you have provided it yourself:

Code: Select all

suit.Button("Click?", 100,100, 150,30)

or you can note the cell coordinates from the layout:

Code: Select all

local x,y,w,h = suit.layout:row()
suit.Button("Click?", x,y,w,h)

All you have to do is maintain the currently keyboard-"hovered" item and fake the mouse position to that item, e.g.

Code: Select all

local x,y,w,h

x,y,w,h = suit.layout:row()
if keyboard_hovered == "button-1" then suit.updateMouse(x,y) end
suit.Button("This", {id = "button-1"}, x,y,w,h)

x,y,w,h = suit.layout:row()
if keyboard_hovered == "button-2" then suit.updateMouse(x,y) end
suit.Button("is", {id = "button-2"}, x,y,w,h)

x,y,w,h = suit.layout:row()
if keyboard_hovered == "button-3" then suit.updateMouse(x,y) end
suit.Button("untested", {id = "button-3"}, x,y,w,h)

How you switch the active item and what you count as mouse click is up to you.

[miko]

How do I use predefined layouts? Suppose I want to convert following program to use predefined layouts (so I could use "fill" instead of calculating widths):

Code: Select all

suit = require 'SUIT'

function love.draw()
  suit.draw()
end

function love.update(dt)
  suit.layout:reset(10, 0, 5, 5)
  suit.Button('Button1', { align='center'}, suit.layout:row(500, 20))
  suit.layout:push(suit.layout:row())
    suit.layout:padding(5, 5)
    suit.Button('Button2', { align='center'}, suit.layout:col((500-5*3)/3, 20))
    suit.Button('Button3', { align='center'}, suit.layout:col('max', 20))
    suit.Button('Button4', { align='center'}, suit.layout:col('max', 20))
  suit.layout:pop()
  suit.layout:push(suit.layout:row())
    suit.layout:padding(3, 3)
    suit.Button('Button5', { align='center'}, suit.layout:col((500-3*3)/2, 20))
    suit.Button('Button6', { align='center'}, suit.layout:col('max', 20))
  suit.layout:pop()
end

[vrld]

How do I use predefined layouts? Suppose I want to convert following program to use predefined layouts (so I could use "fill" instead of calculating widths):[/code]

Better late than never: The (almost) same layout as precomputed layout (with some very recent, not yet documented functions):

Code: Select all

function love.update()
	suit.layout:reset(10, 0, 5, 5)
	suit.Button('Button1', suit.layout:row(500, 20))

	local inner = suit.layout:cols{ -- same padding as parent layout
		min_width = 500, pos = {suit.layout:nextRow()}, -- :nextRow() gives upper left coordinates of the next row
		{'fill', 20}, {'fill'}, {'fill'} }

	suit.Button('Button2', inner.cell(1))
	suit.Button('Button3', inner.cell(2))
	suit.Button('Button4', inner.cell(3))

	-- advance nested row of buttons
	suit.layout:row(inner:size())

	inner = suit.layout:cols{
		min_width = 500, pos = {suit.layout:nextRow()}, padding = {3}, -- different padding than parent
		{'fill', 20}, {'fill'} }

	suit.Button('Button5', inner.cell(1))
	suit.Button('Button6', inner.cell(2))
end

Does that work for you? Could the API be improved?

Precomputed layouts with nested rows and cols are not possible at the moment. Pull requests that implement that are very welcome

[murks]

I encountered a problem I do not quite understand.
I use SUIT and hump.gamestate.
I created a minimal menu in a menu state with a start and exit button. A click onto the start button enters the game state.

Code: Select all

	local bstart = suit.Button("Start", {font=FONT.big}, suit.layout:row(bw, bh))
	if bstart.hit then
		GS.switch(STATE.GAME)
	end

If I try to return to the menu state, the button is hit again automatically, even if I have manually reset it to false, like so:

Code: Select all

local bstart = suit.Button("Start", {font=FONT.big}, suit.layout:row(bw, bh))
	if bstart.hit then
      bstart.hit = false
		GS.switch(STATE.GAME)
	end

[murks]

It seems that when the button is created after switching back to the menu state it is already hovered and hit.

Code: Select all

	print(bstart)
	print(INSPECT(bstart))
	if bstart.hit and bstart.hovered then
		print('menu start clicked')
		GS.switch(STATE.GAME)
	end

produces:

Code: Select all

nil
table: 0x4167f710
{
  entered = false,
  hit = true,
  hovered = true,
  id = "Start",
  left = false
}
menu start clicked

Something is very wrong here...