[Lib] SUIT - Simple User Interface Toolkit

Showcase your libraries, tools and other projects that help your fellow love users.
User avatar
vrld
Party member
Posts: 917
Joined: Sun Apr 04, 2010 9:14 pm
Location: Germany
Contact:

Re: [Lib] SUIT - Simple User Interface Toolkit

Post by vrld »

padicao2010 wrote: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.
padicao2010 wrote:How about "Hold Backspace to delete multiple characters"?
Already possible: [wiki]love.keyboard.setKeyRepeat[/wiki]
I have come here to chew bubblegum and kick ass... and I'm all out of bubblegum.

hump | HC | SUIT | moonshine
User avatar
miko
Party member
Posts: 410
Joined: Fri Nov 26, 2010 2:25 pm
Location: PL

Re: [Lib] SUIT - Simple User Interface Toolkit

Post by 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
My lovely code lives at GitHub: http://github.com/miko/Love2d-samples
User avatar
vrld
Party member
Posts: 917
Joined: Sun Apr 04, 2010 9:14 pm
Location: Germany
Contact:

Re: [Lib] SUIT - Simple User Interface Toolkit

Post by vrld »

miko wrote: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.
I have come here to chew bubblegum and kick ass... and I'm all out of bubblegum.

hump | HC | SUIT | moonshine
Frohman
Prole
Posts: 21
Joined: Sat Dec 08, 2012 12:32 pm

Re: [Lib] SUIT - Simple User Interface Toolkit

Post by 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
Prole
Posts: 15
Joined: Wed Jan 15, 2014 8:38 am

Re: [Lib] SUIT - Simple User Interface Toolkit

Post by padicao2010 »

vrld wrote: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?
User avatar
vrld
Party member
Posts: 917
Joined: Sun Apr 04, 2010 9:14 pm
Location: Germany
Contact:

Re: [Lib] SUIT - Simple User Interface Toolkit

Post by vrld »

padicao2010 wrote: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.
I have come here to chew bubblegum and kick ass... and I'm all out of bubblegum.

hump | HC | SUIT | moonshine
User avatar
miko
Party member
Posts: 410
Joined: Fri Nov 26, 2010 2:25 pm
Location: PL

Re: [Lib] SUIT - Simple User Interface Toolkit

Post by 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

My lovely code lives at GitHub: http://github.com/miko/Love2d-samples
User avatar
vrld
Party member
Posts: 917
Joined: Sun Apr 04, 2010 9:14 pm
Location: Germany
Contact:

Re: [Lib] SUIT - Simple User Interface Toolkit

Post by vrld »

miko wrote: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 ;)
I have come here to chew bubblegum and kick ass... and I'm all out of bubblegum.

hump | HC | SUIT | moonshine
User avatar
murks
Party member
Posts: 185
Joined: Tue Jun 03, 2014 4:18 pm

Re: [Lib] SUIT - Simple User Interface Toolkit

Post by 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
User avatar
murks
Party member
Posts: 185
Joined: Tue Jun 03, 2014 4:18 pm

Re: [Lib] SUIT - Simple User Interface Toolkit

Post by 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...
Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests