i am just getting started into python and flask (for the raspberry pi). I want a web application that would execute some python code to pan and tilt a camera and display a video stream.

My code uptil now for flask is:

from flask import Flask, render_template

import time

import serial

#ser = serial.Serial('/dev/ttyUSB0',9600)

app = Flask(__name__)

@app.route('/')

@app.route('/') #each button in my html redirects to a specified directory

def execute(cmd=None):

if cmd == "down":

print "Moving Down"

#ser.write("D")

if cmd == "up":

print "Moving Up"

#ser.write("U")

if cmd == "left":

print "Moving Left"

# ser.write("L")

if cmd == "right":

print "Moving Right"

#ser.write("R")

if cmd == "reset":

print "Reseting.."

#ser.write("X")

return render_template("main.html")

if __name__ == "__main__":

app.run(host='0.0.0.0', port=8080, debug=True)

The problem is my code relys on the each button redirecting to a new directry, while this does work well, it refreshes the page each time which means my embeded video reloads and buffers again. Is there a better way of detecting a button press and then executing python code using flask?

解决方案

I would split it out into two routes to make it easier to see what you have to do:

LEFT, RIGHT, UP, DOWN, RESET = "left", "right", "up", "down", "reset"

AVAILABLE_COMMANDS = {

'Left': LEFT,

'Right': RIGHT,

'Up': UP,

'Down': DOWN,

'Reset': RESET

}

@app.route('/')

def execute():

return render_template('main.html', commands=AVAILABLE_COMMANDS)

@app.route('/')

def command(cmd=None):

if cmd == RESET:

camera_command = "X"

response = "Resetting ..."

else:

camera_command = cmd[0].upper()

response = "Moving {}".format(cmd.capitalize())

# ser.write(camera_command)

return response, 200, {'Content-Type': 'text/plain'}

Then in your template you just need to use some JavaScript to send off the request:

{# in main.html #}

{% for label, command in commands.items() %}

{{ label }}

{% endfor %}

{# and then elsewhere #}

// Only run what comes next *after* the page has loaded

addEventListener("DOMContentLoaded", function() {

// Grab all of the elements with a class of command

// (which all of the buttons we just created have)

var commandButtons = document.querySelectorAll(".command");

for (var i=0, l=commandButtons.length; i

var button = commandButtons[i];

// For each button, listen for the "click" event

button.addEventListener("click", function(e) {

// When a click happens, stop the button

// from submitting our form (if we have one)

e.preventDefault();

var clickedButton = e.target;

var command = clickedButton.value;

// Now we need to send the data to our server

// without reloading the page - this is the domain of

// AJAX (Asynchronous JavaScript And XML)

// We will create a new request object

// and set up a handler for the response

var request = new XMLHttpRequest();

request.onload = function() {

// We could do more interesting things with the response

// or, we could ignore it entirely

alert(request.responseText);

};

// We point the request at the appropriate command

request.open("GET", "/" + command, true);

// and then we send it off

request.send();

});

}

}, true);