Using components

• Label
• Button
• Slider
• Check Box
• Radio Button
• Text Field
• Progress Bar
• Spinner
• Joystick
• Knob
• Panel
• Modal
• Tooltip

Part of the API is applicable for any component, see this:

• Generic Component

And don't forget:

• Important Notes

Label

gooi.newLabel({
    text = "label",
    x = 4,
    y = 8,
    w = 100,
    h = 25,
    icon = "images/icon.png",
    group = "grp1" -- See details in "Using groups" section
})

Functions:

• setText(string|number) ➤ It uses tostring() internally
• setAlign(string) ➤ "left", "center" or "right" Removed in 0.0.4
• setIcon(string|Image) ➤ The string is the path to image

Button

gooi.newButton({
    text = "button",
    x = 4,
    y = 8,
    w = 100,
    h = 25,
    icon = "images/icon.png",
    group = "grp1"
})

Functions:

• setText(string|number) ➤ It uses tostring() internally
• setAlign(string) ➤ "left", "center" or "right" Removed in 0.0.4
• setIcon(string|Image) ➤ The string is the path to image

Slider

gooi.newSlider({
    value = 0.3,
    x = 4,
    y = 8,
    w = 100,
    h = 25,
    group = "grp1"
})

Functions:

• vertical() ➤ Changes horizontal to vertical mode
• setValue(number) ➤ A number between 0 and 1
• getValue() ➤ Returns a number between 0 and 1, with format #.##

Check Box

gooi.newCheck({
    text = "checkbox",
    x = 4,
    y = 8,
    w = 100,
    h = 25,
    group = "grp1",
    checked = true -- default = false
})

Functions:

• change() ➤ Toggles the checked state

Radio Button

-- Examples:
gooi.newRadio({
    text = "radio",
    radioGroup = "civil-status" -- similar to radio name attribute in HTML
    x = 4,
    y = 8,
    w = 100,
    h = 25,
    selected = true, -- default = false
    group = "grp1",
})

Functions:

• setRadioGroup(string) ➤ Different to any GUI group, prefereably
• select() ➤ Selects this radio

Text Field

gooi.newText({
    text = "radio",
    x = 4,
    y = 8,
    w = 100,
    h = 25,
    group = "grp1",
})

Functions:

• getText() ➤ Returns the current text
• setText(string) ➤ Sets the text

Progress Bar

gooi.newBar({
    value = 0.75,
    x = 4,
    y = 8,
    w = 100,
    h = 25,
    group = "grp1"
})

Functions:

• changeValue(number[,delta]) ➤ Number between 0 and 1, use delta for a gradual change
• getValue() ➤ Returns a number between 0 and 1, with format #.##
• decreaseAt(number) ➤ Amount per second, it automatically changes value over time
• increaseAt(number) ➤ Same as decreaseAt(), in the other direction
• setWidth(w) ➤ Sets the width of the component

Spinner

gooi.newSpinner({
    min = -20,
    max = 20,
    value = 0,
    x = 4,
    y = 8,
    w = 100,
    h = 25,
    group = "grp1"
})

Functions:

• plus() ➤ Adds 1 to the current value
• minus() ➤ Subtracts 1 to the current value
• getValue() ➤ Returns the current value

Joystick

gooi.newJoy({
    x = 4,
    y = 8,
    size = 100, -- width and height
    deadZone = 0.2 -- deadzone = 20%
    image = "images/icon.png",
    group = "grp1"
})

Functions:

• xValue() ➤ Return the horizontal value, a number between -1 and 1, with format #.##
• yValue() ➤ Return the vertical value, a number between -1 and 1, with format #.##
• setImage(string|Image) ➤ Sets an image as the actual joystick
• noSpring() ➤ Using this, the joystick stays in the given position/direction
• noScaling() ➤ To not scale image set as stick
• anyPoint() ➤ To move stick even if the touch/click is not over the central circle
• setDigital() ➤ Converts from analog to an 8 direction joystick, arcade style
• direction() ➤ Returns "l", "r", "t" "b", "bl", "br", "tl" or "tr" when digital

Knob

gooi.newKnob({
    value = 0.2 -- default = 0.5
    x = 4,
    y = 8,
    size = 100,-- width and height
    group = "grp1"
})

Functions:

• getValue() ➤ Returns a number between 0 and 1, with format #.##
• setValue(number) ➤ A number between 0 and 1

Panel

For this component see Using panels section

Modal

Modals are little windows which you can't close until an action is selected, the possible actions are: "OK", "Cancel" and "Yes" (labels are parametrizable). GÖÖi has alert() and confirm() modals, the syntax is simple:

gooi.alert({
    text = "Alert msg"
})

Result:

gooi.confirm({
    text = "Do you like GOOi?",
    ok = function()
        -- Yay!
    end,
    cancel = function()
        -- :(
    end
})

Tooltip

A tooltip is not a component itself but an attribute, the usage is simple:

gooi.newButton({text = "new button"}):setTooltip("this is a tooltip")

Generic component

All GOOi components can access these functions:

• setGroup(string) ➤ Defines the GUI group, see Using groups for details
• setVisible(boolean) ➤ To hide/show the current component and its children, if any
• setEnabled(boolean) ➤ To enable/disable the current component and its children, if any
• setOpaque(boolean) ➤ Useful for labels, though they can look like buttons when opaque
• setBounds(number, number[, number, number]) ➤ Receives x, y, w and h
• setBGImage(string|Image) ➤ Sets a background image for the component (stretched)
• overIt([number,number]) ➤ Returns true if the mouse or touch is over the given component
• setStyle(object) ➤ An object with the style properties, see Using the theme system for details
• bg([string|table]) ➤ Changes the background, it can be a CSS string or an RGB table
• fg([string|table]) ➤ Same for the foreground (white by default)
• setRadius([number,[number]]) ➤ Outer and inner radius (in pixels)
• primary() ➤ bootstrap 4 style analog (default style)
• success() ➤ bootstrap 4 style analog
• info() ➤ bootstrap 4 style analog
• warning() ➤ bootstrap 4 style analog
• danger() ➤ bootstrap 4 style analog
• secondary() ➤ bootstrap 4 style analog
• inverted() ➤ bootstrap 4 style analog

These ones are called directly from the gooi table:

• setGroupVisible(string) ➤ Applies setVisible() to all the components of a given group
• setGroupEnabled(string) ➤ Applies setEnabled() to all the components of a given group
• getByGroup(string) ➤ Gets a list of elements matching the group like "menu_screen"
• getByGroupAndType(string, string) ➤ "select_character_screen" and "button", for instance
• setStyle(object) ➤ An object with the style properties, see Using the theme system for details
• roughShapes() ➤ to use "rough" filter in line shapes

NOTES:

• bg(string|table) shouldn't be used in love.update or love.draw, it can be slow, in the other hand, bg() with no parameters is safe to use anywhere
• when using GOOi in a desktop environment, call gooi.desktopMode() before creating any component
• Depending on how complex the GUI is, gooi.update(), gooi.keypressed() and other may or may not be needed, even so, it is recommended to use all of these even if you're using only a button and a label:

function love.mousepressed(x, y, button)     gooi.pressed() end
function love.mousereleased(x, y, button)    gooi.released() end
function love.textinput(text)                gooi.textinput(text) end
function love.keypressed(k, code, isrepeat)  gooi.keypressed(k, code) end
function love.keyreleased(k, code, isrepeat) gooi.keyreleased(k, code) end

function love.update(dt)
  gooi.update(dt)
end