I am trying to create buttons on my webpage that apply a filter to a camera feed using a Python backend.
My two javascript buttons, Filter on / Filter off have an execution problem. When a button is pressed for the first time the system works. But when the next button is pressed it does not 'unpress' the first button and therefore the requests to flask are mixed together.
I've included a print statement in the code to demonstrate the problem. When the filter button is pressed the first time, the loop is consistent and displays the pressed parameter 1, 1, 1, 1, 1, 1, 1. Once I press the second button the results become inconsistent 1, 0, 0, 0, 1, 0, 1, 1, 1
The same behaviour is true regardless of which button I press first.
I need the results to be 1, 1, 1, 1, 1.... etc or 0, 0, 0, 0, 0 depending on which button is pressed.
Assistance will be greatly appreciated, Thanks
#### Javascript ###
$(function(){
$(document).ready(function(){
$("#filterOn").click(function(){
filterOn();
});
$("#filterOff").click(function(){
filterOff();
});
});
function filterOn(){
$.get('/video_feed/1');
}
function filterOff(){
$.get('/video_feed/0');
}
######### Backend Python using Flask ##########
def Capture_data(filter):
while True:
success, image = video.read()
print(filter) ###### Troubleshooting line here #########
if filter == 1:
image = filtered_spectrum(image)
encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), 90]
ret, jpeg2 = cv2.imencode('.jpg', image, encode_param)
frame = jpeg2.tobytes()
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')
@app.route('video_feed')
@app.route('video_feed/<int:toggle>')
def video_feed(toggle):
if toggle == 0:
return Response(Capture_data(0),
mimetype='multipart/x-mixed-replace; boundary=frame')
if toggle == 1:
return Response(Capture_data(1),
mimetype='multipart/x-mixed-replace; boundary=frame')
If they are radios, they need the same name
Also you wrap in too many load directives
function filterOn(){
$.get('/video_feed/1'); // normally one needs to do something with that
}
function filterOff(){
$.get('/video_feed/0');
}
$(function(){
$("#filterOn").on("click",filterOn)
$("#filterOff").on("click",filterOff)
})
<label><input type="radio" name="filter" id="filterOn">On</label>
<label><input type="radio" name="filter" id="filterOff">Off</label>
When you press the first button, the video starts to be fed from Capture_data(0). When you press the second button, the video starts to be fed from Capture_data(1). Therefore, it is fed from two sources at the same time.
When you press the second button, the first supply source should be stopped. For this, a signal must go to the first supply source. But since the supply sources work independently of each other, once called, you cannot send a signal again.
I think the simplest solution is to refresh the page with the feed source option instead of js when the button is pressed.
But if you want to solve it without refreshing the page, You can try to communicate js with socket with Flask.
Except socket, I don't know which ones will work, but I can think of 3 different ways: