Guilty - yet another GUI library

[evölbug]

So, here's the freshman trying to bring a bit of löve to the world...

I have just recently found Lua and Löve, along with Moonscript, and I thought to myself - what's the best way to learn a couple languages and a framework at once! By builting a GUI library! Right??? Probably the worst idea I have ever had...

So at first I was just messing around, but now I quite want to make something useful. This is where Guilty comes in.

I plan Guilty to be a pure-Löve, non-immediate-mode, highly-themeable, clean and easy to use GUI framework. Hopefully.

Below is a demo of the library

Code: Select all

-- evolbug 2016-2017, MIT license
-- Guilty testbench

local gui = require "guilty.guilty"
local LICENSE = require('miscellaneous').LICENSE


local lg = love.graphics 


function Window(x, y, w, h, otherColor)
    if otherColor==nil then otherColor=false end
    
    local win = gui.Container(x, y, w, h)

    local bg = win:attach(gui.Rectangle('center', 'center', win.w-2, win.h-2))
    if otherColor then
        bg.theme.color = function() return gui.RGBA(gui.theme.color.secondary) end
    end

    win:attach(gui.Border())

    return win
end


function love.load()

    love.window.setMode(500,400)
    love.keyboard.setKeyRepeat(true)

    -- main window
    window = Window('center','center', lg.getWidth()-10, lg.getHeight()-10)
    window:attach(gui.Text('center', 5, 'evolbug 2016-2017, MIT license. Guilty .4'))


    -- inner windows
    local license = window:attach(Window('center', 20, window.w-10, 200, true))
        local ltext = license:attach(gui.TextBoxScrollable(5, 5, license.w-10, license.h-10))
        ltext.text:set(LICENSE)


     local win2 = window:attach(Window('center',225, window.w-10, window.h-240, true))

        local textbax = win2:attach(gui.TextBox(1, 1, win2.w/2, win2.h-2))
            textbax.text:set("Write text below and press the button to add it here\n")

        local inputbox = win2:attach(gui.TextInput(win2.w/2+2, 2, win2.w/2-4, 40))
            inputbox:attach(gui.Border())
        
        local textbtn = win2:attach(gui.Button(win2.w/2+2, 45, win2.w/2-4,30, 'Add text'))
            textbtn:attach(gui.Border())
            textbtn.onclick.release = function() textbax.text:add(inputbox.text.buffer) end

        --extra container for checkboxes
        local checks = win2:attach(gui.Container(win2.w/2+2, 77, win2.w/2-4, 70))
            checks:attach(gui.Border())
            local ch1 = checks:attach(gui.Checkbox(10, 5, 15, 'show input and button', true))
                ch1.onclick.any = function()
                    textbtn.visible = ch1.state
                    inputbox.visible = ch1.state
                end

            local ch2 = checks:attach(gui.Checkbox(10, 28, 15, 'show text', true))
                ch2.onclick.any = function() textbax.visible = ch2.state end
    
            local ch3 = checks:attach(gui.Checkbox(10, 50, 15, 'show license', true))
                ch3.onclick.any = function() license.visible = ch3.state end
end


function love.draw()
    lg.clear(gui.RGBA(gui.theme.color.secondary))
    window:draw()
end

function love.update(dt)
    window:event{['delta']={dt}}
end
    
function love.textinput(text)
    window:event{['textinput']={text}}
end

function love.keypressed(key)
    window:event{['keypress']={key}}
end

function love.mousepressed(x, y, button, istouch)
    window:event{['mousepress']={x, y, button, istouch}}
end

function love.mousereleased(x, y, button, istouch)
    window:event{['mouserelease']={x, y, button, istouch}}
end

function love.wheelmoved(x, y)
    window:event{['wheelmove']={x, y}}
end

function love.mousemoved(x, y)
    window:event{['mousemove']={x, y}}
end

Demo.gif (153.54 KiB) Viewed 5952 times

Github: https://github.com/evolbug/Guilty
Docs: https://evolbug.github.io/Guilty

[trelemar]

Nice start! However you may want to avoid using a table called gui to store your functions. I'd use the name of your library.

Code: Select all

gui.load() --->
guilty.load()

window = gui.Window() --->
window = guilty.Window()

The end user likely will want to use "gui" as a table themselves.
Also if your writing in moonscript no one will use your lib without documentation.

[zorg]

Nice start! However you may want to avoid using a table called gui to store your functions. I'd use the name of your library.
The end user likely will want to use "gui" as a table themselves.
Also if your writing in moonscript no one will use your lib without documentation.

Do note that the example code was the "user side" code; and from the looks of it, the library neatly returns itself into a local variable upon require-ing it... so whether you call that variable gui, guilty or friedBananaPancakes, it doesn't really matter, and it's not the library's job to stop the user in that regard. (nor could it, except for it itself defining guilty as a global, but that'd be worse)

I agree with the last sentence though.

[trelemar]

Nice start! However you may want to avoid using a table called gui to store your functions. I'd use the name of your library.
The end user likely will want to use "gui" as a table themselves.
Also if your writing in moonscript no one will use your lib without documentation.

Do note that the example code was the "user side" code; and from the looks of it, the library neatly returns itself into a local variable upon require-ing it... so whether you call that variable gui, guilty or friedBananaPancakes, it doesn't really matter, and it's not the library's job to stop the user in that regard. (nor could it, except for it itself defining guilty as a global, but that'd be worse)

I agree with the last sentence though.

Ahh completely overlooked the first line of code. Please ignore my post

[evölbug]

Also if your writing in moonscript no one will use your lib without documentation.

I am indeed writing it in Moonscript, and don't worry, I will write a documentation for it.

I had to make a sacrifice between being pure-Lua, or having cleaner syntax with a bit more abstractions to work with and thus faster development.

[evölbug]

New iteration of Guilty. I feel pretty confident with its structure now, so it won't be long before I release the first version.

Example code (moonscript)

Code: Select all

gui = require "guilty"
lg = love.graphics

love.load = ->
    love.window.setMode 800,600, resizable: true
    export window = gui.Container 10, 10, lg.getWidth!-20, lg.getHeight!-20
    
    with window
        with \attach gui.Rectangle 0,0, .w, .h -- window border
            .theme.color = gui.RGBA 0,0,0,1
            .theme.fill = 'line'

        debug = \attach gui.TextBox .w/2, 2, .w/2-2, .h-4 -- debugging textbox
        
        with \attach gui.Button 10, 10, 100, 30, 'button up!'
            .onclick.any = (x, y) => -- any button clicked
                debug\add {gui.RGBA(0,1,0,1), "[button] #{x}:#{y} pressed\n"} -- add line to textbox
            .onclick.release = (x, y) => -- any button released
                debug\add {gui.RGBA(1,0,0,1), "[button] #{x}:#{y} released\n"}


        che1 = \attach gui.Checkbox 10,41, 20,20, 'i is checkbox' -- checkbox with label
        with \attach gui.Text 200, che1.y, 'turn up!' -- some text
            .visible = che1.state -- hide/show text depending on checkbox' state
            che1.onclick.any = (x, y) =>
                .visible = che1.state
                c = che1.state and gui.RGBA(0,1,0,1) or gui.RGBA(1,0,0,1)
                debug\add {"[check1] #{x}:#{y} toggled", c, " #{che1.state}\n"}

        che2 = \attach gui.Checkbox 10,62, 20,20, 'checkbox too'
        with \attach gui.Text 200, che2.y, 'turn up!'
            .visible = che2.state
            che2.onclick.any = (x, y) =>
                .visible = che2.state
                c = che2.state and gui.RGBA(0,1,0,1) or gui.RGBA(1,0,0,1)
                debug\add {"[check2] #{x}:#{y} toggled", c, " #{che2.state}\n"}

        che3 = \attach gui.Checkbox 10,83, 20,20, 'me check'
        with \attach gui.Text 200, che3.y, 'turn up!'
            .visible = che3.state
            che3.onclick.any = (x, y) =>
                .visible = che3.state
                c = che3.state and gui.RGBA(0,1,0,1) or gui.RGBA(1,0,0,1)
                debug\add {"[check2] #{x}:#{y} toggled", c, " #{che3.state}\n"}

love.draw = ->
    lg.clear gui.RGBA!
    window\draw! -- render window

love.mousepressed = (x, y, button, istouch) ->
    window\event mousepress: {x, y, button, istouch} -- pass event to window

love.mousereleased = (x, y, button, istouch) ->
    window\event mouserelease: {x, y, button, istouch}

guilty3.PNG (38.75 KiB) Viewed 6570 times

[evölbug]

More teasing! See main post

[alberto_lara]

I like the concept, maybe you could take a look at GÖÖi (below in my signature) and bring some ideas to your library

[evölbug]

So it's been a little bit more than a month, sorry for the silence, but I was still working on it in the meantime
(I was reinstalling my OS multiple times (Linux eh), was busy with school and etc.)

The only thing left to sort out are nice theme definitions and some kind of documentation.

Will release soon

P.S. alberto, I did check out GÖÖi, and it's a nice lib, though mine currently is going to be more oriented towards desktop

[evölbug]

Hello again, I have updated the main post and now there's a .love file you can check out! Documentation is coming very soon!