Carousel in popup window

[vijay_krishna]

Hi

My requirement is i need to display images as carousel in popup window with background blurred adjacent to my walking avatar(attached) which i can iterate forward and backward

I tried using BABYLON.GUI.ImageBasedSlider(); but it does not have options like arrows to move forward and backward.

Babylon.js Playground

I tried below links its not helping me out

Image carousel : Images orbiting (left or right) round the pivot on mouse movements

Hi Everyone, I am trying to create an image carousel in 3d world. So my requirement is to move images either left or right, and it should be moving round the pivot only. I came up with this structure and it seems only camera is moving not the images. I am struggling with the carousel effect (image movement either left or right on mouse move). I checked and tried few examples & questions but those are for single mesh so not related to my requirement. It would be really grateful if someone c…

Guys, need yur help here
Thanks
vijay

[mawa]

Hi, Hope you are well?
Could you share some visual drafts of your carousel? I believe it could use a similar approach as my ‘wheel menu’ interface. In any case, I suppose it will be in the FS ADT. Unless you want it to be a 3D carousel, in case it will be GUI for mesh. I also believe that at the time you are interacting with the carousel, the pointer should not take inputs for the scene (else it would be messy). I believe a scrollviewer to display the images in the carousel and interact with them would likely work. Hard to say without any clues towards the visual representation and interaction. I would really recom you make a simple draft (visual) to further explain.
Meanwhile, have a great day

[vijay_krishna]

Thanks Mawa for the update…

In mycase there will an image placeholder(2d image) once the image is clicked other relavant images will open in popup window which is scrollable in side ways.
attaching visual part

Thanks
vijay

[mawa]

Thank you. This nearly looks like it’s working to me. So, what exactly is the issue? Is it for the scrolling of your left-menu images? I understand you want to use arrows to scroll; shouldn’t be a problem. A scrollviewer with some stackpanels to host the images would look like a perfect fit to me.

Edit: I guess I must have something similar in an old project of mine "Project Chair"
Load the scene, click on the third icon in left menu. From there you can pick a category and below browse from the category (images) with arrows. Is that similar to what you want? It is based on a scrollviewer with added children and resizeToFit.

Edit1: Here’s another recent link to a topic I answered regarding the use of a scrollviewer to display children (eventually dynamically). I hope this helps, else let me know

Problem with disappearing buttons in ScrollViewer

Hello! I’m having trouble displaying multiple buttons in a row within a ScrollViewer. When I attempt to include buttons that are initially not visible (requiring scrolling to the side to see them), they don’t load properly. Most of the time, they are not visible at all, but occasionally they flicker in my project’s editor. The buttons do exist; if you widen your screen significantly, they load correctly. However, when they are initially hidden, they fail to appear after scrolling to the right. …

[vijay_krishna]

Thanks @mawa it was very close almost i got it

tried with yur logic only issue am facing is am not getting right arrow across the images and unable to get blurr across the image control.
can u throw some light here

Babylon.js Playground

Thanks
vijay

[mawa]

Hi,

Let’s take things in order. I did a first PG to simplify and we can build-up together from there.
First things to notice in this PG as compared to your first attempt are:

1. You parented your images/buttons to the scrollviewer. Where the idea is to parent the controls to the stackpanel. The stackpanel is parented to the scrollviewer and the stackpanel is the container of all children. Why? Because the stackpanel as opposed to the scrollviewer will dynamically resize from the total (width or height) of its children. Where your scrollviewer stays with a fixed (or responsive) size. We’ll see about the responsive size of scrollviewer a bit later if you need that. There are some constraints where you cannot mix percentage and pixel sizes.

2. You need to tell the stackpanel that it stacks controls/children horizontally. By default, it is vertical. So you need to set (line 45 in PG):

svcontainer.isVertical = false;

3. There are constraints towards the mixed use of percentage and pixel mode. Typically your controls cannot simply use percentage because they are parented to the dynamically resized stackpanel that resizes itself from the children through (line 52 in PG)

svcontainer.adaptWidthToChildren = true;

This implies that if we want to resize the panel containing the scrollviewer (like the user could extend or retract the panel) AND we want all controls/images to always show in fullsize, we’re gonna need to capture this size and pass it on to the controls. So, as I said, if you need that and cannot figure it out yourself, let me know…

Next is also the thing with the arrows. The arrows are in fact buttons on top of the scrollviewer. The logic is fairly simple. We will call on the sv.bar (value) to adjust the position of the scrollviewer (bar) to the image we want to display. For that, we’ll go through the controls.length of the stackpanel and set the value of sv.bar to the length*width of image/button. Again, if you can’t figure it out yourself, let me know…

Meanwhile, you should ‘play’ a little with this PG to get a grasp of how the base works and then… as I said, in case, let me know for the next steps…

Babylon.js Playground

Edit: And I forgot the ‘blur’ thingy. I’m not sure which part you want to blur. May be you could explain it a bit further to me?

[mawa]

Quickly added the buttons forward and back and made the bar invisible.

Babylon.js Playground

[vijay_krishna]

Thanks a ton mawa…

I mean all four sides of the image borders to be blur like here

pls suggest how do i add it…

one more thing , how do i close it ?
maybe i need to put cross icon on image, on click on cross icon how i close it ?

Thanks
vijay

[mawa]

@vijay_krishna

how do i close it ?

Just not sure what you want to close. Do you want to remove just the image or do you want to close the entire panel with the scrollviewer (show/hide panel)?

[mawa]

@vijay_krishna

I mean all four sides of the image borders to be blur like

I can’t see the images being blured. All I see is a shadow/blur behind the panel (easily achieved by adding an image background to the panel). Or is there something I missed?

Edit:
Oh, Did you mean the corner radius? Showing rounded corners on images, is it? In case you need to first set the background of your containers to “transparent”. Then you can do (like you did)

image.cornerRadius = 10

Note that the corner radius value is not to be expressed in pixels. It only takes a number which (I think) is actually a radius in pixels. But you have to state it with just a number.

Babylon.js Playground

[mawa]

Quickly added a close (panel) button.

Babylon.js Playground

Edit: Sry for the Undo icon instead of Close. I took what I could find from the asset library

Edit1: OOps, just realized something of importance while doing this. You have to make sure you have no borders on your images added to the stackpanel and no borders on the stackpanel (thickness = 0). Problem is that the borders are accounted in the calculation of the size (it is size minus border). So when working with steps and if not accounted, you will get an offset from the borders.

Updated PG removing borders

Babylon.js Playground

[vijay_krishna]

@ thanks mawa for yur help