Circular slider procedure (without sprites)

[bodymindpower (Anke)]

@Vaibhav

from the Master aka CanvasMaster
(Perfect name given by someone… I don’t remember who )

Beautiful circular design

I made this as a little test some time ago, using canvas and a timer: [circle] So it shouldn’t be a problem doing this with canvas. Maybe @Italo will take a look at it because he’s the master of canvas and probably has something like that already done.

Beautiful circular design

I’ll look into it. And thanks for the “Master of Canvas” title!

[Vaibhav]

Hahaha… Now I know Thanks for reminding

[Chirubot (Bot)]

@Italo Do you know why is this problem arising.

There is a Pixel Blur Effect until dragged.

Blocks

[Italo]

That’s because the slider is drawn before the canvas resizing is finished.
Make sure to call the slider procedure after the canvas is resized.

If that doesn’t help, try adding a clock and draw the slider after 100 or 200 milliseconds to give time to the canvas to finish resizing.

[Chirubot (Bot)]

I tried to use When Screen Initialize block but that to did not work

[Italo]

Please read my previous reply and do what I suggested there.

[Italo]

Also, I uploaded an aia file with an example and I remember it didn’t have that problem you are having. Please check it there and see how I did it.

[dreemincome (bivek barman)]

how to create 90% circle slider with min & max value set ?

[Italo]

@froniu84a Made an adaptation to my slider in App Inventor. Is that what you are asking for?

Circular slider procedure (without sprites)

[ombhat327 (omkar)]

in kodular canvas at the end of arc there is straight cut… how can we get circular cut… like above

[Italo]

Use TRUE or FALSE in this slot marked in red.

[Lily]

@Italo

A couple of months ago I made a circular slider procedure using a sprite for the thumb.

Hello @Italo this is wonderfully and it will help me a lot, but I have a question!

Is it possible to insert inside a background image which is rounded without using Leoprofile extenssion?

and if yes, how then can I do it?

[Lily]

@Lily

Is it possible to insert inside a background image which is rounded without using Leoprofile extenssion?

This question was to you @Italo

Hello @Italo this is wonderfully and it will help me a lot, but I have a question!

But from my end I have tried this blocks

From the blocks above I get this result

But I am not real satisfied with that because the image is from the server which is random according to when song changes with some different colors attached in the image and the canvas volume with other texts are not looking more professional.

Please @Italo can you try to suggest what I can do in order to make this more professional and eye-catching

I will be patient waiting for your response

[Italo]

I would probably make the labels inside the slider white with a fake shadow by duplicating the labels first in black and adding 10 pixels to the right and ten pixels down. Then Making the regular labels in white in the right position. Also adding a black filled circle that covers the whole background with 50% opacity to make the white labels stand out independently of lighter or darker backgrounds. That way you will have something like this that will look good no matter what image you have in the background.

[Anil_M (Codal Inc.)]

Can You Publish The Aia File

[Lily]

@Italo

I would probably make the labels inside the slider white with a fake shadow by duplicating the labels first in black and adding 10 pixels to the right and ten pixels down. Then Making the regular labels in white in the right position. Also adding a black filled circle that covers the whole background with 50% opacity to make the white labels stand out independently of lighter or darker backgrounds. That way you will have something like this that will look good no matter what image you have in the background.

Would you kindly show the part of that blocks

[Italo]

I added 4 more parameters at the bottom of the slider procedure. Play with those and see if your results are better.

CircularSlider_NoSprites.aia (21.2 KB)

[Lily]

@Italo

4 more parameters at the bottom of the slider procedure

For sure this is helpful to me thank you in advance

[Lily]

@Italo

Also adding a black filled circle that covers the whole background with 50% opacity to make the white labels stand out independently of lighter or darker backgrounds.

can we be able to add an arrow that shows the slider going right when sliding?