In this wiki pages we will explain how to use our cmbSDK trough cordova plugin as custom widget in ITME project
Open ITME Studio and create new project
Set your project resolution
Go in Global section of Project Explorer, open Project Tags -> Datasheet View and insert project tags that we will use. We will explain every tag later in this section
All tags are local and change to the tag value affects only the station on which the change was made.
How this widget is working? There are trigger properties that call API methods from the Cordova plugin. There are output properties where we return results from API methods and there are events like callback functions that are called when API method is executed. On this link you can read about every property and here about events.
Go back in Graphics section, right click on Screens category and click Insert
Set screen attributes and press OK.
Design your header screen and name it as header.
Here we have header text, label where we will show reader device battery level and smart message object that show current reader device connection status.
In header screen we will add our barcodeReader custom widget.
Click on Custom Widget icon
Click import and find your barcodeReader.cwp file. barcodeReader should be shown as available widget. Select it and click OK.
barcodeReader custom widget is added in header screen
Open barcodeReader properties and go in widget members
Map properties from custom widget with project tags and set action Set+Get and set script that you want to execute in callback events.
Then open header screen script and call setPreviewContainerPositionAndSizeEventTrigger and loadScanner methods when header screen is opened. Also open another screen (main) while this one is opening.
Now create another screen and name it main.
In this screen we have rectangle where we display scanned results, button to start/stop scanning and button to clear displayed results.
Later right click on Screen Group category and create StartUp screen group.
Open Project properties and set this group as Startup screen.
Because we want to deploy this application as HTML web interface and interact from mobile devices we need to open Mobile Access menu at least ones and save changes on close. Also, for better communication with custom widget, set Process Values at minimum value which is 100.
When we finish with our screens and configurations Verify project.
and Save all screens as HTML for web access
With all these steps we finished our ITME project.
Navigate to your ITME web application physical path. If you use local IIS server usually this path is C:\inetpub\wwwroot\ITME81 and copy barcodeReaderServerFiles that you've download.
These cordova files that will be hosted on server will help us to use native features trough custom widgets. Later open index.html and reference these scripts:
When we navigate to server URL we add platform that we are using as attribute in query string.
With barcodeReader.js we check this attribute to know which cordova files to load (iOS or android).
Now open IIS manager right click on your ITME81 application and click Add Virtual Directory:
Set “CustomWidget” as Alias and as physical pat set path to your ITME project (C:\Users\Marko\Documents\InTouch Machine Edition v8.1 Projects\cmbSdkSample in our case)
Be sure that you make connection with user that have authorization to selected path.
Run Cognex Wrapper Application on your mobile device. In Server URL input box insert your server URL and in query string send screen and guestuser attributes. Click Navigate button and you will be redirected to your server URL (htttp://192.168.1.103/ITME81?screen=header&guestuser=1 in our case). When you click Navigate button application automatically add platform in query string as attribute.
Note that you must to run your ITME project before you navigate to server URL from Cognex Wrapper App.
With this property we call loadScanner(deviceType,sdk_key) method which is the first thing we need to do to in order to use reader device
Has two input parameters. First one should be 0 if we want to use MX Device to perform scanning or 1 if we will use Mobile Device for scanning. Second input parameter is sdk_key which is optional. We need to set our sdk license key only if we use Mobile Device for scanning barcodes. Otherwise we will have asterisks in barcode reader result.
Result from this event is returned in loadScannerOutputData property and loadScanner event is called as callback function
Example:
'For MX Device
$loadScannerEventTrigger = "loadScanner(0)"
'For Mobile Device
$loadScannerEventTrigger = "loadScanner(1, SDK_KEY)"
With this property we call connect() method to connect with our reader device and should be called after we load reader device.
Result from this event is returned in connectOutputData property and connect event is called as callback function.
Example:
$connectEventTrigger = "connect()"
With this property we call disconnect() method to release connection from reader device
Result from this event is returned in disconnectOutputData property and disconnect event is called as callback function.
Example:
$disconnectEventTrigger = "disconnect()"
With this property we call setPreviewContainerPositionAndSize(startPointX, startPointY, width, height) method which has 4 input parameters. startPointX, startPointY, width and height and they are measured in %.
This should be called before loadScanner method and we use it to place Mobile Device preview container.
Example:
'Preview Container positioned on 0,0 (left,top) 100% right and 30% bottom.
$setPreviewContainerPositionAndSizeEventTrigger = "setPreviewContainerPositionAndSize(0,0,100,30)"
With this property we call toggleScanner() method to start/stop scanning process.
Example:
$toggleScannerEventTrigger = “toggleScanner()”
To enable/disable symbologies we use this property which trigger setSymbologyEnabled(p1, p2, p3..) method. As input parameters we set symbology and status. We can enable/disable one or more symbologies in one call.
List of symbols: UNKNOWN, DATAMATRIX, QR, C128, UPC-EAN, C11, C39, C93, I2O5, CODABAR, EAN-UCC, PHARMACODE, MAXICODE, PDF417, MICROPDF417, DATABAR, POSTNET, PLANET, 4STATE-JAP, 4STATE-AUS, 4STATE-UPU, 4STATE-IMB, VERICODE, RPC, MSI, AZTECCODE, DOTCODE, C25, C39-CONVERT-TO-C32, OCR, 4STATE-RMC.
Result from this event is returned in setSymbologyEnabledOutputData property and setSymbologyEnabled event is called as callback function.
Example:
$setSymbologyEnabledEventTrigger = "setSymbologyEnabled(DataMatrix ON, C128 OFF)"
We can set light to be enabled/disabled by default when we start scanning with this property by triggering setLightsOn(p1) method. As input parameter we set ON if we want to enable and OFF if we want to disable light by default.
Result from this event is returned in setLightsOnOutputData property and setLightsOn event is called as callback function.
Example:
$setLightsOnEventTrigger = “setLightsOn(ON)”
To check if light is enabled by default we trigger isLightsOn() method
Result from this event is returned in isLightsOnOutputData property and isLightsOn event is called as callback function.
Example:
$isLightsOnEventTrigger = “isLightsOn()”
With this property we call sendCommand(p1, p2, p3…) method that executes DMC commands which are set as input parameters. We can set one or more dmc commands as input parameters.
Result from this event is returned in sendCommandOutputData property and sendCommand event is called as callback function
Example:
$sendCommandEventTrigger = “sendCommand (GET BATTERY.CHARGE)”
Integer property that represent current reader connection state. There is four state:
0 - CONNECTION_STATE_DISCONNECTED
1 - CONNECTION_STATE_CONNECTING
2 - CONNECTION_STATE_CONNECTED
3 - CONNECTION_STATE_DISCONNECTING
String property that contain last scanned result
Boolean property that is true if our reader device is available or false if reader device is unavailable.
Boolean property which will be true when scanning is active or false when scanning is stopped.
When loadScanner method is executed it return success message or error message if reader device can’t be loaded.
When connect method is executed it return true if connection is successful or error message if connection can’t be completed
When disconnect method is executed it return success message or error message if there is problem while we execute this method
In this property we return result from isSymbologyEnabled method. Result will be ON if certain symbology is enabled, OFF if is disabled or error message if there is some error thrown while we execute this method. Since isSymbologyEnabled method can have more than one parameter we will return symbology status separated with “,”. For example if we call $isSymbologyEnabledEventTrigger = "isSymbologyEnabled(DataMatrix, C128)" result will be “ON,ON” if both symbologies are enabled.
Note that by default if we use Mobile Device there is no symbologies enabled.
Result from isLightsOn method that can be ON if light is enabled, OFF if is disabled or error message if something wrong happened while this command is executed
String property that represent result from sendCommand() method. If there is more than one DMC commands as input parameters result from every command will be separated with “,”.
For example, if we call $sendCommandEventTrigger = “sendCommand (GET BATTERY.CHARGE, GET LIGHT.INTERNAL-ENABLE)” result will be “50, OFF”
Result from setLightsOn method that can be ON if light is enabled, OFF if is disabled or error message if something wrong happened while this command is executed
In this property we return result from setSymbologyEnabled method. Result will be ON if certain symbology is enabled, OFF if is disabled or error message if there is some error thrown while we execute this method. Since setSymbologyEnabled method can have more than one parameter we will return symbology status separated with “,”. For example if we call $setSymbologyEnabledEventTrigger = "setSymbologyEnabled(DataMatrix, C128)" result will be “ON,ON” if both symbologies are enabled.
This callback event will be executed when sendCommand method is triggered and finished: $sendCommandEventTrigger = "sendCommand(p1, p2, p3 ...)"
This callback event will be executed when isLightsOn method is triggered and finished: $isLightsOntEventTrigger = "isLightsOn()"
This callback event will be executed when setLightsOn method is triggered and finished: $setLightsOnEventTrigger = "setLightsOn(p1)"
This callback event will be executed when isSymbologyEnabled method is triggered and finished: $isSymbologyEnabledEventTrigger = "isSymbologyEnabled(p1,p2,p3,.....)"
This callback event will be executed when setSymbologyEnabled method is triggered and finished: $setSymbologyEnabledTrigger = "setSymbologyEnabled(p1,p2,p3,.....)"
This callback event will be executed when disconnect method is triggered and finished: $disconnectEventTrigger = "disconnect()"
This callback event will be executed when connect method is triggered and finished: $connectEventTrigger = "connect()"
This callback event will be executed when loadScanner method is triggered and finished: $loadScannerEventTrigger = "loadScanner(0)"
'This callback event will be executed when toggleScanner method is triggered and finished: $toggleScannerEventTrigger = "toggleScanner()"
This callback event will be executed when availability of MX Device is changed.
When barcode is scanned this callback event will be executed
This callback event will be executed when connection state of reader device is changed