Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

[Python | Flask] Wie ein Button-Click-Event auswerten?

Werbeanzeige

cojo2015

Alter Hase

  • »cojo2015« ist der Autor dieses Themas

Beiträge: 516

Wohnort: bei mir zu Hause

Beruf: Schüler

  • Private Nachricht senden

1

02.08.2016, 08:08

[Python | Flask] Wie ein Button-Click-Event auswerten?

Hallo,

gerade haben mein Freund und ich ein Projekt abgeschlossen. Nun haben wir ein nächstes in den Angriff genommen: Wir möchten einen Roboterarm (mit einer Webcam) über das Internet steuern. Das Steuern und das Übertragen des Kamerasignals soll eine selbst erstellte Website übernehmen. Für die Website wollen Python/Flask und HTML/CSS verwenden. Leider scheitern wir daran, das Event auszuwerten, wenn ein Button geklickt wurde.
Die Steuerung sieht so aus: (Anhang)
Zum Code

main.py:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

#website for the roboter arm

from flask import Flask, render_template, request

app = Flask(__name__)

#############################################################
#                 root directory (homepage)                 #
@app.route("/", methods=["GET","POST"])
def index():
    if request.method == 'POST':
        if request.form.get('S') == 'S':
            print("S")
        elif request.form['submit'] == 'A':
            print("A")
        elif request.form['submit'] == 'a':
            print("a")
        elif request.form['submit'] == '0':
            print("0")
        elif request.form['submit'] == 'B':
            print("B")
        elif request.form['submit'] == 'b':
            print("b")
        elif request.form['submit'] == '1':
            print("1")        
        elif request.form['submit'] == 'C':
            print("C")
        elif request.form['submit'] == 'c':
            print("c")
        elif request.form['submit'] == '2':
            print("2")
        elif request.form['submit'] == 'D':
            print("D")
        elif request.form['submit'] == 'd':
            print("d")
        elif request.form['submit'] == '3':
            print("3")
        elif request.form['submit'] == 'E':
            print("E")
        elif request.form['submit'] == 'e':
            print("e")
        elif request.form['submit'] == '4':
            print("4")
        elif request.form['submit'] == 'F':
            print("F")
        elif request.form['submit'] == 'f':
            print("f")
    elif request.method == 'GET':
        return render_template('index.html')

#############################################################
#############################################################
if __name__ == "__main__":
    app.run(host='0.0.0.0', port=8080, debug=True)

Zeile 12 werten wir nur zum Test anders aus, als den Rest :)

index.html:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

<!DOCTYPE html>

<title>ROBOTERARM</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}" />  <!-- create the url for the stylesheet using flask --> 

<body>

    <div id="control">
        <table border="5">
            <tr>
                <td>
                    Stop all
                </td>
                <td></td>
                <td></td>
                <td>
                    <button type="submit" value={{ request.form.S }}><img src="/static/stop.png" /></button>
                </td>
            </tr>
            <tr>
                <td>
                    Base
                </td>
                <td>
                    <button type="button" name="submit" value="A"><img src="/static/arrow.png" /></button>
                </td>
                <td>
                    <button type="button" name="submit" value="a"><img src="/static/arrow.png" id="btn_clockwise" /></button>
                </td>
                <td>
                    <button type="button" name="submit" value="0"><img src="/static/stop.png" /></button>
                </td>
            </tr>
            <tr>
                <td>
                    Arm
                </td>
                <td>
                    <button type="button" name="submit" value="B"><img src="/static/arrow.png" /></button>
                </td>
                <td>
                    <button type="button" name="submit" value="b"><img src="/static/arrow.png" id="btn_clockwise" /></button>
                </td>
                <td>
                    <button type="button" name="submit" value="1"><img src="/static/stop.png" /></button>
                </td>
            </tr>
            <tr>
                <td>
                    Ellbow
                </td>
                <td>
                    <button type="button" name="submit" value="C"><img src="/static/arrow.png" /></button>
                </td>
                <td>
                    <button type="button" name="submit" value="c"><img src="/static/arrow.png" id="btn_clockwise" /></button>
                </td>
                <td>
                    <button type="button" name="submit" value="2"><img src="/static/stop.png" /></button>
                </td>
            </tr>
            <tr>
                <td>
                    Wrist
                </td>
                <td>
                    <button type="button" name="submit" value="D"><img src="/static/arrow.png" /></button>
                </td>
                <td>
                    <button type="button" name="submit" value="d"><img src="/static/arrow.png" id="btn_clockwise" /></button>
                </td>
                <td>
                    <button type="button" name="submit" value="3"><img src="/static/stop.png" /></button>
                </td>
            <tr>
                <td>
                    Jaw
                </td>
                <td>
                    <button type="button" name="submit" value="E"><img src="/static/arrow.png" /></button>
                </td>
                <td>
                    <button type="button" name="submit" value="e"><img src="/static/arrow.png" id="btn_clockwise" /></button>
                </td>
                <td>
                    <button type="button" name="submit" value="4"><img src="/static/stop.png" /></button>
                </td>
            </tr>
            <tr>
                <td>
                    LED
                </td>
                <td>
                    <button type="button" name="submit" value="F"><img src="/static/led_on.png" /></button>
                </td>
                <td>
                    <button type="button" name="submit" value="f"><img src="/static/led_off.png" /></button>
                </td>
            </tr>
        </table>
    </div>
    <!-- ###################################################################################### -->
    <div id="video">
        <video src="/static/video.mp4" controls width="913" height="493"></video>
    </div>
    <!-- ###################################################################################### -->
</body>


style.css:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

td {
    font-family: Tahoma;
    font-size: 40px;
}

#btn_clockwise {
    transform: rotate(180deg);
}

#video {
    margin-left: 13px;
    float: left;
    border-radius: 15px;
    background-color: black;
}

#control {
    float: left;
    background-color: white;
}

body {
    background-color: gray;
}


Wo haben wir den Fehler gemacht?
Vielen Dank im Voraus :D
»cojo2015« hat folgendes Bild angehängt:
  • Unbenannt.PNG

Tobiking

1x Rätselkönig

Beiträge: 1 231

  • Private Nachricht senden

2

02.08.2016, 09:51

Wenn die Buttons nicht innerhalb eines Formulars (<form>) sind, und keine explizite onclick handler haben, haben sie keine Funktion. Ich kenne mich mit Flask nicht aus, aber der Code deutet darauf hin das die Buttons in einem Formular mit method="POST" stecken sollen.

Schöner wäre es, wenn man die Requests über XMLHttpRequest bzw. entsprechende Frameworks im Hintergrund machen würde, damit die Seite nicht jedes mal neu geladen wird.

cojo2015

Alter Hase

  • »cojo2015« ist der Autor dieses Themas

Beiträge: 516

Wohnort: bei mir zu Hause

Beruf: Schüler

  • Private Nachricht senden

3

02.08.2016, 11:20

Zitat von »Tobiking«

Wenn die Buttons nicht innerhalb eines Formulars (<form>) sind, und keine explizite onclick handler haben, haben sie keine Funktion. Ich kenne mich mit Flask nicht aus, aber der Code deutet darauf hin das die Buttons in einem Formular mit method="POST" stecken sollen.

Schöner wäre es, wenn man die Requests über XMLHttpRequest bzw. entsprechende Frameworks im Hintergrund machen würde, damit die Seite nicht jedes mal neu geladen wird.

Naja im <form> Tag werden zwar die Daten übertragen, aber die Seite wird immer wieder neu geladen. Danke trotzdem :D

David Scherfgen

Administrator

Beiträge: 10 382

Wohnort: Hildesheim

Beruf: Wissenschaftlicher Mitarbeiter

  • Private Nachricht senden

4

02.08.2016, 14:00

Zitat von »cojo2015«

Naja im <form> Tag werden zwar die Daten übertragen, aber die Seite wird immer wieder neu geladen. Danke trotzdem :D

Überrascht dich das? So funktionieren Formulare normalerweise.
Übrigens solltest du dir deinen Code nochmal anschauen, dann wirst du feststellen, dass da total viele unnötige Wiederholungen drinstehen.
David Scherfgens Website | Konzentrationstest Polizei

cojo2015

Alter Hase

  • »cojo2015« ist der Autor dieses Themas

Beiträge: 516

Wohnort: bei mir zu Hause

Beruf: Schüler

  • Private Nachricht senden

5

06.08.2016, 19:41

Danke für die Hilfe, es funktioniert der Teil soweit. Wir haben es mit der XMLHTTPRequest-Handler gemacht :D

Werbeanzeige

Ähnliche Themen