B4A Class [B4X] [XUI] [custom view] CircularProgressBar

Status
Not open for further replies.
This class is compatible with B4A, B4i and B4J.

CircularProgressBar.gif


CircularProgressBar_B4i.gif


CircularProgressBar_B4J.gif


A simple circular progress bar implemented as a custom view.

Usage:
Add the class to your project and add a custom view with the designer. Set its value with"

B4X:
CircularProgressBar1.Value = 100

The animation is smooth in release mode.

The interesting code is in AnimateValueTo. It implements the animation timeline. You can change the DrawValue implementation to create a completely different animation.


V2.00 is released. It is based on XUI library.
 

Attachments

  • CircularProgressBar.zip
    9.4 KB · Views: 2,878
Last edited:

LordZenzo

Well-Known Member
Licensed User
Longtime User
Good, so I can see a complete example of the use of sleep, which I still find difficult to digest

buono, cosi posso vedere un esempio completo dell uso di sleep, che ancora lo trovo ostico da digerire
 
Last edited:

LucaMs

Expert
Licensed User
Longtime User
I added the antialiasing; the initial circles look better but when you start the animation...

Original, withou antialiasing:
upload_2017-7-13_15-6-27.png




With antialiasing:
upload_2017-7-13_15-6-55.png
 
Last edited:

DonManfred

Expert
Licensed User
Longtime User

Misterbates

Active Member
Licensed User
Fantastic! I was looking for a circular progress bar to use with a timer app I'm developing. I adjusted the code to allow the display of times (as m:ss), as follows:
B4X:
Sub Class_Globals
    Private myMaxMillisecs As Long ' For m:ss display - set to the number of milliseconds representing the maximum time (100%)
End Sub

Public Sub setMaxMilliSecs(NewValue As Long)
    myMaxMillisecs = NewValue
End Sub

Public Sub getMaxMilliSecs As Long
    Return myMaxMillisecs
End Sub

Private Sub DrawValue(Value As Float)
    [snip]
    If myMaxMillisecs = 0 Then
        mLbl.Text = $"$1.0{Value}"$
    Else ' Show m:ss by scaling maxMilliseconds
        Dim lblMillisecs As Long = myMaxMillisecs * (Value / 100) ' Adjust code here to round up or down to next second
        Dim TimeFormat As String = DateTime.TimeFormat
        DateTime.TimeFormat = "m:ss"
        Dim Offset As Double = DateTime.TimeZoneOffset
        DateTime.SetTimeZone(0)
        mLbl.Text = DateTime.Time(lblMillisecs)
        DateTime.SetTimeZone(Offset)
        DateTime.TimeFormat = TimeFormat
    End If
    [snip]
End Sub

And in Main
B4X:
Sub Button1_Click
    Dim target As Int = Rnd(0, 101)
    CircularProgressBar1.MaxMillisecs = 5*60*1000 ' 5 minutes, the display will be in m:ss
    CircularProgressBar1.Value = target
    CircularProgressBar2.Value = target
End Sub
 

Attachments

  • Screenshot_20170714-075047.png
    Screenshot_20170714-075047.png
    73.8 KB · Views: 627
Last edited:

Mahares

Expert
Licensed User
Longtime User
When I run the example in this thread, I get this error on OS 7, or 5.1.1 with XUI 1.11. I have a feeling the XUI needs updated again:

B4A Version: 7.30
Parsing code. Error
Error parsing program.
Error description: Unknown type: b4xcanvas
Are you missing a library reference?
Error occurred on line: 11 (CircularProgressBar)
Private cvs As B4XCanvas

EDIT: @Erel must have downloaded XUI 1.20 afterwards. Now, with the new 1.20 XUI, it works just fine.
 
Last edited:

DavideV

Active Member
Licensed User
Longtime User
Hi,
i found a bug in the class V2.00 with certains stroke sizes and with the internal label (value) position.

Here is the fixed class.

I have added also:

Reset: to immediately set the circleprogressbar to 0
setValueUnit to add an Unit to the value , for example %, mV, ...
Visible, to hide /show the circleprogressbar
 

Attachments

  • CircularProgressBar.bas
    4.7 KB · Views: 587

DonManfred

Expert
Licensed User
Longtime User
I would guess you need to generate getter and setter for clrFull, clrEmpty inside the class.
The class is available. Check the code

For any other question: Please create a new thread in the Questions forum for your question.
 
Status
Not open for further replies.
Top