Layout — Gideros GUI framework

n1cke

Easily create scenes, grids, buttons, labels and all other GUI elements. Set positioning and sizing behavior, add event callbacks and powerful animations. Control your elements with mouse, touch, keyboard and joystick. You better see it in action!

Features:
◘ User-friendly interface
◘ Fully customizable
◘ Mouse, touch, keyboard, joystick support
◘ Powerful animations
◘ Predefined events
◘ Easy-to-use inheritance
◘ Various scale modes
◘ Advanced positioning and sizing
◘ Template grids
◘ Kinetic scrolling and moving
◘ Move/Scale/Rotate for images' preview
◘ Resource loader

Download as Gideros project with examples and documentation:
https://github.com/Nlcke/layout/archive/master.zip

GitHub page with documentation:
https://github.com/Nlcke/layout

How to use:
Copy `Layout.lua` file to your project. It will be available as global `Layout` table. Read documentation at `README.md` or `Layout.lua` itself.

Example:

-- create layout with "Hello, world!" text in the center layout = Layout.new{ TextField.new(nil, "Hello, World!", "|") } stage:addChild(layout) -- add layout to the stage

Screenshots:

talis

So much happy to see that in every 2 -3 days whenever i am opening the forum some new addition or plugin is welcoming me:D
It seems like a great contribution @n1cke . Thank you very much for sharing.
Really appreciated =D>

keszegh

let me point out the 'file picker' example that comes with this gui framework. as e.g. android does not have a native file picker, this (crossplatform) file picker will be very handy whenever people need such a thing. i'm sure i will need it soon.
thanks n1cke.

simwhi

@n1cke This looks really amazing. It should save devs a lot of time. I'll be sure to check it out for forthcoming projects

n1cke

UPDATE:
◘ added scrollbar and improved navigation for file explorer example
◘ new event "onResize" (useful to update scrollers)
◘ new parameters to manually select grid col ("selectedCol") and row ("selectedRow")
◘ minor library improvements

john26

Layout is an amazing piece of work by @n1cke and will become the "official" non-native GUI system in Gideros. We will soon start bundling it with Gideros itself to make it more accessible. It really fills a significant gap and hopefully people will start using Gideros to make business apps as well as games.

gorkem

Wow Just wow Many thanks for bringing this!

n1cke

UPDATE:
◘ new "text_effects" example (awesome one)
◘ 3D effects are enabled in examples by default (add this line to your project if you need them: `application:configureFrustum(45)`)
◘ clipping can be removed from Layout with `clip = false`
◘ few important bug fixes

john26

Excellent work! If you are trying to get started with Layout I would recommend the "manual_grid" example (run the Layout.gproj project and select the manual_grid button). The example is quite easy to follow and illustrates how to make a simple grid of Bitmaps which is scrollable.

n1cke

UPDATE:
◘ Fixed scroll function
◘ Updated file_explorer example due to new slider logic
This is minor but important update. Examples with scrolling were buggy under certain circumstances due to errors in scroll function.
Big thanks to @john26 for his good report about this bug!

john26

I've now written a video tutorial to help people get started with Layout!

keszegh

now that gideros has native android keyboard support, that could be supported by the layout framework too.

stetso

Hi everyone,

this plugin looks amazing and finally led me to try and invest some time into Gideros :-h
So this might be a stupid question, apologies in advance! I downloaded the example project, but when I try to run it from Gideros Studio it tells me (multiple times) that it cannot find the module "lfs". It seems to look for it in a Lua5.1 installation:

Layout.lua:1829: module 'lfs' not found: no field package.preload['lfs'] no file './lfs.lua' no file '/usr/local/share/lua/5.1/lfs.lua' no file '/usr/local/share/lua/5.1/lfs/init.lua' no file '/usr/local/lib/lua/5.1/lfs.lua' no file '/usr/local/lib/lua/5.1/lfs/init.lua' no file './lfs.so' no file '/usr/local/lib/lua/5.1/lfs.so' no file '/usr/local/lib/lua/5.1/loadall.so' stack traceback: Layout.lua:1829: in function 'newResources' main.lua:1: in main chunk

I dont have 5.1 installed atm and if there are ways around it would rather avoid it. So the question is: are there any other ways to make it work? Can I include the module manually somehow?

I am quite sure I am missing something obvious but searching around the documentation and googling didnt help :-P

Thanks a lot in advance!

n1cke

@stetso: which operating system and which Gideros version do you use?
'lfs' plugin is enabled by default for Windows, Android, iOS and, IIRC, for MacOS.
Can you `require` other built-in Gideros plugins like`bitop`, `json`, etc?

totebo

Wild guess; macOS Sierra?

stetso

Yes, yes, you are right :-) It is Sierra and I use 2016.10. After posting here I found the discussion about the relative path problems in Sierra and figured that might be related somehow. I also experience the same issues: not being able to open example projects or anything from Studio (the Player or help) or other libs.
So since this does not seem to be related to Layout specifically I will stop spamming this thread and follow the discussion about Sierra.
Anyway, thanks for your help you all! Still looking forward to check out Layout eventually...
PS: no, I cannot load any other libs either..

muro

local layout = Layout.new{ Layout.new{ template = Button, database = database, colsFill = true, scroll = true, anRemove = Layout.newAnimation(), cellAbsW = 200, cellAbsH = 50, cellBrdW = 5, cellBrdH = 5, cols = 1, rows = 0, }, Layout.new{ template = Button, database = database, colsFill = true, scroll = true, anRemove = Layout.newAnimation(), cellAbsW = 200, cellAbsH = 50, cellBrdW = 5, cellBrdH = 5, cols = 1, rows = 0, absX = 220, absY = 0, } }

@n1cke, we can add two independent template grid on the same scene but after some clicks focusing sticks around only one. Is there a easy way out playing with

self:bringToFront()
Layout.select(self) methods? Thanks in advance.

totebo

@stetso Gideros 2016.10 doesn't appear compatible with some versions of macosSierra for some reason. The core team are looking into it. It seems to have something to do with path changes in the latest macos.

n1cke

@muro: at first I was thinking it is a bug but then I have added `bgrA = 0.5` and noticed template grids are overlapping. That's why left template grid got all focus
Fixed template grids (without overlapping):

local layout = Layout.new{ Layout.new{ template = Button, database = database, colsFill = true, scroll = true, anRemove = Layout.newAnimation(), cellAbsW = 200, cellAbsH = 50, cellBrdW = 5, cellBrdH = 5, cols = 1, rows = 0, absX = 0, absW = 200, -- fix }, Layout.new{ template = Button, database = database, colsFill = true, scroll = true, anRemove = Layout.newAnimation(), cellAbsW = 200, cellAbsH = 50, cellBrdW = 5, cellBrdH = 5, cols = 1, rows = 0, absX = 220, absW = 200, -- fix } }

grotly

Anyone managed to make Layout work with Scene Manager?

muro

@grotly , I think Layout overrides default Gideros classes. I could use Layout way to change a scene. First I made "examples" global in "main.lua". Please look at "Ok " function in scene1.lua. You can call whatever scene after cleaning stage with more flexible animations.

grotly

Thanks @muro, I'll give it a try.

grotly

If I run Layout example using the device player it works fine. However, if I build the signed apk using Android Studio, it crashes on the device. Using Android Studio debugger it says:

D/Gideros: main.lua:61: attempt to get length of local 'examples' (a nil value)
stack traceback:
main.lua:61: in main chunk
E/AndroidRuntime: FATAL EXCEPTION: GLThread 2086
Process: com.yourdomain.yourapp, PID: 28696
Theme: themes:{default=overlay:system, iconPack:system, fontPkg:system, com.android.systemui=overlay:system, com.android.systemui.navbar=overlay:system}
com.giderosmobile.android.player.LuaException: main.lua:61: attempt to get length of local 'examples' (a nil value)
stack traceback:
main.lua:61: in main chunk
at LUA.MAIN_CHUNK(main.lua:61)

liblfs.so is there and I also tried to add

uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"

in the AndroidManifest.xml but without any effect.

Any idea why this happens? I have the same problem with other projects that read a file from the file system.

UPDATE: it works if I use loadfile instead of Layout.newResources, so there is a problem in Layout.newResources that occurs only when deploying the full project on device. @n1cke can you take a look and see if you figure out what might be wrong in Layout.newResources function? I'll report back if I find the problem myself.

keszegh

hi @n1cke,
i tried finally to use the layout class, after a lot of trying to find out what is the problem with my code i noticed that if the parent of a layout is scaled then it messes up things.

the last lines of hitTestPoint should be

local x0, y0 = Sprite.localToGlobal(parent, self.x, self.y) local w0, h0 = Sprite.localToGlobal(parent, self.w, self.h) return x >= x0 and y >= y0 and x <= x0 + w0 and y <= y0 + h0

(actually i'm not sure that this solves the problem correctly)


but it seems that the slider also does not move with the same speed as the mouse when you pull it, so there must be further problems. maybe you can find the rest as well, so far i managed to correct hitTestPoint only.

also pulling the layout items themselves pulls them in the wrong speed.

(i'm modifying the file explorer example, but the problems are in layout.lua, so this is probably irrelevant)

keszegh

@n1cke,
another remark that i think (at least optionally) one should be able to stop mouse/touch event propagation while a layout element is pulled.

keszegh

@n1cke, perhaps instead of that complicated redefined hitTestPoint which does not work ok for me, it would be enough to do hitTestPoint(x,y,true) always to take clipping into consideration.

(this does not solve the grab-pull speed problems though)

keszegh

@n1cke, another problem is that when i pull/grab the items and then release it then it almost always triggers an onPress event, while it should not.
any ideas about this?

keszegh

setting selectable=false disabled up/down but did not disable enter key, how can i disable that too?

n1cke

@grotly, it is totally safe to use Layout without Resource Loader. In fact it is totally independent auxilary function. However, it seems something is wrong with LFS-plugin, maybe incompatibility with new Android (I have old one).
keszegh, Layout doesn't support direct scaling because it uses special fields of it's elements (and their parents) to calculate positions, sizes and real scaling. Clipping adds another level of complexity to this. Can you attach examples for tests?

keszegh

i will try to make an example.

meanwhile my project that worked on win player fails in android player, maybe it's also due to the resource loader/lfs problem @grotly talks about.

keszegh

@n1cke, in the file explorer example when database is empty (i use it for something else than files in a folder) then it crashes.