Manateeworks Barcode Scanner Plugin

Version 1.1

Guide on how to add the mobiScan Phonegap plugin to your project(s)

For more in-depth info, visit our website at www.manateeworks.com

##Install using CLI interface (Phonegap 3.0 and above) (supposed you have already created the app by using CLI interface and added desired platforms)

• Add plugin to the project with:

phonegap local plugin add https://github.com/manateeworks/phonegap-mwbarcodescanner.git

or

phonegap local plugin add LOCAL_PATH_TO_THE_FOLDER_WITH_PLUGIN (if you are adding from local folder)   

• Perform initial build for each platform (repeat the command twice if not working after first time, seems there's a bug in phonegap 3.3)

  phonegap local build ios phonegap local build android phonegap local build wp8

• Add a button to index.html which will call the scanner:

	<form style="width: 100%; text-align: center;">
		<input type="button" value="Scan Barcode" onclick="scanner.startScanning()" style="font-size: 40px; width: 300px; height: 50px; margin-top: 100px;"/>
	</form>

• Upon license purchase, replace the username/key pairs for the corresponding barcode types in the file 'src/com/manateeworks/BarcodeScannerPlugin.java' (Android), 'Plugins/MWScannerViewController.m' (iOS) or 'Plugins/com.manateeworks.barcodescanner/BarcodeHelper.cs (wp8);

 

Android Note

You have to import .R file of your project (import YOUR_APP_PACKAGE_NAME.R;) to the 'src/com/manateeworks/ScannerActivity.java'

WP8 Note

It's seems there's a bug in Phonegap 3.0 so you have to add html '<script type="text/javascript" src="cordova.js"></script>' in index.html (or other html files) manually

##Manual Install (Phonegap 2.x or 3.0)

###Android:  

• Create a Phonegap Android app;

• Copy the folder 'Android/src/com/manateeworks' to your project's 'src/com/' folder;

• Copy the file 'Android/res/layout/scanner.xml' to your project's 'res/layout' folder;

• Copy the file 'Android/res/drawable/overlay.png' to your project's 'res/drawable' folder. Do the same for the file in 'drawable-hdpi' folder;

• Copy the files 'Android/libs/armeabi/libBarcodeScannerLib.so' and 'Android/libs/armeabi-v7a/libBarcodeScannerLib.so' to your project's 'libs/' folder, all the while preserving the same folder structure

• Copy the file 'www/MSBScanner.js' to the 'assets/www/js' folder;

• Insert the Scanner activity definition into AndroidManifest.xml:

 	<activity android:name="com.manateeworks.ScannerActivity"
		android:screenOrientation="landscape" android:configChanges="orientation|keyboardHidden"
		android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
	</activity>

• Insert the MWBScanner.js script into index.html:

	<script type="text/javascript" src="js/MWBScanner.js"></script> 

• Add a test button for calling the scanner to index.html:

 	<form style="width: 100%; text-align: center;">
        	    <input type="button" value="Scan Barcode" onclick="startScanning()" style="font-size: 20px; width: 300px; height: 30px; margin-top: 50px;"/>
       </form>

• Add the plugin to 'res/xml/config.xml':

For Phonegap 2.x

	<plugins>
		...	
		<plugin name="MWBarcodeScanner" value="com.manateeworks.BarcodeScannerPlugin"/>
        ...
	</plugins>

For Phonegap 3 *

	<feature name="MWBarcodeScanner">
       		 <param name="android-package" value="com.manateeworks.BarcodeScannerPlugin" />
   	</feature>

• Import .R file of your project (import YOUR_APP_PACKAGE_NAME.R;) to the 'src/com/manateeworks/ScannerActivity.java';

• Upon license purchase, replace the username/key pairs for the corresponding barcode types in the file 'src/com/manateeworks/BarcodeScannerPlugin.java';

• Run the app and test the scanner by pressing the previously added button;

• (Optional): You can also replace our default overlay.png for the camera screen with your own customized image;

• (For Phonegap 3) If notification plugin is not present in project, add it by following instructions from this url:

http://docs.phonegap.com/en/3.0.0/cordova_notification_notification.md.html

• If not present already, add camera permission to the AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

• (For Phonegap 2.x) In BarcodeScannerPlugin.java replace org.apache.cordova reference to org.apache.cordova.api :

  Instead:

   import org.apache.cordova.CallbackContext;
   import org.apache.cordova.CordovaPlugin;
  

  Use this:

   import org.apache.cordova.api.CallbackContext;
   import org.apache.cordova.api.CordovaPlugin;
  

  ###iOS:  

• Create a Phonegap iOS app;

• Copy all files from our 'iOS/src' folder to your project's 'Plugins' folder and add them to the project;

• Copy the file 'www/MSBScanner.js' to the folder 'www/js' . NOTE: You cannot drag & drop directly into the Xcode project... use Finder instead;

• Insert MWBScanner.js script into index.html:

	<script type="text/javascript" src="js/MWBScanner.js"></script> 

• Add a test button for calling the scanner to index.html:

 	<form style="width: 100%; text-align: center;">
        	    <input type="button" value="Scan Barcode" onclick="startScanning()" style="font-size: 20px; width: 300px; height: 30px; margin-top: 50px;"/>
        </form>

• Add the plugin to config.xml (from project root, not the one from www folder):

For Phonegap 2.x

	<plugins>
    
		...
		<plugin name="MWBarcodeScanner" value="CDVMWBarcodeScanner"/>
    
		...
	</plugins>

For Phonegap 3

	<feature name="MWBarcodeScanner">
        	<param name="ios-package" value="CDVMWBarcodeScanner" />
	</feature>

• Confirm you have the following frameworks added to your project: CoreVideo, CoreGraphics;

• Upon license purchase, replace the username/key pairs for the corresponding barcode types in the file Plugins/MWBarcodeScanner/MWScannerViewController.m;

• Run the app and test the scanner by pressing the previously added button;

• (Optional): You can replace our default overlay.png and close_button.png for the camera screen with your own customized image;

  ###Windows Phone 8:  

• Add (drag & drop) MWBarcodeScanner folder into the project folder named 'plugins'. If needed, create Plugins folder in project previously;

• Copy (this time from Windows Explorer, not by way of drag & drop) to the project BarcodeLib.winmd and BarcodeLib.dll to project root;

• Add (drag & drop) www/MWBScanner.js to www/js/ project folder;

• Insert MWBScanner.js script into index.html:

	<script type="text/javascript" src="js/MWBScanner.js"></script> 

• Add a button for calling the scanner to index.html:

 	<form style="width: 100%; text-align: center;">
 
	 	<input type="button" value="Scan Barcode" onclick="scanner.startScanning()" style="font-size: 40px; width: 300px;height: 50px; margin-top: 100px;"/>
 
	</form>

• Add BarcodeLib.winmd to project references: right click on 'References', 'Add Reference', 'Browse' and choose the file;

• Add the plugin to config.xml:

For Phonegap 2.x

	<plugins>
    
		...
		<plugin name="MWBarcodeScanner" value="MWBarcodeScanner"/>
    
		...
	</plugins>

For Phonegap 3

	<feature name="MWBarcodeScanner">
        	<param name="wp-package" value="MWBarcodeScanner" />
	</feature>

Add a notification plugin (if not already present):

	 <plugin name="Notification" value="Notification"/>

• (For Phonegap 2.9) Sometimes a bug occurs in Phonegap 2.9.0 with notification dialogs, making them crash on closing. It may be necessary to make a change in the Plugins/Notification.cs file:

  inside function: void btnOK_Click

  replace the following block:

      NotifBoxData notifBoxData = notifBoxParent.Tag as NotifBoxData;
              notifyBox = notifBoxData.previous as NotificationBox;
              callbackId = notifBoxData.callbackId as string;
  
              if (notifyBox == null)
              {
                  page.BackKeyPress -= page_BackKeyPress;
              }
  

  with the one below:

    NotifBoxData notifBoxData = notifBoxParent.Tag as NotifBoxData;
            if (notifBoxData != null)
                {
                    notifyBox = notifBoxData.previous as NotificationBox;
                    callbackId = notifBoxData.callbackId as string;
                    if (notifyBox == null)
                    {
                        page.BackKeyPress -= page_BackKeyPress;
                    }
                }
  

• Add ID_CAP_ISV_CAMERA capability into WMAppManifest.xml

• Upon license purchase, replace the username/key pairs for the corresponding barcode types in file Plugins/com.manateeworks.barcodescanner/BarcodeHelper.cs;

• Run the app and test the scanner by pressing the previously added button;

• (Optional): You can replace our default overlay.png for the camera screen with your own customized image;

  ###Changes in 1.1:  

• Advanced Overlay (MWBsetOverlayMode: function(overlayMode)

You can now choose between Simple Image Overlay and MW Dynamic Overlay, which shows the actual viewfinder, depending on selected barcode types and their respective scanning rectangles;

• Orientation parameter (MWBsetInterfaceOrientation: function(interfaceOrientation))

Now there's only a single function for supplying orientation parameters which makes tweaking the controller for changing scanner orientation no longer needed;

• Enable or disable high resolution scanning (MWBenableHiRes: function(enableHiRes))

Added option to choose between high or normal resolution scanning to better match user application requirements;

• Flash handling (MWBenableFlash: function(enableFlash))

Added option to enable or disable the flash toggle button;