B4A Library SD: ViewAnimation

This library is entirely made of b4a.

This class receives the view and an image as parameters.
Once the class has been initialized, the image with the circular shape will be displayed in the background.

With the "Progress" methods add a circular progress bar of different graphics to the survey as you can see in the attached image

SD_ViewAnimation

Author: Star-Dust
Version: 0.16
  • ProgressCircle
    • Functions:
      • Class_Globals As String
      • Initialize (V As View, Btmp As Bitmap) As String
        Initializes the object. You can add parameters to this method if needed.
      • IsInitialized As Boolean
        Verificy if initialized
      • ProgressAppears (PerCent As Int) As String
      • ProgressArc (PerCent As Int, Color As Int, ArcPen As Int) As String
        'ArPen - thickness of the pen that marks the arc
      • ProgressBall (PerCent As Int, Color As Int) As String
      • ProgressBall2 (PerCent As Int, Color As Int) As String
      • ProgressFill (PerCent As Int, Color As Int) As String
      • ProgressStar (PerCent As Int, PerCent As Int, StarSize As Int) As String
        'StarSize - Dip Star size
      • ProgressSwipe (PerCent As Int, Color As Int) As String
      • ProgressVeil (PerCent As Int, Color As Int) As String
      • OnlyRounded
        Only rounded, it is used after using an animation to eliminate any chosen Circular Bar
video3.gif
ezgif.com-optimize.gif
 

Attachments

  • SD_ViewAnimation 0.16.zip
    5.6 KB · Views: 409
  • Example_1.zip
    49.8 KB · Views: 372
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
Example:
B4X:
Panel1.SetBackgroundImage(LoadBitmap(File.DirAssets,"android.png"))

ProgBar.Initialize(Panel1)
For i=0 To 100
      ProgBar.ProgressVeil(i,Colors.White)
      Sleep(50)
Next

With time limit
B4X:
Sub Button1_Click
  ProgBar.Initialize(Panel1)
  Execute(1000)
end Sub

Sub Execute(TimeTotal as int)
  For i=0 To 50
      ProgBar.ProgressArc(i,Colors.White, 6dip)
      Sleep(TimeTotal/50)
  Next
End Sub

I also wanted to publish the source code, but since it is not optimized because I did it quickly because I would have certainly received many pungent comments on the source and questions about why certain choices .... I prefer not, arrange :p:p
 
Last edited:

LucaMs

Expert
Licensed User
Longtime User
many pungent comments on the source
I remember that I wrote that it would be nice if the editor automatically inserted spaces between words, operators, etc.; spaces that you are reluctant to insert :D
(I wrote a "Wish" for this, time ago).


1) Currently I could not try your view in one of my test project because it is not listed in the Designer (I tried this but now it is not enough; I will try again soon);

2) there are not properties like: stroke width, star bitmap and star size; this could be ok but, starting your example on my tablet, it looks so:
1.gif


As you can see, the star is almost invisible.


3) I don't understand well the last example you posted, "time limit"; however what I would need is the ability to set the time to complete the entire circle, ie I can decide that the circle is completed for example in 10 seconds.

Other properties/methods could be the color of the filled circle and remove (clear) the filled circle.
 

Star-Dust

Expert
Licensed User
Longtime User
I remember that I wrote that it would be nice if the editor automatically inserted spaces between words, operators, etc.; spaces that you are reluctant to insert :D
(I wrote a "Wish" for this, time ago).


1) Currently I could not try your view in one of my test project because it is not listed in the Designer (I tried this but now it is not enough; I will try again soon);

2) there are not properties like: stroke width, star bitmap and star size; this could be ok but, starting your example on my tablet, it looks so:
View attachment 66688

As you can see, the star is almost invisible.


3) I don't understand well the last example you posted, "time limit"; however what I would need is the ability to set the time to complete the entire circle, ie I can decide that the circle is completed for example in 10 seconds.

Other properties/methods could be the color of the filled circle and remove (clear) the filled circle.
1. Don't undestand
2. Chance device
3. The third example is to make the cycle run over time as you requested, it is just what you asked
4. Be satisfied with what I have created as an alternative you can create one as you like :p
 

LucaMs

Expert
Licensed User
Longtime User
1) non vedo la tua view nell'elenco delle custom view (sorry for the italian text; the "question" is in Englih in my previous post).
Ho provato nuovamente usando quel "trucco" consigliato da Erel ma non funziona lo stesso (I tried again, using the Erel's workaround but without success).

2. Chance device
2) Change device? This answer is funny enough but I think you should add a property to set the bitmap (star) size and the stroke width OR you should set them as percentage of the "main bitmap".

3) I have to try it again (I closed the project to test my own); in your example you do not complete the circle.
 

Star-Dust

Expert
Licensed User
Longtime User
1. It is not a customview
2. Patience :p
3. Patience :p
 

LucaMs

Expert
Licensed User
Longtime User
1. It is not a customview
I saw, now:
B4X:
Sub ButtonMadeCircle_Click
    ProgBar.Initialize(Panel1,LoadBitmap(File.DirAssets,"android.png"))
End Sub

So, another "need": Bitmap property, otherwise you have to create a "non custom view" CircleProgressBar for each bitmap you need.

(BTW, I think you should change its name to SD ProgressCircle; it is not a "bar").
 

Star-Dust

Expert
Licensed User
Longtime User
You are wrong I do not create any other view but I use what you pass as a parameter and I attribute it as a background the image transformed into a circle.
The class name is PeogressCircle. You're confusing the class with the library.

I think you did not understand much of this library.
This is not a classic circular Progress bar, this class set an image in the background to any view and makes it circular. This is the main objective. In addition you can make an animation similar to a Progress bar or a star that goes around the background image of the point but only similar to a progressbar, but the principal goal of creating an animation to a background image rendered round
If you take the time to examine the class carefully, you will find the answers to your questions alone.

Please refrain from unnecessary interior comments you are only filling the thread for non-constructive comments.
Subsequently if the library is not to your liking, I'm sure you'll find others on the forum :)
 
Last edited:

LucaMs

Expert
Licensed User
Longtime User
You are wrong
Who? Me? Never :p

Please refrain from unnecessary interior comments you are only filling the thread for non-constructive comments.
Mine are useful "comments": I suggested to add methods and properties.

If the library is not to your liking, I'm sure you'll find others on the forum
You are too nervous and susceptible; as I wrote, mine are not negative comments but suggestions.
 

Star-Dust

Expert
Licensed User
Longtime User
I am neither nervous nor susceptible, but the observation you made by filling this thread would surely have been avoided if you had looked closely at this library.

They seem only useless and pretentious criticism, I asked myself if you were nervous given the unnecessarily critical remarks you made.
Remember that we are not on chit chat .. we must not fill the thread of chatter.

Re-read everything you have written please.
1) I can not find the CustomView (it's not a customView, you could understand it by yourself since it's not there)
2) In my tablet you see the star small (I answered patience, obviously I did not want to make changes)
3) I do not understand the example TimeLimit, but I would like to understand how to follow the lap within a set time (it was just that example)
4) It is not a bar you should not call it ProcressCircolarBar (The class is called ProgressCircolar, even if the other libraries you find on the forum call it ProgressCircleBar)
5) You have to create a view for each bitmap (On the contrary for every view you want to customize the backgroud you have to set a bitmap with my class)

Mine are useful "comments": I suggested to add methods and properties.
read my answers
...I would have certainly received many pungent comments on the source and questions about why certain choices .... I prefer not, arrange :p:p
4. Be satisfied with what I have created as an alternative you can create one as you like :p
2. Patience :p
3. Patience :p
If the library is not to your liking, I'm sure you'll find others on the forum :)
In which of my answers did I convey the idea of looking for suggestions to change the class?
 
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
Other Example:
B4X:
Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
    Dim ProgBar As ProgressCircle

    Private Panel1 As Panel
    Private Panel2 As Panel
    Private Panel3 As Panel
    Private Panel4 As Panel
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("Lauout1")
   
    ProgBar.Initialize(Panel1)
    ProgBar.ProgressArc(100,Colors.White,8dip)
    ProgBar.Initialize(Panel2)
    ProgBar.ProgressArc(100,Colors.White,8dip)
    ProgBar.Initialize(Panel3)
    ProgBar.ProgressArc(100,Colors.White,8dip)
    ProgBar.Initialize(Panel4)
    ProgBar.ProgressArc(100,Colors.White,8dip)
End Sub

Sub Button1_Click
    Dim Radius As Int = Panel1.Width/2
    Dim CoX As Int
    Dim CoY As Int
 
    For pos=0 To 100
        CoX = Radius*(1-Cos((2*cPI)*(pos/100)))
        CoY = Radius*(1-Sin((2*cPI)*(pos/100)))
        Panel1.SetLayoutAnimated(50,CoX,CoY,Panel1.Width,Panel1.Height)
  
        CoX = Radius*(1-Cos((2*cPI)*((pos+25)/100)))
        CoY = Radius*(1-Sin((2*cPI)*((pos+25)/100)))
        Panel2.SetLayoutAnimated(50,CoX,CoY,Panel2.Width,Panel2.Height)
  
        CoX = Radius*(1-Cos((2*cPI)*((pos+50)/100)))
        CoY = Radius*(1-Sin((2*cPI)*((pos+50)/100)))
        Panel3.SetLayoutAnimated(50,CoX,CoY,Panel3.Width,Panel3.Height)
  
        CoX = Radius*(1-Cos((2*cPI)*((pos+75)/100)))
        CoY = Radius*(1-Sin((2*cPI)*((pos+75)/100)))
        Panel4.SetLayoutAnimated(50,CoX,CoY,Panel4.Width,Panel4.Height)
        Sleep(50)
    Next
End Sub

Results
video3.gif

Other use of the class
video2.gif
 

Attachments

  • Example_2.zip
    160.9 KB · Views: 304
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
After a careful friendly
smiley-2.png
discussion with my friend @LucaMs,
he convinced me to change the library name and add some of the proposed changes.

Now it will not be necessary to pass the bitmap as a parameter but it will absorb it directly from the Background set in the View that you want to animate (thank @Erel and @DonManfred for its help in this)

I have updated the library to version 0.13

P.S.
With this change I hope to have closed with this library
 

Star-Dust

Expert
Licensed User
Longtime User
This is another three examples of the methods of my library.

With this I closed because I was bored, I did not even want to create it

B4X:
Panel1.SetBackgroundImage(LoadBitmap(File.DirAssets,"android.png"))
For i=0 To 100
    ProgBar.ProgressFiil(i,Colors.White)
    ' ProgBar.ProgressFiil(i,Colors.ARGB(150,255,255,255))
    Sleep(50)
Next
video8.gif
video7.gif
 
Last edited:

Star-Dust

Expert
Licensed User
Longtime User
Update 0.16

ProgressSwipe (PerCent As Int, Color As Int) As String

66820
 
Last edited:
Top