Arch. methodology

Light-weight and reusable, two phrases that I would use to describe the methodology of this application and these were the driving force while implementing this project. I wanted a visually pleasing front-end that ties API nodes running on my network and enables commands to be sent while still maintaining some form of authentication.

Front-end actions such as touch, click, select drive javascript events that send corresponding API requests with a token. For example, selecting "command history" from a bootstrap-select element will cause javascript to determine what location the API request should be sent to, and then craft the request using correct end-point to retrieve information. After the request is completed, update the table and other elements.

All requests are done on the front-end by javascript.

Using web tokens

In the RestFramework project, I cover how the tokens are generated and then saved in their respective locations. This allows me to have a good view of all tokens that are available and I can quickly see how often they are used. If a token is corrupted or no longer should be used, I can easily flip a flag and turn off that token's ability to interact with the APIs.

Web tokens are saved in the environment variable for Django Home Application and are passed to the front-end when the user authenticated with the Django authentication model (to be elaborated below). Then, then the tokens are saved in local storage or cookies and used to pass in the API request.

In the example below or the right, the token is passed in the API request Header depending on which API node the request is heading to. The action that fired off this request was click on a "start_button"

Social Login

Django All-auth make using social login very simple and customizable. I am allowing login to be made through the standard Django back-end for admin purposes and social login through Google for user login.

Using all-ath "pre_social_login", I am able to restrict the login to only few gmail addresses else, beautiful 403 page is displayed informing that the user does not her permission to log into the application with their non-approved gmail account.

Social login is a beautiful solution for login, I could not be any happier with Django's All-Auth.

Appseed's corona dark gives a very visually pleasing dark design from the box. For the home page, I really wanted to make it very useful and usable, so the home page shows the status of the API nodes and RTSP cameras that are running on the network. If the RTSP camera has a blue background color, it means that it is on the network. Similarly, if the API node is executing the surveillance system then it will be red, else green. Lastly, if the API node or RTSP camera are not on the network, then they will have no color by default.

The cluster of three buttons allows me to quickly turn on/off surveillance system and this button fires one of the javascript events that I wrote about in the previous section.

The table on the bottom of the screen with the dropdown allow me to quickly see some of the parameters concerning the surveillance system like when detections occurred and command history, for example.