Rah
December 27, 2018, 6:13pm
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 ?
sebavan
December 27, 2018, 6:34pm
2
I definitely leave this one to @Deltakosh who is in vacation at the moment.
1 Like
You should be able to use the ninepatch images now:
Babylon.js Documentation (check the ninepatch stretch mode)
sebavan
December 27, 2018, 7:47pm
4
So he is got even more time
Rah
December 28, 2018, 7:54pm
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?
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
1 Like
Rah
December 28, 2018, 8:57pm
7
oh i see, ok. I think i understand now, i will try to implement it. Thanks!
Have a good vacation!
1 Like
Rah
January 7, 2019, 2:31pm
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
Just getting back with a 9 hours jet lag
So I’ve checked your initial PG and I think there is actually a bug
Let me try to fix that as it should be rounded and not square by default
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
Rah
January 9, 2019, 1:25pm
11
Deltakosh:
Just getting back with a 9 hours jet lag
So I’ve checked your initial PG and I think there is actually a bug
Let me try to fix that as it should be rounded and not square by default
oh wow thats a lot of jet lag, hope youre doing well.
Rah
January 9, 2019, 1:33pm
12
Deltakosh:
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
This still has the problem of the slider being at value 0, and being sqaured
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.
yes agree…I would recommend to add another image on top to hide the borders when the value is 0?
Like an overlay
Rah
January 9, 2019, 4:54pm
14
hmmm interesting idea, i will try it!
Rah
January 9, 2019, 4:57pm
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!
Rah
January 9, 2019, 4:59pm
16
This one actually works fairly well, better than the last one, but still not perfect.
https://www.babylonjs-playground.com/#HATGQZ#17
1 Like
Rah
January 11, 2019, 6:39pm
18
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
1 Like
Rah
January 14, 2019, 1:19pm
20
ohhh i see, im assuming it would also have a minimum length as well then?
https://www.babylonjs-playground.com/#HATGQZ#19