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

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("checkbox")
gooi.newCheck("checkbox", 4, 8)
gooi.newCheck("checkbox", 4, 8, 100, 25)
gooi.newCheck({
    text = "checkbox",
    x = 4,
    y = 8,
    w = 100,
    h = 25,
    group = "grp1",
    checked = true -- default = false
})

Functions:

• change() ➤ Toogle 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 it
• 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 itselft but an attribute, the usage is simple:

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

Generic component

Generic components are created implicitly when a button, a label or any other one is created (something similar to Heritage in Java or Python). This is the list of generic 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
• setGroupVisible(string) ➤ Applies setVisible() to all the components of a given group
• setEnabled(boolean) ➤ To enable/disable the current component and its children, if any
• setGroupEnable(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
• setOpaque(boolean) ➤ Useful for labels, though they can look like buttons when opaque
• setBounds(string) ➤ Sets the bounds of the component, useful for the "free" ones (no layout)
• 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

NOTE: 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