B4A Library [B4X] SD CustomKeyboard (new version)

The CustomKeyboard library has made a leap in quality to be able to replace the native Android/iOs keyboard and also for the Desktop version.
Further developments are planned such as the possibility of adding editable fields from Design which are managed by this keyboard.

This required a more radical change, which is why I preferred to abandon the old thread and create a new thread where to insert this updated version, with new examples, avoiding creating confusion between the methods and suggestions given. The old version will remain but will no longer be supported

---

IMPORTANT

• depends on SD CreativeBackGround (0.06+) library which must be downloaded
• MaterialIcon font for special characters must be loaded. Use: SD_Keyboard1.SpecialKeyFont = xui.CreateMaterialIcons (16)

---

SD_CustomKeyboard

Author: Star-Dust
Version: 2.03

• CustomKey
  • Fields:
    • CodeCanc As Int
    • CodeDel As Int
    • CodeEnter As Int
    • CodeEraseAll As Int
    • CodeEsc As Int
    • CodeNext As Int
    • CodeShift As Int
    • CodeTab As Int
  • Functions:
    • AddCustomKeyToLastRow (UpperText As String, UpperCode As Int, LowerText As String, LowerCode As Int, size As Int, BackgroundKeyColor As Int, TextKeyColor As Int) As String
      Customize Key with color
      <code>Ck.AddCustomKeyToLastRow("SPACE",32,"SPACE.",32,3,xui.Color_Red,xui.Color_White) ' space large 3 key</code>
      <code>Ck.AddCustomKeyToLastRow("Enter",ck.CodeEnter,"Enter",ck.CodeEnter,1, ,xui.Color_Green,xui.Color_White))</code>
    • AddCustomKeyToLastRow2 (UpperText As String, UpperCode As Int, LowerText As String, LowerCode As Int, AlternateKeyUpper As Map, AlternateKeyLower As Map, size As Int, BackgroundKeyColor As Int, TextKeyColor As Int) As String
      Customize Key with color and alternative key
      <code>ck. AddCustomKeyToLastRow2("E",69,"e",101,CreateMap("È":200,"É":201),CreateMap("è":232,"é":233),1,,xui.Color_Red,xui.Color_White)</code>
    • AddEmptyRow As String
      Can add key with Add...LastRow
    • AddEmptySpaceToLastRow As String
    • AddKeyToLastRow (UpperText As String, UpperCode As Int, LowerText As String, LowerCode As Int, size As Int) As String
      Ck.AddKeytoLastRow("SPACE",32,"SPACE.",32,3) ' space large 3 key
      Ck.AddKeytoLastRow("",0,"",0,1) ' Empty
      Ck.AddKeytoLastRow("Enter",ck.CodeEnter,"Enter",ck.CodeEnter,1)
    • AddKeyToLastRow2 (UpperText As String, UpperCode As Int, LowerText As String, LowerCode As Int, AlternateKeyUpper As Map, AlternateKeyLower As Map, size As Int) As String
      To insert alternative key
      <code>Ck.AddKeyToLastRow2("E",69,"e",101,CreateMap("È":200,"É":201),CreateMap("è":232,"é":233),1)</code>
    • AddRow (Keys As List) As String
      CustomKey.AddRow(ListOfSingleKey)
    • AddSimpleCharToLastRow (Keys As String()) As String
      Char or key: Shift, Canc, Del, Tab, Esc, Next, EraseAll
      <code>CustomKey.AddSimpleCharToLastRow(array as string("A","B","C","Next","Tab","Canc"))</code>
      <code>CustomKey.AddSimpleCharToLastRow(Regex.Split(",","A,B,C,0,1,2,Enter"))</code>
    • AddSimpleCharToNewRow (Keys As String()) As String
      Special Char or key: Shift, Canc, Del, Tab, Esc, Next, EraseAll
      <code>CustomKey.AddRowSimpleChar(array as string("A","B","C","Next","Tab","Canc"))</code>
      <code>CustomKey.AddRowSimpleChar(Regex.Split(",","A,B,C,0,1,2,Enter"))</code>
    • AddStringtoKeyToNewRow (Strings As String()) As String
      Don't insert special char: Shift, Canc, Del, Tab, Esc, Next
      <code> CustomKey.AddStringtoKeyToNewRow(array as string("00","000","Hallo"))</code>
      <code> CustomKey.AddStringtoKeyToNewRow(Regex.Split(",","00,000,Hallo"))</code>
    • AddUpperLowerCharToLastRow (Keys As String()) As String
      Char or key: Shift, Canc, Del, Tab, Esc, Next,EraseAll
      CustomKey.AddUpperLowerCharToLastRow(array as string("Aa","Bb","Cc","Next","Tab","Canc"))
      CustomKey.AddUpperLowerCharToLastRow(Regex.Split(",","Aa,Bb,Cc,00,11,12,Enter"))
  • AddUpperLowerCharToNewRow (Keys As String()) As String
    Char or key: Shift, Canc, Del, Tab, Esc, Next,EraseAll
    <code>CustomKey.AddUpperLowerCharToNewRow(array as string("Aa","Bb","Cc","Next","Tab","Canc"))</code>
    <code>CustomKey.AddUpperLowerCharToNewRow(Regex.Split(",","Aa,Bb,Cc,00,11,12,Enter"))</code>
    • cEmptyKey As Type_SingleKey
    • cKey (UpperText As String, UpperCode As Int, LowerText As String, LowerCode As Int, AlternateUp As Map, AlternateLo As Map) As Type_SingleKey
    • cKeyCustomized (UpperText As String, UpperCode As Int, LowerText As String, LowerCode As Int, size As Int, BackgroundKeyColor As Int, TextKeyColor As Int, AlternateUp As Map, AlternateLo As Map) As Type_SingleKey
    • cKeySized (UpperText As String, UpperCode As Int, LowerText As String, LowerCode As Int, size As Int, AlternateUp As Map, AlternateLo As Map) As Type_SingleKey
    • Class_Globals As String
    • Initialize As String
      Initializes the object. You can add parameters to this method if needed.
    • IsInitialized As Boolean
      Verifica se l'oggetto sia stato inizializzato.
    • KeyBoard As List
• SD_Keyboard
  • Events:
    • Digit (Key As String)
    • DigitSpecialKey (Key As String)
  • Fields:
    • EventSender As Object
      InsertAlwaysAtEnd As Boolean
    • keyCanc As String
    • keyDel As String
    • keyEnter As String
    • keyEraseAll As String
    • keyNext As String
    • keyShiftDown As String
    • keyShiftLock As String
    • keyShiftUp As String
    • keyTab As String
    • Tag As Object
    • TimeLapseMilliSec As Int
  • Functions:
    • Class_Globals As String
    • ClearKeyboard As String
    • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
      Base type must be Object
    • DrawKeyboard (V As B4XView) As String
    • GetBase As B4XView
    • Initialize (Callback As Object, EventName As String) As String
    • Invalidate As String
    • IsInitialized As Boolean
      Verifica se l'oggetto sia stato inizializzato.
    • SetEvent (View As EditText, te As TypeED) As String
    • SetKeyboard (TextEditorView As B4XView, NativeEventName As String, CustomizeKeyboard As CustomKey, ShiftOn As Boolean, NextFocus As B4XView) As String
    • SetupColor (BackgroundColorKey As Int, TextColorKey As Int, BackgroundColorBoard As Int) As String
    • ShifOn (S As Boolean) As String
    • ShiftStatus As Boolean
    • Snapshot As B4XBitmap
  • Properties:
    • DarkFactor As Float
      To set the intensity of the dark part of the shadow - normally = 0.85
    • Font
      Set Key Font
    • Height As Int
    • ImageBackground
    • KeyStyle
      0-Standard; 1-Comics; 2-Heart; 3-Flower; 4-Octagon
    • Left As Int
    • LightFactor As Float
      To set the intensity of the light part of the shadow - normally = 1.15
    • ShowKeyboard As Boolean
    • SpecialKeyFont
      Set Font of SpecilKey - Standard: MaterialIcon
    • Top As Int
    • Visible As Boolean
    • Width As Int

---

• Rel. 2.01
  • Added event Digit and DigitSpecialKey
• Rel. 2.02
  • The TextView Sender responds when an event is called from the virtual keyboard
• Rel. 2.03
  • Fix tag bug

 

[Star-Dust]

log release

• 2.00
  • Method Add and Add2 changed to SetKeyboard
  • Method AddRowSimpleChar changed to AddSimpleCharToNewRow
  • Method AddRowDoubleChar changed to AddUpperLowerCharToNewRow
  • Method AddRowDoubleCharToLastRow changed to AddUpperLowerCharToLastRow
  • Method AddRowStringtoKey changed to AddStringtoKeyToNewRow
  • Added AddKeyToLastRow2 - Customize With Alternative
  • Added AddCustomKeyToLastRow2 - Key With Alternative

 

[Star-Dust]

SAMPLE 1 (B4XPAGE)
Simple numeric keyboard with special keys

---

SAMPLE 2 (B4XPAGE)
Classic keyboard

---

SAMPLE 3 (B4XPAGE)
Custom keyboard

---

SAMPLE 4 (B4XPAGE)
font bengali

 

[Star-Dust]

SAMPLE 5 (B4XPAGE)
Keyboard docked at the top left

---

SAMPLE 6 (B4XPAGE)
Personalized background with image

---

SAMPLE 7 (B4XPAGE)
SHIFT key used to change the entire keyboard

---

SAMPLE 8 (B4XPAGE)
Complete Keyboard

 

[Star-Dust]

Is it possible to turn your smartphone into a PC keyboard?

I tried doing it with my keyboard and connecting it via the network... here's the result

I will provide the source of the example and an update of the library in the future

 

[Star-Dust]

rel. 2.01 - Added event Digit and DigitSpecialKey

Private Sub SD_Keyboard1_Digit(Key As String)
    If Key.Length=1 Then
        Log("Single Key: " & Asc(Key))
    Else
        Log("Group Key: " & Key)
    End If
End Sub

Private Sub SD_Keyboard1_DigitSpecialKey(Code As Int)
    Log("Special Code: " & Code)
End Sub

 

[Star-Dust]

Find attached an example to transform an Android smartphone into a PC keyboard. The code also works for iOS and with some modifications also as a mouse.
Communication between PC and mobile device occurs with broadcasting UDP packets.
The B4J App requires the jawtRobot library and launches Windows WordPad to illustrate how it can write to any third-party program after launching the B4J App

 

[personalapps]

Also found this old thread to use mobile as mouse through UDP, TCP and MQTT

[example] [B4X] Control the desktop with your phone

This example shows how simple it is to create network solutions with B4J, B4A and B4i. In this case the network communication is based on UDP. It implements a remote desktop mouse, where the Android device or iOS device control the desktop mouse. The B4J app uses jAWTRobot library to control...

www.b4x.com

 

[Star-Dust]

Release 2.02

• Exposed the Sender of the TextView when an event is called from the virtual keyboard (EventSender)

Private Sub TextField_EnterPressed
   Dim TextView As B4XView = SD_Keyboard1.EventSender
End Sub

Private Sub TextField_TextChanged (Old As String, New As String)
   Dim TextView As B4XView = SD_Keyboard1.EventSender
   Log("Change: " & Old & " " & New)
End Sub

Private Sub TextField_FocusChanged (HasFocus As Boolean)
    Dim TextView As B4XView = SD_Keyboard1.EventSender
    Log("Focus2: " & HasFocus)
End Sub

IMPORTANT
Don't use Sender to retrieve the TextView because it would return the keyboard class

 

[Star-Dust]

Release 2.03

• Fixed old bugs on Tag

 

[hazaal]

Hi,

This seems very interesting, but I cannot figure some, or actually many, features and functionality, and I am not too experienced to find out how they work.

For example,

- I suspect then CustomKey field I can set some custom value to act as for example Enter, but no, I cannot get it to work.​

- In SD_Keyboard fields, when I set keyEnter = "Jatka", only "J" is shown in the Enter key, but when I set it "JATKA", whole text is visible.​

​

- SetEvent syntax, and maybe the function is also a mystery for me, but I suspect it might be very useful. And what is TypeED - even Google doesn't know???

- With longclick the button changes the colors inverted, and short click returns the backgroud color back, but not the text color? Can I disable the longclick?​

​

I think if someone would be able to post an example with a little more code (than only key setups), I might be able to figure the syntax etc., but now I am kind of lost here.

Anyway, I already started to use it as I need some custom/variable buttons, but I am sure that if I could understand all the fields, function and properties, the usability would be much better.

 

[Star-Dust]

There are many examples in the first posts. I invite you to download and try them.

 

[hazaal]

There are many examples in the first posts. I invite you to download and try them.

Thank you for your reply.

I have downloaded and tried all of them, but as far as I can tell, they all focus on how to create different-looking/ -layout keyboards, and none of them goes into detail on using the various functions - like that keyEnter field or on SetEvent.

But as said, the Keyboard is already up and running (many thanks for that!), and by trial and error- method I’ve managed to build a dynamically changing layouts with custom buttons. Still, I’d love to learn more about it, since I’m sure I haven’t yet mastered all of its capabilities.