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

Discussion in 'Additional libraries, classes and official updates' started by Erel, Jul 13, 2017.

Thread Status:
Not open for further replies.
  1. Erel

    Erel Administrator Staff Member Licensed User

    This class is compatible with B4A, B4i and B4J.

    [​IMG]

    [​IMG]

    [​IMG]

    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"

    Code:
    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.
     

    Attached Files:

    Last edited: Oct 16, 2017
  2. LordZenzo

    LordZenzo Well-Known Member Licensed 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: Jul 13, 2017
  3. LucaMs

    LucaMs Expert Licensed 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: Jul 13, 2017
  4. Erel

    Erel Administrator Staff Member Licensed User

    On a real device it looks better than in the screenshots.
     
    luke2012 likes this.
  5. LucaMs

    LucaMs Expert Licensed User

    Not on my real device (1280 x 800 - scale 1) :(:)
     
  6. Erel

    Erel Administrator Staff Member Licensed User

    I've updated the class to enable antialiasing.
     
    ocalle, Peter Simpson and LucaMs like this.
  7. LordZenzo

    LordZenzo Well-Known Member Licensed User

    :)Antialiasing saves many images from the trash

    l'antialiasing salva molte immagini dal cestino
     
    LucaMs likes this.
  8. Erel

    Erel Administrator Staff Member Licensed User

    Another update. The animation progress is now ease-in ease-out instead of linear. It is based on a formula from this page: http://gizma.com/easing/

    The code makes it very simple to change to a different math formula.
     
  9. StarinschiAndrei

    StarinschiAndrei Active Member Licensed User

    Hello , i try to compile you example and i got an error:
    upload_2017-7-13_17-44-34.png
     
  10. DonManfred

    DonManfred Expert Licensed User

    https://www.b4x.com/b4a.html
    You need to update your JAVA
     
  11. StarinschiAndrei

    StarinschiAndrei Active Member Licensed User

  12. Misterbates

    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:
    Code:
    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
    Code:
    Sub Button1_Click
        
    Dim target As Int = Rnd(0101)
        CircularProgressBar1.MaxMillisecs = 
    5*60*1000 ' 5 minutes, the display will be in m:ss
        CircularProgressBar1.Value = target
        CircularProgressBar2.Value = target
    End Sub
     

    Attached Files:

    Last edited: Jul 14, 2017
    Erel likes this.
  13. Erel

    Erel Administrator Staff Member Licensed User

    Misterbates likes this.
  14. Erel

    Erel Administrator Staff Member Licensed User

    v1.00 is released. It is compatible with B4A, B4i and B4J.
     
  15. Erel

    Erel Administrator Staff Member Licensed User

    V2.00 is released. It is based on XUI library. The class code is identical in all three platforms.
     
  16. luke2012

    luke2012 Well-Known Member Licensed User

    Thanks @Erel! :)
     
  17. Mahares

    Mahares Well Known Member Licensed 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: Oct 16, 2017
  18. DavideV

    DavideV Active Member Licensed 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
     

    Attached Files:

    Dave O, Wolli013 and luke2012 like this.
  19. desof

    desof Well-Known Member Licensed User

    Is it possible to change the color at run time?
    How?
     
  20. DonManfred

    DonManfred Expert Licensed 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.
     
    Peter Simpson likes this.
Thread Status:
Not open for further replies.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice