GOOi, an Android-Oriented GUI Library

[alberto_lara]

To Germanunkol, you're totally right, I almost forget the polygons, let me try that!

Done, looks like it works fine now

[alberto_lara]

Hello again, I just updated the post, new stuff:

• Spinner
• Support for image button and image label.
• Corrected some ugly code

[I~=Spam]

This is really coming along! Great work!

[alberto_lara]

A little late but, thanks! Just updated the post again, fixed some problems on the gui, the main change was on events, they were changed from this:

Code: Select all

gui.get("btn1").events.onPress = function(c) foo() end

to this:

Code: Select all

gui.get("btn1"):onPress(function(c) foo() end)

Also, please check out this other thing, I'm making it using this gui, hope you like it: viewtopic.php?f=5&t=79936

[alberto_lara]

Just updated the post!

[alberto_lara]

Added tooltips support for the components. Next thing: Dialogs.

[bakpakin]

Oh wow! This is awesome! A gui library with mobile in mind. This is completely opposite from loveframes, and it looks beautiful. Are graphics theme-able / customizable, though? That would be really awesome.

[alberto_lara]

The graphics are almost 100% customizable by changing just a few variables (100% if you like to go deeper into the code) but I have not something like a function to set a determined style, I could add something like this though:

Code: Select all

local style = {
   bgColor = {32, 32, 32},
   fgColor = {255, 255, 255},
   cornerRadius = 20,
   ...
}

gooi.setStyle(style)

[Karai17]

A proper theme system would be nice for sure, and the ability to flow a layout.

[alberto_lara]

Hi, I just uploaded some changes to github, I've been working on a grid layout and sort of a theme system.

By using the next code:

Code: Select all

gooi.newPanel("thePanel", 10, 10, 500, 400, "grid 13x3")-- 13 rows and 3 colums.
		:setRowspan(6, 1, 2)-- rowspan for 'super check' checkbox.
		:setColspan(6, 2, 2)-- colspan for the 'xxx' text field.
		:setRowspan(10, 1, 4)-- For the giant slider.
		:setColspan(10, 1, 3)-- For the giant slider.
		:add(
			gooi.newLabel(1, "Left Label"):setOrientation("left"),
			gooi.newLabel(2, "Center Label"):setOrientation("center"),
			gooi.newLabel(3, "Right Label"),
			gooi.newLabel(4, "Left Label"):setOrientation("left"):setImage(dirImgs.."h.png"),
			gooi.newLabel(5, "Center Label"):setOrientation("center"):setImage(dirImgs.."h.png"),
			gooi.newLabel(6, "Right Label"):setImage(dirImgs.."h.png"),
			gooi.newButton(7, "Left Button"):setOrientation("left"),
			gooi.newButton(8, "Center Button"),
			gooi.newButton(9, "Right Button"):setOrientation("right"),
			gooi.newButton(10, "Left Button"):setOrientation("left"):setImage(dirImgs.."coin.png"),
			gooi.newButton(11, "Center Button"):setImage(dirImgs.."coin.png"),
			gooi.newButton(12, "Right Button"):setOrientation("right"):setImage(dirImgs.."coin.png"),
			gooi.newSlider(13),
			gooi.newRadio(14, "Radio 1"):setRadioGroup("g1"):select(),
			gooi.newRadio(15, "Radio 2"):setRadioGroup("g1"),
			gooi.newCheck(16, "super check"),
			gooi.newText(17, "xxx"),
			gooi.newBar(18),
			gooi.newSpinner(19),
			gooi.newJoy(20),
			gooi.newPanel("panel_child"):add(
				gooi.newSlider("sli1"),
				gooi.newButton("btn2", "Btn"),
				gooi.newButton("btn3", "Btn")
			)
		)

		-- Add component in that row, col:
		gooi.get("thePanel"):add(gooi.newButton("btn_x", "Button in 9,2"), "9,2")
		gooi.get("thePanel"):add(gooi.newSlider("sli_x"), "10,1")

you will get a panel with a grid layout like this one, pink lines are just for debugging:




that black looking is set with the following lines (this, previous to creating the components):

Code: Select all

seriousBlack = {
		bgColor = {0, 0, 0, 127},
		fgColor = {255, 255, 255, 255},
		howRound = 0,
		showBorder = false,
		font = gr.newFont(dirFonts.."ProggySquare.ttf", 16)
	}
gooi.setStyle(seriousBlack)

and using this other data...

Code: Select all

roshita = {
		bgColor = "#AD00AD",
		fgColor = "#ffffff",
		howRound = 1,
		showBorder = true,
		borderColor = "#990044",
		font = gr.newFont(dirFonts.."Grundschrift-Bold.otf", 16)
	}

you would get this look:



And in the default gooi look:



Please note, for grid layouts:

• Joysticks try to remain with width = height, always
• Panels have just a 3-level hierarchy, you can create a panel, add a panel inside, but not another panel with childs inside this last
• Panels and childs are not strictly related, this is, not drawing panels like:

  Code: Select all

  gooi.draw("cutePanels")

  doesn't necessarily mean other panel's childs won't be drawn.

Now working on:

• Game layout
• Absolute layout
• Update the Sprite editor with this layout thing

gooi.love

(295.98 KiB) Downloaded 217 times

EDIT:

• gooi.newCheckbox() became gooi.newCheck()
• gooi.newTextfield() became gooi.newText()
• gooi.newProgressBar() became gooi.newBar()
• gooi.newJoystick() became gooi.newJoy()