Cross-Platform Barcode Reader with B4X

B4X is a set of rapid development tools which can be used to develop apps for all the major mobile and desktop platforms.

It has four products: B4A, B4i, B4J and B4R, which aim at Android, iOS, Java (desktop with JavaFX, server and Raspberry Pi) and Arduino development.

Apart from multi-platform support, it has the following features:

  • An easy-to-use programming language.
  • A full-featured dedicated IDE.
  • An active and friendly community.

B4X can create native apps for Android and iOS. The B4X programming language is a modern version of Visual Basic. It will be compiled to Java for Android and Objective-C for iOS. This feature makes it easy to integrate Java/Objective-C libraries into B4X projects. The code can be shared across platforms, although we still have to write the platform-specific parts like Camera and file picker.

Dynamsoft Barcode Reader (DBR) is a barcode SDK written in C++ and provides JavaScript, Java and Objective-C packages. So it is easy to wrap it into a B4X library to develop Android, iOS and desktop barcode reader apps with B4X.

In this article, we are going to create a B4X wrapper and create demo apps for Android, iOS and desktop.

This article is Part 1 in a 3-Part Series.

Getting started with Dynamsoft Barcode Reader

Dynamsoft Barcode Reader  

Create a Test Project

Let’s first create a new B4J project to create and test the barcode library.

  1. Create a new B4XPages project with B4J.

    new project

  2. Open the UI designer. Add a button to pick images, a button to decode, a panel to display the image and a label to show the results.

    designer

    After that, we click generate members to declare these controls and add event subs in the code.

    generate members

  3. Implement the image picker. Draw the image on the Panel with B4XCanvas.

     Private Sub btnLoadImage_Click
     Dim bm As B4XBitmap
     Dim fc As FileChooser
     fc.Initialize
     Dim path As String=fc.ShowOpen(B4XPages.GetNativeParent(Me))    
     If File.Exists(path,"") Then
         bm=xui.LoadBitmap(path,"")
         cvs.ClearRect(cvs.TargetRect)
         drawBitmap(bm)
         Panel1.Tag=bm
     End If
 End Sub

Now, we have to implement the decoding part.

Wrap the Dynamsoft Barcode SDK

Let’s first write the wrapper.

Add Dependency

  1. Download Dynamsoft Barcode Reader’s jar file from its website.

  2. Config the path of the folder of additional libraries.

    Lib path

  3. Put the jar in the additional libraries folder.

  4. Reference the jar in Main by adding this line of code:

     #AdditionalJar: dynamsoft-barcodereader-8.2

How a Wrapper is Made

Basically, there are two ways to create a wrapper.

One is directly writing in Java, which is illustrated here. Creating an iOS library is a bit harder which uses Objective-C.

The other is using JavaObject to directly call Java APIs using B4X based on Java’s reflection feature. NativeObject is the equivalence of JavaObject in B4i.

It can be used with the inline java code feature. Java code can be directly included in B4X’s source code, as shown below.

#If JAVA
public String FirstMethod() {
   return "Hello World!";
}
#End If

Then it can be called using JavaObject.

Dim JO as JavaObject=Me
Dim s As String = JO.RunMethod("FirstMethod", Null)
Log(s) 'will print Hello World!

Here, we choose JavaObject to create the wrapper.

Write the Wrapper

Create a class and name it DBR. It is implemented as below.

Sub Class_Globals
    Private reader As JavaObject
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize
    reader.InitializeNewInstance("com.dynamsoft.dbr.BarcodeReader",Null)            
End Sub

public Sub initLicenseFromKey(license As String)
    'request your license here: https://www.dynamsoft.com/customer/license/trialLicense?ver=latest
    reader.RunMethod("initLicense",Array(license))
End Sub

private Sub ConvertToTextResults(results() As Object) As List
    Dim list1 As List
    list1.Initialize
    For Each result As Object In results
        Dim tr As TextResult
        tr.Initialize(result) 'convert the TextResult Java object to a B4X object
        list1.Add(tr)
    Next
    Return list1
End Sub

Sub decodeImage(bitmap As B4XBitmap) As List    
    Dim results() As Object
    Dim SwingFXUtils As JavaObject
    SwingFXUtils.InitializeStatic("javafx.embed.swing.SwingFXUtils") 
    Dim bufferedImage As Object=SwingFXUtils.RunMethod("fromFXImage",Array(bitmap,Null)) ' convert JavaFX image to bufferedImage
    results=reader.RunMethod("decodeBufferedImage",Array(bufferedImage,""))
    Return ConvertToTextResults(results)
End Sub

A TextResult class is created to represent the decoding result. Here we just parse the text and localization result.

Sub Class_Globals
    Private mTextResult As JavaObject
    Private mText As String
    Private mResultPoints(4) As Point2D
    Type Point2D(x As Int,y As Int)
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(result As Object)
    mTextResult=result    
    Parse
End Sub

Private Sub Parse
    mText=mTextResult.GetField("barcodeText")
    Dim points() As Object=mTextResult.GetFieldJO("localizationResult").GetField("resultPoints")
    For i=0 To 3
        Dim point As JavaObject=points(i)    
        Dim p As Point2D
        p.Initialize
        p.x=point.GetField("x")
        p.y=point.GetField("y")
        mResultPoints(i)=p
    Next
End Sub

Public Sub getObject As Object
    Return mTextResult
End Sub

Public Sub getText As String
    Return mText
End Sub

Public Sub getResultPoints As Point2D()
    Return mResultPoints
End Sub

Use the Wrapper

Now, we can implement the decoding part with the wrapper.

  1. Initialize the reader.

     Sub Class_Globals
     Private reader As DBR
 End Sub

 Public Sub Initialize
     reader.Initialize
     reader.initLicenseFromKey("<license key>")
 End Sub

  2. Decode the image and display the result.

     Private Sub btnDecode_Click        
     If (Panel1.Tag Is B4XBitmap)=False  Then
         xui.MsgboxAsync("Please load an image first","")
         Return
     End If
     Dim bm As B4XBitmap=Panel1.Tag
     Dim results As List=reader.decodeImage(bm)
     Dim sb As StringBuilder
     sb.Initialize
     Dim color As Int=xui.Color_Red
     Dim stroke As Int=2
     For Each result As TextResult In results
         sb.Append("Text: ").Append(result.Text).Append(CRLF)
         For i=0 To 2
             Dim x1 As Int=result.ResultPoints(i).x*xPercent
             Dim y1 As Int=result.ResultPoints(i).y*yPercent
             Dim x2 As Int=result.ResultPoints(i+1).x*xPercent
             Dim y2 As Int=result.ResultPoints(i+1).y*yPercent
             cvs.DrawLine(x1,y1,x2,y2,color,stroke)
         Next
         cvs.DrawLine(result.ResultPoints(3).x*xPercent, _
                      result.ResultPoints(3).y*yPercent, _ 
                      result.ResultPoints(0).x*xPercent, _
                      result.ResultPoints(0).y*yPercent,color,stroke)
     Next    
     cvs.Invalidate
     lblResult.Text=sb.ToString
 End Sub

Here is a snapshot of the completed app:

Reader B4J

Make it Cross-Platform

We have finished the B4J application. Now, let’s modify it to make it work on Android and iOS.

Share Class Files and Layouts

Upon creation of a B4Xpage project, it will create three folders containing the platform-specific files and a Shared Files folder for shared asset files. Shared class files are stored in the root.

Open the previous project folder. We can see a folder structure like this:

│  B4XMainPage.bas
│
├─B4A
│  │  BarcodeReader.b4a
│  │  BarcodeReader.b4a.meta
│  │  Starter.bas
│  │
│  └─Files
│          mainpage.bal
│
├─B4i
│  │  BarcodeReader.b4i
│  │  BarcodeReader.b4i.meta
│  │
│  └─Files
│      │  mainpage.bil
│      │
│      └─Special
├─B4J
│  │  BarcodeReader.b4j
│  │  BarcodeReader.b4j.meta
│  │  DBR.bas
│  │  TextResult.bas
│  │
│  └─Files
│          MainPage.bjl
│
└─Shared Files

Now we want to share the files we just created in the three platforms’ projects.

  1. Move the DBR.bas and TextResult.bas to the root. Open the B4A, B4J and B4i projects and re-add them as new modules using relative path.

    Link Modules

  2. In B4J, open the designer. Select and copy all the controls. Open the layout files for B4i and B4A with their designer and paste.

    Paste Layout

Add Platform-Specific Code

Platform-specific code can exist in one source file using the #if statement. Let’s see it in practice.

Code for B4A

  1. Use aar instead of jar.

    Download the aar file from Dynamsoft, put it in the additional libraries folder and add the following line of code in Main:

     #AdditionalJar: DynamsoftBarcodeReaderAndroid.aar

  2. The image picker is platform-specific. We add the code in the if b4a statement to use ContentChooser to pick images.

     Private Sub btnLoadImage_Click
     Dim bm As B4XBitmap
        
     #if b4a 
     Dim cc As ContentChooser
     cc.Initialize("CC")
     cc.Show("image/*", "Choose image")
     Wait For CC_Result (Success As Boolean, Dir As String, FileName As String)
     If Success Then
         bm=LoadBitmap(Dir,FileName)
     Else
         ToastMessageShow("No image selected", True)
     End If    
     #End If
        
     #if b4j
     Dim fc As FileChooser
     fc.Initialize
     Dim path As String=fc.ShowOpen(B4XPages.GetNativeParent(Me))    
     If File.Exists(path,"") Then
         bm=xui.LoadBitmap(path,"")
     End If        
     #End If    
        
     If bm.IsInitialized And bm<>Null Then         
         cvs.ClearRect(cvs.TargetRect)
         drawBitmap(bm)
         Panel1.Tag=bm
     End If
 End Sub

  3. You can have a trial of Dynamsoft Barcode Reader for Mobile by connecting to its License Tracking Server (LTS).

    Add the following inline java code to DBR.bas:

     #If b4a

 #if java
 import com.dynamsoft.dbr.BarcodeReader;
 import com.dynamsoft.dbr.BarcodeReaderException;
 import com.dynamsoft.dbr.DMLTSConnectionParameters;
 import com.dynamsoft.dbr.DBRLTSLicenseVerificationListener;
 public static void initLicenseFromLTS(BarcodeReader dbr,String organizationID){
     DMLTSConnectionParameters parameters = new DMLTSConnectionParameters();
     parameters.organizationID = organizationID;
     dbr.initLicenseFromLTS(parameters, new DBRLTSLicenseVerificationListener() {
         @Override
         public void LTSLicenseVerificationCallback(boolean isSuccess, Exception error) {
             if (!isSuccess) {
                 error.printStackTrace();
             }
         }
     });
 }
 #End If

 #End If

    Add a new sub to init license from LTS:

     public Sub initLicenseFromLTS(organizationID As String)
     Dim JO as JavaObject=Me
     JO.RunMethod("initLicenseFromLTS",Array(reader,organizationID))    
 End Sub

    In B4XMainPage.bas, use initLicenseFromLTS if the platform is mobile.

     Public Sub Initialize
     reader.Initialize        
     #if b4j
     reader.initLicenseFromKey("<license key>")
     #else
     reader.initLicenseFromLTS("200001")    
     #End If    
 End Sub

  4. In B4J, the image has to be converted while the bitmap on Android can be directly used.

     Sub decodeImage(bitmap As B4XBitmap) As List            
     Dim results() As Object        
        
     #If b4j
        
     Dim SwingFXUtils As JavaObject
     SwingFXUtils.InitializeStatic("javafx.embed.swing.SwingFXUtils")
     Dim bufferedImage As Object=SwingFXUtils.RunMethod("fromFXImage",Array(bitmap,Null))
     results=reader.RunMethod("decodeBufferedImage",Array(bufferedImage,""))
        
     #else if b4a
        
     results=reader.RunMethod("decodeBufferedImage",Array(bitmap,""))    
        
     #End If    
        
     Return ConvertToTextResults(results)    
 End Sub

That’s it. We can now run the app on Android.

Android

Code for B4i

  1. Use framework instead of aar/jar.

    Download the Dynamsoft Barcode Reader framework from Dynamsoft, put it in the local mac builder’s library folder and add the following line of code in Main:

     #AdditionalLib: DynamsoftBarcodeReader.framework.3
 #AdditionalLib: libc++.tbd

  2. Use the Camera class to pick images.

     #if b4i
 Dim cam As Camera
 cam.Initialize("camera",B4XPages.GetNativeParent(Me))
 cam.SelectFromSavedPhotos(Sender, cam.TYPE_IMAGE)    
 Wait For camera_Complete (Success As Boolean, Image As Bitmap, VideoPath As String)
 If Success Then        
     Dim NO as NativeObject=Me
     bm=NO.RunMethod("normalizedImage:",Array(Image))            
 End If
 #End If

    Here, the image taken in iOS has to be normalized or the image may be rotated.

    The following Objective-C code is used to do this:

     #if b4i
 #if objc
 //https://stackoverflow.com/questions/8915630/ios-uiimageview-how-to-handle-uiimage-image-orientation
 - (UIImage *)normalizedImage: (UIImage*) image {
     if (image.imageOrientation == UIImageOrientationUp) return image; 
     UIGraphicsBeginImageContextWithOptions(image.size, NO, image.scale);
     [image drawInRect:(CGRect){0, 0, image.size}];
     UIImage *normalizedImage = UIGraphicsGetImageFromCurrentImageContext();
     UIGraphicsEndImageContext();
     return normalizedImage;
 }
 #End If
 #End If

  3. It is a bit different using NativeObject from JavaObject. We use inline Objective-C code to directly call DBR’s APIs and relevant B4X subs have to be modified a little.

     #if b4i
 #If ObjC
 #import <DynamsoftBarcodeReader/DynamsoftBarcodeReader.h>
 - (DynamsoftBarcodeReader*) initializeDBR: (NSString*) license {
     DynamsoftBarcodeReader *dbr;
     dbr = [[DynamsoftBarcodeReader alloc] initWithLicense:license];
     NSLog(dbr.getVersion);
     return dbr;
 }

 - (DynamsoftBarcodeReader*) initializeDBRFromLTS: (NSString*) organizationID {

     DynamsoftBarcodeReader *dbr;
     iDMLTSConnectionParameters* lts = [[iDMLTSConnectionParameters alloc] init];
     lts.organizationID = organizationID;    
     dbr = [[DynamsoftBarcodeReader alloc] initLicenseFromLTS:lts verificationDelegate:self];
     return dbr;
  }
     
 - (NSArray<iTextResult*>*) decodeImage: (UIImage*) image {
     NSError __autoreleasing * _Nullable error;
     DynamsoftBarcodeReader* dbr=self->__reader.object;
     NSArray<iTextResult*>* result = [dbr decodeImage:image withTemplate:@"" error:&error];    
     NSLog(@"%lu",(unsigned long)result.count);
     return result;
 }

 #end if
 #End If

    The entire decodeImage method:

     Sub decodeImage(bitmap As B4XBitmap) As List            
     #if b4i    
        
     Dim results As List=asNO(Me).RunMethod("decodeImage:",Array(bitmap))
     Return ConvertToTextResults2(results)        
        
     #Else    
        
     Dim results() As Object        
        
     #If b4j
        
     Dim SwingFXUtils As JavaObject
     SwingFXUtils.InitializeStatic("javafx.embed.swing.SwingFXUtils")
     Dim bufferedImage As Object=SwingFXUtils.RunMethod("fromFXImage",Array(bitmap,Null))
     results=reader.RunMethod("decodeBufferedImage",Array(bufferedImage,""))
        
     #Else If b4a
        
     results=reader.RunMethod("decodeBufferedImage",Array(bitmap,""))    
        
     #End If    
        
     Return ConvertToTextResults(results)
        
     #End if        
 End Sub

Now, we can run the barcode reader on iOS.

iOS

Conclusion

It is easy to use B4X to create a cross-platform barcode reader. The code and UI can be shared across platforms though we still need to know a bit about native development.

Source Code

https://github.com/xulihang/BarcodeReader-B4X

The library is published on the B4X forum.

More

They will be discussed in the following articles.