creat a circular slider

Hello 

My knowledge on app inventor is too basic, I´d like to know if is possible to create a circular or semicircular slider.

I think to use a circle as backgroud image on a canvas and an small ball over the image.

my questions are:

1- how to move the ball over the circle?

2- how to draw the arc described by the ball?

I´ll appreciate any help/suggestion.

-- 

I think this app is exactly what you described.

ai2.appinventor.mit.edu/?galleryId=5927010471247872

-- 

Thanks for your reply, but is not exactly as a dial.

I am trying to draw a line ovor a circle according the ball position, I will have a min value ( should be 0) and a max value ( less than 360 degrees)

please take a look to the attached image.

-- 

See the cue stick manipulation code in this doc to be able to drag a line and have it point at the center of a knob. Angry Balls V2 Documentation

Unfortunately, there's nothing in this code to pull it back to the radius of the knob.

You would have to do some trigonometry to adjust its location.

-- 

Also see this thread, which I found by searching this forum for 'multiturn'....  Multi 'rate' sliders

-- 

Many thanks for your reply, I will take a look on them.

Regards

-- 

I am going beter after read the Abraham´s suggestions.

Now I need help or suggetions to resolve:

1- draw a continuos line between initial position and end position (after rotate the sprite.

2- how to update to new painted area when the end position is less than the previous? ( i.e: previous was from 0 to 180 and current from 0 to 150)

I´ll appreciate your collaboration.

circular_slider.aia

-- 

It's not clear what you want to do.

How about some examples in MS Paint?

-- 

take a look to this picture, it show how the arc is drawing, it it not a continous line as I expected ..Also I uploaded the blocks image 

--

How about instead start out with the colored ring already in place in the background, but

cover it with a stack of overlapping shutters like a Japanese folding fan?

As the angle changes, rotate a growing subset of the shutters out of the way to reveal the ring.

-- 
thanks for your reply.

It sound good, but How can I do that?

-- 

Here's how to do it with four sprites covering the ring.

Each sprite is rectangular, and covers one out of the four quadrants of the canvas,

Number the quadrants 1,2,3,4 counting counterclockwise from the NorthEast quadrant.

Sprite 1 covers quadrant 1, and lifts as the first 90 degrees of the drag occur.

At 90 degrees, sprite 1 has lifted all the way, leaving quadrant 1 uncovered but

the other 3 quads are covered.

Sprite 2 covers quadrant 2, and is slid left as the second 90 degrees of the drag occur,

until the NW quadrant is completely exposed.

Sprite 3 covers quadrant 3, and is slid down as the third 90 degrees of the drag occur,

until the SW quadrant is completely exposed.

Sprite 4 covers quadrant 4, and is slid right as the fourth 90 degrees of the drag occur,

until the SE quadrant is completely exposed.

The drag logic needs to move a sprite only after all its preceding sprites have been

completely slid off the canvas.

It might be possible to do this entirely without sprites, if they were replaced by 4 dynamically drawn fat lines,

each confined to covering just one quadrant of the circle.

-- 

thanks for reply. it sound complicated ( for me), but I will try.

-- 

Even better, I found a pre-coded pie and donut graph example on this board: Line/Radar graphs on canvas *Update* Donut/Pie graphs

It might have parts you can use.

-- 

It occurred to me that you needed a loop over all angles from 0 to your current angle to fill in the arc.

While I was in there I removed any need for the sprite, in case you decide to draw the circle directly on the canvas.

That would work better for responsive screen sizing than counting pixels.

I also parametrized where i could.

circular_slider_V2.aia

--

thanks for your reply, I will check your suggestions. Before received your reply  I created a donut plot and test with 2 input angles in order to get 4 variable sectors, the issue is that it take more than 3 seconds to plot it.

see the attached files.

-- 

The double nesting of the loops is a problem.

Not only does it add an order of magnitude to the time needed,

it makes no  sense geometrically.

To cover an area with drawn lines, only a single loop should be needed.

-- 

I understand, but to how to print for example 2 sectors on the interval o to 180?, Can I do that simultaneously? or first one part the the other ones?

-- 

on the aia modified by you is possible  to draw in one direction only ( clock wise or counter clockwise) ?

--

 understand, but to how to print for example 2 sectors on the interval o to 180?

Take the two values, value(1) and value(2), add them up to get a total.

If you want the total to reach to 180 degrees then each value(n) gets (value(n)*180/total) degrees.

So value(1) occupies 0 to degrees(1), and 

value(2) occupies degrees(1) to degrees(1)+degrees(2).

, Can I do that simultaneously?

 No

or first one part the the other ones?

Yes 

-- 

on the aia modifed by you is possible  to draw in one direction only ( clock wise or counter clockwise) ?

Isn't that what I already do, going counterclockwise?

-- 

no it was a curious question only. the value represented on bottom labelbox represent the desired magnitude ( it is OK), but the plot represent the complement of this value.

--