You are here: Creating an MLCamera widget Using the Constructor: voltmx.ui.MLCamera
MLCamera Widget
Image Recognition is a part of machine learning in which you can scan and classify real-world objects.
From Volt MX Iris 9.0 version onwards, you can implement the image recognition capabilities in your application using MLCamera widget and Image Classification APIs. For more information on Image Classification APIs, refer Volt MX Iris API guide.
MLCamera widget uses Machine Learning models to provide you with the information related to the object. MLCamera widget opens a camera preview to scan the objects and classifies it based on the Machine Learning Models.
Note: You cannot add an overlay to an MLCamera widget. To add overlay to MLCamera widget, place the MLCamera widget in a FlexContainer widget. If you want to view widgets when the camera is open, add widgets into this FlexContainer widget with a higher zIndex value.
Widgets are normally added to your application by using Volt MX Iris, but they can also be added through code. For general information on using widgets in Volt MX Iris, refer Designing an Application in the Iris User Guide.
Note: To enable the MLCamera widget in Android platform, you must enable the
useMLImageClassifierproperty in theandroidbuild.propertiesfile. For more information about how to add a parameter inandroidbuild.propertiesfile, click here.
The MLCamera widget capabilities can be broadly categorized into the following:
Layout
| Events | Description |
|---|---|
| doLayout | Invoked for every widget when the widget position and dimensions are computed. |
| Properties | Description |
|---|---|
| bottom | Determines the bottom edge of the widget and is measured from the bottom bounds of the parent container. |
| centerX | Determines the center of a widget measured from the left bounds of the parent container. |
| centerY | Determines the center of a widget measured from the top bounds of the parent container. |
| height | It determines the height of the widget and measured along the y-axis. |
| left | Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container. |
| maxHeight | Specifies the maximum height of the widget and is applicable only when the height property is not specified. |
| maxWidth | Specifies the maximum width of the widget and is applicable only when the width property is not specified. |
| minHeight | Specifies the minimum height of the widget and is applicable only when the height property is not specified. |
| minWidth | Specifies the minimum width of the widget and is applicable only when the width property is not specified. |
| right | Determines the lower right corner of the widget and is measured from the right bounds of the parent container. |
| top | Determines the top edge of the widget and measured from the top bounds of the parent container. |
| width | Determines the width of the widget and is measured along the x-axis. |
| zIndex | Specifies the stack order of a widget. |
Capturing Features
| Events | Description |
|---|---|
| onFailure | Invoked when an error occurs while using a MLCamera widget. |
| Methods | Description |
|---|---|
| setImageClassifier | This method is used to set the imageClassifier object to the MLCamera widget. |
| startDetection | This method is used to scan the frames when the MLCamera widget is opened. |
| stopDetection | This method is used to stop the scanning of the frames when the MLCamera widget is opened. |
Configurations common to all widgets
| Methods | Description |
|---|---|
| convertPointFromWidget | Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system). |
| convertPointToWidget | Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system). |
| removeFromParent | Allows you to remove a child widget from a parent widget. |
| setVisibility | Use this method to set the visibility of the widget. |
| Properties | Description |
|---|---|
| id | id is a unique identifier of the Camera Widget consisting of alphanumeric characters. |
| info | A custom JSObject with the key-value pairs that a developer can use to store the context with the widget. |
| isVisible | Controls the visibility of a widget on the form. |
| parent | Helps you access the parent of the widget. |
MLCamera Widget Basics
An MLCamera widget and an imageClassifier Object uses camera preview to scan and classify objects continuously. Here are the steps that you must follow to classify objects using the MLCamera widget.
- Create an MLCamera widget using the constructor voltmx.ui.MLCamera.
- Create an ImageClassifier Object using the voltmx.ml.imageClassifier API.
- Set the imageClassifer Object to MLCamera widget using the setImageClassifier method of MLCamera widget.
- After that use the startDetection method of MLCamera widget to enable the classification of camera preview frames.
Note: MLCamera widget is not supported for SPA and Desktop Web platform.
Creating an MLCamera widget Using the Constructor: voltmx.ui.MLCamera
var mlCamera = new voltmx.ui.MLCamera(mlCamBasic, mlCamLayout, mlCamPsp);
- mlCamBasic is an object with basic properties.
- mlCamLayout is an object with layout properties.
- mlCamPsp is an object with platform specific properties.
Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored.
Example
//Sample code for creating an MLCamera widget.
var mlCamBasic = {
"height": "85%",
"id": "mlCamera",
"isVisible": true,
"left": "5dp",
"top": "55dp",
"width": "100%",
"zIndex": 1
}
var mlCamLayout = {};
var mlCamPsp = {};
var mlCamera = new voltmx.ui.MLCamera(mlCamBasic, mlCamLayout, mlCamPsp);