Double post because there is now keyboard support (including tab ordering), and an input and checkbox widget. I also separated the widget style from the behavior code, so you can easily swap the global widget style. See quickie/style-default.lua for reference. You can also influence the colors by overwriting the gui.core.style.color and change the look of individual widgets by passing a custom draw function.
I will put this onto github and make a proper documentation soon-ish, but neither usage nor extension is really hard. You can probably grasp the basics of how to use the library by this snippet:
Code: Select all
local gui = require 'quickie'
function love.load()
love.graphics.setFont(love.graphics.newFont(20))
end
-- widgets are "created" by calling their corresponding functions in love.update.
-- if you want to remove a widget, simply don't call the function (just like with
-- any other love drawable). widgets dont hold their own state - this is your job:
--
-- sliders have a value and optional a minimum (default = 0) and maximum (default = 1)
local slider = {value = 10, min = 0, max = 100}
-- input boxes have a text and a cursor position (defaults to end of string)
local input = {text = "Hello, World!", cursor = 0}
-- checkboxes have only a `checked' status
local checkbox = {checked = false}
function love.update(dt)
-- widgets are defined by simply calling them. usually a widget returns true if
-- if its value changed or if it was activated (click on button, ...)
if gui.Input(input, 10, 10, 300, 20) then
print('Text changed:', input.text)
end
-- tab order is determined by the order you call the widgets.
if gui.Button('Clear', 320,10,100,20) then
input.text = ""
end
-- add more widgets here
end
function love.draw()
-- draw the widgets which were "created" in love.update
gui.core.draw()
end
function love.keypressed(key,code)
-- forward keyboard events to the gui. If you don't want widget tabbing and
-- input widgets, skip this line
gui.core.keyboard.pressed(key, code)
end
Implementing own widgets is also super easy. gui.core defines some functions to check mouse state, try grabing keyboard focus and more. This is the code to implement the button widget:
Code: Select all
-- (...):match("^(.+)%.[^%.]+") extracts the require base, e.g. when required with
-- require 'quickie.button', the base is 'quickie.'
local core = require((...):match("^(.+)%.[^%.]+") .. '.core')
-- the widget
return function(title, x,y, w,h, draw)
-- Generate unique identifier for gui state update and querying.
local id = core.generateID()
-- The widget mouse-state can be:
-- hot (mouse over widget),
-- active (mouse pressed on widget) or
-- normal (mouse not on widget and not pressed on widget).
--
-- core.mouse.updateState(id, x,y,w,h) updates the state for this widget.
core.mouse.updateState(id, x,y,w,h)
-- core.makeTabable makes the item focus on tab. Tab order is determied
-- by the order you call the widget functions.
core.makeTabable(id)
-- core.registerDraw(id, drawfunction, drawfunction-arguments...)
-- shows widget when core.draw() is called.
core.registerDraw(id, draw or core.style.Button, title,x,y,w,h)
return core.mouse.releasedOn(id) or
(core.keyboard.key == 'return' and core.hasKeyFocus(id))
end
And the relevant drawing function is:
Code: Select all
function Button(state, title, x,y,w,h)
local c = color[state]
if state ~= 'normal' then -- draw drop shadow
love.graphics.setColor(c.fg)
love.graphics.rectangle('fill', x+3,y+3,w,h)
end
love.graphics.setColor(c.bg)
love.graphics.rectangle('fill', x,y,w,h)
love.graphics.setColor(c.fg)
local f = love.graphics.getFont()
love.graphics.print(title, x + (w-f:getWidth(title))/2, y + (h-f:getHeight(title))/2)
end
Code is here:
https://github.com/vrld/Quickie.