B4A Library FabricView - make your own drawings / writing with your finger

It wraps this Github project (requested by @MarcoRome). Posting the following:
1. B4A project
2. B4A library files - copy them to your additional library folder.

Once you have made your drawing you can click on "Copy" to copy it to an Imageview (from where you can do with it whatever you want) or click "Clear" to clear the drawing area and start drawing from scratch.

@MarcoRome, see what else you think should be added and if the project that I am wrapping will allow to add such features I will try and make them available to be used in B4A.

Sample Code:
B4X: 
#Region  Project Attributes
    #ApplicationLabel: FabricView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #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 fv1 As FabricView
    Private Button1 As Button
    Private ImageView1 As ImageView
    Private Button2 As Button
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")
   
    'fv1.BackgroundMode = fv1.BACKGROUND_STYLE_NOTEBOOK_PAPER
    'fv1.BackgroundMode = fv1.BACKGROUND_STYLE_BLANK
    fv1.BackgroundMode = fv1.BACKGROUND_STYLE_GRAPH_PAPER
    fv1.DrawColor = Colors.Red
    fv1.DrawBackgroundColor = Colors.LightGray
    fv1.NoteBookLeftLineColor = Colors.Blue
    fv1.NoteBookLeftLinePadding = 60
    fv1.FabricLineColor = Colors.Yellow
    ImageView1.Bitmap = Null

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub Button1_Click
   
    ImageView1.Bitmap = fv1.CanvasBitmap
   
End Sub

Sub Button2_Click
   
    fv1.cleanPage
    ImageView1.Bitmap = Null
   
End Sub

1.png


FabricView
Author: Github: Antwan Gaggi, Wrapped by: Johan Schoeman
Version: 1
  • FabricView
    Fields:
    • BACKGROUND_STYLE_BLANK As Int
    • BACKGROUND_STYLE_GRAPH_PAPER As Int
    • BACKGROUND_STYLE_NOTEBOOK_PAPER 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)
    • cleanPage
      Clean the canvas, remove everything drawn on the canvas.
    Properties:
    • Background As Drawable
    • BackgroundMode As Int [write only]
    • CanvasBitmap As Object [read only]
    • Color As Int [write only]
    • DrawBackgroundColor As Int [write only]
    • DrawColor As Int [write only]
    • Enabled As Boolean
    • FabricLineColor As Int [write only]
    • Height As Int
    • InteractionMode As Int [write only]
    • Left As Int
    • NoteBookLeftLineColor As Int [write only]
    • NoteBookLeftLinePadding As Int [write only]
    • Parent As Object [read only]
    • Size As Float [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

  • FabricViewLibFiles.zip
    9.9 KB · Views: 596
  • b4aFabricView.zip
    8.4 KB · Views: 581
Click to expand...
MarcoRome

MarcoRome

Expert
Licensed User
Longtime User
You have another my "little" Donation [00553826SE991694K].
Little because your work's are really GREAT
Thank you again Johan
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Suhas Chatane said:
Great work... Thanks...!
but how to change background with image, jpg or png file..
Click to expand...
There is a method in the original project that I have not exposed whereby one can add a bitmap to the Fabric. But not sure what the result will be - will have to wrap it and see what it does. Will try and see. If useful I will post it
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
On request - the ability to add a background image to the "fabric". Posting

1. Updated B4A library
2. Updated B4A sample project

2.png


Sample Code:
B4X: 
#Region  Project Attributes
    #ApplicationLabel: FabricView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #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 fv1 As FabricView
    Private Button1 As Button
    Private ImageView1 As ImageView
    Private Button2 As Button
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")
   
    'fv1.BackgroundMode = fv1.BACKGROUND_STYLE_NOTEBOOK_PAPER
    'fv1.BackgroundMode = fv1.BACKGROUND_STYLE_BLANK
    fv1.BackgroundMode = fv1.BACKGROUND_STYLE_GRAPH_PAPER
    fv1.DrawColor = Colors.Red
    fv1.DrawBackgroundColor = Colors.LightGray
    fv1.NoteBookLeftLineColor = Colors.Blue
    fv1.NoteBookLeftLinePadding = 60
    fv1.FabricLineColor = Colors.Yellow
   
    Dim bm As Bitmap
    bm.Initialize(File.DirAssets,"mm.png")
    fv1.drawImage(fv1.Left, fv1.Top, fv1.Width, fv1.Height, bm)
   
    ImageView1.Bitmap = Null

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub Button1_Click
   
    ImageView1.Bitmap = fv1.CanvasBitmap
   
End Sub

Sub Button2_Click
   
    fv1.cleanPage
    ImageView1.Bitmap = Null
   
End Sub

FabricView
Author: Github: Antwan Gaggi, Wrapped by: Johan Schoeman
Version: 1
  • FabricView
    Fields:
    • BACKGROUND_STYLE_BLANK As Int
    • BACKGROUND_STYLE_GRAPH_PAPER As Int
    • BACKGROUND_STYLE_NOTEBOOK_PAPER 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)
    • cleanPage
      Clean the canvas, remove everything drawn on the canvas.
    • drawImage (x As Int, y As Int, width As Int, height As Int, pic As Bitmap)
    Properties:
    • Background As Drawable
    • BackgroundMode As Int [write only]
    • CanvasBitmap As Object [read only]
    • Color As Int [write only]
    • DrawBackgroundColor As Int [write only]
    • DrawColor As Int [write only]
    • Enabled As Boolean
    • FabricLineColor As Int [write only]
    • Height As Int
    • InteractionMode As Int [write only]
    • Left As Int
    • NoteBookLeftLineColor As Int [write only]
    • NoteBookLeftLinePadding As Int [write only]
    • Parent As Object [read only]
    • Size As Float [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

  • FabricViewLibFiles.zip
    10 KB · Views: 387
  • b4aFabricView.zip
    58.6 KB · Views: 375
S

Suhas Chatane

Member
Licensed User
Longtime User
I can change color(fv1.drawcolor) but How to increase draw brush size ?
Thank you very much again Johan for this update
 
Last edited:
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
On request - the ability to add predefined text to the fabric. Posting:
1. B4A sample project - take note of my comment about the sequence of the B4A code to add the text
2. B4A library files

3.png


Sample Code:
B4X: 
#Region  Project Attributes
    #ApplicationLabel: FabricView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #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 fv1 As FabricView
    Private Button1 As Button
    Private ImageView1 As ImageView
    Private Button2 As Button
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")
   
    'fv1.BackgroundMode = fv1.BACKGROUND_STYLE_NOTEBOOK_PAPER
    'fv1.BackgroundMode = fv1.BACKGROUND_STYLE_BLANK
    fv1.BackgroundMode = fv1.BACKGROUND_STYLE_GRAPH_PAPER
    fv1.DrawColor = Colors.Red
    fv1.DrawBackgroundColor = Colors.LightGray
    fv1.NoteBookLeftLineColor = Colors.Blue
    fv1.NoteBookLeftLinePadding = 60
    fv1.FabricLineColor = Colors.Yellow
   
    Dim bm As Bitmap
    bm.Initialize(File.DirAssets,"mm.png")
    fv1.drawImage(fv1.Left, fv1.Top, fv1.Width, fv1.Height, bm)
   
   
    'Keep the order/sequence of the next 4 lines
    fv1.FabricText = "Micky Mouse"
    fv1.FabricTextColor = Colors.DarkGray
    fv1.FabricTextSize = 40
    fv1.drawText(fv1.Left + 2%x, fv1.Top + fv1.Height - 5%y)
   
    ImageView1.Bitmap = Null

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub Button1_Click
   
    ImageView1.Bitmap = fv1.CanvasBitmap
   
End Sub

Sub Button2_Click
   
    fv1.cleanPage
    ImageView1.Bitmap = Null
   
End Sub

Library:
FabricView
Author: Github: Antwan Gaggi, Wrapped by: Johan Schoeman
Version: 1
  • FabricView
    Fields:
    • BACKGROUND_STYLE_BLANK As Int
    • BACKGROUND_STYLE_GRAPH_PAPER As Int
    • BACKGROUND_STYLE_NOTEBOOK_PAPER 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)
    • cleanPage
      Clean the canvas, remove everything drawn on the canvas.
    • drawImage (x As Int, y As Int, width As Int, height As Int, pic As Bitmap)
    • drawText (x As Int, y As Int)
    Properties:
    • Background As Drawable
    • BackgroundMode As Int [write only]
    • CanvasBitmap As Object [read only]
    • Color As Int [write only]
    • DrawBackgroundColor As Int [write only]
    • DrawColor As Int [write only]
    • Enabled As Boolean
    • FabricLineColor As Int [write only]
    • FabricText As String [write only]
    • FabricTextColor As Int [write only]
    • FabricTextSize As Int [write only]
    • Height As Int
    • InteractionMode As Int [write only]
    • Left As Int
    • NoteBookLeftLineColor As Int [write only]
    • NoteBookLeftLinePadding As Int [write only]
    • Parent As Object [read only]
    • Size As Float [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

  • FabricViewLibFiles.zip
    10.4 KB · Views: 383
  • b4aFabricView.zip
    58.7 KB · Views: 374
konradwalsh

konradwalsh

Active Member
Licensed User
Longtime User
Hey
THanks for this.. Its amazing

Any chance you might include the other items from the library on GitHub such us Undo & Redo
 
S

Suhas Chatane

Member
Licensed User
Longtime User
I can change color(fv1.drawcolor) but How to increase draw brush size ?
Thank you very much again Johan for this update
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
Suhas Chatane said:
I can change color(fv1.drawcolor) but How to increase draw brush size ?
Thank you very much again Johan for this update
Click to expand...
B4X: 
fv1.Size = 5    'or some higher/lower value to increase/decrease the brush size
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
konradwalsh said:
Hey
THanks for this.. Its amazing

Any chance you might include the other items from the library on GitHub such us Undo & Redo
Click to expand...
Unless I am missing something somewhere I don't see and Redo / Undo methods in the original library.....? Can you show me where it is?
 
Johan Schoeman

Johan Schoeman

Expert
Licensed User
Longtime User
moster67 said:
Very nice wrapper!

Code to implement it is shown among the issues, here
Click to expand...
Have added it Mike and @konradwalsh. Attached new lib files (V1.01) and sample project.

1.png


Sample Code:
B4X: 
#Region  Project Attributes
    #ApplicationLabel: FabricView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #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 fv1 As FabricView
    Private Button1 As Button
    Private ImageView1 As ImageView
    Private Button2 As Button
    Private Button3 As Button
    Private Button4 As Button
   
    Dim bm As Bitmap
   
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")
   
    'fv1.BackgroundMode = fv1.BACKGROUND_STYLE_NOTEBOOK_PAPER
    'fv1.BackgroundMode = fv1.BACKGROUND_STYLE_BLANK
    fv1.BackgroundMode = fv1.BACKGROUND_STYLE_GRAPH_PAPER
    fv1.DrawColor = Colors.Red
    fv1.DrawBackgroundColor = Colors.LightGray
    fv1.NoteBookLeftLineColor = Colors.Blue
    fv1.NoteBookLeftLinePadding = 60
    fv1.FabricLineColor = Colors.Yellow
    fv1.Size = 5
   
   
    bm.Initialize(File.DirAssets,"mm.png")
    fv1.drawImage(fv1.Left, fv1.Top, fv1.Width, fv1.Height, bm)
   
   
    'Keep the order/sequence of the next 4 lines
    fv1.FabricText = "Micky Mouse"
    fv1.FabricTextColor = Colors.DarkGray
    fv1.FabricTextSize = 40
    fv1.drawText(fv1.Left + 2%x, fv1.Top + fv1.Height - 5%y)
   
    ImageView1.Bitmap = Null

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub Button1_Click
   
    ImageView1.Bitmap = fv1.CanvasBitmap
   
End Sub

Sub Button2_Click
   
    fv1.cleanPage
    ImageView1.Bitmap = Null
   
    fv1.drawImage(fv1.Left, fv1.Top, fv1.Width, fv1.Height, bm)
   
   
    'Keep the order/sequence of the next 4 lines
    fv1.FabricText = "Micky Mouse"
    fv1.FabricTextColor = Colors.DarkGray
    fv1.FabricTextSize = 40
    fv1.drawText(fv1.Left + 2%x, fv1.Top + fv1.Height - 5%y)
   
End Sub

Sub Button3_Click
   
    fv1.undo
   
End Sub

Sub Button4_Click
   
    fv1.redo
   
End Sub
 

Attachments

  • FabricView_V1_01.zip
    11.5 KB · Views: 381
  • b4aFabricView.zip
    58.9 KB · Views: 387
You must log in or register to reply here.
Top