Circular Progress Extension (Preview)

CIRCULAR PROGRESS EXTENSION PREVIEW

Description

Very simple extension based on Tim Qi’s library, to create a circular ring progress or sector progress view.

Methods

  • CreateRing: Method for creating a Circular Ring Progress View. Parameters: Arrangement input: Arrangement where the Circular Ring will be displayed. Number percent: Number with the percent of completion (from 0 to 100) of the task. Note: The size of the circular progress will be the same as the arrangement where it will be displayed.
    image

  • CreateSector: Method for creating a Circular Ring Progress View. Parameters: Arrangement input: Arrangement where the Circular Sector will be displayed. Number percent: Number with the percent of completion (from 0 to 100) of the task. Note: The size of the circular progress will be the same as the arrangement where it will be displayed.
    image

Properties

Circular Ring Progress

  • RingBgColor: Specifies and returns the color of the circular ring background. Also available in Designer Properties. Default: Light Gray.
    image
    image

  • RingFgColorStart: Specifies and returns the color of the circular ring stroke’ start. Also available in Designer Properties. Default: Orange.
    image
    image

  • RingFgColorEnd: Specifies and returns the color of the circular ring stroke’s end. Also available in Designer Properties. Default: Red.
    image
    image

  • RingPercent: Specifies and returns the percent of completion (from 0 to 100) of the task. Also available in Designer Properties. Default: 0.
    image
    image

  • RingStartAngle: Specifies and returns the start angle of the ring’s stroke (from 0 to 360). Also available in Designer Properties. Default: 0.
    image
    image

  • RingStrokeWidth: Specifies and returns the width of the ring’s stroke. Also available in Designer Properties. Default: 15.
    image
    image

Circular Sector Progress

  • SectorBgColor: Specifies and returns the color of the circular sector background. Also available in Designer Properties. Default: Light Gray.
    image
    image

  • SectorFgColor: Specifies and returns the color of the sector indicator. Also available in Designer Properties. Default: Orange.
    image
    image

  • SectorPercent: Specifies and returns the percent of completion (from 0 to 100) of the task. Also available in Designer Properties. Default: 0.
    image
    image

  • SectorStartAngle: Specifies and returns the start angle of the sector start (from 0 to 360). Also available in Designer Properties. Default: 0.
    image
    image

Known issues

  • In the sector progress, when the percent is set to zero (0), and the start angle is different from zero (0), the background is set to the same color than the sector indicator.
  • Setting a different background or foreground color during runtime won’t update the already created sector view. To update it, it is necessary to run the CreateSector method again.

Example

Downloads

.AIX: com.pedroza.CircularProgress.aix (17,6 KB)
.APK: CircularProgressExtension.apk (2,2 MB)

:exclamation:Note: Download links are broken, please download from the Thunkable community here Circular Progress Extension - ClassicExtensions - Community

Price

This extension will be free and liberated for this community when this post reaches 30 likes.
For more features or customization, send a PM for princing information.

Upcoming SneakPeek

110 Likes

Wow! :heart_eyes:
That’s amazing!

4 Likes

@CarlosPedroza27 minAPI?

2 Likes

Minimum Api Level 11 (HONEYCOMB)

1 Like

Can you share the APK, so we can look into it? :smile:

I’m afraid not, some people like to decompile the apk to get the source code even when the library used is open source.
I will do it when the post reaches 30 likes.

3 Likes

Is it possible add text to middle of the ring progress?
So we can use it for countdown

1 Like

Yes, it is possible. If anyone wants to sponsor this feature, send me a PM. I can also make that when the count goes up to 1000, appears 1K

you have 30 likes go url download pls

Are you sure? I saw 25 likes until now…

2 Likes

@CarlosPedroza27 can you do a horizontal progress aswell?

1 Like

I’m working on that :smile:

We are almost there! Only 3 missing!

1 Like

Now 30)
This extension is very nice, pls give me download)

2 Likes

In few minutes I will upload the extension

Makeroid is crashing when I insert the extension as a component. What is the problem?

(Internal Bug)

This is the errorcode for chrome:

notes = Browser: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
foundIn = v2.2.0
faultData = com.google.gwt.event.shared.UmbrellaException: Exception caught: (TypeError) : Cannot set property 'leftPosition' of null
projectId = 5132934541475840

Error occurs in Firefox and Opera also.

1 Like

It’s working on App Inventor 2 fine.

But this can not be “none”, it has to have a background color…

@CarlosPedroza27 can you look into it and make a solution for the transparent bg color?

With App Inventor it’s working, but Makeroid doesn’t work. Can anyone confirm this?

I will take a look into that

1 Like

Wait, the whole extension doesn’t work are you going to find a solution for that??