Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Layout — Gideros GUI framework — Gideros Forum

Layout — Gideros GUI framework

n1cken1cke Maintainer
edited August 2016 in Announcements
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:
menu.jpg
800 x 600 - 83K
file_explorer.jpg
800 x 600 - 24K
manual_grid.jpg
800 x 600 - 154K
slideshow.jpg
800 x 600 - 144K
splashscreen.jpg
800 x 600 - 37K
template_grid.jpg
800 x 600 - 235K
thumbnail_viewer.jpg
800 x 600 - 222K
+1 -1 (+18 / -0 )Share on Facebook
«1

Comments

  • 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>

    Likes: n1cke, jeromegsq

    +1 -1 (+2 / -0 )Share on Facebook
  • 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.

    Likes: n1cke, talis

    +1 -1 (+2 / -0 )Share on Facebook
  • @n1cke This looks really amazing. It should save devs a lot of time. I'll be sure to check it out for forthcoming projects

    Likes: n1cke, pie

    +1 -1 (+2 / -0 )Share on Facebook
  • n1cken1cke Maintainer
    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

    Likes: talis, simwhi, MikeHart, pie

    +1 -1 (+4 / -0 )Share on Facebook
  • john26john26 Maintainer
    edited September 2016
    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.
    +1 -1 (+9 / -0 )Share on Facebook
  • gorkemgorkem Maintainer
    Wow :) Just wow :) Many thanks for bringing this!

    Likes: john26, n1cke

    +1 -1 (+2 / -0 )Share on Facebook
  • n1cken1cke Maintainer
    edited October 2016
    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
    +1 -1 (+6 / -0 )Share on Facebook
  • john26john26 Maintainer
    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.

    Likes: n1cke

    +1 -1 (+1 / -0 )Share on Facebook
  • n1cken1cke Maintainer
    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!

    Likes: pie, simwhi, talis, john26

    +1 -1 (+4 / -0 )Share on Facebook
  • john26john26 Maintainer
    I've now written a video tutorial to help people get started with Layout!



    Likes: pie, n1cke, hgy29, keszegh, jdbc

    +1 -1 (+5 / -0 )Share on Facebook
  • now that gideros has native android keyboard support, that could be supported by the layout framework too.

    Likes: n1cke

    +1 -1 (+1 / -0 )Share on Facebook
  • 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!
  • n1cken1cke Maintainer
    @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?

    Likes: stetso

    +1 -1 (+1 / -0 )Share on Facebook
  • Wild guess; macOS Sierra? :)

    Likes: stetso

    My Gideros games: www.totebo.com
    +1 -1 (+1 / -0 )Share on Facebook
  • 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..
  • 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.

  • @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.

    Likes: stetso

    My Gideros games: www.totebo.com
    +1 -1 (+1 / -0 )Share on Facebook
  • n1cken1cke Maintainer
    @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
    	}
    }

    Likes: muro

    +1 -1 (+1 / -0 )Share on Facebook
  • Anyone managed to make Layout work with Scene Manager?
  • @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.
    rar
    rar
    layout-scene-transition.rar
    3M
  • Thanks @muro, I'll give it a try.
  • grotlygrotly Member
    edited February 2017
    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.
  • keszeghkeszegh Member
    edited April 2017
    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)


  • @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.
  • keszeghkeszegh Member
    edited April 2017
    @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)
  • @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?
  • keszeghkeszegh Member
    edited April 2017
    setting selectable=false disabled up/down but did not disable enter key, how can i disable that too?
  • n1cken1cke Maintainer
    @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?
  • 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.
  • @n1cke, in the file explorer example when database is empty (i use it for something else than files in a folder) then it crashes.
Sign In or Register to comment.