B4A Library PulseView - Add a coloured pulse around your icons

It wraps this Github project. Posting the following:

1. B4A project
2. B4A library files - copy them to your additional library folder

Click on the icon to start / stop the pulsing (it can be used as a "Button"). The library raises events in the B4A project when the pulsing is started and stopped.

Add the icons (*.png or *.jpg) to the /Objects/res/drawable folder of the B4A project and set them to READ ONLY. Prior to that it is recommended that you edit your icons (with something like GIMP) and set the background to transparent.

+100

+200
...and another one for my friend @MarcoRome

Sample code:

#Region  Project Attributes
    #ApplicationLabel: PulseView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
#End Region

#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.

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 pv1 As PulseView
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")

    pv1.IconDrawable = "icon"                            'this icon must be in the B4A project's /Objects/res/drawable folder
    pv1.IconHeight = 200
    pv1.IconWidth = 200
    pv1.PulseCount = 6                                   'set the number of pulses to display simultaneously
    pv1.PulseAlpha = 150                                 'Set the Alpha of the pulse color
    pv1.PulseSpawnPeriod = 600                           'set the time in milliseconds to emit another pulse from the core
    pv1.PulseColor = Colors.Yellow                       'set the color of the pulse being emitted
    pv1.ShowToastMessages = True                         'show a toast message when pulsing starts?
    pv1.StartToastMessage = "Pulsing  Started"           'toast message text to show when pulsing starts
    pv1.FinishToastMessage = "Pulsing  Finished"         'toast message text to show when pulsing finishes
 

End Sub

Sub Activity_Resume

    'pv1.start

End Sub

Sub Activity_Pause (UserClosed As Boolean)

    pv1.stopPulse

End Sub

Sub pv1_pulse_started()

    Log("B4A : pulse started")

End Sub

Sub pv1_pulse_finished()

    Log("B4A : pulse finished")

End Sub

Library

PulseView
Author: Github: GIGAMOLE, Wrapped by: Johan Schoeman
Version: 1

• PulseView
  Events:
  • pulse_started () , pulse_finished()
  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)
  • startPulse
    Start the pulsing
  • stopPulse
    Stop the pulse
  Properties:
  • Background As Drawable
  • Color As Int [write only]
  • Enabled As Boolean
  • FinishToastMessage As String [write only]
    Set the toast message when pulsing finishes
    Click on the pulsing icon to finish the pulsing
  • Height As Int
  • IconDrawable As String [write only]
    Set icon drawable that should be in the /drawable folder of the B4A project
    for eg if the icon file is called icon.png or icon.jpg then in B4A just use:
    IconDrawable = "icon"
  • IconHeight As Int [write only]
    Set the icon height
  • IconWidth As Int [write only]
    Set the icon width
  • Left As Int
  • Parent As Object [read only]
  • PulseAlpha As Float [write only]
    Set the Alpha of the pulse color
  • PulseColor As Int [write only]
    Set the pulse color
  • PulseCount As Int [write only]
    Set the number of pulses to display
  • PulseSpawnPeriod As Long [write only]
    Set the time in milliseconds for the next pulse to be emitted
  • ShowToastMessages As Boolean [write only]
    Set if a toast message should be displayed or not
  • StartToastMessage As String [write only]
    Set the toast message when pulsing starts
    Click on the icon to start the pulsing
  • Tag As Object
  • Top As Int
  • Visible As Boolean
  • Width As Int

 

[MarcoRome]

For sure there will be an opportunity to use these fantastic effects.
+200
Another Great Library
Thanks' Johan

 

[strat]

I made a simple button click effect. Sometimes color cycling restarts after fading. I couldn't solved it.

 

[Johan Schoeman]

I made a simple button click effect. Sometimes color cycling restarts after fading. I couldn't solved it.

Try with the new attached library files and the attached B4A project. I have removed your additional button and added "Click!" to your button.png in the /Objects/res/drawable folder. Thanks for pointing this out - I have not reset the state tracking variable inside the library. The attached should sort it out (either the timer will stop the pulsing or you can click on the pulsing icon to stop the pulsing) when making use of the b4a timer to stop the pulsing.

#Region  Project Attributes
    #ApplicationLabel: STRAT
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
#End Region

#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 pv1 As PulseView
  
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", 3000)
  
End Sub


Sub Activity_Resume
  
    pv1.IconDrawable="button"                           'this icon must be in the B4A project's /Objects/res/drawable folder
    pv1.IconHeight = 25%x
    pv1.IconWidth = 25%x
    pv1.Width=50%x
    pv1.Height=50%x
    pv1.Left=30%x
    pv1.Top=30%y
    pv1.PulseCount = 5                                  'set the number of pulses to display simultaneously
    pv1.PulseAlpha = 150                                'Set the Alpha of the pulse color
    pv1.PulseSpawnPeriod = 700                          'set the time in milliseconds to emit another pulse from the core
    pv1.PulseColor = Colors.Cyan                        'set the color of the pulse being emitted
    pv1.ShowToastMessages = False                       'show a toast message when pulsing starts?

End Sub

Sub Activity_Pause (UserClosed As Boolean)
    pv1.stopPulse
End Sub

Sub pv1_pulse_started()
    t.Enabled = True
    Log("B4A : pulse started")
End Sub

Sub pv1_pulse_finished()
    Log("B4A : pulse finished")
End Sub

Sub t_tick
  
    t.Enabled = False
    pv1.stopPulse
  
End Sub

 

[strat]

I was away sorry.
Thank you for your effort, your sample works better.
I used real button because of button's press behaviours that other views have'n got.