GOOi, an Android-Oriented GUI Library

[browncoat]

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]

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

[alberto_lara]

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.

[alberto_lara]

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

(573.32 KiB) Downloaded 228 times

[CapitalEx]

Is there a way to get UI elements, like a panel, to move around after creation?

[alberto_lara]

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.

[xopxe]

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]

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?

[xopxe]

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]

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:add(gooi.newRadio({text = "Radio 1", selected = true}), "7,1")
pGrid:add(gooi.newRadio({text = "Radio 2"}):roundness(0):bg("#00000000"):fg("#00ff00"), "8,1")
pGrid:add(gooi.newRadio({text = "Radio 3"}):roundness(0):bg("#00000000"):border(1, "#000000"):fg("#ff7700"), "9,1")
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)
:add(
    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)
)