Quick Links: Gideros Home | Download Gideros | Developer Guide
Layout — Gideros GUI framework
  • n1cken1cke +1 -1 (+15 / -0 )
    Maintainer
    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
  • talistalis +1 -1 (+2 / -0 )
    Guru
    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

  • keszegh +1 -1 (+2 / -0 )
    Member
    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

  • simwhisimwhi +1 -1 (+2 / -0 )
    Member
    @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

  • n1cken1cke +1 -1 (+4 / -0 )
    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

  • john26john26 +1 -1 (+8 / -0 )
    Maintainer
    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.
  • gorkemgorkem +1 -1 (+2 / -0 )
    Maintainer
    Wow :) Just wow :) Many thanks for bringing this!

    Likes: john26, n1cke

  • n1cken1cke +1 -1 (+6 / -0 )
    Maintainer
    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
  • john26john26 +1 -1 (+1 / -0 )
    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

  • n1cken1cke +1 -1 (+4 / -0 )
    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

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

    https://youtu.be/4lGtU0kpc8I

    Likes: pie, n1cke, hgy29, keszegh, jdbc

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

    Likes: n1cke

  • 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 +1 -1 (+1 / -0 )
    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

  • totebototebo +1 -1 (+1 / -0 )
    Member
    Wild guess; macOS Sierra? :)

    Likes: stetso

    My Gideros games: www.totebogames.com
  • 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.

  • totebototebo +1 -1 (+1 / -0 )
    Member
    @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.totebogames.com
  • n1cken1cke +1 -1 (+1 / -0 )
    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

  • Anyone managed to make Layout work with Scene Manager?
  • muro +1 -1
    Member
    @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.
    layout-scene-transition.rar
    3M
  • Thanks @muro, I'll give it a try.
  • 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.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID

In this Discussion

Top Posters