B4A Library ConnectPatternView

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

1. B4A project
2. B4A library files.
3. Link to other jar files - download them from HERE and copy them to your additional library folder.
4. resource.zip - copy it to the B4A project so that it is on the same folder level as the Files and Objects folders
5. AdditionalLibsResource.zip - copy to it to the root folder of your additional library folder

Take note of the following code in the B4A project - set your paths up accordingly
B4X:
#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

The lib allows you to:
1. use a pattern WITHOUT using the same node twice. Thus, define a start and end node not to be the same
2. Do not use a pattern where lines are crossing the same node
3. You can use either the standard filled color circles or a drawable that should be in the /Objects/res/drawable folder of the B4A project (ensure they are ready only - I have added some). Comment / uncomment line 64 of the B4A code to either use a drawable or the standard color filled circles.
4. Specify the standard circle color
5. Specify the color of the connecting lines
6. Specify the line thickness of the connecting lines.
7. Specify the Radius that will be used for the standard circles of the drawables

The below pics is the connecting pattern that I have used in the B4A code. It starts at the right top node... sure you will figure it out.

It has a nice animation. Use one of the following options:
B4X:
    'cpv1.AnimationType = cpv1.ANIMATION_TYPE_BOTTOM 
    'cpv1.AnimationType = cpv1.ANIMATION_TYPE_NONE
    cpv1.AnimationType = cpv1.ANIMATION_TYPE_MIDDLE

You need to add your own B4A code to record and save the connecting pattern:

USING "lock3.png" in the /Object/res/drawable folder of the B4A project and setting it with
cpv1.addImage("lock3")
1.png


Using the standard color filled circles and not a drawable by commenting line 64 of the attached B4A project

2.png


Library:

ConnectPatternView
Author:
Github: Magda Myka, Wrapped by: Johan Schoeman
Version: 1
  • ConnectPatternView
    Events:
    • correct_pattern_entered (correct_pattern As Boolean)
    • pattern_abandoned
    Fields:
    • ANIMATION_TYPE_BOTTOM As Int
    • ANIMATION_TYPE_MIDDLE As Int
    • ANIMATION_TYPE_NONE 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)
    • addImage (draw As String)
    • addPatternListener
    Properties:
    • AnimationTime As Long [write only]
    • AnimationType As Int [write only]
    • Background As Drawable
    • CircleColor As Int [write only]
    • Color As Int [write only]
    • ConnectPattern As ArrayList [write only]
    • Enabled As Boolean
    • Height As Int
    • Left As Int
    • LineColor As Int [write only]
    • LineWidth As Int [write only]
    • Parent As Object [read only]
    • Radius As Int [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int

Sample Code:

B4X:
#Region  Project Attributes
    #ApplicationLabel: ConnectPatternView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #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 nativeMe As JavaObject

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 cpv1 As ConnectPatternView
 
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")
    nativeMe.InitializeContext
 
    cpv1.LineColor = Colors.Green                               'the line color to use to connect the filled color circles or drawables
    cpv1.LineWidth = 5                                          'the width of the line(s) to connect the filled color circles or drawables
    cpv1.CircleColor = Colors.Yellow                            'the color of the filled circles if no drawable is used - see cpv1.addImage("lock") further down

    'set the unlock pattern
    Dim mylist As List                                          'list to define the unlock pattern
    mylist.Initialize                                           'initialize an empty list
    'this is the unlock code - add it to a list and pass the list to the library/wrapper
    mylist.AddAll(Array As Int(2,5,4,1,0,3,6,7,8))              'use from 0 to 8 and dont repeat the same number and dont cross lines
    cpv1.ConnectPattern = mylist                                'passing the list to the library / wrapper
 
    cpv1.AnimationTime = 500                                    'set the animation time when calling cpv1.AnimationType = cpv1.ANIMATION_TYPE_BOTTOM or cpv1.AnimationType = cpv1.ANIMATION_TYPE_MIDDLE
    cpv1.Radius = 35                                            'change the size of the filled color circle of drawable
 
    'Use one of the following:
    'cpv1.AnimationType = cpv1.ANIMATION_TYPE_BOTTOM 
    'cpv1.AnimationType = cpv1.ANIMATION_TYPE_NONE
    cpv1.AnimationType = cpv1.ANIMATION_TYPE_MIDDLE
 
    'if you comment the below line the round filled circles will be drawn
    cpv1.addImage("lock3")                                       'use this drawable in stead of the standard filled colored circles
                                                                 'see the png files in the /Object/res/drawable folder of the project
    'last instruction to set it up!
    cpv1.addPatternListener 

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub cpv1_correct_pattern_entered(correct_pattern As Boolean)
    If correct_pattern Then
        nativeMe.RunMethod("showToastMessage", Array("Correct pattern entered"))
    Else
        nativeMe.RunMethod("showToastMessage", Array("Wrong pattern entered"))
    End If 
End Sub

Sub cpv1_pattern_abandoned
    nativeMe.RunMethod("showToastMessage", Array("Pattern abandoned"))
End Sub


#If Java

import android.widget.Toast;

    //inline java code to show a toast message when (1) correct pattern drawn (2) incorrect pattern drawn (3) draw of pattern abandoned.
    public void showToastMessage(String message) {
        Toast.makeText(BA.applicationContext, message, Toast.LENGTH_SHORT).show();
    }

#End If


'This is where the other jar files are:
'https://www.dropbox.com/s/0zmv8hs9v8g1049/OtherConnectPatternJarFiles.zip?dl=0
 

Attachments

  • resource.zip
    423 bytes · Views: 170
  • ConnectPatternViewLibFiles.zip
    18.4 KB · Views: 168
  • b4aConnectPatternView.zip
    47.4 KB · Views: 178
  • AdditionalLibsResource.zip
    775 bytes · Views: 179
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
Congrats.
It have like five to six events right ?
Not sure what you mean by 5 to 6 events...? These are the events that I have allowed for in the library:

  • correct_pattern_entered (correct_pattern As Boolean)
  • pattern_abandoned ( As )
 

jahswant

Well-Known Member
Licensed User
Longtime User
Not sure what you mean by 5 to 6 events...? These are the events that I have allowed for in the library:

  • correct_pattern_entered (correct_pattern As Boolean)
  • pattern_abandoned ( As )
I mean the original project.Btw what's the type of AS.
 
Top