Image Based Slider Squared left Side


#1

Hey everyone!

I was wondering is there a way to round the left side of image base sliders? Look at this playground
https://www.babylonjs-playground.com/#HATGQZ#7

You can see that the image is squared/rectangular on the left side. It doesnt just fill the background.

Is there a way to fix this?

Any ideas ?


#2

I definitely leave this one to @Deltakosh who is in vacation at the moment.


#3

You should be able to use the ninepatch images now:
Babylon.js Documentation (check the ninepatch stretch mode)


#4

So he is got even more time :slight_smile:


#5

Hey DK, im not sure how ninepatch will help here as i only want to round the squared left side of the valueBarImage.
I also tested out some of the ninepatch stretch and did not notice a difference.
https://www.babylonjs-playground.com/#HATGQZ#8

Any ideas?


#6

Unfortunately I’m on my phone until 1/7/2019. I will check your question as soon as I’ll be back

The overall idea was to use a ninepatch image for the bar so you can control how you want the bar to be displayed by setting your ninepatch on the left only


#7

oh i see, ok. I think i understand now, i will try to implement it. Thanks!

Have a good vacation!


#8

Hey DK, did your vacation go well?

I was wondering if you had any ideas on how to go about this. I tried using ninepatch but i dont understand it well. However im not sure that this solution would solve the problem, as when the slider is set to full the right side would become squared.
(some tests:)
https://www.babylonjs-playground.com/#HATGQZ#9
https://www.babylonjs-playground.com/#HATGQZ#10
https://www.babylonjs-playground.com/#HATGQZ#11
https://www.babylonjs-playground.com/#HATGQZ#12


#9

Just getting back with a 9 hours jet lag :smiley:

So I’ve checked your initial PG and I think there is actually a bug :smiley:

Let me try to fix that as it should be rounded and not square by default


#10

Well no, actually it is correct but because there is no nine-patch the image is deformed
So to make it work you need to provide a picture like this one for instance:

If you open it with your favorite image editor you will see that there are some info in the first/last lines and colums:

These black lines indicate how to stretch this image (by etablishing a list of 9 areas in the image). For isntance the 4 corners are designed to not be stretched while the center part will be stretched in both direction and so on

Pretty ugly example but it illustrates my point:
https://www.babylonjs-playground.com/#HATGQZ#13


#11

oh wow thats a lot of jet lag, hope youre doing well.


#12

This still has the problem of the slider being at value 0, and being sqaured

https://www.babylonjs-playground.com/#HATGQZ#15

I think it might have something to do with the slider thumb being so close to 0 that it shows its own corners, off the side of the slider.


#13

yes agree…I would recommend to add another image on top to hide the borders when the value is 0?
Like an overlay


#14

hmmm interesting idea, i will try it!


#15

Heres a solution that is not perfect in anyway but would get the job done.

https://www.babylonjs-playground.com/#HATGQZ#16

Still would rather it stretch properly, however i will leave that for another day!


#16

This one actually works fairly well, better than the last one, but still not perfect.

https://www.babylonjs-playground.com/#HATGQZ#17


#17

Looks really good!


#18

this method does not scale with the slider…
https://www.babylonjs-playground.com/#HATGQZ#18


#19

this is because of the image. You have to provide an image that can scale to this size. The image we use has a min height of something around 30 px


#20

ohhh i see, im assuming it would also have a minimum length as well then?

https://www.babylonjs-playground.com/#HATGQZ#19