Clash Royale CLAN TAG#URR8PPP

How to merge two HTML buttons for a Flask website?

I am building a website in python and I want to be able to start and stop the "motiondetect.py" through a single button. (Merge the two buttons)
Right now I have two separate "Start motiondetect" and "Stop motiondetect" buttons. I would like to have the merged* button start the motion detection the first time you click and the second click should stop it.

motiondetect.py

Here are my code snippets:

Python Start:

@app.route("/start", methods=["GET", "POST"])
def start_motion():
global proc
#global FNULL
#global APP_ROOT
print(" > Start")
proc = subprocess.Popen(["python", "motiondetect.py"])#, stdout=FNULL,
stderr=subprocess.STDOUT)
print(" > Process id ".format(proc.pid))
return "Start Detection"


Html Start:

$(document).ready(function()
$("#start_button").click(function(e)
e.preventDefault();
$.ajax(type: "POST",
url: "/start",
data: ,
success:function(result)
$("#start_button").html(result);
);
);

);


Python Stop:

@app.route("/stop", methods=["GET", "POST"])
def stop_motion():
global proc
print(" > Stop")
proc.kill()
#os.system("echo > close")
#print(" > Process killed")
#time.sleep(2)
#os.system("rm close")
return "Stop Detection"


Html Stop:

$(document).ready(function(){
$("#stop_button").click(function(e)
e.preventDefault();
$.ajax(type: "POST",
url: "/stop",
data: ,
success:function(result)
$("#stop_button").html(result);
);
);


Thanks for your time and sory for my ignorance.

first

second

start

start

stop

1 Answer
1

Ok, For your ease I've produced an example to brief you the ideas. So here's what you can do on your Flask part.

from Flask import request
@app.route("/start", methods=["GET", "POST"])
def start_motion(request):
global proc
#global FNULL
#global APP_ROOT
data = json.loads(request.data.decode("utf-8"))
#data here is 'exam': 'a text' a dict in this case
state = data["state"]
if (state and state=="start"):
print(" > Start")
proc = subprocess.Popen(["python", "motiondetect.py"])#, stdout=FNULL,
stderr=subprocess.STDOUT
print(" > Process id ".format(proc.pid))
return "Start Detection"

else:
print("the state is blank or is not requesting to start")

@app.route("/stop", methods=["GET", "POST"])
def stop_motion(request):
global proc
print(" > Stop")
data = json.loads(request.data.decode("utf-8"))
#data here is 'exam': 'a text' a dict in this case
state = data["state"]
if (state and state=="start"):
proc.kill()
#os.system("echo > close")
#print(" > Process killed")
#time.sleep(2)
#os.system("rm close")
else:
print("state is either blank or not stop")
return "Stop Detection"


I simply added the code to receive the state data from the Ajax call and proceed in the backend.

state

Coming to your Html and Javascript side, this is what you can do:

$(document).ready(function()
$("#motion_button").click(function(e)
e.preventDefault();
state = $(this).attr('value');
if(state=="start")

$("#motion_button").attr("value")= "stop";
$("#motion_button").text("Stop")
callurl="/start"

elseif(state=="stop")

$("#motion_button").attr("value")= "start";
$("#motion_button").text("Start")
callurl="/stop"



$.ajax(type: "POST",
url: "/start",
data: "state":state,
success:function(result)
$("#start_button").html(result);
);
);

);


Since you're using POST method to send the data, you may have to consider sending the csrf token as well. I hope you understand the frontend codes as they are pretty much straight forward. Also for reference, please check my answer Can't send data back to Django from JS AJAX which contains a full example.

POST

csrf

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.