GOOi, an Android-Oriented GUI Library

Showcase your libraries, tools and other projects that help your fellow love users.
User avatar
alberto_lara
Party member
Posts: 372
Joined: Wed Oct 30, 2013 8:59 pm

Re: Tavo's GUI for Android

Post by alberto_lara »

alberto_lara wrote:
norubal wrote: To Germanunkol, you're totally right, I almost forget the polygons, let me try that!
Done, looks like it works fine now :D
User avatar
alberto_lara
Party member
Posts: 372
Joined: Wed Oct 30, 2013 8:59 pm

Re: Tavo's GUI for Android

Post by alberto_lara »

Hello again, I just updated the post, new stuff:
  • Spinner
  • Support for image button and image label.
  • Corrected some ugly code
User avatar
I~=Spam
Party member
Posts: 206
Joined: Fri Dec 14, 2012 11:59 pm

Re: Tavo's GUI for Android

Post by I~=Spam »

This is really coming along! Great work! :nyu: :)
My Tox ID: 0F1FB9170B94694A90FBCF6C4DDBDB9F58A9E4CDD0B4267E50BF9CDD62A0F947E376C5482610
User avatar
alberto_lara
Party member
Posts: 372
Joined: Wed Oct 30, 2013 8:59 pm

Re: Tavo's GUI for Android

Post by 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
User avatar
alberto_lara
Party member
Posts: 372
Joined: Wed Oct 30, 2013 8:59 pm

Re: GOOi a GUI Library for Desktop and Touch screens.

Post by alberto_lara »

Just updated the post!
User avatar
alberto_lara
Party member
Posts: 372
Joined: Wed Oct 30, 2013 8:59 pm

Re: GOOi a GUI Library for Desktop and Touch screens.

Post by alberto_lara »

Added tooltips support for the components. Next thing: Dialogs.
User avatar
bakpakin
Party member
Posts: 114
Joined: Sun Mar 15, 2015 9:29 am
Location: Boston

Re: GOOi a GUI Library for Desktop and Touch screens.

Post by 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.
((_((_CRAYOLA_((_((_> GitHub <_((_((_CRAYOLA_((_(()
User avatar
alberto_lara
Party member
Posts: 372
Joined: Wed Oct 30, 2013 8:59 pm

Re: GOOi a GUI Library for Desktop and Touch screens.

Post by 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)
User avatar
Karai17
Party member
Posts: 930
Joined: Sun Sep 02, 2012 10:46 pm

Re: GOOi a GUI Library for Desktop and Touch screens.

Post by Karai17 »

A proper theme system would be nice for sure, and the ability to flow a layout.
STI - An awesome Tiled library
LÖVE3D - A 3D library for LÖVE 0.10+

Dev Blog | GitHub | excessive ❤ moé
User avatar
alberto_lara
Party member
Posts: 372
Joined: Wed Oct 30, 2013 8:59 pm

Re: GOOi a GUI Library for Desktop and Touch screens.

Post by 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:

Image
Image

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:

Image

And in the default gooi look:

Image

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 194 times
EDIT:
  • gooi.newCheckbox() became gooi.newCheck()
  • gooi.newTextfield() became gooi.newText()
  • gooi.newProgressBar() became gooi.newBar()
  • gooi.newJoystick() became gooi.newJoy()
Post Reply

Who is online

Users browsing this forum: Google [Bot] and 55 guests