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:
gooi.newLabel({
text = "label",
x = 4,
y = 8,
w = 100,
h = 25,
icon = "images/icon.png",
group = "grp1" -- See details in "Using groups" section
})- 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
gooi.newButton({
text = "button",
x = 4,
y = 8,
w = 100,
h = 25,
icon = "images/icon.png",
group = "grp1"
})- 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
gooi.newSlider({
value = 0.3,
x = 4,
y = 8,
w = 100,
h = 25,
group = "grp1"
})- vertical() ➤ Changes horizontal to vertical mode
- setValue(number) ➤ A number between 0 and 1
- getValue() ➤ Returns a number between 0 and 1, with format #.##
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
})- change() ➤ Toggles the checked state
-- 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",
})- setRadioGroup(string) ➤ Different to any GUI group, prefereably
- select() ➤ Selects this radio
gooi.newText({
text = "radio",
x = 4,
y = 8,
w = 100,
h = 25,
group = "grp1",
})- getText() ➤ Returns the current text
- setText(string) ➤ Sets the text
gooi.newBar({
value = 0.75,
x = 4,
y = 8,
w = 100,
h = 25,
group = "grp1"
})- 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
gooi.newSpinner({
min = -20,
max = 20,
value = 0,
x = 4,
y = 8,
w = 100,
h = 25,
group = "grp1"
})- plus() ➤ Adds 1 to the current value
- minus() ➤ Subtracts 1 to the current value
- getValue() ➤ Returns the current value
gooi.newJoy({
x = 4,
y = 8,
size = 100, -- width and height
deadZone = 0.2 -- deadzone = 20%
image = "images/icon.png",
group = "grp1"
})- 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
gooi.newKnob({
value = 0.2 -- default = 0.5
x = 4,
y = 8,
size = 100,-- width and height
group = "grp1"
})- getValue() ➤ Returns a number between 0 and 1, with format #.##
- setValue(number) ➤ A number between 0 and 1
For this component see Using panels section
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"
})
gooi.confirm({
text = "Do you like GOOi?",
ok = function()
-- Yay!
end,
cancel = function()
-- :(
end
})
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 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
- 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
- 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