mirror of
https://gitlab.fdmci.hva.nl/technische-informatica-sm3/ti-projectten/rooziinuubii79.git
synced 2025-08-04 04:14:58 +00:00
Refactor button handling in index.html and app.py
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
from flask import Flask, request, render_template
|
from flask import Flask, request, render_template, jsonify
|
||||||
import paho.mqtt.client as mqtt
|
import paho.mqtt.client as mqtt
|
||||||
|
|
||||||
app = Flask(__name__)
|
app = Flask(__name__)
|
||||||
@@ -10,15 +10,18 @@ mqtt_client.username_pw_set("ishak", "kobuki")
|
|||||||
mqtt_client.connect("localhost", 1883, 60)
|
mqtt_client.connect("localhost", 1883, 60)
|
||||||
mqtt_client.loop_start()
|
mqtt_client.loop_start()
|
||||||
|
|
||||||
@app.route('/', methods=['GET', 'POST'])
|
@app.route('/')
|
||||||
def index():
|
def index():
|
||||||
message = ''
|
return render_template('index.html')
|
||||||
if request.method == 'POST':
|
|
||||||
|
@app.route('/move', methods=['POST'])
|
||||||
|
def move():
|
||||||
direction = request.form['direction']
|
direction = request.form['direction']
|
||||||
result = mqtt_client.publish("home/commands", direction)
|
result = mqtt_client.publish("home/commands", direction)
|
||||||
if result.rc == mqtt.MQTT_ERR_SUCCESS:
|
if result.rc == mqtt.MQTT_ERR_SUCCESS:
|
||||||
message = "Bericht succesvol gepubliceerd"
|
return jsonify({"message": "Bericht succesvol gepubliceerd"}), 200
|
||||||
return render_template('index.html', message=message)
|
else:
|
||||||
|
return jsonify({"message": "Fout bij het publiceren van bericht"}), 500
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
app.run(debug=True)
|
app.run(debug=True)
|
19
src/Python/flask/web/static/script.js
Normal file
19
src/Python/flask/web/static/script.js
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
document.querySelectorAll('button').forEach(button => {
|
||||||
|
button.addEventListener('click', function() {
|
||||||
|
const direction = this.value;
|
||||||
|
fetch('/move', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||||||
|
},
|
||||||
|
body: new URLSearchParams({ direction: direction }),
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
document.getElementById('response').innerText = data.message;
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
document.getElementById('response').innerText = 'Er is een fout opgetreden: ' + error;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
@@ -1,18 +1,30 @@
|
|||||||
{%extends 'base.html'%} {%block head%} {%endblock%} {%block content%}
|
{%extends 'base.html'%} {%block head%} {%endblock%} {%block content%}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Kobuki</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="image-section">
|
<div class="image-section">
|
||||||
<img src="kobuki.jpg" alt="Kobuki Robot" id="robot-image" />
|
<img src="kobuki.jpg" alt="Kobuki Robot" id="robot-image" />
|
||||||
</div>
|
</div>
|
||||||
<div class="button-section">
|
<div class="button-section">
|
||||||
<form action="/" method="post">
|
<form action="/move" method="post">
|
||||||
<button type = "submit" class="btn" name="direction" value="left">←</button>
|
<button class="btn" name="direction" value="left">←</button>
|
||||||
<button type = "submit" class="btn" name="direction" value="up">↑</button>
|
<button class="btn" name="direction" value="up">↑</button>
|
||||||
<button type = "submit" class="btn" name="direction" value="right">→</button>
|
<button class="btn" name="direction" value="right">→</button>
|
||||||
<button type = "submit" class="btn" name="direction" value="down">↓</button>
|
<button class="btn" name="direction" value="down">↓</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Sensor Data</h1>
|
<h1>Sensor Data</h1>
|
||||||
</div>
|
</div>
|
||||||
|
<script href="../static/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
{%endblock%}
|
{%endblock%}
|
||||||
|
Reference in New Issue
Block a user