Skip to content

Latest commit

 

History

History
329 lines (278 loc) · 9.98 KB

README.md

File metadata and controls

329 lines (278 loc) · 9.98 KB

Technocrats TCR Task 1

Technocrats

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

Language Used       Module Integration        Build Status

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

Language Used       Module Integration      Build Status

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

Team4-Testing


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

Language Used       Module Integration      Build Status

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

Team4-Testing2