hariketsheth / TCR_Task_1

TCR Team 4 : This repository concerns with the detection of a green ball using Python Module - OpenCV. And integrating it on a web interface using Flask.

Technocrats TCR Task 1

Using Python Modules,

Develop a script that takes live video feed from Webcam, detects Green Ball, displays the status (Position, Presence and Area covered by the Green Ball). Integrate the script to a Web Interface

Pre-requisites

1. OpenCV
2. Flask
3. Numpy

• Install the Modules, using the commands:

pip install opencv-python
pip install flask
pip install numpy

• If the repository is cloned locally, simply use the command:

pip install -r requirements.txt

Instructions for Cloning this Repository Locally

• Use the command: git clone https://github.com/hariketsheth/TCR_Task_1
• Run main.py
• Navigate to http://127.0.0.1:5000/ in the browser to check the script

Team - 4

Members			Mentors
Hariket Sheth	Nimish Kashyap	Nitesh Kumar	Ashiq Abdul Khader	Ishika Naik

Description

Subtask 1 - Green Ball Detection

             

Description

Developed First Module that takes video feeds from the camera and detects the green ball.

Python Modules Used:

• OpenCV

Installation & Usage

• For Installation: Use the following command.

pip install opencv-python

• Usage:

import cv2 as cv
# Or Simply, import the module as:
import cv2

Implementation

• Using cv2.VideoCapture() and read() getting a live video, and reading the frames. Converting them to HSV color-space

self.camera = cv.VideoCapture(0)
response, frame = self.camera.read()
frame_hsv = cv.cvtColor(frame, cv.COLOR_BGR2HSV)

• Then, threshold the HSV image for a range of green color

green_L_hsv = (39, 140, 50)
green_U_hsv = (80, 255, 255)

• Extract the Green object & Enhancing the Object mask by use of Erode() and Dilation()

green_extract = cv.inRange(frame_hsv,green_L_hsv,green_U_hsv)
green_extract = cv.erode(green_extract, None, iterations=2)
green_extract = cv.dilate(green_extract, None, iterations=2)

• For the circular outline / boundary of the Green Ball, using findContours()

boundary, hierarchy= cv.findContours(green_extract.copy(), cv.RETR_EXTERNAL,cv.CHAIN_APPROX_SIMPLE)
cv.circle(frame, (int(x), int(y)), int(radius),(255, 255, 255), 5)

• Using cv2.imshow() method to show the frames in the video until user presses 'd'.

cv.imshow("window1",frame)
cv.imshow("window2", green_extract)
if cv.waitKey(1) & 0xFF == ord('d'):
  break

---

Subtask 2 - Integrating to Web Interface using Flask

             

Description

Used the Flask Module of Python to integrate Green Ball Detection script to a web interface

Python Modules Used:

• OpenCV
• Flask
• Numpy

Installation & Usage

• For Installation: Use the following commands.

pip install opencv-python
pip install flask
pip install numpy

• Usage:

import cv2 as cv
import flask as fsk
import numpy as np
# Or Simply, import the modules as:
import cv2
import flask
import numpy

Implementation

• Importing the camera module created in Subtask-1 and creating a Flask instance by passing __name__ (name of the current Python Module).

from camera import Video
import flask as fsk


app = fsk.Flask(__name__)

• Creating App Routes for Web Interface.
• @app.route('/') denotes the Index/ Homepage.
• The gen() function continuously returns frames from the camera. It calls the main_exec() method, and then it yields frame with a content type of image/jpeg.

@app.route('/')
def index():
    return fsk.render_template('index.html')

def gen(camera):
    while True:
        frame = camera.main_exec()
        yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

• The /video_feed route returns instance of the Camera to gen(). The mimetype argument is set to the multipart/x-mixed-replace.
• mimetype='multipart/x-mixed-replace; boundary=frame - This Mimetype replaces the previous frame and setting the boundary = frame

@app.route('/video_feed')
def video_feed():
    return fsk.Response(gen(Video()),mimetype='multipart/x-mixed-replace; boundary=frame')

• Creating the App Routes for Getting the Font and Redirecting the WebPage to Github Repo.

@app.route('/font')
def font():
    filename = 'static/Azonix.otf'
    return fsk.send_file(filename, mimetype='font/otf')

@app.route('/github')
def github():
    return fsk.redirect("https://github.com/hariketsheth/TCR_Task_1")

• Running the Flask App using run()

app.run(debug=True)

Testing

---

Subtask 3 - Displaying the status of the Green ball (Presence, Area Covered & Position)

             

Description

Integrating the Module created in Subtask-1 and displaying the status of the Green ball on the Web Interface created in Subtask-2

Python Modules Used:

• OpenCV
• Flask
• Numpy

Installation & Usage

• For Installation: Use the following commands.

pip install opencv-python
pip install flask
pip install numpy

• Usage:

import cv2 as cv
import flask as fsk
import numpy as np
# Or Simply, import the modules as:
import cv2
import flask
import numpy

Implementation

• If the 'area' recieved from the camera.py script is not NULL or 0.0 then we add "%" symbol to the value. Setting the present variable as FALSE initially.

@app.route('/status')
def status():
    present = "FALSE"
    global area
    if area != '0.0' and area!="NULL":
        if " %" not in area:
            area+=" %"
    else:
        area = "NULL"

• If the position is not NULL, then it implies Green Ball is Present. Else the Green Ball is not present.

    if (position!="NULL"):
        present = "TRUE"
    else:
        present = "FALSE"
    print(present, position, area)
    return fsk.jsonify(present = present, position = position, area = area)

• The parameters present, area, position recieved from main.py are shown in the Table using JQuery

<tr>
	<td>Presence</td>
	<td id="present_f" style="color: #d9534f; font-weight: bolder;"></td>
	<td id="present_t" style="color: #5cb85c; font-weight: bolder;"></td>
</tr>
<tr>
	<td>Area</td>
	<td id="area_f" style="color: #d9534f; font-weight: bolder;"></td>
	<td id="area_t" style="color: #5cb85c; font-weight: bolder;"></td>
</tr>

<tr>
	<td>Nearest Corner</td>
	<td id="position_f" style="color: #d9534f; font-weight: bolder;"></td>
	<td id="position_t" style="color: #5cb85c; font-weight: bolder;"></td>
</tr>

• If the parameter "present" value is "FALSE", then the visibility of elements with ID "present_f, position_f, area_f" is changed to show()
  • And the visibility of elements with ID "present_t, position_t, area_t" is set to hide()
• If the parameter "present" value is "TRUE", then the visibility of elements with ID "present_t, position_t, area_t" is changed to show()
  • And the visibility of elements with ID "present_f, position_f, area_f" is set to hide()

<script>
  $(document).ready(function() {
     $.getJSON('/status' ,
        function(parameters) {
	if(parameters.present =="FALSE"){
           $("#present_f").text(parameters.present).show(); 
           $("#position_f").text(parameters.position).show();
           $("#area_f").text(parameters.area).show();
           $("#present_t").text(parameters.present).hide();
           $("#position_t").text(parameters.position).hide();
           $("#area_t").text(parameters.area).hide();
	}
	else{
	   $("#present_t").text(parameters.present).show();
	   $("#position_t").text(parameters.position).show();
	   $("#area_t").text(parameters.area).show();
	   $("#present_f").text(parameters.present).hide();
	   $("#position_f").text(parameters.position).hide();
	   $("#area_f").text(parameters.area).hide();
	}
     });
       setTimeout(arguments.callee, 500);
  });
</script>

Testing