B4A Library NumberMorphView

Here is a small wrap for this Github project. Posting the following:

1. B4A project
2. B4A library files - copy them to your additional library folder
3. AdditionalLibsResource.zip - extract the folder and copy the folder to the root of your additional library folder.
4. The Java code - change it to your liking. Note that you need to create a libs folder on the same folder level as the src folder and then copy android-support-v4.jar and android-support-v7-appcompat.jar into the libs folder in order to compile the Java code.

I have made a simple "digital" clock with it for demonstration purposes.

1.png


sample.gif



Sample Code:
Code: Copy 
#Region  Project Attributes
    #ApplicationLabel: NumberMorphView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region
#AdditionalRes: ..\resource

#AdditionalRes: C:\Users\----------2\Documents\Basic 4 Android\JOHAN APPS\JHS LIBS\resource\b4a_appcompat, de.amberhome.objects.appcompat

#AdditionalRes: C:\ANDRIOD_SDK_TOOLS\extras\android\support\v7\appcompat\res, android.support.v7.appcompat
'#AdditionalRes: C:\ANDRIOD_SDK_TOOLS\extras\android\support\design\res, android.support.design

#Extends: android.support.v7.app.AppCompatActivity


#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Dim t As Timer

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private nmv1 As NumberMorphView
    Private nmv2 As NumberMorphView
    Private nmv3 As NumberMorphView
    Private nmv4 As NumberMorphView
    Private nmv5 As NumberMorphView
    Private nmv6 As NumberMorphView
   
    Dim prevsec As Long
   
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("main")
    t.Initialize("t", 10)
   
    nmv6.NumberColor = Colors.Green
    nmv6.NumberStrokeWidth = 12
   
    nmv5.NumberColor = Colors.Red
    nmv5.NumberStrokeWidth = 12   
   
    nmv4.NumberColor = Colors.Blue
    nmv4.NumberStrokeWidth = 12       
   
    nmv3.NumberColor = Colors.Yellow
    nmv3.NumberStrokeWidth = 12       
   
    nmv2.NumberColor = Colors.Cyan
    nmv2.NumberStrokeWidth = 12   
   
    nmv1.NumberColor = Colors.Magenta
    nmv1.NumberStrokeWidth = 12               
   
End Sub

Sub Activity_Resume
    t.Enabled = True
    prevsec = DateTime.GetSecond(DateTime.Now)

End Sub

Sub Activity_Pause (UserClosed As Boolean)
    t.Enabled = False

End Sub

Sub t_tick
   
    Dim hr As Long = DateTime.GetHour(DateTime.Now)
    Dim mn As Long = DateTime.GetMinute(DateTime.Now)
    Dim sec As Long = DateTime.GetSecond(DateTime.Now)
   
    If sec <> prevsec Then
        prevsec = sec
        nmv6.CurrentNumber = sec mod 10
        nmv5.CurrentNumber = (sec - (sec mod 10)) / 10

        nmv4.CurrentNumber = mn mod 10
        nmv3.CurrentNumber = (mn - (mn mod 10)) / 10
       
        nmv2.CurrentNumber = hr mod 10
        nmv1.CurrentNumber = (hr - (hr mod 10)) / 10           
    End If
   
   
End Sub

Library:
NumberMorphView
Author: Github: Even201314, Wrapped by: Johan Schoeman
Version: 1
  • NumberMorphView
    Fields:
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    Properties:
    • Background As Drawable
    • Color As Int [write only]
    • CurrentNumber As Int [write only]
    • Enabled As Boolean
    • Height As Int
    • Left As Int
    • NumberColor As Int [write only]
    • NumberStrokeWidth As Int [write only]
    • Parent As Object [read only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

Click to expand...
Would it be possible to add the additional Interpolators : LinearInterpolator, OvershootInterpolator, SpringInterpolator, BounceInterpolator, AnticipateOvershootInterpolator, CubicHermiteInterpolator and add the setPeriod() function to set the interval time of animation?

Thank you for this Library!!

John
 
johndb said:
Would it be possible to add the additional Interpolators : LinearInterpolator, OvershootInterpolator, SpringInterpolator, BounceInterpolator, AnticipateOvershootInterpolator, CubicHermiteInterpolator and add the setPeriod() function to set the interval time of animation?

Thank you for this Library!!

John
Click to expand...
Will add them John and then post an update - will try and get to it sometime this week.
 
johndb said:
Would it be possible to add the additional Interpolators : LinearInterpolator, OvershootInterpolator, SpringInterpolator, BounceInterpolator, AnticipateOvershootInterpolator, CubicHermiteInterpolator and add the setPeriod() function to set the interval time of animation?

Thank you for this Library!!

John
Click to expand...
Here you go John. Attached new lib files (V1.01) and a new demo project. Use it with AppCompat V3.20 enabled in the Libs tab of the B4A project (download it from the forum if you don't have it yet).

Extract resource.zip and then copy folder /resource to be on the same folder level as that of the /Files and /Objects folders of the B4A project.

Sample code:

Code: Copy 
#Region  Project Attributes
    #ApplicationLabel: NumberMorphView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region
#AdditionalRes: ..\resource

'#AdditionalRes: C:\Users\----------2\Documents\Basic 4 Android\JOHAN APPS\JHS LIBS\resource\b4a_appcompat, de.amberhome.objects.appcompat

'#AdditionalRes: C:\ANDRIOD_SDK_TOOLS\extras\android\support\v7\appcompat\res, android.support.v7.appcompat
'#AdditionalRes: C:\ANDRIOD_SDK_TOOLS\extras\android\support\design\res, android.support.design

'#Extends: android.support.v7.app.AppCompatActivity


#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Dim t As Timer

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private nmv1 As NumberMorphView
    Private nmv2 As NumberMorphView
    Private nmv3 As NumberMorphView
    Private nmv4 As NumberMorphView
    Private nmv5 As NumberMorphView
    Private nmv6 As NumberMorphView
 
    Dim prevsec As Long
 
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("main")
    t.Initialize("t", 10)
 
 
    nmv6.NumberColor = Colors.Green
    nmv6.NumberStrokeWidth = 12
    nmv6.OvershootInterpolatorTension = 1.3
    nmv6.Interpolator = nmv6.OVERSHOOT_INTERPOLATOR

 
    nmv5.NumberColor = Colors.Red
    nmv5.NumberStrokeWidth = 12 
    nmv5.SpringInterpolatorTension = 1.7
    nmv5.Interpolator = nmv5.SPRING_INTERPOLATOR
 
 
    nmv4.NumberColor = Colors.Blue
    nmv4.NumberStrokeWidth = 12
    nmv4.Interpolator = nmv4.BOUNCE_INTERPOLATOR 
 
    nmv3.NumberColor = Colors.Yellow
    nmv3.NumberStrokeWidth = 12 
    nmv3.Interpolator = nmv3.BOUNCE_INTERPOLATOR
 
    nmv2.NumberColor = Colors.Cyan
    nmv2.NumberStrokeWidth = 12
    nmv2.AnticipateOvershootInterpolatorTension = 1.6
    nmv2.Interpolator = nmv2.ANTICIPATE_OVERSHOOT_INTERPOLATOR
 
    nmv1.NumberColor = Colors.Magenta
    nmv1.NumberStrokeWidth = 12     
    nmv1.setCubicHermiteInterpolatorValues(1.3, 1.4)
    nmv1.Interpolator = nmv1.CUBIC_HERMITE_INTERPOLATOR
 
End Sub

Sub Activity_Resume
    t.Enabled = True
    prevsec = DateTime.GetSecond(DateTime.Now)

End Sub

Sub Activity_Pause (UserClosed As Boolean)
    t.Enabled = False

End Sub

Sub t_tick
 
    Dim hr As Long = DateTime.GetHour(DateTime.Now)
    Dim mn As Long = DateTime.GetMinute(DateTime.Now)
    Dim sec As Long = DateTime.GetSecond(DateTime.Now)
 
    If sec <> prevsec Then
        prevsec = sec
        nmv6.Interpolator = Rnd(0,5)
        nmv6.CurrentNumber = sec mod 10
     
        nmv5.Interpolator = Rnd(0,5)
        nmv5.CurrentNumber = (sec - (sec mod 10)) / 10
     
        nmv4.Interpolator = Rnd(0,5)
        nmv4.CurrentNumber = mn mod 10
        nmv4.Interpolator = Rnd(0,5)
     
        nmv3.Interpolator = Rnd(0,5)
        nmv3.CurrentNumber = (mn - (mn mod 10)) / 10
     
        nmv2.Interpolator = Rnd(0,5)
        nmv2.CurrentNumber = hr mod 10
     
        nmv1.Interpolator = Rnd(0,5)
        nmv1.CurrentNumber = (hr - (hr mod 10)) / 10
                 
    End If
 
 
End Sub

Library:
NumberMorphView
Author: Github: Even201314, Wrapped by: Johan Schoeman
Version: 1.01
  • NumberMorphView
    Fields:
    • ANTICIPATE_OVERSHOOT_INTERPOLATOR As Int
    • BOUNCE_INTERPOLATOR As Int
    • CUBIC_HERMITE_INTERPOLATOR As Int
    • OVERSHOOT_INTERPOLATOR As Int
    • SPRING_INTERPOLATOR As Int
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • setCubicHermiteInterpolatorValues (xval As Float, yval As Float)
    Properties:
    • AnticipateOvershootInterpolatorTension As Float [write only]
    • Background As Drawable
    • Color As Int [write only]
    • CurrentNumber As Int [write only]
    • Enabled As Boolean
    • Height As Int
    • Interpolator As Int [write only]
    • Left As Int
    • NumberColor As Int [write only]
    • NumberStrokeWidth As Int [write only]
    • OvershootInterpolatorTension As Float [write only]
    • Parent As Object [read only]
    • SpringInterpolatorTension As Float [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

Johan Schoeman said:
Here you go John. Attached new lib files (V1.01) and a new demo project. Use it with AppCompat V3.20 enabled in the Libs tab of the B4A project (download it from the forum if you don't have it yet).

Extract resource.zip and then copy folder /resource to be on the same folder level as that of the /Files and /Objects folders of the B4A project.

Sample code:

Code: Copy 
#Region  Project Attributes
    #ApplicationLabel: NumberMorphView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region
#AdditionalRes: ..\resource

'#AdditionalRes: C:\Users\----------2\Documents\Basic 4 Android\JOHAN APPS\JHS LIBS\resource\b4a_appcompat, de.amberhome.objects.appcompat

'#AdditionalRes: C:\ANDRIOD_SDK_TOOLS\extras\android\support\v7\appcompat\res, android.support.v7.appcompat
'#AdditionalRes: C:\ANDRIOD_SDK_TOOLS\extras\android\support\design\res, android.support.design

'#Extends: android.support.v7.app.AppCompatActivity


#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Dim t As Timer

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private nmv1 As NumberMorphView
    Private nmv2 As NumberMorphView
    Private nmv3 As NumberMorphView
    Private nmv4 As NumberMorphView
    Private nmv5 As NumberMorphView
    Private nmv6 As NumberMorphView

    Dim prevsec As Long

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("main")
    t.Initialize("t", 10)


    nmv6.NumberColor = Colors.Green
    nmv6.NumberStrokeWidth = 12
    nmv6.OvershootInterpolatorTension = 1.3
    nmv6.Interpolator = nmv6.OVERSHOOT_INTERPOLATOR


    nmv5.NumberColor = Colors.Red
    nmv5.NumberStrokeWidth = 12
    nmv5.SpringInterpolatorTension = 1.7
    nmv5.Interpolator = nmv5.SPRING_INTERPOLATOR


    nmv4.NumberColor = Colors.Blue
    nmv4.NumberStrokeWidth = 12
    nmv4.Interpolator = nmv4.BOUNCE_INTERPOLATOR

    nmv3.NumberColor = Colors.Yellow
    nmv3.NumberStrokeWidth = 12
    nmv3.Interpolator = nmv3.BOUNCE_INTERPOLATOR

    nmv2.NumberColor = Colors.Cyan
    nmv2.NumberStrokeWidth = 12
    nmv2.AnticipateOvershootInterpolatorTension = 1.6
    nmv2.Interpolator = nmv2.ANTICIPATE_OVERSHOOT_INTERPOLATOR

    nmv1.NumberColor = Colors.Magenta
    nmv1.NumberStrokeWidth = 12    
    nmv1.setCubicHermiteInterpolatorValues(1.3, 1.4)
    nmv1.Interpolator = nmv1.CUBIC_HERMITE_INTERPOLATOR

End Sub

Sub Activity_Resume
    t.Enabled = True
    prevsec = DateTime.GetSecond(DateTime.Now)

End Sub

Sub Activity_Pause (UserClosed As Boolean)
    t.Enabled = False

End Sub

Sub t_tick

    Dim hr As Long = DateTime.GetHour(DateTime.Now)
    Dim mn As Long = DateTime.GetMinute(DateTime.Now)
    Dim sec As Long = DateTime.GetSecond(DateTime.Now)

    If sec <> prevsec Then
        prevsec = sec
        nmv6.Interpolator = Rnd(0,5)
        nmv6.CurrentNumber = sec mod 10
    
        nmv5.Interpolator = Rnd(0,5)
        nmv5.CurrentNumber = (sec - (sec mod 10)) / 10
    
        nmv4.Interpolator = Rnd(0,5)
        nmv4.CurrentNumber = mn mod 10
        nmv4.Interpolator = Rnd(0,5)
    
        nmv3.Interpolator = Rnd(0,5)
        nmv3.CurrentNumber = (mn - (mn mod 10)) / 10
    
        nmv2.Interpolator = Rnd(0,5)
        nmv2.CurrentNumber = hr mod 10
    
        nmv1.Interpolator = Rnd(0,5)
        nmv1.CurrentNumber = (hr - (hr mod 10)) / 10
                
    End If


End Sub

Library:
NumberMorphView
Author: Github: Even201314, Wrapped by: Johan Schoeman
Version: 1.01
  • NumberMorphView
    Fields:
    • ANTICIPATE_OVERSHOOT_INTERPOLATOR As Int
    • BOUNCE_INTERPOLATOR As Int
    • CUBIC_HERMITE_INTERPOLATOR As Int
    • OVERSHOOT_INTERPOLATOR As Int
    • SPRING_INTERPOLATOR As Int
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • setCubicHermiteInterpolatorValues (xval As Float, yval As Float)
    Properties:
    • AnticipateOvershootInterpolatorTension As Float [write only]
    • Background As Drawable
    • Color As Int [write only]
    • CurrentNumber As Int [write only]
    • Enabled As Boolean
    • Height As Int
    • Interpolator As Int [write only]
    • Left As Int
    • NumberColor As Int [write only]
    • NumberStrokeWidth As Int [write only]
    • OvershootInterpolatorTension As Float [write only]
    • Parent As Object [read only]
    • SpringInterpolatorTension As Float [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
Click to expand...
This is fantastic. Thank you so very much @Johan Schoeman. I'll give it a go later this afternoon.
 
You must log in or register to reply here.

Similar Threads

Alexander Stolte
  • Article Article
B4A Library [B4X] [XUI] AS Scheduler 📅 - MonthView, DayView (Week), AgendaView and CalendarView [Payware]
11 12 13
Replies
244
Views
114K
astronald
A
Alexander Stolte
  • Article Article
B4A Library [B4X] [XUI] AS WheelPicker - Spinner - a modern single/multiple choice picker view - based on xCustomListView [Payware]
7 8 9
Replies
173
Views
100K
Alexander Stolte
Alexander Stolte
Erel
  • Locked
  • Article Article
B4A Library [B4X] XUI Views - Cross platform views and dialogs
4 5 6
Replies
102
Views
259K
Erel
Erel
Alexander Stolte
  • Article Article
B4A Library [B4X] [XUI] AS AnimatedCounter (negative- and positive-numbers)
Replies
5
Views
9K
Alexander Stolte
Alexander Stolte
Erel
  • Article Article
Android Tutorial [B4X] [XUI] CustomListView - lazy loading / virtualization
Replies
18
Views
53K
MarcoRome
MarcoRome
Back
Top