Circular Progress Extension

extension

#1

CIRCULAR PROGRESS EXTENSION

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.

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

Price

It took less than a day to sponsor this extension with likes! Wow! Great job guys!
Thank you for your support!
For more features or customization, send a PM for princing information.

Pedroza’s Extension

Here is the list with all the extensions I’ve published so far:

  1. Polylines Tool Extension: Available at Thunkable.
  2. PedrozaSQLite Extension: Available at: AppyBuilder.
  3. Rating Bar Dialog (with Andres Cotes). Available at: AppyBuilder.
  4. PedrozaThumbnail Extension: Available at: AppyBuilder.
  5. Firebase AddOn Extension. Available at AppyBuilder (to be sponsored).
  6. PedrozaGlide Extension: Available at AppyBuilder.
  7. MaterialCards (with Andrés Cotes): Available at AppyBuilder
  8. Circular Progress Extension: This one!.

Upcoming SneakPeek

  1. TickView extension In development, final testing.
  2. Picasso Extension: In development, adding more features.

[Free] Tabs look WhatsApp
#2

Wow, great extension @Carlos_Pedroza and great documentation, thank you!

(Looking forward to the “sneak peek” extension too!! :grinning:)


#3

@Carlos_Pedroza Great Job!


#4

Awesome Extension :+1:
Great Work


#5

30 likes, free there.


#6

31… :wink:


#7

30 likes, free there.
now 31

congratulation :beers:


#8

Buen trabajo @Carlos_Pedroza, cada vez mejores extensiones.


#9

Wow! In less than a day! Thank you very much Thunkable Community for your support! In minutes I will publish the extension!


#10

.AIX and .APK published!
Thank you for your support!


#11

when upload aix on thinkable , then what happen
may be something are missing


#12

No, it is not missing, if you click it, you will be able to select the color. Maybe the @thunkable could take a look into that? Or maybe they can tell us which is the best practice in these cases.


#13

yes u are right .
but why its show this ?


#14

We are looking into this.


#15

This extension seems very good but I don’t see the .aia file to studying like example. I downloaded the .aix file and .apk file.
Where I can find it?


#16

Como puedo hacer para que funcione como carga de pagina o splash y el anillo temine cuando el reloj termine?


#17

Estarías descargando imágenes en la carga de página? Podrías ir aumentando el progreso desde 0 hasta 100 con un timer y/o determinando qué porcentaje sumar cuando se descargue una imagen o se cargue un componente.


#18

si solo es eso que funcione en una intro como pagina de carga


#19

@Carlos_Pedroza Please send me the aia file . Because i can find the input value "arrGenerateRing" and “arrGenerateSector” please send me the aia file…

email id : [email protected]
thank you
:grinning::grinning::grinning::wink::wink:


#20

hello,
has anyone used this with a clock timer countdown?