Circular Progress Extension (Preview)

extension

#1

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.

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


#2

Beautiful and useful extension, @CarlosPedroza27
Congrats…


#3

Very good, @CarlosPedroza27!!!


#4

very good looking i must say…need more graphical extensions like this…please


#5

soy el Numero 30! :grinning:


#6

você vai liberar, já tem mais de 30 likes… :grinning:


#7

30 Like Completed plz give this extention


#8

https://community.thunkable.com/uploads/default/original/2X/9/9c8894a00bd5ab7b8a6ba5b116bf1d45f38dedb8.aix


#9

como coloca o numero de porcentagem no meio da barra circular?


#11

exellent my friend. congratulations.


#12

Please show me block image how to setup this to show user work in progress please wait


#13

Great work! I especially love the descriptions of the Methods and Properties!


#14

Good work, very usefull


#15

Thanks you for sharing this extension !


#17

the link for extension is not work
can you share it again


#18

The link is not working! Please help.


#19

Did you try this link:
https://community.thunkable.com/uploads/default/original/2X/9/9c8894a00bd5ab7b8a6ba5b116bf1d45f38dedb8.aix