Plugin-Cars Plugin
1. You need to load 2 files on your websites.
2. First file is JS file.
<script src="path-to-plugin-folder/plugin.js"></script>
3. Second file is CSS file.
<link href="path-to-plugin-folder/plugin.css" rel="stylesheet" />
4. After load plugin JS, you can use this functionality.
const pluginOptions = {} // see options on next chapter
window.PLUGIN_API.init(pluginOptions)
export interface HelpStep {
// image for help photo modal (if empty "Help modal" doesnt show before capture)
img?: string
// images for mask over video which indicates recognition status
// g - for green or success
img_g?: string
// r - for red or failed
img_r?: string
// video for help photo modal (if empty "Help modal" doesnt show before capture)
video?: string
// title below help image in modal
title?: string
// description of help image
description?: string
}
export interface PreviewStep {
// small image in slider during photo
img?: string
// title for preview image in slider during photo
title?: string
}
export interface MaskStep {
// image for mask over video
img?: string
// description for mask over video
description?: string
// title for mask image in slider during photo
title?: string
}
export interface PluginStep {
// type of photo ('damage' | 'vehicle' or ets.)
photoType: string
// show retake page after capture (default is true)
withRetake?: boolean
// embed geolocation, date, time in the photo (default is true)
embedGeo?: boolean
// show step in landscape mode (if we don't declare we can have it in landscape and in portrait mode)
forceLandscape?: boolean
// show comment block after make photo
// TODO: comment because someone can change one's mind
isShowComment?: boolean
helpSteps?: HelpStep[]
mask?: MaskStep
// the parameter will hide the video mask after the specified number of milliseconds
maskHideDelay?: number
preview?: PreviewStep
// description of the side of the car that will be displayed in the step description
description?: string
// icon of the car side that will be displayed on the step button
iconUrl?: string
// button to skip the current step and go to the next one
withSkipButton?: boolean
// to add digital signature as a step
digitalSignature?: boolean
// to add confirmation dialog in additional photo step
additionalStepConfirm?: boolean
// to add plateOcr as a step
plateOcrProvider?: boolean
// to add vinOcr as a step
vinOcrProvider?: boolean
// possibility to shoot as many photos as want
additionalPhotosStep?: true
}
export interface ValidationContent {
// Title of validation modal
title: string
// Description of Validation modal (it will add acceptanceSide : left-front)
description: string
// Image for Validation modal
img: string
}
interface PluginProps {
// selector to element where plugin will render
selector: string
// content for validation
validationContent?: ValidationContent
// DAT Europa Code for vehicle type definition
datECode?: string
// Flag to activate real time video recognition with new model and enable animations
realTimeDetection?: boolean
// Flag to activate real time video recognition
realTime?: boolean
steps: PluginStep[]
// show summary page (default 'true')
// if false completeFormCallback invoke in last capture photo step
withSummary?: boolean
completeFormCallback: (form: ResultForm) => void
// default true
disableStreamAfterComplete?: boolean
icons?: {
permissions?: string
rejectPermissions?: string
spinner?: string
location?: string
}
gpsInfo?: {
// default 'top-right'
position?:
| 'top-left'
| 'top-right'
| 'bottom-left'
| 'bottom-right'
| 'center-top'
| 'center-bottom'
styles?: {
// only words or rgb (e.g 'white' or 'rgb(255, 255, 10)')
fontColor?: string
// only px (default 25px)
fontSize?: string
// default Arial
fontFamily?: string
// default black
backgroundColor?: string
// only px only 4 values supports (e.g '10px 10px 10px 10px') only integer
padding?: string
// only px
borderRadius?: string
}
}
additionalPhotoForceLandscape?: boolean
// flag for modern view with steps navigation
modernView?: boolean
// handler for 'Go Back' button
onGoBack?: () => void
// possibility to hide gallery button
showGalleryButton?: boolean
// possibility to choose which camera should be opened
showSettingsButton?: boolean
// possibility to download photos to the device gallery folder
downloadOnDevice?: boolean
// to show successfully downloaded photos count and confirmation message
showConfirmationStep?: boolean
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load plugin style -->
<link href="plugin.css" rel="stylesheet" />
</head>
<body>
<!-- this place where plugin will render -->
<div class="plugin"></div>
<!-- load plugin JS synchronously -->
<script src="https://plugins.wedat.eu./plugin-cars/plugin.js"></script>
<!-- init plugin options on your JS file or inline JS like this -->
<script>
window.PLUGIN_API.init({
selector: '.plugin',
completeFormCallback: (form) => {
// make what your want :)
console.log(form)
},
withSummary: false,
steps: [
{
photoType: 'vehicle',
withRetake: true,
forceLandscape: false,
mask: {
img: 'path-to-mask-img',
title: 'Title image',
description:
'Lörem ipsum tidsfönster nev destat. Primalog sonde infrafet, sede arabisk vår. Antimodern behet tepatologi ev prerad. Mikrocentrism nende seismisk. Fast lade nilig så dener. '
},
helpSteps: [
{
img: 'path-to-help-img',
title: 'Title1',
description:
'Lörem ipsum tidsfönster nev destat. Primalog sonde infrafet, sede arabisk vår. Antimodern behet tepatologi ev prerad. Mikrocentrism nende seismisk. Fast lade nilig så dener. '
},
{
img: 'path-to-help-img',
title: 'Title2',
description:
'Lörem ipsum tidsfönster nev destat. Primalog sonde infrafet, sede arabisk vår. Antimodern behet tepatologi ev prerad. Mikrocentrism nende seismisk. Fast lade nilig så dener. '
},
{
img: 'path-to-help-img',
title: 'Title3',
description:
'Lörem ipsum tidsfönster nev destat. Primalog sonde infrafet, sede arabisk vår. Antimodern behet tepatologi ev prerad. Mikrocentrism nende seismisk. Fast lade nilig så dener. '
}
],
embedGeo: false
}
]
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load plugin style -->
<link href="plugin.css" rel="stylesheet" />
</head>
<body>
<!-- this place where plugin will render -->
<div class="plugin"></div>
<!-- load plugin JS synchronously -->
<script src="https://plugins.wedat.eu./plugin-cars/plugin.js"></script>
<!-- init plugin options on your JS file or inline JS like this -->
<script>
window.PLUGIN_API.init({
selector: '.plugin',
completeFormCallback: (form) => {
// make what your want :)
console.log(form)
},
datECode: '016501450750006',
steps: [
{
photoType: 'vehicle',
withRetake: true,
forceLandscape: false,
mask: {
img: 'dynamicFrontView', // dynamic mask img name (constants/stepsMaskImgDynamicNames.ts)
title: 'Front View',
description: 'Front View'
}
},
{
photoType: 'vehicle',
withRetake: true,
forceLandscape: false,
mask: {
img: 'dynamicDriverFront',
title: 'Driver Front',
description: 'Driver Front'
}
},
{
photoType: 'vehicle',
withRetake: true,
forceLandscape: false,
mask: {
img: 'dynamicDriverRear',
title: 'Driver Rear',
description: 'Driver Rear'
}
},
{
photoType: 'vehicle',
withRetake: true,
forceLandscape: false,
mask: {
img: 'dynamicRearView',
title: 'Rear View',
description: 'Rear View'
}
},
{
photoType: 'vehicle',
withRetake: true,
forceLandscape: false,
mask: {
img: 'dynamicPassengerRear',
title: 'Passenger Rear',
description: 'Passenger Rear'
}
},
{
photoType: 'vehicle',
withRetake: true,
forceLandscape: false,
mask: {
img: 'dynamicPassengerFront',
title: 'Passenger Front',
description: 'Passenger Front'
}
}
]
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load plugin style -->
<link href="plugin.css" rel="stylesheet" />
</head>
<body>
<!-- this place where plugin will render -->
<div class="plugin"></div>
<!-- load plugin JS synchronously -->
<script src="https://plugins.wedat.eu./plugin-cars/plugin.js"></script>
<!-- init plugin options on your JS file or inline JS like this -->
<script>
window.PLUGIN_API.init({
selector: '.plugin',
completeFormCallback: form => {
// make what your want :)
console.log(form);
},
validationContent: {
title: 'AI Validation',
description: 'The shooted photo does not correspond to the requested side - ',
img: Invalid
},
steps: [
{
photoType: 'vehicle',
acceptableCriteria: 'front-right',
mask: {
title: 'Title image',
img: 'path-to-mask-img'
},
preview: {
img: 'path-to-preview-img',
title: 'Passenger Side Front'
},
helpSteps: [
{
img: 'path-to-help-img',
title: 'Driver Side Front',
description: 'Fit your vehicle into the outline as shown in the example above. Then capture the photo.',
}
]
},
{
photoType: 'vehicle',
mask: {
title: 'Title image',
img: 'path-to-mask-img'
},
preview: {
img: 'path-to-preview-img',
title: 'Passenger Side Front'
},
helpSteps: [
{
img: 'path-to-help-img',
title: 'Driver Side Front',
description: 'Fit your vehicle into the outline as shown in the example above. Then capture the photo.',
}
]
embedGeo: false
},
{
photoType: 'damage',
forceLandscape: true,
mask: {
title: 'Title image',
img: 'path-to-mask-img'
},
preview: {
img: 'path-to-preview-img',
title: 'Passenger Side Front'
},
helpSteps: [
{
img: 'path-to-help-img',
title: 'Driver Side Front',
description: 'Fit your vehicle into the outline as shown in the example above. Then capture the photo.',
}
]
helpTitle: 'Damage - Right',
},
{
photoType: 'damage',
mask: {
title: 'Title image',
img: 'path-to-mask-img'
},
preview: {
img: 'path-to-preview-img',
title: 'Passenger Side Front'
},
helpSteps: [
{
img: 'path-to-help-img',
title: 'Driver Side Front',
description: 'Fit your vehicle into the outline as shown in the example above. Then capture the photo.',
}
]
helpTitle: 'Damage - Left',
},
],
});
</script>
</body>
</html>
interface FormStep {
// base64 string
photo: string
photoType: PluginStep['photoType']
comment?: string
geolocation?: {
latitude?: number
longitude?: number
date: string
time: string
}
}
interface ResultForm {
steps: FormStep[]
// additional photo
additionalSteps?: string[]
}