Skip to content

Web Based GUI

Ashish Bangwal edited this page Aug 24, 2023 · 1 revision

Web Based GUI

image

When it comes to backend for a website, flask and django truns out to be the best choise because of their flexibility, features, easy implementation and immense amount of support available. For this project we went with flask as its relatively simpler and lighter than django.

For frontend we used HTML and CSS, and used JavaScript to make it more user-friendly and add some important functionality along with to act like a bridge and process backend generated data.

Home page

The home page is basically where everything will be happening, latest three readings for each meter will be displayed along with bounding box plotted image. Hence user can monitor multiple meters through live video source.

image

Settings

At settings page user can modify meter parameters like range of meter, number of interval and the refresh time. Refresh time is the time after which camera will capture new frame process it and display output.

image

Clone this wiki locally