Stuck with some unknowns with the GUI layout about ezgui

[alaa-eddine]

The layout defines the way EZGUI will split width and height to positions your elements.
I can't test your json right now, but will send you a modified version later if you don't figure out how to fix it.
I see some mistakes in your json definition I'll try to give you some hints.

• Your main layout is 400px width per 640px height with a layout of 1 row and 3 columns, so this will give you three spaces of 400x213 (640/3 = 213)
  so your first child (the search input + find button) will be placed in the first area but its height is 90 only, since the area is 213 this cause a gap.
• the spaces between your items are due to a similar issue, the size of items (100x100) are smaller than the allocated areas
• finally there is an issue with width and heights, children of your main container are larger than the parent, the parent should have enought space to contain all children.

your example is very similar to the mobile app example (which have a top navigation bar and a bottom status bar) : http://ezgui.ezelia.com/examples/app/pixi.html
see the second screen, it's very similar to what you are trying to do :)

[budda]

Sorry I forgot to mention that at runtime before I call EZGUI.create(gridUIJSON, 'kenney'); I update the main GUI width and height like:

          gridUIJSON.width = game.canvas.width;
          gridUIJSON.height = game.canvas.height;

I've currently started the app using var game = new Phaser.Game(1024, 672, Phaser.CANVAS, 'colour'); so the width & height come from this.

My example is a rip of your App demo ! and i removed bits i didn't want, and added the input component. Which is how I got stuck trying to make the demo code work which I hadn't written from scratch.

I'll review the widths and heights but I think you're talking about space between the items in the scrolling list? I was referring to the big gap above the scrolling list and below the text input component & button.

[alaa-eddine]

the top gap is due to the main layout window (layout: [1, 3]) which try to split the window into 3 equal spaces.
there is one property of window layout that can be used here : window children do not need to respect the layout size, it's only used as reference pos.
so if you using another layout like : [1,4] or [1,5] will solve your issue ;)

try it and let me know

[budda]

@alaa-eddine changing to [1, 4] or [1,5] only made the bottom 'Found XX pictures' message move up the canvas towards the middle.

I assumed the layout: [1, 3], in the main window was correct as i have 1 column and 3 children in it: the top input & button, the main list area, and the footer 'header' message area. So i'm not sure why the suggested layout 1,4 or 1,5 should work better here?

The layout should be like (layout spaces down the sides):

Would explaining layouts in the wiki guide be better ?

[alaa-eddine]

Here is a fixed version of your layout.
please test it as static example first (do not set width/height at runtime) so you can understand how layout system works.... then you'll be able to adapt it to your screen size :)

think of layout as a virtual grid, where each children with a given order will take a predefined space and size, but you can still override the position and size of those children to adapt them to the desired layout.

var gridUIJSON = {
    id: 'imagepicker',
    component: 'Window',
    padding: 0,
    position: { x: 0, y: 0 },
    width: 800,
    height: 660,
    layout: [1, 7], //create a grid layout of 1 line and 7 columns, this is a virtual layout to make the second child be close to the top
    children: [
    {
        component: 'Layout',
        z: 1, //the Z index allow to bring the navigation to the top so it can receive events (this is a workaround to the way PIXI handles events)
        padding: 3,
        position: { x: 20, y: 20 },
        width: 750,
        height: 60,
        layout: [2, 1],
        children: [
          {
            id: 'searchTerm',
            text: 'Mermaids',
            component: 'Input',
            position: 'top left',
            width: 640,  //modified size so the left child overlap it grid space
            height: 50,
          },
          {
            id: 'find',
            text: 'Find',
            component: 'Button',
            position: 'top right',
            width: 100, //modified size so the right child only take 100px
            height: 50,
          }
        ]
    },
    {
        component: 'List',
        padding: 15,
        dragY: false,
        position: 'top center',
        width: 750,
        height: 500, //Overlap the grid height to occupy its space plus 4 other children spaces (see bellow how we fill those children with nulls)
        layout: [4, 3],
        children: [
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
        ]
    },
    null,null,null,null,  //Filled empty grid layout elements with null children
    {
            component: 'Header',
            text: 'Found XX pictures to colour',
            font: {
                size: '20px',
                family: 'Arial',
                color: '#222'
            },
            position: 'center',
            width: 400,
            height: 35
     },
    ]
 }; 

please note that in your case, you can use another technique.
when you ommit "layout:[]" entry, the parent window will not create any layout, and all it's children will be positioned relatively to the top left corner of the whole window, you can then use position: {x,y} to set positions as you like.
in this case, it's up to you to calculate the positions and sizes of children.

I still don't have much time to write wiki doc, working on two professional projects atm and I have very limited spare time, but I know it's very important and I'll do it ASAP.

[budda]

Thanks @alaa-eddine - that layout is indeed much better.

I wasn't sure what this line was doing with the '7':

layout: [1, 7], //create a grid layout of 1 line and 7 columns, this is a virtual layout to make the second child be close to the top

Where are 7 columns used in this layout ? I can count 7 rows in the definition if i include the null,null,null,null, bit - but i'm not clear why those null items are needed either.

[alaa-eddine]

please check the latest update, your can now add children at runtime programmatically which can help a lot with your need.