GOOi, an Android-Oriented GUI Library

Showcase your libraries, tools and other projects that help your fellow love users.
browncoat
Prole
Posts: 1
Joined: Fri Feb 05, 2016 2:24 pm

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

Post by browncoat » Fri Feb 05, 2016 2:25 pm

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" ^^

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

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

Post by alberto_lara » Fri Feb 05, 2016 9:07 pm

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

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

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

Post by alberto_lara » Sat Feb 06, 2016 5:51 pm

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:

Image

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:

Image

And here are other themes:

Image
Image

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

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

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

Post by alberto_lara » Tue Feb 16, 2016 6:01 pm

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.

Image
(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 77 times
LÖVE Projects: GOOi, Süsse and Katsudö
Thank you for taking the time to read this

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

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

Post by CapitalEx » Thu Mar 10, 2016 3:43 am

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

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

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

Post by alberto_lara » Sat Mar 12, 2016 3:59 pm

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

Post by xopxe » Mon Apr 25, 2016 10:59 pm

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)

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

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

Post by Nixola » Mon Apr 25, 2016 11:08 pm

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
lt = love.thread
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

Post by xopxe » Tue Apr 26, 2016 2:22 am

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)

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

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

Post by alberto_lara » Thu Apr 28, 2016 9:55 pm

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:

Image

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)
)
LÖVE Projects: GOOi, Süsse and Katsudö
Thank you for taking the time to read this

Post Reply

Who is online

Users browsing this forum: No registered users and 6 guests