Circular slider procedure (without sprites)

A couple of months ago I made a circular slider procedure using a sprite for the thumb.
I think this version without sprites and with some improvements is a more elegant solution, simpler to use and to implement in your projects.

There's already some extensions for adding circular sliders but using an only blocks solution, you can customize it any way you want and also learn more App Inventor!

How it works and looks:

Seriously, it looks more complicated than it really is. Don't hesitate to ask if you need to implement this in your project and can't figure out something.

You have to create a square canvas (width = height). No matter the size, the slider will scale accordingly and remain functional as the video shows.

This is the function to use:

procedures_callnoreturn

Example:
This is how you will set it for the same slider as in the video.

blocks

This is how to set the Canvas.Dragged event:

This is the main procedure which draws the slider:

And this is an auxiliary procedure to get the thumb position based on the x,y touched in the canvas.

Here's the aia file shown in the video:
CircularSlider_NoSprites_AI2.aia (16.9 KB)

17 Likes

Thank you for this great guide :+1: :+1:

4 Likes

Thank you for sharing :+1:

4 Likes

thumbsup2

3 Likes

Hello, I intended to make temperature and humidity meters as shown in the attached image. In this case, how could you use your extension? Thank you.

2 Likes

They would be to show the values โ€‹โ€‹of the sensors. :slight_smile:

1 Like

This is not an extension, this is a procedure, just uses blocks!

1 Like

Yes, procedure ... So how could I do it for my case?

1 Like

For simplicity, I did mine with a 360 degree circle. I see the one you want is a semicircle. I don't really know how to do it that way. If a full circle is OK with you, then I can help you implement it in your app.

1 Like

Yes without. Problem!

1 Like

NOTE: This is not a slider, only a progress indicator!

So, this is what I can do:

Here's the call to the procedure. I think the parameters are self explanatory.

And this is the sample aia shown in the video:
CircularProgress_Thicker_MITAI2.aia (10.5 KB)

1 Like

Instead of using a slider to determinate the slider's value, for you @Bruno_santos you can use the termometer sensor or the Ambient temperature extension by @Taifun

3 Likes

Yes, that's the idea. The slider was only for the demonstration.

1 Like

Thank you!

2 Likes

Very Nice :+1:

2 Likes

Thanks a lot.
it would be interesting to use clockwise by suppresing 'neg' block for progression

2 Likes

a very good one
hint try creating 3 such concentric circles with each for RGB it is the good ui for color picker

2 Likes

I have modified the procedure to make it work as you expected.


CircularProgress_Thicker_MITAI2 (1).aia (12.0 KB)

9 Likes

Hey! I really like the modification you made to the indicator. I tried it today. Thank you!

5 Likes

Your topic convinced me to the canvas component :). Before, I hardly used it. But with a little imagination, you can create cool things for which I previously needed extensions. I am working on various components on a canvas right now.

6 Likes