Smikkelbakje/J2S1-Kobuki
1
0
Fork 0
mirror of https://gitlab.fdmci.hva.nl/technische-informatica-sm3/ti-projectten/rooziinuubii79.git synced 2025-08-03 20:04:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor button handling in index.html and app.py

Browse Source
This commit is contained in:
ishak jmilou.ishak
2024-10-24 12:14:52 +02:00
parent 4f3bb0b009
commit 5fe14a2f8f
3 changed files with 60 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/Python/flask/web/app.py
View File

@@ -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
app = Flask(__name__)
@@ -10,15 +10,18 @@ mqtt_client.username_pw_set("ishak", "kobuki")
mqtt_client.connect("localhost", 1883, 60)
mqtt_client.loop_start()
@app.route('/', methods=['GET', 'POST'])
@app.route('/')
def index():
message = ''
if request.method == 'POST':
return render_template('index.html')
@app.route('/move', methods=['POST'])
def move():
direction = request.form['direction']
result = mqtt_client.publish("home/commands", direction)
if result.rc == mqtt.MQTT_ERR_SUCCESS:
message = "Bericht succesvol gepubliceerd"
return render_template('index.html', message=message)
return jsonify({"message": "Bericht succesvol gepubliceerd"}), 200
else:
return jsonify({"message": "Fout bij het publiceren van bericht"}), 500
if __name__ == '__main__':
app.run(debug=True)

19
src/Python/flask/web/static/script.js Normal file
View 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;
});
});
});

22
src/Python/flask/web/templates/index.html
View File

@@ -1,18 +1,30 @@
{%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="image-section">
<img src="kobuki.jpg" alt="Kobuki Robot" id="robot-image" />
</div>
<div class="button-section">
<form action="/" method="post">
<button type = "submit" class="btn" name="direction" value="left">←</button>
<button type = "submit" class="btn" name="direction" value="up">↑</button>
<button type = "submit" class="btn" name="direction" value="right">→</button>
<button type = "submit" class="btn" name="direction" value="down">↓</button>
<form action="/move" method="post">
<button class="btn" name="direction" value="left">←</button>
<button class="btn" name="direction" value="up">↑</button>
<button class="btn" name="direction" value="right">→</button>
<button class="btn" name="direction" value="down">↓</button>
</form>
</div>
</div>
<div class="container">
<h1>Sensor Data</h1>
</div>
<script href="../static/script.js"></script>
</body>
</html>
{%endblock%}