Smikkelbakje/J2S1-Kobuki
1
0
Fork 0
mirror of https://gitlab.fdmci.hva.nl/technische-informatica-sm3/ti-projectten/rooziinuubii79.git synced 2025-08-04 04:14: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 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
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;
});
});
});

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

@@ -1,18 +1,30 @@
{%extends 'base.html'%} {%block head%} {%endblock%} {%block content%} {%extends 'base.html'%} {%block head%} {%endblock%} {%block content%}
<div class="container"> <!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"> <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%}