Circular Progress Extension (Preview)

[CarlosPedroza27 (Carlos Pedroza)]

–

CIRCULAR PROGRESS EXTENSION PREVIEW

Description

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

Circular Progress Extension Preview

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.
  

• 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.
  

Properties

Circular Ring Progress

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

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

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

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

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

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

Circular Sector Progress

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

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

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

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

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)

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.

Pay Desarrollo de Software using PayPal.Me

Upcoming SneakPeek

[Conor]

Wow!
That’s amazing!

[Ka_Fa]

@CarlosPedroza27 minAPI?

[CarlosPedroza27 (Carlos Pedroza)]

@CarlosPedroza27 minAPI?

Minimum Api Level 11 (HONEYCOMB)

[Ka_Fa]

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

[CarlosPedroza27 (Carlos Pedroza)]

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.

[Ali_Aydin (Pme)]

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

[CarlosPedroza27 (Carlos Pedroza)]

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

[TheGRIFChannel]

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

[Kleyber_Derick]

Are you sure? I saw 25 likes until now…

[Marggx]

@CarlosPedroza27 can you do a horizontal progress aswell?

[CarlosPedroza27 (Carlos Pedroza)]

I’m working on that

@TheGRIFChannel

you have 30 likes go url download pls

We are almost there! Only 3 missing!

[TheGRIFChannel]

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

[CarlosPedroza27 (Carlos Pedroza)]

Now 30)

This extension is very nice, pls give me download)

In few minutes I will upload the extension

[TurboProgramming (Arda Çebi)]

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

(Internal Bug)

[Peter (Moderator)]

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.

[Ka_Fa]

It’s working on App Inventor 2 fine.

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

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

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

[TurboProgramming (Arda Çebi)]

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

[CarlosPedroza27 (Carlos Pedroza)]

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

I will take a look into that

[TurboProgramming (Arda Çebi)]

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