Update: Barcode Module For Appcelerator Titanium

Posted on 22/02/2011 by s.pfleiderer

Update

Few months ago we developed and released the first version of our barcode module for Appcelerator Titanium. Since then we received a lot of great feedback and therefore wanted to adapt this blog post and the plugin to support the currently available Appcelerator Titanium 1.5 SDK.

Appcelerator Titanium Mobile

Appcelerator Titanium Mobile is a platform which allows developing mobile applications using web technologies. The Applications are written in JavaScript and can be compiled for multiple devices. At the moment Titanium supports the Apple iPhone and iPad as well as Android devices. Blackberry support is on its way. We use it here at M-Way to develop cross platform apps for our customers.

Titanium provides a tool called Titanium Developer to build and deploy applications, and a set of SDKs which target different platforms. With this tool you are able to manage SDK versions, import/export projects and deploy them to different emulators or simulators and even real devices.

To get started, we recommend a look at the documents posted in the developer guides in the Titanium Developer Center and the mobile API guides.

Barcode Scanner

A few months ago we had to support barcode scanning for some titanium based projects here at M-Way Solutions. Because we only found a working module for the iPhone but didn’t find a suitable solution for Android, we started to develop our own module. We first released a version which needed to be built together with the whole Titanium Mobile SDK and also required patching some build scripts and application templates. Fortunately, the guys at Appcelerator did a great job improving their build process so it was possible for us to create a standalone version of our plugin which no longer needs to be build inside of the Titanium Mobile source tree. If you are interested in building your own pluins for Appcelerator Titanium, have a look at the Android Module Developer Guide.

The Android Module

To develop the Android module for Titanium mobile, we followed the instructions of the custom module tutorial written by the Titanium guys. It is available on our Github account and is licensed under the Apache 2 license. It uses the zebracrossing library for barcode processing and is loosely based on their barcode scanner for Android.

Prerequisites

Before you are able to use our module, you need to check if all dependencies are already installed:

Make sure you’ve installed at least the Android 1.6 SDK and the matching Google APIs. You can check which SDKs are installed by running the “android” application located in the tools folder of your Android SDK.

Building The Module

Note: Building the module yourself is not necessary. If you only want to use it for your projects, you can download it from the download section of our Github repository.

If you want to build the barcode module from source, you need to clone our git repository and build it with ant:

    # clone the repository
    git clone https://github.com/mwaylabs/titanium-barcode.git
    cd titanium-barcode
    # run ant to build the module
    ant clean && ant

If the build fails, make sure the entries in the buld.properies file point to the right path. On the developer’s machine, the Android SDK is located in /opt/android-sdk:

titanium.platform=/Library/Application Support/Titanium/mobilesdk/osx/1.5.1/android
android.platform=/opt/android-sdk/platforms/android-4
google.apis=/opt/android-sdk/add-ons/addon_google_apis_google_inc_4

The newly created *.jar and *.zip files can be found in the dist directory. The module you need is called com.mwaysolutions.barcode-android-$VERSION.zip.

Use the plugin

To use the plugin, you need to copy the com.mwaysolutions.barcode-android-$VERSION.zip to your project directory and reference it in the tiapp.xml file located the same directory:



  ...
  
    
      com.mwaysolutions.barcode

If the scanner isn’t centered in high-resolution screens, you also need to add an additional entry to your tiapp.xml which sets the supports-screens tag of the android manifest correcty:



  ...

A complete tiapp.xml file could look like this:



com.mwaysolutions.barcodeexample
Barcode Example
1.0
M-WAY GmbH
http://www.mwaysolutions.com
Example applicatiton
2011 by pfleidi
default_app_logo.png
false
false
  default
  false
  false
false
  true
  a31aa681-860e-4923-abe7-b5d92718b640
  
    
      Ti.UI.PORTRAIT
    
    
      Ti.UI.PORTRAIT
      Ti.UI.UPSIDE_PORTRAIT
      Ti.UI.LANDSCAPE_LEFT
      Ti.UI.LANDSCAPE_RIGHT
    
  
  
    
      
    
  
  
    
      com.mwaysolutions.barcode

After you referenced the module and added the entry for the android manifest, you can load the plugin by using require(‘com.mwaysolutions.barcode’). The module has a single method which is called scan(callbacks). In this case, callbacks is a JavaScript object with three properties: success, error and cancel. These three properties should point to callback functions which are called when a scan succeeded, an error occurred or when the scan was canceled.

Example Application

In addition to the module itself, we also created an example application which is using it. To use it, you just need to download the example code from Github or clone the repository and build it with the Titanium Developer application.

After starting Titanium Developer, you need to click “Import Project”, browse the directory of the downloaded application and select it.

After this is done, all you need to do is to run the Android emulator.

Just show me some code!

The usage of our barcode API is simple: You load the module with require(‘com.mwaysolutions.barcode’) and call “.scan()” on the returned object reference. You need to pass in a JSON-Object with the three callback functions success, error and cancel to the scan() method. If the scan works, success is called and the scanned barcode is passed as a parameter. Inside the callback functions you are now able to react to successful or canceled events and errors.

Titanium.UI.setBackgroundColor('#000');

// open a single window
var window = Ti.UI.createWindow({
    backgroundColor:'white'
  });

var label = Ti.UI.createLabel();
window.add(label);
window.open();

// create an instance of the module
var titaniumBarcode = require('com.mwaysolutions.barcode');

// call scan method
titaniumBarcode.scan({
    success:function(data) {
      if(data && data.barcode) {
        var label = Titanium.UI.createLabel({
            text:'Barcode: ' + data.barcode,
            textAlign:'center',
            width:'auto'
          });

        window.add(label);
      } else {
        alert(JSON.stringify(data));
      }
    },

    error:function(err) {
      alert("Error!! " + err);
    },

    cancel:function() {
      alert("cancel");
    }
  });
This entry was posted in appcelerator, development, mobile and tagged , , , , , , . Bookmark the permalink.

42 Responses to Update: Barcode Module For Appcelerator Titanium

  1. Clint says:
    25/02/2011 at 16:08

    Thanks so much for this!!!!!

    Reply
  2. Dan Tamas says:
    03/03/2011 at 15:36

    Hi
    Sorry to stress you,
    I have an issue with the barcoder module :
    If I run the code as in your demo app it works, but as soon as I try to use it in another window, no matter what kind of window ( a window in a tabgroup, another window opened by a tab or anything else – heavyweight or not ) is not working anymore.
    The scanner works, but the success function doesn’t get triggered.

    Any idea what it could be ?

    Thnx and sorry again for the trouble.

    Reply
  3. Anders Pedersen says:
    04/03/2011 at 20:33

    Thanks so much for sharing! Looking forward to give it a try!

    Reply
  4. John says:
    05/03/2011 at 18:44

    Can we build this with the 1.6 SDK?

    Reply

  5. Pingback: Barcode Module For Appcelerator Titanium: Version 0.2 | M-Way Solutions mobile Blog

  6. Matteo says:
    09/03/2011 at 11:07

    Hi Sven,
    i looked to your code, great work, guy!!
    I have a question for you: what do you do about the resources? I didn’t see that on the module and, if i add resources to the android project, the titanium module doesn’t generate R class, when i compile with ant script.
    Can you give me and advice, please?
    Can you commit the AndroidManifest.xml file, if you have one?
    Thank you very much.

    Reply
    • s.pfleiderer says:
      09/03/2011 at 12:45

      Hi Matteo,

      I had exactly the same problem some months ago. Here is the question I asked in the appcelerator forum: http://developer.appcelerator.com/question/49671/android-r-references-in-appcelerator-module

      Since I didn’t know any other way, I implemented a work-around by creating classes with constants like this one.

      Instead of creating the UI with the help of XML, I wrote the corresponding Java code to create it. This is probably not the cleanest solution, but it worked for me so far.

      Reply
      • Matteo says:
        09/03/2011 at 13:01

        Hi Sven,
        yes I saw your post on the Titanium forum and I reply it…I tried to introduce the code that Ewan advice to you and it partially works.
        I think the same as you, about the cleaning of the code, it’s better on xml and more android-like, but your solution works, and it’s enough!
        I don’t understand if you create or not an AndroidManifest.xml, ’cause I can’t start the module or debug it standalone.
        Thank you again! Regards.

        Reply
        • s.pfleiderer says:
          09/03/2011 at 13:28

          Hi Matteo,

          I don’t create an AndroidManifest.xml directly, but I specify some options in the timodule.xml.These options are merged into the “real” manifest by the appcelerator build process. This manifest is located in build/android/AndroidManifest.xml of your titanium project folder.

          I’ve created a gist of of the example application manifest: https://gist.github.com/862178

          Reply
          • Matteo says:
            09/03/2011 at 13:59

            Hi Sven,
            thank you for your help, i saw your file and you ‘re right, the android manifest is generated by titanium build. Thanks again…and if I solve the resources management, i’ll write here!

  7. Mike says:
    09/03/2011 at 20:12

    Big thanks for this – as Appcelerator are charging for additional functionality using Ti+ it looks like the community is gonna have to step up like this

    You the man!

    Reply
  8. Stephen Ostrow says:
    13/03/2011 at 07:09

    When I attempt to put the in I get the following error.


    [ERROR] /srv/reference-id/mobile-app/build/android/AndroidManifest.xml:3: error: No resource identifier found for attribute ‘anydensity’ in package ‘android’
    [ERROR] /srv/reference-id/mobile-app/build/android/AndroidManifest.xml:3: error: No resource identifier found for attribute ‘largescreens’ in package ‘android’
    [ERROR] /srv/reference-id/mobile-app/build/android/AndroidManifest.xml:3: error: No resource identifier found for attribute ‘normalscreens’ in package ‘android’
    [ERROR] /srv/reference-id/mobile-app/build/android/AndroidManifest.xml:3: error: No resource identifier found for attribute ‘smallscreens’ in package ‘android’
    [ERROR] Error generating R.java from manifest

    When I leave it out I get the scanner being off-centered as explain above when running it on my Motorola DROID.

    Thanks for any help and the work done so far.

    Reply
    • Stephen Ostrow says:
      13/03/2011 at 07:11

      My reference was to

      <supports-screens android:smallscreens="true" android:normalscreens="true" android:largescreens="true" android:anydensity="true">
      </supports-screens>

      it seems to have gotten killed off by the parser.

      Reply
  9. Totosan says:
    05/04/2011 at 13:34

    Hi,
    First thank you for providing us such a functionnal and useful application.
    Second (of course there is a second :d), I also try to create a custom module in order to integrate it in my Titanium app.
    But when I tried to, I have a Titanium Error which says that it can’t find [module_id].js … I don’t understand why the titanium app try to find a .js file whereas I use the ‘require’ commands to import a module. Did you have this kind of problems ?

    Thanks in advance
    (Of course, I add the module line in tiapp.xml)

    Reply
  10. Marvin says:
    20/06/2011 at 14:22

    Hi there i’ve got a NullPointerException of building the test example.
    It says it was an missing ;

    (kroll$1: app://app.js) [5,1604] Error evaluating source: Compilation produced 1 syntax errors. (#1)

    Reply
  11. Al says:
    12/07/2011 at 17:54

    Does this support QR codes by any chance?

    Reply
  12. Zarir says:
    13/07/2011 at 09:49

    Brilliant work pfleiderer.
    Thanks

    Reply
  13. Al says:
    13/07/2011 at 13:41

    I feel there is a problem with the size of the display, as mentioned in earlier posts, I know the fix is to add the screen sizes to the manifest, which does in fact work, however the issue arrises where it only fits the screen if you set anyDensity=true and the downside of that means you have to manually resize any of your UI controls in your views as they are no longer auto sized for you.

    Does anyone have a workaround for this?

    Reply
  14. Ron says:
    14/07/2011 at 06:51

    Is it possible to place a close button on the scan window through titanium api as my java knowledge is not that good???

    Reply
  15. Chinmay says:
    14/08/2011 at 15:38

    Hey Guys,

    I was able to use pre-built modules in my app, and was able to scan a QR Code. There are still two problems with the app:
    1. The camera is not aligned in the centre for my device (Nexus One), even though I edited tiapp.xml will required supports-screen tags.
    2. I cannot capture the code when I am holding phone vertically (portrait). It only works when I hold it horizontally (landscape).

    Let me know, does anyone have any solution to this problem??

    Reply

  16. Pingback: Pine Doors

  17. Matthew says:
    17/11/2011 at 15:50

    Great work – love the module. I got it to build and work using the 1.7.5 SDK… works flawlessly. One question though – what would I need to do to remove the red pulsating line? Is there any way to overlay an image/label over the scanner?

    Thanks so much!

    Reply
  18. Mike says:
    12/12/2011 at 10:25

    Hi

    Would it be possible for the module to be rebuilt in order to work with the new Titanium 1.8 SDK, as described here:

    http://wiki.appcelerator.org/display/guides/Android+Module+Porting+Guide+for+1.8.0.1

    Many thanks … great work!

    Reply
  19. Bitshftr says:
    27/12/2011 at 15:38

    Will this module be updated to work with Titanium SDK 1.8.0 ?

    Reply
  20. Saamy says:
    14/02/2012 at 15:11

    Hi
    1. I downlaoded zip file form http://cloud.github.com/downloads/mwaylabs/titanium-barcode/com.mwaysolutions.ba rcode-android-0.2.zip
    and got titanium-barcode,jar file from this zip file.

    2. Place it into my appcelerator mobile project director

    3.Added following in tiapp.xml

    com.mwaysolutions.barcode

    4. Then added following line in app.js

    // load module
    var titaniumBarcode = require(‘com.mwaysolutions.barcode’);

    5. When I run this Titanium mobile app, Im getting following error,

    Wrapped java.io,FileNotFoundException:Resources/com.mwaysolutions.barcode.js(app://app.js#4)

    Can any one help me to fix this issue?

    Thanks in Advance,

    Reply
  21. Bitshftr says:
    15/02/2012 at 15:13

    Saamy, read the instructions at the top of this page. Where you’ve placed the module, what you placed there, and what you added to tiapp.xml are not complete.

    Reply
  22. qr scanner says:
    23/04/2012 at 07:50

    Dear Spfleiderer,
    Interesting Thoughts, Asset management can be the major to working a productive company, but it can also show to be a challenging task, not just building the original listing but then retaining and generating absolutely sure that record is kept proper and up to date. In most businesses this endeavor can fall exclusively to one person, with seriously tiny backups or contingency programs is that human being leaves or is unwell for an extended period, this
    I look forward to your next post

    Reply
  23. Tidev says:
    25/04/2012 at 07:20

    Hi,

    Is it possible to know on scan success, the type of the QR code scanned ? If possible then how can we get it ? Actually, I checked and found that its only returning data in json format on success and not any other parameter.. Still if this can be known from it then it would be a great help.

    Many thanks in advance.. Keep up the great work!!!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>