2016-03-24 4 views
-1

Also bevor Sie sagen, dass dies ein Duplikat ist, bitte tragen Sie mich für eine Minute und glauben Sie mir, wenn ich das sage, habe ich alle Antworten in anderen ähnlichen Fragen versucht . Ich möchte runForward und runBackward von der HTML-Seite mit Javascript aufrufen.Wie geht es weiter mit dem Aufruf einer Funktion von Jinja2 in Flask?

Hier ist mein Code:

#motordriver.py 

import time 
import RPi.GPIO as gp 
import os 

class MotorDriver: 
    en1 = 24 
    c1a = 26 
    c1b = 22 
    en2 = 23 
    c2a = 21 
    c2b = 19 

    def __init__(self): 
     gp.setwarnings(False) 
     gp.setmode(gp.BOARD) 
     gp.setup(self.en1, gp.OUT) 
     gp.setup(self.c1a, gp.OUT) 
     gp.setup(self.c1b, gp.OUT) 
     gp.setup(self.en2, gp.OUT) 
     gp.setup(self.c2a, gp.OUT) 
     gp.setup(self.c2b, gp.OUT) 
     gp.output(self.en1, True) 
     gp.output(self.en2, True) 

    def runForward(self): 
     gp.output(self.c1a, True) 
     gp.output(self.c2a, True) 
     time.sleep(1) 
     gp.output(self.c1a, False) 
     gp.output(self.c2a, False) 
     return "sooo" 

    def runBackward(self): 
     gp.output(self.c1b, True) 
     gp.output(self.c2b, True) 
     time.sleep(1) 
     gp.output(self.c1b, False) 
     gp.output(self.c2b, False) 
     return "booo" 

if __name__ == '__main__': 
    #app.run(host = '0.0.0.0') 
    drive = raw_input('Enter forward or backward(a/b):') 
    obj = MotorDriver() 
    if drive == 'a': 
     obj.runForward() 
    elif drive == 'b': 
     obj.runBackward() 
    else: 
     print("Wrong input") 
    gp.output(obj.en1, False) 
    gp.output(obj.en2, False) 

ich diese Datei als ein Modul in meine __init__.py Datei bin importieren und hier ist der Inhalt dieser Datei.

from flask import Flask 
from flask import abort, redirect, url_for, request 
from flask import render_template 
from jinja2 import Template 
import motordriver as md 

app = Flask(__name__) 
app.debug = True 
#'import yourmodule; instance = yourmodule.YourClass(); instance.method()' 
inst = md.MotorDriver() 

def clirunForward(): 
    inst.runForward() 
def clirunBackward(): 
    inst.runBackward() 

app.jinja_env.globals.update(clirunForward=clirunForward) 
app.jinja_env.globals.update(clirunBackward=clirunBackward) 

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

if __name__ == '__main__': 
    app.run(host= '0.0.0.0') 

Nun endlich meine Vorlage index.html

<!doctype html> 
<html> 
<heead> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $(".back").mouseup(function(){ 
      $("div").after("<p style='color:green;'>{{ clirunBackward() }}</p>"); 
     }); 
     $(".up").mousedown(function(){ 
      $("div").after("<p style='color:purple;'>{{ clirunForward() }}</p>"); 
     }); 
    }); 
</script 
    <title> 
    Hello from PiBall 
    </title> 
</head> 
<body> 
    <h1>PiBall!</h1> 
    <button type='button' class="up">&#8593;</button><br /> 
    <button type='button'>&#8592;</button><button type='button'>&#8594;</button><br /> 
    <button type='button' class="back">&#8595;</button><br /> 
    <div>Test it here!</div> 
</body></html> 

So können ihr mir bitte sagen, warum es nicht funktioniert. Basierend auf den anderen Antworten sollte dies richtig funktionieren?

BTW Ich versuchte

+1

eine POST-Route in Flask Stellen und AJAX verwenden, wenn Sie Ihre Methoden von Javascript anrufen möchten. –

+0

Das, was Sie haben, wird 'clirunBackward' und' clirunForward' aufrufen, während 'index.html' gerendert wird. JavaScript kann eine Python-Funktion nicht direkt aufrufen. – dirn

Antwort

0

Verwendung von Post mit Ajax arbeitete. Hier ist meine index.html:

$(document).ready(function(){ 
    $(".up").mousedown(function(){ 
     $("div").after("<p style='color:green;'>Forward it is</p>"); 
     $.ajax({ 
     type: "POST", 
      data: {motion: "forward"}, 
      dataType: 'text' 
     }); 
    }).mouseup(function(){ 
     $("div").after("<p style='color:green;'>Stopped!</p>"); 
     $.ajax({ 
     type: "POST", 
     data: {motion: "stop"}, 
     dataType: 'text' 
     }); 
    }); 
    $(".back").mousedown(function(){ 
     $("div").after("<p style='color:purple;'>Forward it is</p>"); 
     $.ajax({ 
     type: "POST", 
     data: {motion: "backward"}, 
     dataType: 'text' 
     }); 
    }).mouseup(function(){ 
     $("div").after("<p style='color:green;'>Stopped!</p>"); 
     $.ajax({ 
     type: "POST", 
     data: {motion: "stop"}, 
     dataType: 'text' 
     }); 
    }); 
    }); 

Und hier ist mein __init__.py Teil, wo ich die Post handhaben:

@app.route('/', methods = ['POST']) 
def motorFunctions(): 
    if request.form['motion'] == "forward": 
     inst.runForward() 
    elif request.form['motion'] == "backward": 
     inst.runBackward() 
Verwandte Themen