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. | ||
| autoDeletePreviousSightImages | boolean | Automatically deletes older images of a sight when a new one is taken. | true | |
| 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. | ||
| enableSightGuidelines | PhotoCaptureSightGuidelinesOption | Option for displaying the Sight guidelines. If disabled, the guideline text will be hidden. | PhotoCaptureSightGuidelines.EPHEMERAL | |
| 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 | PhotoCaptureSightTutorialOption | Options for displaying the photo capture sight tutorial. | PhotoCaptureSightTutorialOption.DISABLED | |
| sightTutorial | SightTutorial[] | A collection of sight tutorial in different language with a list of sightIds associate to it. | ||
| 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. | false | |
| 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 | |
| enableVideoTutorial | boolean | Boolean indicating if the video tutorial should be enabled or not. | true | |
| enableHybridVideo | boolean | Boolean indicating if the hybrid video capture mode should be enabled or not. When enabled, users can take pictures during the video capture process, and these pictures will be added to the inspection. | false |