Page 2 of 14

Re: Tavo's GUI for Android

Posted: Mon Mar 09, 2015 1:49 am
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

Re: Tavo's GUI for Android

Posted: Sun Mar 15, 2015 10:00 pm
by alberto_lara
Hello again, I just updated the post, new stuff:
  • Spinner
  • Support for image button and image label.
  • Corrected some ugly code

Re: Tavo's GUI for Android

Posted: Tue Mar 17, 2015 5:19 pm
by I~=Spam
This is really coming along! Great work! :nyu: :)

Re: Tavo's GUI for Android

Posted: Sun Mar 29, 2015 4:49 am
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

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

Posted: Sat Aug 15, 2015 2:59 am
by alberto_lara
Just updated the post!

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

Posted: Sun Aug 16, 2015 8:30 pm
by alberto_lara
Added tooltips support for the components. Next thing: Dialogs.

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

Posted: Sun Aug 16, 2015 9:40 pm
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.

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

Posted: Sun Aug 16, 2015 9:46 pm
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)

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

Posted: Sun Aug 16, 2015 11:51 pm
by Karai17
A proper theme system would be nice for sure, and the ability to flow a layout.

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

Posted: Wed Sep 09, 2015 1:56 am
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 199 times
EDIT:
  • gooi.newCheckbox() became gooi.newCheck()
  • gooi.newTextfield() became gooi.newText()
  • gooi.newProgressBar() became gooi.newBar()
  • gooi.newJoystick() became gooi.newJoy()