Dynamic Grid - based on Json response

Hello All,

I am trying to show list of images which i am getting from an API into a rectangular grid. these images could be 2 or 5 or 10. I need to show 3 columns but rows are dynamic based on data.

Its a very common use case… Is there any playground which i can use to implement this or Any suggestion ?

Hi and welcome to the Community,
When you say ‘raws are dynamic’ can you clarify the process a little?
Currently (as far as I know), there’s no column and raws spawn for the grid container. The subject is kind of on the table but not yet in the pipeline :wink:
But then, admit that your JSON is loaded first and the grid generated next (is it?), then I guess it would be possible to count the number of elements (raws) and account the size of each to create a grid.
Would you be able to share your json (or a dummy) and a PG to work this out?
I don’t think there are any examples yet. If there is, I would be more than happy to see it :wink:
But even if there isn’t, I’m pretty sure we can make this work and create one from your example and help others with this (common use case)…
Thanks,

Hi Mawa,

Thanks for the prompt response !!
I have tried to replicate in this playground. i want to have a container which can show all my 20 results from the fake API i have created. It should be like proper space out rectangles or square with max 3 columns and rows will depend on results. for eg, i have 20 objects in my response so there should be 7 rows.

API Json - https://randomuser.me/api/?results=20

Thanks, got it and will sure help.
I don’t know your tz but I’m gonna have to stop working for today (I’m no good working after dinner, I only do that crap at that time of day :wink: but I can have a look at it tomorrow morning.
May be meanwhile, somebody else will kick-in.
What I quickly noticed is that we don’t have a height for these images in the json, so we don’t know what they are. May be it would be easier to just wrap them in a container (not a grid cell) and we can use adapt to children? Would you happen to have a mock-up (just a very quick draft) of what the final result should look like (Should I understand, you will have textBlocks with name, address, etc and then the picture… or is it only the pictures?) Thanks,

something like this… if there are more images or data , one more row should be added.
This will be Images + Names Only…

Thanks for the screenshot. Sry for late reply.
It’s good to have this because in this example all pictures show at the same size. Is that what you want?
Because I thought you wanted to adapt the grid cell size to the size of the picture.
Now, if you want the same as the screenshot (adapting the size of the picture to the fixed size of the grid cell), that’s easy. It already is a default for all containers. Can you just confirm that this is what you want?

Yes, well, this is clearly the part that can become an issue if you want it ‘dynamic’. As I said, columns and raws spawns are not yet implemented. I believe the only way is to generate a new grid and containers when a new json is loaded.

All Pictures should be at the same size… So i guess container would work.

But Number of Pictures are dynamic… It could grow more in future. So is there any way to achieve that without changing the code everytime ?

Is there any Playground which can help me in this ?

I believe there is. I mean we are using stackpanels added dynamically to create things like a chatbox.
This technique would certainly work for your case. I am not sure about the grid though. May be better to just use stackpanels. I can’t think of a PG just now. May be @carolhmj would you have something to show for this?

I don’t remember anything ready on top of mind, but I think the stacked StackPanels would be a great approach for this if the content needs to be generated dynamically :thinking: Tried my hand at this here: Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com) (and can I say how happy I am that making examples with a cat pictures api is part of my official job…)

1 Like

Right. Thanks @carolhmj That was exactly my thought. And yes, I guess your job is kinda cool in some aspects :smiley:
And then @Tam_Louis, you actually still could use a grid inside your stackpanel.
Actually, from this example I just rushed for you, I believe you would eventually add one more level of stackpanels to create each individual panel and inside each you could have the grid (to the left column would be the text and to the right column the picture)
Let us know if you still need help with this…
Thx,

Edit: Just remembering your initial post. Your pictures have different sizes but they do not have a different ratio, do they?

1 Like

Thank you for all these replies !! These are great but there has to be a better option. I just find out that it is available in Babylon 3D GUI.
Its Panels - either cylinderical or sperical or plane. Just pass Column count and it adjust accordingly.
https://playground.babylonjs.com/#HB4C01#8
An Amazing Story book is also provided by @brianzinn which is iterating an array and creating rows and columns.
Webpack App

Do we have something like this in Babylon 2D GUI ?

Thanks for your kind words!

Yes, for 2D you can use a combination of StackPanels or a Grid for dynamic columns - I think you can accomplish the same affect you are after. If you are building a carousel then I think that would be custom. You could probably make a carousel by making non-visible columns go (or animate) to zero-width and visible columns be (width / # visible) - it would create the visual effects as a sliding carousel - here is an example of how to resize grid columns with animations:
Animated Grid | Babylon.js Playground (babylonjs.com)

1 Like


This is my exact requirement.
@brianzinn - I have gone through all of your story book and using react-babylon library too. I really want to thank you for all the amazing work you are doing !!

All these images i am getting from an API, I just need to build a Button and put ImageURL over those buttons. But the only issue is container. This container could be dynamic. For Eg, if there are like 50 responses, this should scroll vertically.

if i am using stackPanel, all these buttons are in one row. which is good if the count is 4 but how to go to next row if counts are more.

hi @Tam_Louis

You should be able to edit the pixel values on the row or column definitions. Here is an example grid:

<adtFullscreenUi name="ui1">
      <rectangle name="main" background="#222222" width="80%" thickness={3}>
        <grid name="grid1" background={background} width="500px">
          <rowDefinition value={0.5} />
          <rowDefinition value={0.5} />
          <columnDefinition value={100} unit={ValueAndUnit.UNITMODE_PIXEL} />
          <columnDefinition value={0.5} />
          <columnDefinition value={0.5} />
          <columnDefinition value={100} unit={ValueAndUnit.UNITMODE_PIXEL} />
          <rectangle
            name="rect-0-1"
            background="green"
            thickness={0}
            gridRow={0}
            gridColumn={1}
          />
          <rectangle
            name="rect-1-2"
            background="red"
            thickness={0}
            gridRow={1}
            gridColumn={2}
          />
          <rectangle
            name="rect-0-2"
            background="yellow"
            thickness={0}
            gridRow={0}
            gridColumn={2}
          />
        </grid>
      </rectangle>
    </adtFullscreenUi>

Just set values to zero to hide and they can be animated to hide the rows or show by increasing the values. You can use percents instead of pixels. That playground above was what I used to update the GUI so that changing column/row definitions would cause the grid to re-render, so it was needed to support this scenario. One downside is that this will need to download everything (all images) even if not scrolled. If you want your horizontal stack panel to have another row - what I do is use a vertical stackpanel for the other rows, but you may have more luck with grids here.

edit: it’s not really a “scroll” effect though. I wonder if GUI has something like pivot point or offset to actually make it look like a scroll…

When i am using the above code, I am getting below Error

"Property ‘rowDefinition’ does not exist on type ‘JSX.IntrinsicElements’.ts(2339)

Any specific reason for the same ?

No, remember the grid container does not have a rowspawn and a stackpanel can adapt height to children, so I believe using the stackpanel is the best way to go here.

Then, why not simply use the scrollviewer as the outer container ? Works perfectly in the chatbox example above.

nice example - that’s a good starting point - likely would need control customization to hide the scrollbar and control programatically.

It should be defined unless you are on quite an old version (or something broke) - which version of react-babylonjs are you using?

“react”: “^17.0.2”,
“react-babylonjs”: “^3.0.31”,
“react-dom”: “^17.0.2”,
“react-icons”: “^4.3.1”,