Configuration
Most of the web applications integrating the MonkJs SDK will need the same configuration properties. To simplify the
syntax when configuring your app, we provide a TypeScript interfaces called (PhotoCaptureAppConfig and
VideoCaptureAppConfig) that contains the usual configuration properties needed for both the PhotoCapture and
VideoCapture workflows. You can create a file in your app that will contain the MonkJs configuration, so that it will be
easy to modify the config properties if needed:
// config.ts
import { PhotoCaptureAppConfig } from '@monkvision/types';
export const MonkJsConfig: PhotoCaptureAppConfig = {
...
};
This configuration object can then be passed to components like <MonkAppStateProvider> or <PhotoCapture>.
Available Configuration Options
The following table lists the available configuration options in the CaptureAppConfig interface :
| Name | Type | Description | Required | Default Value |
|---|---|---|---|---|
| allowManualLogin | boolean | Indicates if manual login and logout should be enabled or not. | ✔️ | |
| fetchFromSearchParams | boolean | Indicates if the app state (auth token, inspection ID etc.) should be fetched from the URL search params. | ✔️ | |
| allowVehicleTypeSelection | boolean | Indicates if manual vehicle type selection should be enabled if the vehicle type is not defined. | ✔️ | |
| enableSteeringWheelPosition | boolean | Indicates if the capture Sights should vary based on the steering wheel position (right or left). | ✔️ | |
| defaultVehicleType | VehicleType | Default vehicle type to use if no vehicle type has been specified. | ✔️ | |
| defaultSteeringWheelPosition | SteeringWheelPosition | Default steering wheel position to use if no steering wheel position has been specified. | if enableSteeringWheelPosition is set to true | |
| sights | Record<..., string[]> | A map associating each vehicle type supported by the app to a list of sight IDs. If enableSteeringWheelPosition is set to true, it's a map associating each steering wheel position to this map. | ✔️ | |
| allowCreateInspection | boolean | Indicates if automatic inspection creation should be enabled in the app. | ✔️ | |
| createInspectionOptions | CreateInspectionOptions | Options used when automatically creating an inspection. | if allowCreateInspection is set to true | |
| apiDomain | string | The API domain used to communicate with the API. | ✔️ | |
| requiredApiPermissions | MonkApiPermission[] | Required API permission that the user must have to use the current app. | ||
| palette | Partial<MonkPalette> | Custom color palette to use in the app. | ||
| enforceOrientation | DeviceOrientation | Use this prop to enforce a specific device orientation for the Camera screen. | ||
| maxUploadDurationWarning | number | Max upload duration in milliseconds before showing a bad connection warning to the user. Use -1 to never display the warning. | 15000 | |
| useAdaptiveImageQuality | boolean | Boolean indicating if the image quality should be downgraded automatically in case of low connection. | true | |
| showCloseButton | boolean | Indicates if the close button should be displayed in the HUD on top of the Camera preview. | false | |
| startTasksOnComplete | <code>boolean | TaskName[]</code> | Value indicating if tasks should be started at the end of the inspection. See the inspection-capture-web package doc for more info. | true | |
| additionalTasks | TaskName[] | An optional list of additional tasks to run on every Sight of the inspection. | ||
| tasksBySight | Record<string, TaskName[]> | Record associating each sight with a list of tasks to execute for it. If not provided, the default tasks of the sight will be used. | ||
| resolution | CameraResolution | Indicates the resolution of the pictures taken by the Camera. | CameraResolution.UHD_4K | |
| allowImageUpscaling | boolean | Allow images to be scaled up if the device does not support the specified resolution in the resolution prop. | false | |
| format | CompressionFormat | The output format of the compression. | CompressionFormat.JPEG | |
| quality | number | Value indicating image quality for the compression output. | 0.6 | |
| addDamage | AddDamage | Options for Add Damage, If disabled, the Add Damage button will be hidden. | AddDamage.PART_SELECT | |
| allowSkipRetake | boolean | If compliance is enabled, this prop indicate if the user is allowed to skip the retaking process if some pictures are not compliant. | false | |
| enableCompliance | boolean | Indicates if compliance checks should be enabled or not. | true | |
| enableCompliancePerSight | string[] | Array of Sight IDs that indicates for which sight IDs the compliance should be enabled. | ||
| complianceIssues | ComplianceIssue[] | If compliance checks are enabled, this property can be used to select a list of compliance issues to check. | DEFAULT_COMPLIANCE_ISSUES | |
| complianceIssuesPerSight | Record<string, ComplianceIssue[]> | A map associating Sight IDs to a list of compliance issues to check. | ||
| useLiveCompliance | boolean | Indicates if live compliance should be enabled or not. | false | |
| customComplianceThresholds | CustomComplianceThresholds | Custom thresholds that can be used to modify the strictness of the compliance for certain compliance issues. | ||
| customComplianceThresholdsPerSight | Record<string, CustomComplianceThresholds> | A map associating Sight IDs to custom compliance thresholds. |
Live Configs
MonkJs now also offers a way to configure Live Configurations for your web applications. This allows MonkJs apps to
fetch their configurations (PhotoCaptureAppConfig or VideoCaptureAppConfig) from a GCP Bucket on startup. By doing
this, the configurations of the applications can be modified without having to re-deploy the apps. Each live
configuration consists of a JSON file stored in a public bucket on Monk's Google Cloud instances, identified by a unique
ID. It is not possible for now to set up a custom hosting service for the live configs, but this feature should arrive
soon. In order to set up a live configuration on one of your apps, you can simply use the following provider in your
app :
import { LiveConfigAppProvider } from '@monkvision/common-ui-web';
function App() {
return (
<LiveConfigAppProvider id='your-live-config-id'>
...
</LiveConfigAppProvider>
);
}
This component will automatically fetch the given live configuration from one of our buckets, and set up a
MonkAppStateProvider in your app by passing it the fetched configuration.
Available Configuration Options
Shared Configuration Options
The following table lists the options available in both the PhotoCapture and VideoCapture configurations :
| Name | Type | Description | Required | Default Value |
|---|---|---|---|---|
| workflow | CaptureWorkflow | Specifies which capture workflow this app is meant to be used for. The config options available change based on this param. | ✔️ | |
| format | CompressionFormat | The output format of the compression. | CompressionFormat.JPEG | |
| quality | number | Value indicating image quality for the compression output. | 0.6 | |
| resolution | CameraResolution | Indicates the resolution of the pictures taken by the Camera. | CameraResolution.UHD_4K | |
| allowImageUpscaling | boolean | Allow images to be scaled up if the device does not support the specified resolution in the resolution prop. | false | |
| additionalTasks | TaskName[] | An optional list of additional tasks to run on every image of the inspection. | ||
| startTasksOnComplete | <code>boolean | TaskName[]</code> | Value indicating if tasks should be started at the end of the inspection. See the inspection-capture-web package doc for more info. | true | |
| allowManualLogin | boolean | Indicates if manual login and logout should be enabled or not. | ✔️ | |
| fetchFromSearchParams | boolean | Indicates if the app state (auth token, inspection ID etc.) should be fetched from the URL search params. | ✔️ | |
| apiDomain | string | The API domain used to communicate with the API. | ✔️ | |
| thumbnailDomain | string | The API domain used to communicate with the resize microservice. | ✔️ | |
| requiredApiPermissions | MonkApiPermission[] | Required API permission that the user must have to use the current app. | ||
| palette | Partial<MonkPalette> | Custom color palette to use in the app. | ||
| allowCreateInspection | boolean | Indicates if automatic inspection creation should be enabled in the app. | ✔️ | |
| createInspectionOptions | CreateInspectionOptions | Options used when automatically creating an inspection. | if allowCreateInspection is set to true |
PhotoCapture Configuration Options
The following table lists the available configuration options in the PhotoCaptureAppConfig interface.
Note : PhotoCapture configurations must have their workflow property set to CaptureWorkflow.PHOTO.
| Name | Type | Description | Required | Default Value |
|---|---|---|---|---|
| enableCompliance | boolean | Indicates if compliance checks should be enabled or not. | true | |
| enableCompliancePerSight | string[] | Array of Sight IDs that indicates for which sight IDs the compliance should be enabled. | ||
| complianceIssues | ComplianceIssue[] | If compliance checks are enabled, this property can be used to select a list of compliance issues to check. | DEFAULT_COMPLIANCE_ISSUES | |
| complianceIssuesPerSight | Record<string, ComplianceIssue[]> | A map associating Sight IDs to a list of compliance issues to check. | ||
| useLiveCompliance | boolean | Indicates if live compliance should be enabled or not. | false | |
| customComplianceThresholds | CustomComplianceThresholds | Custom thresholds that can be used to modify the strictness of the compliance for certain compliance issues. | ||
| customComplianceThresholdsPerSight | Record<string, CustomComplianceThresholds> | A map associating Sight IDs to custom compliance thresholds. | ||
| tasksBySight | Record<string, TaskName[]> | Record associating each sight with a list of tasks to execute for it. If not provided, the default tasks of the sight will be used. | ||
| showCloseButton | boolean | Indicates if the close button should be displayed in the HUD on top of the Camera preview. | false | |
| enforceOrientation | DeviceOrientation | Use this prop to enforce a specific device orientation for the Camera screen. | ||
| useAdaptiveImageQuality | boolean | Boolean indicating if the image quality should be downgraded automatically in case of low connection. | true | |
| maxUploadDurationWarning | number | Max upload duration in milliseconds before showing a bad connection warning to the user. Use -1 to never display the warning. | 15000 | |
| allowSkipRetake | boolean | If compliance is enabled, this prop indicate if the user is allowed to skip the retaking process if some pictures are not compliant. | false | |
| addDamage | AddDamage | Options for Add Damage. If disabled, the Add Damage button will be hidden. | AddDamage.PART_SELECT | |
| sightGuidelines | sightGuideline[] | A collection of sight guidelines in different language with a list of sightIds associate to it. | ||
| enableSightGuideline | boolean | Boolean indicating whether the sight guideline feature is enabled. If disabled, the guideline text will be hidden. | true | |
| defaultVehicleType | VehicleType | Default vehicle type to use if no vehicle type has been specified. | ✔️ | |
| allowVehicleTypeSelection | boolean | Indicates if manual vehicle type selection should be enabled if the vehicle type is not defined. | ✔️ | |
| enableTutorial | PhotoCaptureTutorialOption | Options for displaying the photo capture tutorial. | PhotoCaptureTutorialOption.FIRST_TIME_ONLY | |
| allowSkipTutorial | boolean | Boolean indicating if the user can skip the PhotoCapture tutorial. | true | |
| enableSightTutorial | boolean | Boolean indicating whether the sight tutorial feature is enabled. | true | |
| enableSteeringWheelPosition | boolean | Indicates if the capture Sights should vary based on the steering wheel position (right or left). | ✔️ | |
| sights | Record<..., string[]> | A map associating each vehicle type supported by the app to a list of sight IDs. If enableSteeringWheelPosition is set to true, it's a map associating each steering wheel position to this map. | ✔️ | |
| defaultSteeringWheelPosition | SteeringWheelPosition | Default steering wheel position to use if no steering wheel position has been specified. | if enableSteeringWheelPosition is set to true |
VideoCapture Configuration Options
The following table lists the available configuration options in the VideoCaptureAppConfig interface.
Note : PhotoCapture configurations must have their workflow property set to CaptureWorkflow.VIDEO.
| Name | Type | Description | Required | Default Value |
|---|---|---|---|---|
| minRecordingDuration | number | The minimum duration of a recording in milliseconds. | 15000 | |
| maxRetryCount | number | The maximum number of retries for failed image uploads. | 3 | |
| enableFastWalkingWarning | boolean | Boolean indicating if a warning should be shown to the user when they are walking too fast around the vehicle. | true | |
| enablePhoneShakingWarning | boolean | Boolean indicating if a warning should be shown to the user when they are shaking their phone too much. | true | |
| fastWalkingWarningCooldown | number | The duration (in milliseconds) to wait between fast walking warnings. | 4000 | |
| phoneShakingWarningCooldown | number | The duration (in milliseconds) to wait between phone shaking warnings. | 4000 |