VisionAIre
  • About Nodeflux
  • Visionaire Stream
    • Overview
    • Requirements
      • Credential Keys
      • Tested Hardware
      • Bandwith Requirements
    • Installation Guide
      • Dependencies
      • Simple Installation
      • Advanced Installation
      • Clustering Installation
      • Add-ons Analytics Installation
        • People Attributes Installation
        • Vehicle Attributes Installation
        • OVOD Installation
        • OVIC Installation
        • VM Installation
        • VLM Installation
    • Analytics
      • Face Recognition
        • Additional Information
          • Overview
          • Disclaimer
          • Metrics
          • Testing
      • People Analytics
      • Crowd Estimation
      • PPE Detection
      • License Plate Recognition
      • Vehicle Analytics
      • Water Level Monitoring
        • Camera Guideline
      • Pre-Flood Monitoring
      • Person Smoking Detection
      • Person with Handphone Detection
      • Smoke and Fire Detection
      • Person Using Firearms Detection
      • Vandalism Attempt Recognition
      • ATM Burglary Incident Recognition
      • Road Crash Monitoring
      • People Fighting Recognition
      • Riot Recognition
    • Developer Guide
      • How our APIs work
      • HTTP APIs
      • Websocket
      • Database Structure
    • Changelogs
  • Visionaire Snapshot
    • Overview
    • Requirements
    • Installation Guide
      • Face Searching & Matching
        • Single Node
        • Clustering
      • Helmet Detection
      • Chicken Estimation
      • Face Detection
      • Over Dimension Over Load
      • Frontal License Plate Recognition
    • Analytics
      • Face Searching & Matching
        • Face Enrollment
          • Image Guideline
          • Face and Image Quality Assessment
            • Setup On Premise
            • API
          • Insert / Update / Delete Enrollment
          • Batch Enrollment
      • Helmet Detection
      • Chicken Estimation
      • People Demography
      • Face Detection
      • Over Dimension Over Load
      • License Plate Recognition -Frontal
    • Developer Guide
      • APIs
        • Face Searching & Matching
        • Helmet Detection
        • Chicken Estimation
        • People Demography
        • Face Detection
        • Over Dimension Over Load
        • Frontal License Plate Recognition
      • Vanilla APIs for Face Enrollment
      • Porting Enrollment Database Cluster to Docker
    • Changelogs
  • VisionAIre Dashboard
    • Introduction
    • Add Analytic Assignment
    • Accessing Vanilla Database
    • Connect to Vanilla Websocket
    • Create your own visualization
      • Migration from Old Streamer to New Streamer
      • Drawing Region of Interest
      • Additional Visualization Query
Powered by GitBook
On this page
  • How to Use ROI Lib
  • Function Explanation
  • Result

Was this helpful?

Export as PDF
  1. VisionAIre Dashboard
  2. Create your own visualization

Drawing Region of Interest

This page explains how to draw Region of Interest (ROI) for analytic Vehicle Counting, People Counting, License Plate Recognition, and Crowd Estimation.

PreviousMigration from Old Streamer to New StreamerNextAdditional Visualization Query

Last updated 1 year ago

Was this helpful?

How to Use ROI Lib

  1. Clone this library.

2. To be able to draw inside the canvas, make sure to copy the give canvas as an id to the component.

3. Make sure to copy all the #canvas styling, image for preview can be but inside of the canvas element as children component. for example:

<div id="canvas">
	<img src={source} />
</div>

4. Call initialCanvas function on windows onload, or when there are any ROI Type change

Function Explanation

initialCanvas ( callback, roi_type )

initialCanvas needs two parameters, namely for callback and roi_type respectively. callback will be called after region or line created, returning object with values:

{
	points:  array_of_coordinates,
	area:  name_of_area,
	color:  color_of_lines,
	lineNumber: index_of_roi (starts from 1)
}

onResetROI ( callback )

this function will remove all the lines. accepting callback params for user to be able to call their own function when resetting all lines and region

onDeleteLine ( id ), onDeleteRegion (id)

receive id as params. this id can be filled with lineNumber from the initialCanvas callback. onDeleteLine will be used to delete lines, while onDeleteRegion will be used to delete area/region.

onReverseLine ( id )

receive id as params. this id can be filled with lineNumber from the initialCanvas callback. only applicable to roi_type line. will reverse the line direction

Result

Library ROI Demo Usage
docker-stream-quickstart/client/public/roilib at main · nodefluxio/docker-stream-quickstartGitHub
Library to draw ROI
Logo