Changing thumbImage source based on Value of ImageBasedSlider

Questions
1

Hello!

I have a question/problem regarding the ImageBasedSlider in BabylonJS. I have been learning Babylon for about a month now, and I’m not sure how to resolve some GUI issues that I have encountered.

What I want to achieve is an ImageBasedSlider that changes its thumb image based on its value, which is determined by the player. I would like to have different images displayed at values 0, 10, 20, 30, and 40. Additionally, when the player actively moves the thumb to change the value, I want to display an “arrows” image. To tackle these problems, I have tried using the onValueChangedObservable and onPointerDownObservable events. While it works for changing the image based on the value, I’m facing difficulties when trying to add function to change the image by clicking on the slider. The behavior is inconsistent, with the image sometimes appearing correctly, but mostly exhibiting strange behavior. In my Babylon Editor project, there are also occasional flickering issues when the image changes, making the transition not smooth. However, this problem is not as apparent in the online playground.

Sometimes, when I click above the thumb on the slider to reposition it without actually moving it, the thumb completely disappears.

Furthermore, the slider doesn’t always update properly. For example, after moving the thumb, it shows the arrow picture when released, but if I resize the window, it updates to the correct image corresponding to the “number” value.

I have created a Playground example with some random images from Google to illustrate the issue:
ImageBasedSlider changing thumb on Value | Babylon.js Playground (babylonjs.com)

What is the best onSomethingEvent I should use? Should I use something different completely? Should I code custom slider for this problem?

Thank you for any help or guidance you can provide!

2

Hi and welcome to our Community,
I hope you are enjoying your time with BJS and the BJS GUI? The BJS GUI is an amazing tool. Probably one of the most versatile you can have. So feel free to unleash your creativity.

With that said, I have to admit I would have a small number of questions for you regarding the strategy/approach. To be honest, I’m not sure just yet what exactly you are trying to achieve (sorry, I’m a bit of a small brain :brain: :wink:

Let’s put things in order: First things first, your PG doesn’t really work at this moment. Links are broken because some likely do not respect the policies for importing external assets. It is also saved to typescript where I believe your code is actually js. BTW, when making a PG, it’s sometimes safer and simpler to just use the assets provided in the asset library, since we don’t really care about the design when trying to debug code/a method.

Next, I’m not sure to understand why you would want to change the thumb image of a slider. Fact is the slider, as a component, will update based on certain conditions and instructions. Now, honestly, before even trying to dig into this, I would have this one question for you: “Why update a thumb image based on the slider.value?” I mean, I think I’m pretty open to new UI/UX experiences but one would have to give me the good reason for it. Else, I will ask for a challenge :grin:

From the reading above, I understand you want to display and change an image based on a slider value (or step). Now, that slider could have a thumb (or it could have none). This is all just my assumptions until I understand the result you are looking for.

Would it be possible for you to :

  1. update the PG with links that match the policies so that it would work when we open it?
  2. eventually provide either a draft or explanation of the visual result you want to achieve?

I’m sorry I would have loved to give you just the answer for your issue in a single line of “laser-code” :crossed_swords: to show you some of the magic of BJS :magic_wand: but before giving any guidance or possible solution (because there mostly are multiple solutions to pick from :smiley:) I believe at first, I would need to understand the requirements.

I hope this answer is not all too deceiving (may be someone else will kick-in better than me at moving straight to the point without asking questions :stuck_out_tongue_winking_eye:) Else and while waiting for your reply, let me just say again 'Welcome to the Forum" and have a great day :sunglasses:

1 Like
3

Thanks for the nice welcome to the Community and for your time!

It is not your fault I didn’t really explained it well.

So first things first here is updated code with using asset library:
ImageBasedSlider changing thumb on Value | Babylon.js Playground (babylonjs.com)

bloc.jpg is “actively sliding image”
other “blocks” are different amounts of Value from the slider.

The code is a bit funky, because I was trying to copy just the important stuff. In my local project I load GUI and parse it, where the ImageSlider is prepared from GUI editor and I only add different images from my assets on disk.

Here is how it looks in my project: SPEED SLIDER

And the reason to have it like this is to be able to change speed of vehicle in the game on PC and mobile easily. You won’t control the direction of the vehicle only the speed. So it will show different values based on the speed 0 - standing on place, 10 km/h up to 40. Originally it was meant to show exact number 0,1,2,3 etc. But my problem was that when I was using slider I couldn’t properly attach the TextFiled as Child of the Thumb. I was trying to change position of the TextField based on position of ThumbImage but that was very messy and was not good. So I decided I will use only few values - 0,10,20,30,40 and will round them to show the speed on the “meter” = slider. The arrows are so player know it is not switch with 5 states but continues slider (based on our designers wish).

Don’t be sorry. I really value your time and nice words :smiling_face: :heart:

4

Thanks for your reply and sorry if I’m a bit of a nuisance sometimes.
The thing is I’m no true dev. Rather a PM and art director so I have a tendency to always question things at first :face_with_hand_over_mouth: It has its downside, I’m not sayin :zipper_mouth_face: but it sometimes can save a lot of time in a project when it suddenly turns out that an approach or method is actually not the best one.
I’m gonna need some time to read the post and look at the new PG but just like that, I already have this odd feeling that the slider may not be the best in this use case. And then, a slider thumb is not really ment for being updated on the value change observable so it might require to change and reinstate some private function from the engine. If you have an additional day (or if someone else such as my gui-angel @carolhmj kicks-in before tomorrow morning), I would advise you work on some other parts of your project and I/we shall come back to you on this. If this ok for you?

1 Like
5

Oh no problem. I have a lots of time so don’t worry. I didn’t think someome would reply this quick. I’m used to being left on read for a week on some other forums :grin:

Also I know this is not the best way to make it. I wanted to use something from the Babylon before using my own implementation, so if this is not the way it should be used, I can write something custom. :blush:

Take your time but don’t stress about it too much. I can make it work some other way for sure. :wink:

1 Like
6

Hello! I took a look at your PG (super thanks to @mawa for pointing out the initial issues), the main problem seemed to be directly updating the thumbImage’s source property. If you instead assign a different image to the thumbImage field, it seems to work as you want: ImageBasedSlider changing thumb on Value | Babylon.js Playground (babylonjs.com)

2 Likes
7

Better you get used to the new method. The response time in this forum does not exceed 24h (from my personal 3±years experiences). Yes, I know, it’s a bit disturbing at first but trust me, you’ll get used to it… a bit too much eventually :rofl:

1 Like