Calibrate road-facing ADAS

You can integrate road-facing advanced driver assistance system (ADAS) calibration functionality by implementing a React component. This is the same component that we use in our Partner Portal. The component works based on this endpoint. Currently, the Surfsight API does not have a single API specifically for road-facing ADAS calibration. We do have an API to send the calibration measurements, but we do not recommend using it without the React component.

Prerequisite

These calls can be made by any party with any valid token.

Click here to download the React component.

The following sections tell you more about the React component and explain how to implement it from your platform:

About road-facing ADAS
About the React component
Integrating the React component in your application
Using the React component on its own

About road-facing ADAS

The Surfsight device uses Advanced Driver Assistance System (ADAS) features to gather information about the road ahead. It can detect tailgating events (cases where you are driving too close to the vehicle in front of you), and can estimate time-to-collision (TTC).

Surfsight manages limitation parameters for TTC. When the driver exceeds the configured TTC limit and for the configured duration (or longer), visual and audio alerts are sent. Users can configure the permitted TTC and duration parameters, as shown in the table below:

Parameter name	Description	Valid values (milliseconds)	Default names (milliseconds)
Time to collision during the day (headwayAlertDayThreshold)	The TTC limit during the day.	1,000 to 5,000	2,000
Time to collision during the night (headwayAlertNightThreshold)	The TTC limit during the night.	1,000 to 5,000	3,000
Continuous time to collision (headwayAlertTime)	The amount of time during which the TTC can be exceeded until alerts are delivered. (This value is the same for both day and night.)	1,000 to 60,000	3,000

About the React component

In the React component provided to you, you can get up and running quickly rather than working from scratch.

The React component includes the following files and folders:

Name	Description
adas-example	The folder used to utilize the React component on its own.
deviceCalibration	The folder used to integrate the React component into an application.
README	Basic instructions on how to use the React component.

Prereq

To successfully use the React component, you must have at least node version 14.18.1 and npm version ^6.14.15.

Integrating the React component in your application

Use this process to help you integrate the React component for road-facing ADAS into your application:

Copy the deviceCalibration folder into your components folder.

Add any dependencies you don't already have to your package.json file. The dependencies required can be found in the README file and include:

Copy

Copied

"dependencies": {
**_ YOUR DEPENDENCIES _**
"@types/qs": "^6.9.7",
"@types/semver": "^7.3.9",
"@types/axios": "^0.14.0",
"@types/node": "^12.20.4",
"@types/react": "17.0.36",
"@types/react-dom": "17.0.11",
"@types/react-router-dom": "^5.1.7",
"@typescript-eslint/eslint-plugin": "^4.15.2",
"@typescript-eslint/parser": "^4.15.2",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.0.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"axios": "^0.21.1",
"env-cmd": "^10.1.0",
"extract-react-intl-messages": "^4.1.1",
"formik": "^2.2.9",
"husky": "=4",
"konva": "^8.0.1 || ^7.2.5",
"lint-staged": ">=10",
"node-sass": "^5.0.0",
"prettier": "2.2.1",
"qs": "^6.5.2",
"react": "17.0.2",
"react-cookie": "^4.0.3",
"react-dom": "17.0.2",
"react-intl": "^5.20.3",
"react-konva": "^17.0.2-5",
"react-number-format": "^4.7.3",
"react-query": "^3.31.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"semver": "^7.3.5",
"shx": "^0.3.3",
"typescript": "4.4.4",
"moment": "^2.29.1",
"styled-components": "^5.2.1",
"web-vitals": "^1.0.1",
"yn": "^5.0.0"
},
"peerDependencies": {
### **_ YOUR PEER DEPENDENCIES _**
"konva": "^8.0.1 || ^7.2.5"
}

Add the calibration component to any webpages from which you want to offer calibration. The calibration component can also be found in the README file.

Copy

Copied

<IntlProvider locale={language} messages={messages[language]}>
		<Router history={history}>
		<Switch>
  			<Route
    			exact
    			path="/device/:deviceImei/calibration"
    			component={Calibration}
  			/>
			</Switch>
		</Router>
</IntlProvider>

Adjust the path in the calibration component to align with your application.

Run npm i in your terminal to install the dependencies.

Once integrated, this component works in your application based on this endpoint.

Using the React component on its own

Use this process to help you use the React component on its own:

Copy the adas-example folder.

Install any dependencies you don't already have:

Run cd adas-example.
Run npm i

The dependencies required can be found in the README file and include:

Copy

Copied

"dependencies": {
**_ YOUR DEPENDENCIES _**
"@types/qs": "^6.9.7",
"@types/semver": "^7.3.9",
"@types/axios": "^0.14.0",
"@types/node": "^12.20.4",
"@types/react": "17.0.36",
"@types/react-dom": "17.0.11",
"@types/react-router-dom": "^5.1.7",
"@typescript-eslint/eslint-plugin": "^4.15.2",
"@typescript-eslint/parser": "^4.15.2",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.0.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"axios": "^0.21.1",
"env-cmd": "^10.1.0",
"extract-react-intl-messages": "^4.1.1",
"formik": "^2.2.9",
"husky": "=4",
"konva": "^8.0.1 || ^7.2.5",
"lint-staged": ">=10",
"node-sass": "^5.0.0",
"prettier": "2.2.1",
"qs": "^6.5.2",
"react": "17.0.2",
"react-cookie": "^4.0.3",
"react-dom": "17.0.2",
"react-intl": "^5.20.3",
"react-konva": "^17.0.2-5",
"react-number-format": "^4.7.3",
"react-query": "^3.31.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"semver": "^7.3.5",
"shx": "^0.3.3",
"typescript": "4.4.4",
"moment": "^2.29.1",
"styled-components": "^5.2.1",
"web-vitals": "^1.0.1",
"yn": "^5.0.0"
},
"peerDependencies": {
### **_ YOUR PEER DEPENDENCIES _**
"konva": "^8.0.1 || ^7.2.5"
}

Run the component locally on your computer with the npm start command.