Management GUI

Contents include:

Set up the GUI system

Run the command below to pull the docker image:

sudo docker pull asilla/sdk_gui:latest

Run the GUI system

Run the command below to start the management GUI system:

sudo docker run --name asilla-sdk-gui -p 8080:5000 -it -d asilla/sdk_gui:latest

After that, the management GUI system is running on the device's port 8080. To access, go to http://{IP_address_of_device}:8080 on your browser.

Guideline for each page

1. Register your device

To register each device, first you need to choose settings: ON/OFF and Device Type
Next, filling in 4 main information (if you choose ON function):

  • IP Address
  • Device Name
  • API Port
  • Webhook URL
  • Optional:
  • The default for device settings will be 2 devices.
    If you have more than 2, please click on the Add more devices button.

    Plus, you will be able to remove the device if you wish to with the Remove button.

    Lastly, don't forget to click the Update button to save your device list.

    2. Editing camera information for each device

    With Configurationpage, you can fully control and edit your camera information directly.

    You can add to edit as many cameras as you have, please click on the green + button.

    When adding the camera successfully, a message will be displayed to let you know that your action has been updated.

  • Optional
  • You will be able to remove it with the Remove button.

    Setting parameters values inside the system right at this Configuration page.
    (Refer to this page here for how to get Global/Common/Camera configurations)

    • Click Global Configuration: for the SDK.

    • Click Common Configuration: for whole camera that the SDK is handling.

    • Click Edit to set up for specific Camera configuration: with the parameters that are both in Common and Specific camera scope, the parameters in specific Camera scope will be used.

    Besides, on specific Camera configuration, you can click on Advanced configuration to set up more parameters.

    Last step, don’t forget to click the Updatebutton to save your changes.

    Making changes on Line-Cross, Intrusion, and Abnormal: click on Settings to access each page.
    (The detail setting guideline for each page is here)

    3. Setting Line-cross and Intrusion areas


    How to set line-cross and intrusion area for Asilla SDK Line-Cross?
    Step 1: Open web browser
    Step 2: Access to the web GUI
    • If you open the browser on the same computer that runs the SDK:
      http://localhost:[Published port you chose in the docker run command]
    • If you are accessing from a remote computer:
      http://[IP address of the device]:[Published port you chose in the docker run command]

    For us, we are running it at IP, port 8001, so it would be
    you would see something like this image below:

    On this page, we can set the line-cross as well as the intrusion area with the following steps:


    a. Select the camera you want to set line for

    Click the pull-down next to Choose device and Choose camera to select the device and camera you want.

    b. Take a picture of the camera

    To show the camera footage on the screen, you need to take a picture of the frame in the camera with Capture camera button on the bottom.

    After a fews seconds of waiting, the camera footage should appear on the screen like the image below.

    3. Draw the line

    Click and hold anywhere in the image to start drawing. Bring your mouse to the end of the line.

    After you release at the end of the line, the IN and OUT of the line will automatically be added.

    If you want to flip the sides, simply click IN ⇄ OUT button on the screen.

    When you want to save the line you drew, click Apply button on the bottom.

    Intrusion area

    a. Go to the Intrusion page

    If you are on the screen for line-cross settings, click Intrusion button on the side bar

    b. Start drawing

    Click anywhere on the captured image of your camera, and the cursor should be following wherever your mouse goes.

    To make edges in your plygon, simply click on wherever you wish the edge to be while your cursor moves within the frame. Your polygon should at least have 3 edges.

    When you finish drawing, right-click or press enter to finish the drawing. After you are done, click Apply button to save.

    Optional: How to remove line or intrusion area?

    If you wish to remove a line:

    Simply click the line you wish to remove, and then click the Remove button.

    If you wish to remove an area:

    Simply click the area you wish to remove, and then click the Remove button.

    After removing, press Apply button to save changes.