web_template_app

 

Table of contents


 

Introduction


This explanation assumes that the i-PRO camera application development environment has been completed.
If you are not ready to build the development environment, please refer to here to complete it.

Also, in this tutorial, the SDK installation directory is described as ${SDK_DIR}.

 

Operation overview


web_template_app is a sample app with display and setting functions often required for WEB UI apps.

Also, an AI model the same as other sample app yuv_ssd_app is used.

20240516-144812.png

 

External libraries required for operation


To build with C/C++, need below:

libjpeg

To build with Python, need below:

Numpy

OpenCV

The use of external libraries will be explained later.

 

Directory path of the sample app


The C/C++ source code is stored below.

${SDK_DIR}/src/adamapp/web_template_app

The Python source code is stored below.

${SDK_DIR}/src/adamapp-py/web_template_app

 

How to build the sample app (C/C++)


This article describes how to build it as AdamApp.

If you want to build it as Container AdamApp, see below.

Development tutorial (Container AdamApp) - Technology Partner FAQ (En) - Confluence

See here for building with C/C++.

However, the header file to be used must be stored below.
Please refer to ADD_INCLUDE_PATH in Makefile for details.

${SDK_DIR}/src/adamapp/web_template_app\external\include\libjpeg-turbo-1.5.3

You can confirm that it works by storing the file below.

jconfig.h
jerror.h
jmorecfg.h
jpeglib.h

How to build the sample app (Python)


This article describes how to build it as AdamApp.

If you want to build it as Container AdamApp, see below.

Development tutorial (Container AdamApp) - Technology Partner FAQ (En) - Confluence

See here for building with Python.

Display comments for developers


There is compile option to display useful comments for developers on WEB UI such as related SDK and configuration information.


【to enable】
make clean
make CFLAG=BASIC_MSG

【to disable】
make clean
make

 

How to use the sample app


This shows how to use the sample app. Screenshots here include comments for developers.

・Setting the detection area

Click the "Detection Area" tab and click anywhere on the live image. Below, the detection areas are set for 1 (white): bicycle and 2 (blue): person.

20240516-144811.png

 

・Confirm that it is detected

Click the "Live" tab and check "show alarm history" on the bottom left. When a person appears in the live image, you can confirm that the alarm name: Person (Detection Area 2) is detected in the list on the right and remains in the history.

 

・Check basic settings

You can change the basic settings by clicking the "Basic" tab.

 

・Check alarm settings

Click the "Alarm" tab to change alarm settings.

 

・Check the log

You can check each log by clicking the "Log" tab.

 

・Manage setting data

You can back up and restore settings by pressing the "Config" tab.

 

・Manage licenses

The application license management function must be developed by the partner.

 

Appendix


How to change preferences

This application has some preferences which a user is able to change.
Changes can be made in the application, so please check the actual operation.