## GOOi, an Android-Oriented GUI Library

browncoat
Prole
Posts: 1
Joined: Fri Feb 05, 2016 2:24 pm

### Re: GÖÖi, an Android-Oriented GUI Library

Very cool. I'm looking forward to playing with this this weekend.

I was wondering if there was some documentation?
Specifically: The interesting thing is that Android devices come in all sizes. How would I go about making sure my GUI (Sorry, GÖÖi) looks good on any resolution?
I'll probably try to make a Material Design style, to make it "really Androidy"

alberto_lara
Party member
Posts: 331
Joined: Wed Oct 30, 2013 8:59 pm

### Re: GÖÖi, an Android-Oriented GUI Library

Very cool. I'm looking forward to playing with this this weekend.
Thanks for that.

About the good looking in different resolutions, it depends in how you set the font size, border width, etc. you just need to base this measures in something like 1/50 of the screen width (or height), 1/100 * (width + height) / 2, or things like that. Official docs are not available yet.

NOTE: Since the touch API recently changed, I need to fix some code (currently it doesn't work as expected).

In the mean time, I invite you to see this other project, it uses GÖÖi (an old version) and I'm working on it right now: https://github.com/tavuntu/susse
LÖVE Projects: GOOi, Süsse and Katsudö
Thank you for taking the time to read this

alberto_lara
Party member
Posts: 331
Joined: Wed Oct 30, 2013 8:59 pm

### Re: GÖÖi, an Android-Oriented GUI Library

Since the touch API recently changed, I need to fix some code (currently it doesn't work as expected).
Seems like this is fixed, it works now. Also, several changes were made in GÖÖi's looking, I want to point out this: most of the shapes were "smooth" because I was using a combination of "fill" and "line", this doesn't happen anymore, the problem with this was, when setting an alpha component to the color it looked ugly, like you can see in this joystick:

Another good thing is, a lot of drawing code and calculations were removed thanks to the round rectangle support we have now, so this the default GÖÖi style now:

And here are other themes:

Please note: now we have a new property when setting a theme and it's called 'howRoundInternally' (number) if it's equals to 1, the shapes inside the components will be totally round, if equal 0 the shapes will be rectangular, this adds more flexibility to styles. The only exceptions are joysticks (always round) and spinners (the minus and plus buttons are little images, at least by now). Same applies for 'howRound' property, except this one works for the base of the component. Theres a small issue with joysticks, I'm checking it.
LÖVE Projects: GOOi, Süsse and Katsudö
Thank you for taking the time to read this

alberto_lara
Party member
Posts: 331
Joined: Wed Oct 30, 2013 8:59 pm

### Re: GÖÖi, an Android-Oriented GUI Library

Hi, new component added: Knobs, as an alternative to sliders. They change accoring to the mouse (or touch) y component.

I think adding a datepicker component would be nice but since it's a little bit complex I'll take a look on that later. Thanks.

(please note, I'm using msaa filter, if you don't use it GÖÖi can look a little rough, but just a little)
gooi.love
LÖVE Projects: GOOi, Süsse and Katsudö
Thank you for taking the time to read this

CapitalEx
Prole
Posts: 7
Joined: Fri Jul 24, 2015 2:33 am

### Re: GÖÖi, an Android-Oriented GUI Library

Is there a way to get UI elements, like a panel, to move around after creation?
~~<Ɵ/\/\_: *snake noises*

alberto_lara
Party member
Posts: 331
Joined: Wed Oct 30, 2013 8:59 pm

### Re: GÖÖi, an Android-Oriented GUI Library

CapitalEx wrote:Is there a way to get UI elements, like a panel, to move around after creation?
that's not supported but it surely is a good idea, I could start with draggable panels.
LÖVE Projects: GOOi, Süsse and Katsudö
Thank you for taking the time to read this

xopxe
Prole
Posts: 4
Joined: Fri Apr 22, 2016 3:49 am

### Re: GÖÖi, an Android-Oriented GUI Library

Hi, I'm trying GOOi on a laptop with touchscreen and it sort-of does not work: touching a widget is equivalent to hover the cursor with the mouse (it highlights), and there's no way to actually click or grab using the touchscreen. I'm using Ubuntu.
And another question, does it support on multitouch on Android? (under Linux does not, related to the previous point)

Nixola
Inner party member
Posts: 1940
Joined: Tue Dec 06, 2011 7:11 pm
Location: Italy

### Re: GÖÖi, an Android-Oriented GUI Library

The issue may be in your setup or in SDL itself; try running this command in Linux:

Code: Select all

mkdir /tmp/nixtest && cd /tmp/nixtest && echo "love.mousepressed = function(...) print('Mouse:', ...) end love.touchpressed = function(...) print('Touch:', ...) end" > main.lua && love . > /tmp/nixtest/output.txt
Then look at the output.txt file you'll find in that folder; do touchpressed/mousepressed events properly fire?
lf = love.filesystem
ls = love.sound
la = love.audio
lp = love.physics
li = love.image
lg = love.graphics

xopxe
Prole
Posts: 4
Joined: Fri Apr 22, 2016 3:49 am

### Re: GÖÖi, an Android-Oriented GUI Library

You're right, I never get love.touchpressed events... Any idea what can be wrong?

(I'm on Ubuntu 14.04 with gooi from git)

alberto_lara
Party member
Posts: 331
Joined: Wed Oct 30, 2013 8:59 pm

### Re: GÖÖi, an Android-Oriented GUI Library

Hi, sorry for the delay.

I'm going to make some test and tell you, I've been updated the API so I need to try it on Android (I just put it on Github). The changes were basically:
• No explicit id's are given now
• More flexible contructors
For instance, this was before:

Code: Select all

gooi.newButton("btn1", "Button text", 100, 100, 200, 30)
and this is now:

Code: Select all

gooi.newButton("Button text", 100, 100, 200, 30)
These are other ways of making a button (similar syntax for other components):

Code: Select all

gooi.newButton()
gooi.newButton("A button")
gooi.newButton("A button", 100, 100)
gooi.newButton("A button", 100, 100, 150, 25)
gooi.newButton({
text = "A button",
x = 100,
y = 100,
w = 150,
h = 25,
orientation = "right",
icon = "/imgs/icon.png"
})
And I'm going to leave another example:

Code for this:

Code: Select all

pGrid = gooi.newPanel(350, 290, 420, 290, "grid 10x3")
-- Add in the specified cell:
pGrid
:setColspan(1, 1, 3)-- In row 1, col 1, cover 3 columns.
:setRowspan(6, 3, 2)
:setColspan(8, 2, 2)
:setRowspan(8, 2, 3)
gooi.newLabel({text = "(Grid Layout demo)", orientation = "center"}),
gooi.newLabel({text = "Left label", orientation = "left"}),
gooi.newLabel({text = "Centered", orientation = "center"}),
gooi.newLabel({text = "Right", orientation = "right"}),
gooi.newButton({text = "Left button", orientation = "left"}),
gooi.newButton("Centered"),
gooi.newButton({text = "Right", orientation = "right"}),
gooi.newLabel({text = "Left label", orientation = "left", icon = imgDir.."coin.png"}),
gooi.newLabel({text = "Centered", orientation = "center", icon = imgDir.."coin.png"}),
gooi.newLabel({text = "Right", orientation = "right", icon = imgDir.."coin.png"}),
gooi.newButton({text = "Left button", orientation = "left", icon = imgDir.."medal.png"}),
gooi.newButton({text = "Centered", orientation = "center", icon = imgDir.."medal.png"}),
gooi.newButton({text = "Right", orientation = "right", icon = imgDir.."medal.png"}),
gooi.newSlider({value = 0.75}):bg("#00000000"):border(3, "#00ff00"):fg({255, 0, 0}),
gooi.newCheck("Debug"):roundness(1, 1):bg({127, 63, 0, 200}):fg("#00ffff"):border(1, "#ffff00")
:onRelease(function(c)
pGrid.layout.debug = not pGrid.layout.debug
end),
gooi.newBar(0):roundness(0, 1):bg("#77ff00"):fg("#8800ff"):increaseAt(0.05),
gooi.newSpinner(-10, 30, 3):roundness(.65, .8):bg("#ff00ff"),
gooi.newJoy():roundness(0):border(1, "#000000", "rough"):bg({0, 0, 0, 0}),
gooi.newKnob(0.2)
)
LÖVE Projects: GOOi, Süsse and Katsudö
Thank you for taking the time to read this

### Who is online

Users browsing this forum: No registered users and 6 guests